@cueplusplus/ui 0.3.0 → 0.6.0

package/manifest/components/branch-picker.json

@@ -0,0 +1,124 @@
+{
+  "name": "BranchPicker",
+  "slug": "branch-picker",
+  "group": "agent-runtime",
+  "importPath": "@cueplusplus/ui/agent-runtime",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The `‹ 2 / 3 ›` stepper that walks a turn's regenerated siblings.\n\nIt keeps a segmented control's two promises — exactly one branch is on show,\nand the set cannot be emptied — without being one. A row of N numbered\nsegments is the wrong shape for a count that is usually 2 and occasionally 9,\nand a segmented control's recessed frame fights the message bubble it sits\nin. Two ghost icon buttons around a mono readout stay quiet until the reader\nhas a reason to look at them.\n\nA single branch is not a choice, so below two branches this renders nothing\nat all: the host can hand it every turn's `branch` without deciding which\nturns deserve a control. It belongs in an agent turn's `footer` — a user\nbubble is a solid accent fill, and a stepper drawn on it is unreadable.\n\nThe picker never moves the thread itself. It reports a direction and the host\nasks the runtime; under an ExternalStore runtime the switch arrives back at\nthe adapter's `setMessages`, which is the host's to write.",
+  "props": [
+    {
+      "name": "index",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "1-based position of the branch on show — what the readout prints."
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many sibling branches exist. Below 2 the picker renders nothing."
+    },
+    {
+      "name": "onNavigate",
+      "type": "(direction: BranchDirection) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called with the direction to move in. Never called past either end."
+    },
+    {
+      "name": "previousLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Previous branch",
+      "description": "Accessible name of the previous button. Defaults to `\"Previous branch\"`."
+    },
+    {
+      "name": "nextLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Next branch",
+      "description": "Accessible name of the next button. Defaults to `\"Next branch\"`."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Block both buttons — a run is in flight and the runtime cannot switch mid-run."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Branches",
+      "description": "Accessible name for the group. Defaults to `\"Branches\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-space-1",
+    "--cue-text-micro"
+  ],
+  "summary": "The `‹ 2 / 3 ›` stepper over a turn's regenerated siblings, and nothing at all below two.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Message agent=\"planner\" footer={<BranchPicker index={2} count={3} onNavigate={go} disabled={busy} />}>…</Message>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/branch-picker",
+  "mdUrl": "/docs/components/branch-picker.md",
+  "jsonUrl": "/r/components/branch-picker.json",
+  "whenToUse": [
+    "An agent turn's `footer`, once a regenerate has given the turn a sibling.",
+    "Any host that can move between branches: it reports a direction and lets you ask the runtime."
+  ],
+  "whenNotToUse": [
+    "A single branch. It renders nothing, on purpose, so a host can hand it every turn.",
+    "Picking between views or modes. That is `SegmentedControl`, which shows every option at once.",
+    "Paging through a list. That is `Pagination`; a branch set is one answer with alternatives, not a sequence.",
+    "Regenerating. The picker only moves between branches that exist; `useAgentThread().regenerate` makes a new one, and the host draws that control — a ghost `Button` in a turn's footer, as the demo does."
+  ],
+  "commonMistakes": [
+    "Putting it in a user bubble's footer. That bubble is a solid accent fill and a ghost stepper on it is unreadable.",
+    "Wiring `onNavigate` to a state setter without clamping, when the runtime is the one that knows the count.",
+    "Leaving it enabled during a run. Pass `disabled` while the thread is busy, because the runtime will not switch mid-run."
+  ],
+  "specimens": [
+    {
+      "title": "useAgentThread / ToolCallCard / BranchPicker",
+      "group": "agent-runtime",
+      "components": [
+        "useAgentThread",
+        "ToolCallCard",
+        "BranchPicker"
+      ],
+      "code": "<ScriptedThread />",
+      "note": "The hook reads an assistant-ui runtime and hands back the props the Chat group already takes: `busy`, `disabled`, `onSend` and `onStop` for the composer, `role`, `agent` and `pending` for each turn, `toolCalls` for the cards, `branch` and `switchBranch` for the stepper. No provider is mounted and no borrowed DOM is rendered, so every pixel here is this library's. The thread below plays a fixed script, because a docs page has no model behind it.",
+      "interaction": "the script streams once and stops on its own; Stop cancels it mid-sentence, Regenerate answers again under the same question, and the stepper that then appears walks the two answers."
+    },
+    {
+      "title": "BranchPicker",
+      "group": "agent-runtime",
+      "components": [
+        "BranchPicker"
+      ],
+      "code": "<div className=\"flex w-full max-w-[42rem] flex-col gap-(--cue-space-4)\">\n  <StatefulPicker />\n  <Message\n    agent=\"reviewer\"\n    author=\"Reviewer\"\n    footer={<BranchPicker index={1} count={2} onNavigate={() => {}} disabled />}\n  >\n    Blocked while a run is in flight: the runtime cannot switch branches mid-run.\n  </Message>\n</div>",
+      "note": "A stepper rather than a segmented row of numbers: a branch count is usually 2 and occasionally 9, and a segmented frame fights the bubble it sits in. It keeps the two promises that matter, which are that exactly one branch is on show and that the set cannot be emptied, and it renders nothing at all below two branches. It belongs in an agent turn's footer, never a user bubble's.",
+      "interaction": "each end button disables itself at its end of the run, and the position is read aloud as well as drawn."
+    }
+  ]
+}

package/manifest/components/button.json

@@ -71,6 +71,7 @@
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
+    "--cue-danger-fg",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",

package/manifest/components/canvas-split-body.json

@@ -0,0 +1,62 @@
+{
+  "name": "CanvasSplitBody",
+  "slug": "canvas-split-body",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The document's text, scrolling on its own, with a caret while it is still being\nwritten.",
+  "props": [
+    {
+      "name": "writing",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Trails a caret after the last line while the document is still being written."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"div\"> & {\n  /** Trails a caret after the last line while the document is still being written. */\n  writing?: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "The document's text, scrolling on its own, with a caret while it is still being written.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-body",
+  "mdUrl": "/docs/components/canvas-split-body.md",
+  "jsonUrl": "/r/components/canvas-split-body.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-document.json

@@ -0,0 +1,54 @@
+{
+  "name": "CanvasSplitDocument",
+  "slug": "canvas-split-document",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The document half of the split: the header, and the body under it.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "The document half of the split: the header, and the body under it.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-document",
+  "mdUrl": "/docs/components/canvas-split-document.md",
+  "jsonUrl": "/r/components/canvas-split-document.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-header.json

@@ -0,0 +1,83 @@
+{
+  "name": "CanvasSplitHeader",
+  "slug": "canvas-split-header",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "What the document is, which version this is, and whether it has been written down\nyet — with copy and close beside them.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Document name."
+    },
+    {
+      "name": "version",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which revision is on screen."
+    },
+    {
+      "name": "saved",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Swaps the status between editing and saved."
+    },
+    {
+      "name": "onClose",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the canvas is dismissed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"title\"> & {\n  /** Document name. */\n  title: string;\n  /** Which revision is on screen. */\n  version: number;\n  /** Swaps the status between editing and saved. */\n  saved: boolean;\n  /** Called from the copy action. Omit it and the control renders disabled. */\n  onCopy?: () => void;\n  /** Called when the canvas is dismissed. */\n  onClose?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "What the document is, which version this is, and whether it has been written down yet — with copy and close beside them.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-header",
+  "mdUrl": "/docs/components/canvas-split-header.md",
+  "jsonUrl": "/r/components/canvas-split-header.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-line.json

@@ -0,0 +1,62 @@
+{
+  "name": "CanvasSplitLine",
+  "slug": "canvas-split-line",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One line of the document, arriving as it is written. `heading` sets it apart.",
+  "props": [
+    {
+      "name": "heading",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Renders the line as a heading rather than body text."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"p\"> & {\n  /** Renders the line as a heading rather than body text. */\n  heading?: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "One line of the document, arriving as it is written.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-line",
+  "mdUrl": "/docs/components/canvas-split-line.md",
+  "jsonUrl": "/r/components/canvas-split-line.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-message.json

@@ -0,0 +1,62 @@
+{
+  "name": "CanvasSplitMessage",
+  "slug": "canvas-split-message",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One turn inside the rail — a filled bubble for the person, plain text for the model.",
+  "props": [
+    {
+      "name": "speaker",
+      "type": "\"user\" | \"assistant\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "User turns sit right in a bubble, assistant turns run flush left. Emitted as\ndata-speaker for styling from outside; it is deliberately not called role, so the\nARIA attribute stays yours to set."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"div\"> & {\n  /**\n   * User turns sit right in a bubble, assistant turns run flush left. Emitted as\n   * data-speaker for styling from outside; it is deliberately not called role, so the\n   * ARIA attribute stays yours to set.\n   */\n  speaker: \"user\" | \"assistant\";\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "One turn inside the rail — a filled bubble for the person, plain text for the model.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-message",
+  "mdUrl": "/docs/components/canvas-split-message.md",
+  "jsonUrl": "/r/components/canvas-split-message.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-thread.json

@@ -0,0 +1,54 @@
+{
+  "name": "CanvasSplitThread",
+  "slug": "canvas-split-thread",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The conversation, narrowed to a rail beside the document. It keeps scrolling while\nthe document is written, so the turn that asked for the artifact stays in view.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "The conversation, narrowed to a rail beside the document.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split-thread",
+  "mdUrl": "/docs/components/canvas-split-thread.md",
+  "jsonUrl": "/r/components/canvas-split-thread.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split.json

@@ -0,0 +1,60 @@
+{
+  "name": "CanvasSplit",
+  "slug": "canvas-split",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The thread steps aside and the document takes the room, still being written as you\nread.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "The thread steps aside and the document takes the room, still being written as you read.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import {\n  CanvasSplit,\n  CanvasSplitBody,\n  CanvasSplitDocument,\n  CanvasSplitHeader,\n  CanvasSplitLine,\n  CanvasSplitMessage,\n  CanvasSplitThread,\n} from \"@cueplusplus/ui/elements\";\n\n<CanvasSplit>\n  <CanvasSplitThread>\n    <CanvasSplitMessage speaker=\"user\">Draft the note</CanvasSplitMessage>\n  </CanvasSplitThread>\n  <CanvasSplitDocument>\n    <CanvasSplitHeader title=\"note.md\" version={3} saved onCopy={copy} />\n    <CanvasSplitBody writing>\n      <CanvasSplitLine heading>Migrating to 0.14</CanvasSplitLine>\n    </CanvasSplitBody>\n  </CanvasSplitDocument>\n</CanvasSplit>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/canvas-split",
+  "mdUrl": "/docs/components/canvas-split.md",
+  "jsonUrl": "/r/components/canvas-split.json",
+  "specimens": [
+    {
+      "title": "CanvasSplit",
+      "group": "elements-knowledge",
+      "components": [
+        "CanvasSplit",
+        "CanvasSplitThread",
+        "CanvasSplitMessage",
+        "CanvasSplitDocument",
+        "CanvasSplitHeader",
+        "CanvasSplitBody",
+        "CanvasSplitLine"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"still writing\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">\n          Write up the fixture decision for the front truss.\n        </CanvasSplitMessage>\n        <CanvasSplitMessage speaker=\"assistant\">\n          Drafting it now — spec, power and the load check.\n        </CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader title=\"Front truss — fixture spec\" version={3} saved={false} />\n        <CanvasSplitBody writing>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n          <CanvasSplitLine heading>Power</CanvasSplitLine>\n          <CanvasSplitLine>\n            1,180 W each brings the FOH leg to 29.1 A of the 32 A available.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n  <Specimen label=\"saved\" wide>\n    <CanvasSplit>\n      <CanvasSplitThread>\n        <CanvasSplitMessage speaker=\"user\">Looks right. Keep it.</CanvasSplitMessage>\n      </CanvasSplitThread>\n      <CanvasSplitDocument>\n        <CanvasSplitHeader\n          title=\"Front truss — fixture spec\"\n          version={3}\n          saved\n          onCopy={() => undefined}\n          onClose={() => undefined}\n        />\n        <CanvasSplitBody>\n          <CanvasSplitLine heading>Fixture</CanvasSplitLine>\n          <CanvasSplitLine>\n            Six Robe ESPRITEs on 3.2 m centres, 8.4 m trim, mode 1 at 8 channels each.\n          </CanvasSplitLine>\n        </CanvasSplitBody>\n      </CanvasSplitDocument>\n    </CanvasSplit>\n  </Specimen>\n</Specimens>",
+      "note": "The thread steps aside and the document takes the room. Seven parts: the split itself, a narrowed conversation rail, and a document half with its own header, body and lines — still being written while you read it, which is what the caret at the end of the body is for. On a narrow viewport the two halves stack instead of shrinking.",
+      "interaction": "copy and close are named buttons and disable themselves without a handler. `saved` is the only state the header animates, and it swaps a word for a check rather than moving anything."
+    }
+  ],
+  "todo": true
+}