@cueplusplus/ui 0.3.0 → 0.5.0

package/manifest/components/queue-dock.json

@@ -0,0 +1,110 @@
+{
+  "name": "QueueDock",
+  "slug": "queue-dock",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "What you typed while it was still working, stacked and still yours to change.\n\nThe dock over the composer, and one of the two elements the teardown found\nmissing everywhere. Its whole reason to exist is the three things you can do\nto a queued turn *before* it sends: rewrite it now that you have seen what\nthe run did, jump it to the front, or drop it. A queue you can only watch is\na queue you will let send something you no longer mean.\n\nIt folds. Four queued turns above a composer is a wall, so the collapsed\nstate is one line — `4 queued messages` — and the entries come back on a\nclick. Open state is a prop like everything else in this family, so a\nscripted replay of the dock is arithmetic rather than a component with a mind\nof its own.\n\nAn empty queue draws **nothing**: no line, no empty state, no rule. Every\nproduct in the study does the same, and it is the right answer — a dock that\nannounces it has nothing in it is a permanent strip of chrome apologising for\nitself.",
+  "props": [
+    {
+      "name": "messages",
+      "type": "readonly QueuedFollowUp[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The turns waiting to send, in the order they will drain. Ordering is the\ncaller's: Cursor lets a person drag one up the list, and a component that\nsorted the array it was given could not be dragged."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the entries are showing, or only the summary line."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "((open: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the dock is expanded or collapsed."
+    },
+    {
+      "name": "onEdit",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Put this turn back in the composer to be rewritten. The control exists\nonly when this is given."
+    },
+    {
+      "name": "onSendNow",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Send this turn now rather than waiting for the run to finish — Cursor's\n`Send now`, Zed's steer button. The control exists only when this is given."
+    },
+    {
+      "name": "onRemove",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Drop this turn before it ever sends. The control exists only when this is\ngiven."
+    },
+    {
+      "name": "summary",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The summary line, replacing the one {@link formatQueueSummary} would build\n— for a dock that counts something else: `2 follow-ups`, `3 steps queued`."
+    },
+    {
+      "name": "labels",
+      "type": "Partial<QueueLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Copy for the five controls, merged over `QUEUE_LABELS`. Partial: overriding\n`sendNow` does not cost you the other four."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "What you typed while it was still working, stacked and still yours to change.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QueueDock } from \"@cueplusplus/ui/elements\";\n\n<QueueDock\n  messages={queued}\n  open={open}\n  onOpenChange={setOpen}\n  onEdit={(id) => lift(id)}\n  onSendNow={(id) => steer(id)}\n  onRemove={(id) => drop(id)}\n/>\n// Read-only: the same dock in a shared transcript, with nothing to press.\n<QueueDock messages={queued} open />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/queue-dock",
+  "mdUrl": "/docs/components/queue-dock.md",
+  "jsonUrl": "/r/components/queue-dock.json",
+  "specimens": [
+    {
+      "title": "QueueDock",
+      "group": "elements-agents",
+      "components": [
+        "QueueDock"
+      ],
+      "code": "<Specimens>\n  <Specimen label={queueOpen ? \"three waiting\" : \"folded\"} wide>\n    <div className=\"w-full max-w-md\">\n      <QueueDock\n        messages={queued}\n        open={queueOpen}\n        onOpenChange={setQueueOpen}\n        onEdit={drain}\n        onSendNow={drain}\n        onRemove={drain}\n      />\n    </div>\n  </Specimen>\n  <Specimen label=\"read-only, in a shared transcript\" wide>\n    <div className=\"w-full max-w-md\">\n      <QueueDock messages={FOLLOW_UPS.slice(0, 2)} open />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "What you typed while it was still working — and the three things you can still do about it. Cursor, opencode, Cline, Roo and Zed all ship this dock and assistant-ui's catalogue has nothing like it; the vendored MessageQueue two files along is the strip without the verbs. It folds to one line, because four queued turns above a composer is a wall, and an empty queue draws nothing at all rather than a strip of chrome apologising for itself.",
+      "interaction": "the summary line is the trigger and carries its own aria-expanded; each entry's three controls are named after the turn they belong to (`Send now: Then export the whole show to the desk`), so a screen reader hears which one it is about to jump. Press any of them here and the entry drains — the bench refills when the last one goes."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/quota-banner.json

@@ -0,0 +1,94 @@
+{
+  "name": "QuotaBanner",
+  "slug": "quota-banner",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "How much is left, when it comes back, and the way to get more.",
+  "props": [
+    {
+      "name": "used",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How much has been consumed."
+    },
+    {
+      "name": "limit",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The allowance. The banner turns amber at 90 percent."
+    },
+    {
+      "name": "unit",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is being counted: messages, runs, credits."
+    },
+    {
+      "name": "resetsIn",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted time until the window rolls over."
+    },
+    {
+      "name": "upgradeLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Label for the way out."
+    },
+    {
+      "name": "onUpgrade",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the upgrade action."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"used\"\n  | \"limit\"\n  | \"unit\"\n  | \"resetsIn\"\n  | \"upgradeLabel\"\n  | \"onUpgrade\"\n> & {\n  /** How much has been consumed. */\n  used: number;\n  /** The allowance. The banner turns amber at 90 percent. */\n  limit: number;\n  /** What is being counted: messages, runs, credits. */\n  unit: string;\n  /** Pre-formatted time until the window rolls over. */\n  resetsIn: string;\n  /** Label for the way out. */\n  upgradeLabel: string;\n  /** Called from the upgrade action. */\n  onUpgrade?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "How much is left, when it comes back, and the way to get more.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QuotaBanner } from \"@cueplusplus/ui/elements\";\n\n<QuotaBanner used={47} limit={50} unit=\"messages\" resetsIn=\"3h 12m\" upgradeLabel=\"Upgrade\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/quota-banner",
+  "mdUrl": "/docs/components/quota-banner.md",
+  "jsonUrl": "/r/components/quota-banner.json",
+  "specimens": [
+    {
+      "title": "QuotaBanner",
+      "group": "elements-agents",
+      "components": [
+        "QuotaBanner"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"comfortable\" wide>\n    <QuotaBanner\n      used={140}\n      limit={500}\n      unit=\"agent runs\"\n      resetsIn=\"12 days\"\n      upgradeLabel=\"Raise the limit\"\n      onUpgrade={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"nearly out\" wide>\n    <QuotaBanner\n      used={472}\n      limit={500}\n      unit=\"agent runs\"\n      resetsIn=\"3 days\"\n      upgradeLabel=\"Raise the limit\"\n      onUpgrade={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "How much is left, when it comes back, and the way to get more — in that order, which is the order the question is actually asked in. It turns warn at nine tenths rather than at the wall, so the warning arrives while there is still something to do about it.",
+      "interaction": "the upgrade action is an ink button with the label the caller passes; nothing here is a link, so the destination is entirely the host app's business."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/quote-reply.json

@@ -0,0 +1,105 @@
+{
+  "name": "QuoteReply",
+  "slug": "quote-reply",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.",
+  "props": [
+    {
+      "name": "before",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text preceding the selection."
+    },
+    {
+      "name": "selection",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The highlighted run the actions apply to."
+    },
+    {
+      "name": "after",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text following the selection."
+    },
+    {
+      "name": "actions",
+      "type": "readonly QuoteAction[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the toolbar offers. Each action names one of the three built-in icons."
+    },
+    {
+      "name": "toolbarVisible",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the floating toolbar is showing. Drive it from your own selection handler."
+    },
+    {
+      "name": "quoted",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Once quoted, the text carried into the composer, shown under a rule."
+    },
+    {
+      "name": "onAction",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the key of the action that was chosen."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"before\"\n  | \"selection\"\n  | \"after\"\n  | \"actions\"\n  | \"toolbarVisible\"\n  | \"quoted\"\n  | \"onAction\"\n> & {\n  /** Text preceding the selection. */\n  before: string;\n  /** The highlighted run the actions apply to. */\n  selection: string;\n  /** Text following the selection. */\n  after: string;\n  /** What the toolbar offers. Each action names one of the three built-in icons. */\n  actions: readonly QuoteAction[];\n  /** Whether the floating toolbar is showing. Drive it from your own selection handler. */\n  toolbarVisible: boolean;\n  /** Once quoted, the text carried into the composer, shown under a rule. */\n  quoted?: string;\n  /** Called with the key of the action that was chosen. */\n  onAction?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QuoteReply } from \"@cueplusplus/ui/elements\";\n\n<QuoteReply\n  before=\"The regression happens because \"\n  selection=\"the converter drops parts with no text\"\n  after=\", so the turn never lands.\"\n  actions={actions}\n  toolbarVisible\n  onAction={handle}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/quote-reply",
+  "mdUrl": "/docs/components/quote-reply.md",
+  "jsonUrl": "/r/components/quote-reply.json",
+  "specimens": [
+    {
+      "title": "QuoteReply",
+      "group": "elements-thread",
+      "components": [
+        "QuoteReply"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"toolbar up\" wide>\n    <QuoteReply\n      before=\"Patched 6 fixtures on \"\n      selection=\"universe 3, channels 1 to 48\"\n      after=\". Cue 1 is untouched.\"\n      actions={QUOTE_ACTIONS}\n      toolbarVisible\n    />\n  </Specimen>\n  <Specimen label=\"quoted\" wide>\n    <QuoteReply\n      before=\"Patched 6 fixtures on \"\n      selection=\"universe 3, channels 1 to 48\"\n      after=\". Cue 1 is untouched.\"\n      actions={QUOTE_ACTIONS}\n      toolbarVisible={false}\n      quoted=\"universe 3, channels 1 to 48\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Select a phrase in an answer and act on that phrase rather than the whole turn. The selection stays lit in the streaming hue while the toolbar is up, and what you quoted is repeated under the composer so the next turn's subject is never in doubt.",
+      "interaction": "the toolbar's row is reserved whether or not it is showing, so nothing below it jumps when a selection appears. Each action is a labelled button."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/read-aloud.json

@@ -0,0 +1,111 @@
+{
+  "name": "ReadAloud",
+  "slug": "read-aloud",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "An answer played back, the spoken word lit as it goes, speed under your thumb.",
+  "props": [
+    {
+      "name": "words",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The answer split into words, so the spoken one can be lit without re-parsing the\ntext."
+    },
+    {
+      "name": "spokenIndex",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Index of the word being spoken. Everything before it dims, everything after stays\nwaiting, and an index outside the text speaks none of it."
+    },
+    {
+      "name": "playing",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Swaps the transport button between play and pause."
+    },
+    {
+      "name": "rate",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Playback speed, printed on the rate control."
+    },
+    {
+      "name": "elapsed",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted elapsed time."
+    },
+    {
+      "name": "duration",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted total duration."
+    },
+    {
+      "name": "onToggle",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when playback is started or paused."
+    },
+    {
+      "name": "onRateChange",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the rate control is tapped; cycle the rate yourself."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"words\"\n  | \"spokenIndex\"\n  | \"playing\"\n  | \"rate\"\n  | \"elapsed\"\n  | \"duration\"\n  | \"onToggle\"\n  | \"onRateChange\"\n> & {\n  /**\n   * The answer split into words, so the spoken one can be lit without re-parsing the\n   * text.\n   */\n  words: readonly string[];\n  /**\n   * Index of the word being spoken. Everything before it dims, everything after stays\n   * waiting, and an index outside the text speaks none of it.\n   */\n  spokenIndex: number;\n  /** Swaps the transport button between play and pause. */\n  playing: boolean;\n  /** Playback speed, printed on the rate control. */\n  rate: number;\n  /** Pre-formatted elapsed time. */\n  elapsed: string;\n  /** Pre-formatted total duration. */\n  duration: string;\n  /** Called when playback is started or paused. */\n  onToggle?: () => void;\n  /** Called when the rate control is tapped; cycle the rate yourself. */\n  onRateChange?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "An answer played back, the spoken word lit as it goes, speed under your thumb.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ReadAloud } from \"@cueplusplus/ui/elements\";\n\n<ReadAloud\n  words={words}\n  spokenIndex={12}\n  playing\n  rate={1}\n  elapsed=\"0:04\"\n  duration=\"0:11\"\n  onToggle={toggle}\n  onRateChange={cycleRate}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/read-aloud",
+  "mdUrl": "/docs/components/read-aloud.md",
+  "jsonUrl": "/r/components/read-aloud.json",
+  "specimens": [
+    {
+      "title": "ReadAloud",
+      "group": "elements-thread",
+      "components": [
+        "ReadAloud"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"playing\" wide>\n    <ReadAloud\n      words={SPOKEN}\n      spokenIndex={4}\n      playing={playing}\n      rate={rate}\n      elapsed=\"0:06\"\n      duration=\"0:14\"\n      onToggle={() => setPlaying((current) => !current)}\n      onRateChange={() => setRate((current) => (current === 2 ? 1 : current + 0.5))}\n    />\n  </Specimen>\n  <Specimen label=\"paused at the start\" wide>\n    <ReadAloud\n      words={SPOKEN}\n      spokenIndex={0}\n      playing={false}\n      rate={1}\n      elapsed=\"0:00\"\n      duration=\"0:14\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "An answer played back with the spoken word lit as it goes. Position is a word index the caller advances, not an audio element, so the same component drives a real voice, a replay, or this bench. Speed is one tap away because that is the control people actually reach for.",
+      "interaction": "play/pause and the speed chip are both named buttons, and the label says the current rate rather than just the glyph. The progress bar animates linearly, and not at all under reduced motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/reasoning-effort.json

@@ -0,0 +1,81 @@
+{
+  "name": "ReasoningEffort",
+  "slug": "reasoning-effort",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "How hard to think, and how much of that budget the run actually spent.",
+  "props": [
+    {
+      "name": "levels",
+      "type": "readonly EffortLevel[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Every tier on offer, each carrying its own token budget."
+    },
+    {
+      "name": "selectedKey",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which tier is active. Its budget becomes the denominator."
+    },
+    {
+      "name": "spent",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Thinking tokens used so far, filling the bar against the selected budget."
+    },
+    {
+      "name": "onSelect",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a tier is picked."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"levels\" | \"selectedKey\" | \"spent\" | \"onSelect\"\n> & {\n  /** Every tier on offer, each carrying its own token budget. */\n  levels: readonly EffortLevel[];\n  /** Which tier is active. Its budget becomes the denominator. */\n  selectedKey: string;\n  /** Thinking tokens used so far, filling the bar against the selected budget. */\n  spent: number;\n  /** Called when a tier is picked. */\n  onSelect?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "How hard to think, and how much of that budget the run actually spent.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ReasoningEffort } from \"@cueplusplus/ui/elements\";\n\n<ReasoningEffort\n  levels={levels}\n  selectedKey=\"high\"\n  spent={5200}\n  onSelect={setLevel}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/reasoning-effort",
+  "mdUrl": "/docs/components/reasoning-effort.md",
+  "jsonUrl": "/r/components/reasoning-effort.json",
+  "specimens": [
+    {
+      "title": "ReasoningEffort",
+      "group": "elements-thread",
+      "components": [
+        "ReasoningEffort"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"medium, a third spent\" wide>\n    <ReasoningEffort\n      levels={EFFORT}\n      selectedKey={effort}\n      spent={2841}\n      onSelect={setEffort}\n    />\n  </Specimen>\n  <Specimen label=\"low, over its rung\" wide>\n    <ReasoningEffort levels={EFFORT} selectedKey=\"low\" spent={2048} />\n  </Specimen>\n</Specimens>",
+      "note": "How hard to think, and how much of that budget the run actually spent. The segmented control is the choice; the hairline under it is the consequence, and it moves when you change rungs because a bigger budget makes the same spend a smaller fraction.",
+      "interaction": "each segment is a button carrying aria-pressed. The meter animates its width rather than jumping, and holds still for a reader who asked for less motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/reasoning-panel.json

@@ -0,0 +1,108 @@
+{
+  "name": "ReasoningPanel",
+  "slug": "reasoning-panel",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A collapsible trace that streams reasoning steps along a timeline, then settles into\na summary.",
+  "props": [
+    {
+      "name": "steps",
+      "type": "ReasoningStep[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Full list of reasoning steps available to reveal."
+    },
+    {
+      "name": "visibleSteps",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many steps from the start are currently shown on the timeline."
+    },
+    {
+      "name": "streaming",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the trigger shows a shimmering Thinking label and the active step pulses."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the collapsible step list is expanded."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the user expands or collapses the panel."
+    },
+    {
+      "name": "restingLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Trigger label once streaming finishes, for example a summary of how long it thought."
+    },
+    {
+      "name": "elapsed",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Elapsed timer shown next to Thinking while streaming. Omit to hide it."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes merged onto the root."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-stream",
+    "--cue-surface-3",
+    "--cue-text-body"
+  ],
+  "summary": "A collapsible trace that streams reasoning steps along a timeline, then settles into a summary.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ReasoningPanel } from \"@cueplusplus/ui/elements\";\n\n<ReasoningPanel\n  steps={[{ title: \"Scope\", body: \"Find the failing path.\" }]}\n  visibleSteps={1}\n  streaming\n  open\n  onOpenChange={setOpen}\n  restingLabel=\"Reasoned for 4s\"\n  elapsed=\"2s\"\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/reasoning-panel",
+  "mdUrl": "/docs/components/reasoning-panel.md",
+  "jsonUrl": "/r/components/reasoning-panel.json",
+  "specimens": [
+    {
+      "title": "ReasoningPanel",
+      "group": "elements-thread",
+      "components": [
+        "ReasoningPanel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"streaming, open\" wide>\n    <ReasoningPanel\n      steps={REASONING}\n      visibleSteps={3}\n      streaming\n      open={reasoningOpen}\n      onOpenChange={setReasoningOpen}\n      restingLabel=\"Thought for 6s\"\n      elapsed=\"4s\"\n    />\n  </Specimen>\n  <Specimen label=\"settled, collapsed\" wide>\n    <ReasoningPanel\n      steps={REASONING}\n      visibleSteps={REASONING.length}\n      streaming={false}\n      open={settledOpen}\n      onOpenChange={setSettledOpen}\n      restingLabel=\"Thought for 6s\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "The model's own account of how it got there, revealed a beat at a time and then folded away. While it streams, the trigger shimmers and carries a running clock; when it settles, the label swaps for a summary and the timer goes. `visibleSteps` is what makes it a replay — the caller advances it, the panel never counts.",
+      "interaction": "the whole trigger row is the toggle and it takes focus; the chevron turns with the panel. The newest step's dot pulses while streaming and stops when it does."
+    }
+  ],
+  "todo": true
+}