[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6949945305248191a68d87cf848f41c6","versionInt","title","Vt-hig Cheat Sheet (html/react)","type","code/react","content","import React from \"react\"\n\n// VT-HIG Cheat Sheet — v0.3\n// Goal: a compact, highly organized reference for CLI/TUI UX contracts.\n// This is not about rich text editing; focus is navigation + viewing + selection.\n\nexport default function VTHIGCheatSheet() {\n return (\n

\n {/* Sticky header keeps the “what is this?” context while scanning sections */}\n

\n\n

\n \n

\n\n

\n \n \n \n \n\n \n \n \n \n

\n\n

\n \n \n\n \n \n

\n\n

\n \n \n \n \n\n \n \n \n \n

\n\n

\n \n \n\n \n \n\n \n \n \n \n\n \n \n \n \n

\n\n

\n \n \n\n \n \n

\n\n

\n \n \n \n \n\n \n \n \n \n\n \n \n\n \n

{`if (screenStateUnknown) fullRedraw()\nelse if (layoutChanged) fullRedraw()\nelse patch(changedRects)`}

\n If you can’t prove which cells are correct, you can’t patch safely.\n

\n \n \n

\n\n

\n \n \n\n \n \n\n \n \n \n \n\n \n \n \n \n

\n\n

\n \n \n \n \n\n \n \n \n \n

\n\n

\n \n \n \n \n\n \n \n \n \n

\n\n

\n )\n}\n\nfunction Header() {\n return (\n

\n {/* Keep the subtitle short; this is a cheat sheet, not a manifesto */}\n

VT-HIG — Cheat Sheet

CLI/TUI Human Interface Guidelines (draft) 😎

\n\n {/* Version pill is a simple visual anchor for iteration */}\n

v0.3

\n )\n}\n\nfunction Footer() {\n return (\n

\n Principle: ship a reliable contract on a dumb byte\n stream.\n

\n Pattern format: intent → contract → keys → failure\n modes.\n

\n )\n}\n\nfunction Section({\n title,\n children,\n}: {\n title: string\n children: React.ReactNode\n}) {\n return (\n

\n {/* Sections are the “table of contents” without needing an actual ToC */}\n

{title}

{children}

\n )\n}\n\nfunction Grid({\n columns,\n children,\n}: {\n columns: 1 | 2 | 3\n children: React.ReactNode\n}) {\n return (\n \n {children}\n \n )\n}\n\nfunction Card({\n title,\n subtitle,\n children,\n}: {\n title: string\n subtitle?: string\n children: React.ReactNode\n}) {\n return (\n

\n {/* Card head is intentionally compact to keep “less is more” */}\n

{title}

\n {subtitle ?

{subtitle}

: null}\n

\n\n

{children}

\n )\n}\n\nfunction Bullets({ items }: { items: string[] }) {\n return (\n

\n {t}\n

\n )\n}\n\nfunction KeyList({ items }: { items: Array<[string, string]> }) {\n return (\n

\n {items.map(([k, v]) => (\n // Key labels are unique enough in this list; good keys keep React diffing cheap.\n

\n {k}\n

{v}

\n ))}\n

\n )\n}\n\nfunction Binary({\n leftTitle,\n leftItems,\n rightTitle,\n rightItems,\n}: {\n leftTitle: string\n leftItems: Array<[string, string]>\n rightTitle: string\n rightItems: Array<[string, string]>\n}) {\n return (\n

\n {/* Binary blocks enforce a “two buckets” mental model (your preference). */}\n

{leftTitle}

\n \n

\n\n

{rightTitle}

\n \n

\n )\n}\n\nfunction Pairs({ items }: { items: Array<[string, string]> }) {\n return (\n

\n {items.map(([k, v]) => (\n // Pair key is used as React key because the left column is a label.\n

{k}

{v}

\n ))}\n

\n )\n}\n\nfunction StackCard() {\n return (\n \n {/* Preformatted so the arrows align as a visual ladder */}\n

\n{`[User Intent]\n  ↓\n[App UX contract]\n  ↓\n[Library fiction]\n  ↓\n[TTY/PTY contract]\n  ↓\n[Terminal emulator fiction]\n  ↓\n[OS + kernel]\n  ↓\n[Hardware]`}

\n\n

\n Design patterns live at App UX contract,\n constrained by everything below.\n

\n \n )\n}\n\n// Styling: inline only (single-file cheat sheet; easy to paste into any sandbox).\n// Keep the palette minimal to avoid turning this into a theme project.\nconst s: Record = {\n page: {\n minHeight: \"100vh\",\n background: \"#0b0d10\",\n color: \"#e9edf2\",\n fontFamily:\n \"ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial\",\n },\n header: {\n position: \"sticky\",\n top: 0,\n zIndex: 5,\n background: \"rgba(11, 13, 16, 0.92)\",\n backdropFilter: \"blur(10px)\",\n borderBottom: \"1px solid rgba(233, 237, 242, 0.10)\",\n },\n hRow: {\n maxWidth: 980,\n margin: \"0 auto\",\n padding: \"18px 16px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: 12,\n },\n hTitle: {\n fontSize: 18,\n fontWeight: 700,\n letterSpacing: 0.2,\n },\n hSub: {\n marginTop: 4,\n fontSize: 12,\n color: \"rgba(233, 237, 242, 0.70)\",\n },\n pill: {\n fontSize: 12,\n padding: \"6px 10px\",\n borderRadius: 999,\n border: \"1px solid rgba(233, 237, 242, 0.16)\",\n color: \"rgba(233, 237, 242, 0.85)\",\n },\n main: {\n maxWidth: 980,\n margin: \"0 auto\",\n padding: \"14px 16px 32px\",\n display: \"grid\",\n gap: 14,\n },\n section: {\n display: \"grid\",\n gap: 10,\n },\n sectionTitle: {\n fontSize: 13,\n fontWeight: 700,\n color: \"rgba(233, 237, 242, 0.90)\",\n letterSpacing: 0.2,\n },\n sectionBody: {},\n card: {\n borderRadius: 16,\n border: \"1px solid rgba(233, 237, 242, 0.12)\",\n background: \"rgba(255, 255, 255, 0.03)\",\n overflow: \"hidden\",\n },\n cardHead: {\n padding: \"12px 12px 0\",\n },\n cardTitle: {\n fontSize: 13,\n fontWeight: 700,\n },\n cardSub: {\n marginTop: 4,\n fontSize: 12,\n color: \"rgba(233, 237, 242, 0.70)\",\n },\n cardBody: {\n padding: 12,\n },\n ul: {\n margin: 0,\n paddingLeft: 18,\n display: \"grid\",\n gap: 6,\n },\n li: {\n color: \"rgba(233, 237, 242, 0.88)\",\n fontSize: 12,\n lineHeight: 1.35,\n },\n kRow: {\n display: \"grid\",\n gridTemplateColumns: \"auto 1fr\",\n gap: 10,\n alignItems: \"center\",\n },\n kbd: {\n fontFamily:\n \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'\",\n fontSize: 12,\n padding: \"4px 8px\",\n borderRadius: 10,\n border: \"1px solid rgba(233, 237, 242, 0.14)\",\n background: \"rgba(0,0,0,0.25)\",\n color: \"rgba(233, 237, 242, 0.92)\",\n justifySelf: \"start\",\n },\n kText: {\n fontSize: 12,\n color: \"rgba(233, 237, 242, 0.82)\",\n lineHeight: 1.35,\n },\n binary: {\n display: \"grid\",\n gridTemplateColumns: \"1fr 1px 1fr\",\n borderRadius: 16,\n border: \"1px solid rgba(233, 237, 242, 0.12)\",\n background: \"rgba(255, 255, 255, 0.03)\",\n overflow: \"hidden\",\n },\n binaryCol: {\n padding: 12,\n display: \"grid\",\n gap: 10,\n },\n binaryDivider: {\n background: \"rgba(233, 237, 242, 0.10)\",\n },\n binaryTitle: {\n fontSize: 12,\n fontWeight: 700,\n color: \"rgba(233, 237, 242, 0.88)\",\n },\n pair: {\n display: \"grid\",\n gridTemplateColumns: \"110px 1fr\",\n gap: 10,\n alignItems: \"baseline\",\n },\n pairKey: {\n fontSize: 12,\n fontWeight: 700,\n color: \"rgba(233, 237, 242, 0.92)\",\n },\n pairVal: {\n fontSize: 12,\n color: \"rgba(233, 237, 242, 0.78)\",\n lineHeight: 1.35,\n },\n pre: {\n margin: 0,\n padding: 12,\n borderRadius: 14,\n background: \"rgba(0,0,0,0.28)\",\n border: \"1px solid rgba(233, 237, 242, 0.10)\",\n fontSize: 12,\n lineHeight: 1.35,\n overflowX: \"auto\",\n fontFamily:\n \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'\",\n color: \"rgba(233, 237, 242, 0.92)\",\n },\n note: {\n marginTop: 10,\n fontSize: 12,\n color: \"rgba(233, 237, 242, 0.75)\",\n lineHeight: 1.35,\n },\n mono: {\n fontFamily:\n \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'\",\n color: \"rgba(233, 237, 242, 0.92)\",\n },\n footer: {\n marginTop: 8,\n paddingTop: 14,\n borderTop: \"1px solid rgba(233, 237, 242, 0.10)\",\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 10,\n justifyContent: \"space-between\",\n color: \"rgba(233, 237, 242, 0.70)\",\n fontSize: 12,\n },\n footerLeft: {\n flex: \"1 1 360px\",\n },\n footerRight: {\n flex: \"1 1 360px\",\n textAlign: \"right\",\n },\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","5630700328464696799","traceTime",1777832571956]