@cueplusplus/ui 0.13.0

package/manifest/components/tags-input.json

@@ -0,0 +1,255 @@
+{
+  "name": "TagsInput",
+  "slug": "tags-input",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Free-form tags, each a removable chip.\n\n{@link MultiSelect } with the set opened up: Enter (or a separator key) commits\nwhatever is in the box, so this is the control for labels, hostnames and\nanything else the product cannot enumerate in advance. Pass `suggestions` to\noffer the ones you *do* know.\n\nThree rules the hand-rolled version always misses, all enforced here: tags are\ntrimmed, blanks are refused, and duplicates are refused silently rather than\nappended (a tag list is a set). Backspace in an empty input removes the last\ntag, courtesy of Base UI's chip handling.",
+  "props": [
+    {
+      "name": "value",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "The tags. Use with `onValueChange` for a controlled field.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "defaultValue",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial tags for an uncontrolled field.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string[]) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the full list after every add or remove.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "suggestions",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Optional known tags, offered in a popup as the user types. Free-form entry\nworks with or without them — a suggestion is a shortcut, never a constraint.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Shown while there are no tags.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the control ladder. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "separators",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": "[\",\"]",
+      "description": "Extra keys that commit the pending tag, on top of Enter. Defaults to `[\",\"]`\n— the separator every \"type a list\" field in the wild accepts.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Refuse further tags past this many.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Prevent entry and grey the field out.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name for the hidden input, when the field is part of a form.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id forwarded to the text input.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the input, when no {@link FieldLabel } names it.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id of the element naming the input.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "removeLabel",
+      "type": "((tag: string) => string)",
+      "required": false,
+      "defaultValue": "(tag) => `Remove ${tag}`",
+      "description": "Accessible name for a tag's remove button. Defaults to\n``(tag) => `Remove ${tag}` ``.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the field.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "popupClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the popup surface.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "sideOffset",
+      "type": "number",
+      "required": false,
+      "defaultValue": "4",
+      "description": "Distance in px between the field and the popup. Defaults to `4`.",
+      "control": {
+        "kind": "number"
+      }
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-border-strong",
+    "--cue-chip-h",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-leading-ui",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-scrim",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "Free-form tags, each a removable chip.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<TagsInput aria-label=\"Labels\" value={labels} onValueChange={setLabels} />\n<TagsInput aria-label=\"Labels\" suggestions={knownLabels} max={8} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tags-input",
+  "mdUrl": "/docs/components/tags-input.md",
+  "jsonUrl": "/r/components/tags-input.json",
+  "specimens": [
+    {
+      "title": "TagsInput",
+      "group": "forms",
+      "components": [
+        "TagsInput"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <TagsInput\n    aria-label=\"Protocols\"\n    defaultValue={[\"Art-Net\", \"MIDI\"]}\n    suggestions={PROTOCOLS}\n    placeholder=\"Add a protocol\"\n  />\n  <TagsInput aria-label=\"Protocols, capped\" defaultValue={[\"OSC\"]} max={3} disabled />\n</div>",
+      "note": "A combobox in multiple mode, rendering its values as chips. Comma and Enter both commit.",
+      "interaction": "Backspace on an empty field removes the last chip; each chip's remove button has its own name."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tail-status.json

@@ -0,0 +1,138 @@
+{
+  "name": "TailStatus",
+  "slug": "tail-status",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The live row at the foot of a transcript: what the run is doing, right now.\n\nThe one row every shipping agent UI has and no component catalogue ships. It\nis not a spinner and not a toast — it is a transcript row with\n`role=\"status\"`, which is what makes it the *only* element in this family a\nscreen reader is told about without being asked. Everything else here is\ndrawn and left alone; this one announces itself politely each time the action\nchanges, which is exactly the behaviour a person who cannot see the spinner\nneeds and exactly the behaviour that becomes unbearable if it is used for\nanything else. One per transcript, at the foot, and nowhere else.\n\n**Unless something better is speaking.** {@link LiveRegionAnnouncer } is this\nfamily's other live region, and its table of transitions covers what this row\nnarrates; a console that mounts both would have the run read out twice. So\nmounting an announcer takes the speech away from this row automatically — the\nwords stay on the screen, the `role=\"status\"` goes, and `data-announces` says\nwhich of the two it is doing. {@link TailStatusProps.announce} overrules it in\neither direction.\n\nThe action and the detail are separate props rather than one composed string\nbecause they truncate differently: the action is short and must survive, the\ndetail is a path and must not push it off the row.\n\nState is a prop, as everywhere in this family. The row holds no timer, counts\nnothing, and does not know whether the run is healthy — `active` says whether\nthe sweep runs, `action` says what it says, and the caller changes both.",
+  "props": [
+    {
+      "name": "action",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is happening, in two or three words: `Running commands`,\n`Searching the codebase`. `TAIL_ACTIONS` is the shipped vocabulary and this\nprop is a plain string, so a product with its own verbs is not stuck with\nthese ten.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "detail",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The thing the action is happening to — a path, a query, a topic. Truncates\non its own so the action never has to; a sidebar transcript is 280px wide\nand a status line that elides its verb has said nothing.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "active",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether the action is still going. `true` by default, because this row is\nthe live one; turn it off for `Idle`, `Interrupted` and `Aborted`, which\nstops the sweep and empties the spinner's slot without moving the text.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "updatesInPlace",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether a new `action` animates into the row that is already there, or\nsimply replaces the text.\n\nCursor's flag, and the reason it needs one: a narration line that changes\nevery few hundred milliseconds should read as one row being updated, while\na line that means something *different* should read as a new row. `true`\n(the default) keys the label on its own text so each new action fades in\nwhere the last one was; `false` leaves it unkeyed, and the words change\nwith no motion at all. A reduced-motion reader gets the second behaviour\neither way.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "priority",
+      "type": "\"normal\" | \"attention\"",
+      "required": false,
+      "defaultValue": "normal",
+      "description": "How loudly this row is speaking. See {@link TailPriority}.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "normal",
+          "attention"
+        ]
+      }
+    },
+    {
+      "name": "onCancel",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Stop the run. The inline control exists only when this is given — Cursor's\nrule, and the right one: a Cancel that cannot cancel is worse than no\nCancel.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "cancelLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Cancel",
+      "description": "What the stop control is called. `Cancel` is Cursor's word; opencode uses\n`Interrupt` and `Stop` for the same button.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "announce",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Whether this row is a live region — whether a screen reader is told each\ntime the action changes.\n\n**Answers itself by default, and that default is the interesting part.**\nLeft alone the row speaks when it is the only thing that can, and goes\nquiet the moment a {@link LiveRegionAnnouncer } is mounted anywhere on the\npage: the announcer's table covers the same transitions this row narrates,\nso a console with both — the ordinary composition — would otherwise have\nevery state read out twice, out of step, because the two regions update at\ndifferent moments.\n\nThe row is the one that defers because the announcer is the better speaker:\nit is a queue, spaced and depth-limited and paused while the page is hidden\nor a modal has the reader, and it is mounted empty and left mounted, which\nis the only way a live region is reliably announced. This row changes\nseveral times a second and comes and goes with the run.\n\nSet it explicitly to overrule that — `true` for a console whose announcer\nis fed something other than these actions, `false` for one that narrates\nthe foot of the transcript some other way. An explicit answer always wins.",
+      "control": {
+        "kind": "boolean"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-stream",
+    "--cue-text-ui"
+  ],
+  "summary": "The live row at the foot of a transcript: what the run is doing, right now.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { TailStatus, TAIL_ACTIONS } from \"@cueplusplus/ui/elements\";\n\n<TailStatus\n  action={TAIL_ACTIONS.searchingCode}\n  detail=\"composer.tsx\"\n  onCancel={stop}\n/>\n// Settled: no sweep, no spinner, and the text changes without motion.\n<TailStatus action={TAIL_ACTIONS.interrupted} active={false} updatesInPlace={false} />\n// Composed with the announcer: this row draws the state, the queue speaks it.\n<>\n  <TailStatus action={TAIL_ACTIONS.running} detail=\"pnpm test\" />\n  <LiveRegionAnnouncer messages={log} />\n</>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tail-status",
+  "mdUrl": "/docs/components/tail-status.md",
+  "jsonUrl": "/r/components/tail-status.json",
+  "specimens": [
+    {
+      "title": "TailStatus",
+      "group": "elements-thread",
+      "components": [
+        "TailStatus"
+      ],
+      "code": "<Specimens>\n  <Specimen label={stopped ? \"settled\" : \"live, cancellable\"} wide>\n    <div className=\"w-full max-w-md\">\n      <TailStatus\n        action={stopped ? TAIL_ACTIONS.interrupted : TAIL_ACTIONS.running}\n        detail={stopped ? undefined : \"ola-patch --universe 3\"}\n        active={!stopped}\n        updatesInPlace={!stopped}\n        onCancel={stopped ? undefined : () => setStopped(true)}\n      />\n    </div>\n  </Specimen>\n  <Specimen label=\"thinking, with a topic\" wide>\n    <div className=\"w-full max-w-md\">\n      <TailStatus action={TAIL_ACTIONS.thinking} detail=\"which universe has room\" />\n    </div>\n  </Specimen>\n  <Specimen label=\"attention\" wide>\n    <div className=\"w-full max-w-md\">\n      <TailStatus\n        action=\"Waiting for you\"\n        detail=\"approve the shell command\"\n        priority=\"attention\"\n      />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "The live row at the foot of the transcript, and the only element in this family a screen reader is told about without being asked: it is a role=status, so each new action is announced politely as it lands — unless a LiveRegionAnnouncer is mounted, in which case it hands the speaking over and draws the state without saying it, because two polite regions narrating the same run is the transcript read out twice. Two props rather than one string — the action is short and must survive, the detail is a path and must not push it off a 280px sidebar — and an inline Cancel that exists only when there is something to cancel. The copy is TAIL_ACTIONS, a table, not ten strings baked into the markup.",
+      "interaction": "press Cancel and the row settles: the sweep stops, the spinner leaves its slot without the words moving, and the last thing it says is what stopped it. updatesInPlace goes off with it, because 'Interrupted' is a different sentence rather than the next frame of the same one."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/terminal-block.json

@@ -0,0 +1,111 @@
+{
+  "name": "TerminalBlock",
+  "slug": "terminal-block",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Command output that streams line by line and ends with an exit status.",
+  "props": [
+    {
+      "name": "command",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Command string shown in the terminal header.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "lines",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Output lines available to stream into the body.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many output lines from the start are currently shown.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "done",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the header shows exit 0; otherwise a spinner keeps spinning.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "variant",
+      "type": "\"paper\" | \"ink\"",
+      "required": false,
+      "defaultValue": "paper",
+      "description": "paper matches the surrounding surfaces; ink renders the classic dark terminal slab.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "paper",
+          "ink"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"command\" | \"lines\" | \"visibleCount\" | \"done\" | \"variant\"\n> & {\n  /** Command string shown in the terminal header. */\n  command: string;\n  /** Output lines available to stream into the body. */\n  lines: readonly string[];\n  /** How many output lines from the start are currently shown. */\n  visibleCount: number;\n  /** When true the header shows exit 0; otherwise a spinner keeps spinning. */\n  done: boolean;\n  /** paper matches the surrounding surfaces; ink renders the classic dark terminal slab. */\n  variant?: \"paper\" | \"ink\";\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-sunken",
+    "--cue-text-ui"
+  ],
+  "summary": "Command output that streams line by line and ends with an exit status.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { TerminalBlock } from \"@cueplusplus/ui/elements\";\n\n<TerminalBlock\n  command=\"pnpm test\"\n  lines={[\"PASS  thread.test.ts\", \"Tests: 2 passed\"]}\n  visibleCount={2}\n  done\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/terminal-block",
+  "mdUrl": "/docs/components/terminal-block.md",
+  "jsonUrl": "/r/components/terminal-block.json",
+  "specimens": [
+    {
+      "title": "TerminalBlock",
+      "group": "elements",
+      "components": [
+        "TerminalBlock"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"paper · streaming\" wide>\n    <TerminalBlock\n      command=\"cue patch --universe 3 --profile 'Source Four 26'\"\n      lines={OUTPUT}\n      visibleCount={2}\n      done={false}\n    />\n  </Specimen>\n  <Specimen label=\"ink · exit 0\" wide>\n    <TerminalBlock\n      command=\"cue patch --universe 3 --profile 'Source Four 26'\"\n      lines={OUTPUT}\n      visibleCount={OUTPUT.length}\n      done\n      variant=\"ink\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Command output as it arrives: `visibleCount` says how many of the lines have landed, so the caller owns the clock and the block owns nothing. Two grounds — paper sits in the transcript, ink is the recessed slab a terminal is expected to be.",
+      "interaction": "none. It is a transcript of something that already happened."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/terminal-frame.json

@@ -0,0 +1,146 @@
+{
+  "name": "TerminalFrame",
+  "slug": "terminal-frame",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A recessed terminal: mono, `$`-prefixed commands, optional typed playback.\n\nRecessed rather than raised — `bg-sunken` sits the transcript *into* the page\nthe way a real console does (the snuffle convention, where the terminal\nsurface is the only thing darker than the background).\n\nThe `simulate` player is deliberately not a GIF or a video: it is text, so it\ncopies, it scales with the type ramp, it re-themes, and it costs nothing to\nload. Keystrokes are jittered from a seed so a marketing screenshot is\nreproducible, and the whole animation is replaced by its final frame under\n`prefers-reduced-motion` — with no timers scheduled at all, rather than an\nanimation that runs invisibly.",
+  "props": [
+    {
+      "name": "title",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name above the transcript — a log file, a host, a task.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "lines",
+      "type": "readonly TerminalFrameLine[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Static transcript. Rendered as a preamble when `simulate` is also set.",
+      "control": {
+        "kind": "array"
+      }
+    },
+    {
+      "name": "prompt",
+      "type": "string",
+      "required": false,
+      "defaultValue": "$",
+      "description": "The prompt glyph in front of a command line. Defaults to `\"$\"`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "copy",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Show a `CopyButton` in the title bar for the commands in the transcript.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "copyValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "What the copy button puts on the clipboard. Defaults to the command lines, one per line.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "simulate",
+      "type": "TerminalScript",
+      "required": false,
+      "defaultValue": null,
+      "description": "Play the transcript out as a typed session.\n\nPass a stable reference (a module constant, or memoised) — the player\nrestarts whenever this prop changes identity. Under\n`prefers-reduced-motion` the finished transcript renders instantly and no\ntimer is ever scheduled.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fixed body height in px at the 16px root. Leave unset to grow with the content.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra content under the transcript — an input row, a hint strip.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"title\" | \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-control-md",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-info",
+    "--cue-leading-ui",
+    "--cue-ok",
+    "--cue-pad-row-x",
+    "--cue-radius-surface",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-label",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A recessed terminal: mono, `$`-prefixed commands, optional typed playback.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<TerminalFrame\n  title=\"install\"\n  copy\n  lines={[{ text: \"pnpm add\nconst SCRIPT = { steps: [{ command: \"cue build\", pending: \"compiling\", output: [\"12 cues\"] }] };\n<TerminalFrame simulate={SCRIPT} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/terminal-frame",
+  "mdUrl": "/docs/components/terminal-frame.md",
+  "jsonUrl": "/r/components/terminal-frame.json",
+  "specimens": [
+    {
+      "title": "TerminalFrame",
+      "group": "instruments",
+      "components": [
+        "TerminalFrame"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <TerminalFrame\n    title=\"install\"\n    copy\n    lines={[\n      { text: \"pnpm add @cueplusplus/ui @cueplusplus/tokens\", command: true },\n      \"+ @cueplusplus/ui\",\n      \"+ @cueplusplus/tokens\",\n      { text: \"done in 1.4s\", tone: \"ok\" },\n    ]}\n  />\n  <TerminalFrame\n    title=\"patch\"\n    simulate={{\n      seed: 7,\n      keystrokeMs: 40,\n      steps: [\n        {\n          command: \"cue patch --universe 1 --profile s4\",\n          pending: \"resolving profile\",\n          pendingMs: 400,\n          output: [{ text: \"patched 8 channels\", tone: \"ok\" }],\n        },\n      ],\n    }}\n  />\n</div>",
+      "note": "A sunken mono frame with `$`-prefixed command lines and a copy affordance. `simulate` turns it into a typing player with jittered keystrokes.",
+      "interaction": "the reduced-motion path renders the finished transcript instantly rather than typing it."
+    }
+  ],
+  "todo": true
+}