@cueplusplus/ui 0.13.0

package/manifest/components/button-group.json

@@ -0,0 +1,91 @@
+{
+  "name": "ButtonGroup",
+  "slug": "button-group",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Several related actions drawn as one control.\n\nPurely presentational: it owns no state and imposes no roving focus, because\nits members are *actions*, each independently reachable by Tab. When the\nmembers represent a **choice** rather than actions, use {@link ToggleGroup }\n(several or none) or `SegmentedControl` (exactly one) — those carry the\npressed-state ARIA a group of plain buttons must not fake.\n\nThe children keep their own variants, so a `secondary`/`primary` pair reads as\n\"and here is the one you probably want\" without any extra API.",
+  "props": [
+    {
+      "name": "orientation",
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "horizontal",
+      "description": "Which way the children run. Defaults to `\"horizontal\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "horizontal",
+          "vertical"
+        ]
+      }
+    },
+    {
+      "name": "attached",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Join the children into one control (shared rims, outer corners only).\nDefaults to `true`; pass `false` for a merely-adjacent row of buttons that\nshould still be announced as one group.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the cluster. A group of buttons with no name is a group\nof buttons; with one it is \"Blend mode\".",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The buttons — {@link Button }, {@link IconButton } or anything button-shaped.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-space-2"
+  ],
+  "summary": "Several related actions drawn as one control.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ButtonGroup aria-label=\"Blend mode\">\n  <Button>HTP</Button>\n  <Button variant=\"primary\">LTP</Button>\n</ButtonGroup>\n<ButtonGroup aria-label=\"Zoom\" orientation=\"vertical\">\n  <IconButton aria-label=\"Zoom in\" icon={Plus} variant=\"outline\" />\n  <IconButton aria-label=\"Zoom out\" icon={Minus} variant=\"outline\" />\n</ButtonGroup>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/button-group",
+  "mdUrl": "/docs/components/button-group.md",
+  "jsonUrl": "/r/components/button-group.json",
+  "specimens": [
+    {
+      "title": "ButtonGroup",
+      "group": "forms",
+      "components": [
+        "ButtonGroup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"attached\">\n    <ButtonGroup>\n      <Button>Patch</Button>\n      <Button>Unpatch</Button>\n      <Button>Swap</Button>\n    </ButtonGroup>\n  </Specimen>\n  <Specimen label=\"spaced\">\n    <ButtonGroup attached={false}>\n      <Button>Patch</Button>\n      <Button variant=\"primary\">Apply</Button>\n    </ButtonGroup>\n  </Specimen>\n  <Specimen label=\"vertical\">\n    <ButtonGroup orientation=\"vertical\">\n      <Button>Up</Button>\n      <Button>Down</Button>\n    </ButtonGroup>\n  </Specimen>\n</Specimens>",
+      "note": "Buttons welded into one control, horizontally or vertically.",
+      "interaction": "each button keeps its own focus ring; only the outer corners are rounded."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/button.json

@@ -0,0 +1,163 @@
+{
+  "name": "Button",
+  "slug": "button",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The system's primary action control.\n\nA real `<button>` by default, restyled entirely from tokens: height comes\nfrom the density control ladder, colour from the theme's accent/surface ramp.\nThe focus ring is an `outline`, never a `box-shadow`, so it survives inside\n`overflow: hidden` panels.",
+  "props": [
+    {
+      "name": "render",
+      "type": "RenderProp<Record<string, unknown>>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace the rendered element (Base UI render prop). Accepts an element —\n`render={<a href=\"/x\" />}` — or a function returning one. When set, the\ndefault `type=\"button\"` is dropped so non-button elements stay valid.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "icon",
+      "type": "ElementType<any, keyof IntrinsicElements>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Optional leading icon component (e.g. a lucide icon). Rendered\n`aria-hidden` and sized to the density icon token, so it tracks the density\nlevel without the caller passing a pixel size.",
+      "control": {
+        "kind": "opaque",
+        "fixture": "icon.play"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The label. A button with no children and no other accessible name is a\ncontrol a screen reader announces as nothing.\n\nDeclared explicitly, although `React.ComponentPropsWithoutRef<\"button\">`\nalready carries it, for the reason `Card.Header` and `Bento.Tile` declare\ntheirs: docgen documents a prop only where the library *declares* it, so\nwithout this line the manifest files no `children` for the system's most\nused control — the props table omits it, and a propSet cannot name it,\nwhich is how `/play/button` came to preview an unlabelled `<button>`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "variant",
+      "type": "\"danger\" | \"ghost\" | \"secondary\" | \"primary\" | \"outline\" | \"danger-outline\"",
+      "required": false,
+      "defaultValue": "secondary",
+      "description": "",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "primary",
+          "secondary",
+          "ghost",
+          "outline",
+          "danger",
+          "danger-outline"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"button\">",
+    "VariantProps<typeof buttonVariants>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {
+    "variant": [
+      "primary",
+      "secondary",
+      "ghost",
+      "outline",
+      "danger",
+      "danger-outline"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  "defaultVariants": {
+    "variant": "secondary",
+    "size": "md"
+  },
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-danger-fg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-space-6",
+    "--cue-surface-2",
+    "--cue-text-emphasis",
+    "--cue-text-ui"
+  ],
+  "summary": "The action control: six variants across three density-sized heights.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Button variant=\"primary\" size=\"sm\" icon={Play}>Run cue</Button>\n// Compose with a router link instead of a <button>:\n<Button render={<Link href=\"/patch\" />}>Patch</Button>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/button",
+  "mdUrl": "/docs/components/button.md",
+  "jsonUrl": "/r/components/button.json",
+  "whenToUse": [
+    "An action that happens on this page: submit, run, open a dialog.",
+    "Something that must look like a button but render as something else. Pass `render={<Link href=\"/patch\" />}`."
+  ],
+  "whenNotToUse": [
+    "Navigation that should behave like a link (middle-click, copy address). Use `Link`.",
+    "An icon-only control. Use `IconButton`, which requires the `aria-label` a bare icon needs.",
+    "A destructive action that should be confirmed where it stands. Use `TwoStepButton`."
+  ],
+  "commonMistakes": [
+    "Reaching for `variant=\"primary\"` on every button. One primary per view; `secondary` is the default for a reason.",
+    "Styling a Base UI trigger directly instead of passing `render={<Button />}`, which drops the variant classes into a tailwind-merge tie-break.",
+    "Fixing the height with `h-8 px-3` instead of `size`, which stops tracking density."
+  ],
+  "specimens": [
+    {
+      "title": "Button",
+      "group": "primitives",
+      "components": [
+        "Button"
+      ],
+      "code": "<Specimens>\n  {BUTTON_VARIANTS.map((variant) => (\n    <Specimen key={variant} label={variant}>\n      <Button variant={variant}>Go</Button>\n    </Specimen>\n  ))}\n  <Specimen label=\"disabled\">\n    <Button disabled>Go</Button>\n  </Specimen>\n  <Specimen label=\"with icon\">\n    <Button variant=\"primary\" icon={Play}>\n      Go\n    </Button>\n  </Specimen>\n  <Specimen label=\"loading\">\n    <Button disabled>\n      <Spinner size=\"sm\" /> Patching\n    </Button>\n  </Specimen>\n</Specimens>\n<Specimens>\n  {SIZES.map((size) => (\n    <Specimen key={size} label={`size ${size}`}>\n      <Button size={size}>Go</Button>\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "Six variants, three sizes. The accent ink is theme-controlled, so `primary` is never a hardcoded white on blue.",
+      "interaction": "hover darkens the fill (or tints the ground, for the quiet variants); keyboard focus draws a 2px accent ring outside the border, so the border-colour convention and the ring never fight."
+    }
+  ]
+}

package/manifest/components/calendar.json

@@ -0,0 +1,65 @@
+{
+  "name": "Calendar",
+  "slug": "calendar",
+  "group": "date",
+  "importPath": "@cueplusplus/ui/date",
+  "peerDependencies": [
+    "react-day-picker"
+  ],
+  "clientOnly": true,
+  "description": "A month grid, on react-day-picker v10.\n\nSelection modes, keyboard navigation, the ARIA grid wiring and the date maths\n(date-fns under the hood) are the library's; this layer supplies the token\nskin and nothing else, so upgrading the library never means re-deriving\nbehaviour. Every `classNames` slot the caller passes is merged *over* the\nskin rather than replacing it.\n\n`react-day-picker` and `date-fns` are **optional peers**: import this from\n`@cueplusplus/ui/date`, never from the core barrel.",
+  "props": [],
+  "typeReferences": [
+    "DayPickerProps"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-3",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "A month grid, on react-day-picker v10.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Calendar mode=\"single\" selected={date} onSelect={setDate} />\n<Calendar mode=\"range\" numberOfMonths={2} selected={range} onSelect={setRange} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/calendar",
+  "mdUrl": "/docs/components/calendar.md",
+  "jsonUrl": "/r/components/calendar.json",
+  "specimens": [
+    {
+      "title": "Calendar",
+      "group": "date",
+      "components": [
+        "Calendar"
+      ],
+      "code": "<div className=\"flex flex-wrap gap-(--cue-space-6)\">\n  <Specimen label=\"single\">\n    <Calendar\n      mode=\"single\"\n      month={TODAY}\n      selected={day}\n      onSelect={setDay}\n      aria-label=\"Go-live date\"\n    />\n  </Specimen>\n  <Specimen label=\"range\">\n    <Calendar\n      mode=\"range\"\n      month={TODAY}\n      selected={range}\n      onSelect={setRange}\n      aria-label=\"Run of the show\"\n    />\n  </Specimen>\n  <Specimen label=\"with disabled days\">\n    <Calendar\n      mode=\"single\"\n      month={TODAY}\n      disabled={{ dayOfWeek: [0, 6] }}\n      aria-label=\"Weekdays only\"\n    />\n  </Specimen>\n</div>",
+      "note": "react-day-picker's month grid, restyled from tokens. Speaks plain `Date`, because that is what a show file holds.",
+      "interaction": "arrow keys walk the grid, Page Up and Page Down change month; the selected day is accent-soft, today is ringed."
+    }
+  ],
+  "todo": true
+}

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

@@ -0,0 +1,66 @@
+{
+  "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.",
+      "control": {
+        "kind": "boolean"
+      }
+    }
+  ],
+  "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-leading-ui",
+    "--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,55 @@
+{
+  "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-leading-ui",
+    "--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,97 @@
+{
+  "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.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "version",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which revision is on screen.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "saved",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Swaps the status between editing and saved.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onClose",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the canvas is dismissed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "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-leading-ui",
+    "--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,66 @@
+{
+  "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.",
+      "control": {
+        "kind": "boolean"
+      }
+    }
+  ],
+  "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-leading-ui",
+    "--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
+}