@cueplusplus/ui 0.3.0 → 0.6.0

package/manifest/components/chat-panel.json

@@ -0,0 +1,57 @@
+{
+  "name": "ChatPanel",
+  "slug": "chat-panel",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The whole family working together: a message, a pause, a streamed reply.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "The whole family working together: a message, a pause, a streamed reply.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import {\n  ChatPanel,\n  ChatPanelComposer,\n  ChatPanelMessages,\n  ChatPanelTyping,\n  ChatPanelUserMessage,\n} from \"@cueplusplus/ui/elements\";\n\n<ChatPanel>\n  <ChatPanelMessages>\n    <ChatPanelUserMessage>Why did my draft disappear?</ChatPanelUserMessage>\n    <ChatPanelTyping />\n  </ChatPanelMessages>\n  <ChatPanelComposer placeholder=\"Message\" onSend={send} />\n</ChatPanel>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel",
+  "mdUrl": "/docs/components/chat-panel.md",
+  "jsonUrl": "/r/components/chat-panel.json",
+  "specimens": [
+    {
+      "title": "ChatPanel",
+      "group": "elements",
+      "components": [
+        "ChatPanel",
+        "ChatPanelMessages",
+        "ChatPanelUserMessage",
+        "ChatPanelAssistantMessage",
+        "ChatPanelTyping",
+        "ChatPanelComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"a turn\" wide>\n    <ChatPanel>\n      <ChatPanelMessages>\n        <ChatPanelUserMessage>\n          Patch the front truss on universe 3 and tell me what moved.\n        </ChatPanelUserMessage>\n        {replied ? (\n          <ChatPanelAssistantMessage>\n            6 fixtures on channels 1 to 48. Cue 1 holds at 3.0s.\n          </ChatPanelAssistantMessage>\n        ) : (\n          <ChatPanelTyping />\n        )}\n      </ChatPanelMessages>\n      <ChatPanelComposer\n        placeholder=\"Ask the rig\"\n        onSend={() => setReplied((was) => !was)}\n      />\n    </ChatPanel>\n  </Specimen>\n</Specimens>",
+      "note": "The six parts working together, which is what the whole family is for. The person's turn is a filled bubble on the trailing edge, the model's is plain text on the leading one, and the transcript is bottom-aligned so a short conversation sits on the composer rather than floating.",
+      "interaction": "the send control is the only live thing here; use it and the reply is replaced by the three-dot pause, then comes back."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/checkpoint-history.json

@@ -0,0 +1,80 @@
+{
+  "name": "CheckpointHistory",
+  "slug": "checkpoint-history",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Points you can fall back to, with what each one would give back.",
+  "props": [
+    {
+      "name": "checkpoints",
+      "type": "readonly Checkpoint[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Points in the run you can fall back to, oldest first."
+    },
+    {
+      "name": "currentId",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Where the run stands. Everything after it dims, since restoring would discard it."
+    },
+    {
+      "name": "onRestore",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the checkpoint to return to."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"checkpoints\" | \"currentId\" | \"onRestore\"\n> & {\n  /** Points in the run you can fall back to, oldest first. */\n  checkpoints: readonly Checkpoint[];\n  /** Where the run stands. Everything after it dims, since restoring would discard it. */\n  currentId: string;\n  /** Called with the checkpoint to return to. */\n  onRestore?: (id: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-stream",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-label"
+  ],
+  "summary": "Points you can fall back to, with what each one would give back.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CheckpointHistory } from \"@cueplusplus/ui/elements\";\n\n<CheckpointHistory checkpoints={checkpoints} currentId=\"3\" onRestore={restore} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/checkpoint-history",
+  "mdUrl": "/docs/components/checkpoint-history.md",
+  "jsonUrl": "/r/components/checkpoint-history.json",
+  "specimens": [
+    {
+      "title": "CheckpointHistory",
+      "group": "elements-agents",
+      "components": [
+        "CheckpointHistory"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"mid-run\" wide>\n    <CheckpointHistory\n      checkpoints={CHECKPOINTS}\n      currentId={checkpoint}\n      onRestore={setCheckpoint}\n    />\n  </Specimen>\n  <Specimen label=\"at the head, nothing to discard\" wide>\n    <CheckpointHistory checkpoints={CHECKPOINTS} currentId=\"c-plot\" />\n  </Specimen>\n</Specimens>",
+      "note": "Points the run can be put back to, oldest first, each with what a fallback would cost in files. Everything after the current point dims, because restoring would discard it — the list is the undo stack drawn as a place rather than a count.",
+      "interaction": "each row carries a labelled restore button (`Restore to …`), so the control is named even though it draws as a glyph."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/chip.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "A compact status/label pill: mono, uppercase, wide-tracked, one line tall.\n\n`tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)\nplus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always\nagree on what \"warn\" looks like.",
+  "description": "A compact status/label pill: mono, uppercase, wide-tracked, one line tall.\n\n`tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)\nplus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always\nagree on what \"warn\" looks like.\n\n`variant` sets how loudly it says it. `tinted` is the chip proper — a tone\ntint behind tone ink. `outline` drops the fill and keeps the voice, for a\nchip on an already-busy ground. `tag` drops both: a hairline rim, micro type\nand closed tracking, for the facts that sit *beside* a row's name — a kind, a\nlifecycle, a scope — where a row full of tinted chips would read as a row of\nbuttons. All three keep `h-chip`, so a mixed row still has one baseline.",
   "props": [
     {
       "name": "interactive",
@@ -30,14 +30,14 @@
     },
     {
       "name": "tone",
-      "type": "\"accent\" | \"danger\" | \"busy\" | \"neutral\" | \"ok\" | \"warn\" | \"info\"",
+      "type": "\"danger\" | \"accent\" | \"busy\" | \"neutral\" | \"ok\" | \"warn\" | \"info\"",
       "required": false,
       "defaultValue": "neutral",
       "description": ""
     },
     {
       "name": "variant",
-      "type": "\"outline\" | \"tinted\"",
+      "type": "\"outline\" | \"tinted\" | \"tag\"",
       "required": false,
       "defaultValue": "tinted",
       "description": ""
@@ -61,7 +61,8 @@
     ],
     "variant": [
       "tinted",
-      "outline"
+      "outline",
+      "tag"
     ],
     "interactive": [
       "true",
@@ -83,6 +84,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-hair-strong",
     "--cue-info",
     "--cue-ok",
     "--cue-radius-control",
@@ -90,13 +92,19 @@
     "--cue-space-3",
     "--cue-surface-2",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-warn"
   ],
-  "summary": "The status pill: tinted fill, hairline rim, full-strength text.",
+  "summary": "The status pill, at three volumes: tinted fill, bare outline, or a hairline tag.",
   "examples": [
+    {
+      "title": "A row's tags",
+      "code": "<Chip variant=\"tag\">mcp</Chip>\n<Chip tone=\"accent\" variant=\"tag\">beta</Chip>\n<Chip tone=\"danger\" variant=\"tag\">needs auth</Chip>",
+      "language": "tsx"
+    },
     {
       "title": "Usage",
-      "code": "<Chip tone=\"ok\">online</Chip>\n<Chip tone=\"accent\" variant=\"outline\" interactive onClick={toggle}>dimmer</Chip>",
+      "code": "<Chip tone=\"ok\">online</Chip>\n<Chip tone=\"accent\" variant=\"outline\" interactive onClick={toggle}>dimmer</Chip>\n<Chip variant=\"tag\">mcp</Chip>\n<Chip tone=\"danger\" variant=\"tag\">needs auth</Chip>",
       "language": "tsx"
     }
   ],
@@ -106,16 +114,20 @@
   "jsonUrl": "/r/components/chip.json",
   "whenToUse": [
     "A state, a tag or a short count sitting beside the thing it describes.",
-    "Filter pills, with `interactive` for the button semantics."
+    "Filter pills, with `interactive` for the button semantics.",
+    "`variant=\"tag\"` for the flat facts beside a row's name — a kind, a lifecycle, a scope, a permission. A list of them stays a list."
   ],
   "whenNotToUse": [
     "A single live state where a dot carries it. Use `StatusDot`.",
     "A message the user has to read and act on. Use `Toast` or `FieldError`.",
-    "Anything that runs something. Use `Button`."
+    "Anything that runs something. Use `Button`.",
+    "Tokens the user typed and can remove. That is `TagsInput`, which owns the editing and the keyboard."
   ],
   "commonMistakes": [
     "Writing a sentence in a chip. One or two words, or a count.",
-    "Picking a tone for decoration. Tones are the status vocabulary shared with `StatusDot`, `Meter` and `Toast`."
+    "Picking a tone for decoration. Tones are the status vocabulary shared with `StatusDot`, `Meter` and `Toast`.",
+    "Reaching for `tag` because the chip looked too big. It is the quiet reading, not the small one — the height is still `h-chip`, so a mixed row keeps one baseline.",
+    "Putting three tinted chips on every row of a list. Repeat a fill thirty times and the list reads as thirty buttons. That is what `tag` is for."
   ],
   "specimens": [
     {
@@ -124,9 +136,9 @@
       "components": [
         "Chip"
       ],
-      "code": "<Specimens>\n  {CHIP_TONES.map((tone) => (\n    <Specimen key={tone} label={tone}>\n      <Chip tone={tone}>{tone}</Chip>\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  {CHIP_TONES.map((tone) => (\n    <Specimen key={tone} label={`${tone} outline`}>\n      <Chip tone={tone} variant=\"outline\">\n        {tone}\n      </Chip>\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  <Specimen label=\"interactive\">\n    <Chip tone=\"accent\" interactive>\n      Universe 1\n    </Chip>\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Chip tone=\"accent\" interactive disabled>\n      Universe 9\n    </Chip>\n  </Specimen>\n</Specimens>",
-      "note": "The tinted-chip recipe: a tone tint at low alpha, tone ink, tone border. Seven tones, two variants.",
-      "interaction": "static by default; pass `interactive` and it takes a hover ground and a focus ring."
+      "code": "<Specimens>\n  {CHIP_TONES.map((tone) => (\n    <Specimen key={tone} label={tone}>\n      <Chip tone={tone}>{tone}</Chip>\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  {CHIP_TONES.map((tone) => (\n    <Specimen key={tone} label={`${tone} outline`}>\n      <Chip tone={tone} variant=\"outline\">\n        {tone}\n      </Chip>\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  {CHIP_TONES.map((tone) => (\n    <Specimen key={tone} label={`${tone} tag`}>\n      <Chip tone={tone} variant=\"tag\">\n        {tone}\n      </Chip>\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  <Specimen label=\"a row's tags\">\n    <span className=\"inline-flex items-center gap-(--cue-space-2)\">\n      <Chip variant=\"tag\">mcp</Chip>\n      <Chip tone=\"accent\" variant=\"tag\">\n        beta\n      </Chip>\n      <Chip tone=\"danger\" variant=\"tag\">\n        needs auth\n      </Chip>\n    </span>\n  </Specimen>\n</Specimens>\n<Specimens>\n  <Specimen label=\"interactive\">\n    <Chip tone=\"accent\" interactive>\n      Universe 1\n    </Chip>\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Chip tone=\"accent\" interactive disabled>\n      Universe 9\n    </Chip>\n  </Specimen>\n  <Specimen label=\"interactive tag\">\n    <Chip tone=\"accent\" variant=\"tag\" interactive>\n      beta only\n    </Chip>\n  </Specimen>\n</Specimens>",
+      "note": "The tinted-chip recipe: a tone tint at low alpha, tone ink, tone border. Seven tones, three variants — `tag` drops the fill and the type size for the facts that sit beside a row's name.",
+      "interaction": "static by default; pass `interactive` and it takes a hover ground and a focus ring. An interactive tag brightens its rim instead."
     }
   ]
 }

package/manifest/components/clamp.json

@@ -0,0 +1,102 @@
+{
+  "name": "Clamp",
+  "slug": "clamp",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Long content, cut to a height, dissolving at the cut, with a way back.\n\nThe truncation trio as one element. Everything a transcript truncates —\ncommand output, a pasted file, a reasoning trace, a quoted message — wants\nexactly these three things, and a family that leaves them to each component\ngets five slightly different cuts and one of them hard-coded to a colour that\nbreaks in light mode.\n\nThe fade is a **mask**, not an overlay: it fades the content rather than\npainting a gradient of the surface colour over it, so it needs no idea of\nwhat is behind it and cannot drift when the theme changes. The height and the\ndepth are published as custom properties on the root, so a console can retune\na clamp from CSS — and because the mask is expressed in terms of them, a\nheight overridden in a stylesheet moves the fade with it.\n\nThe reveal is the part this element does not copy exactly. The reference\nshows its `Show more` chip on hover only, which is unreachable for anyone\nwho is not holding a mouse; here the control is always in the DOM and always\nfocusable, and hover and focus only decide how loudly it is drawn. Once the\ncontent is open, `Show less` is drawn at full strength — a long expansion you\ncannot close without hunting for the control is a real defect.\n\nOpen state is a prop, like everything else in this family: a scripted replay\nof this component is a caller changing `open`.",
+  "props": [
+    {
+      "name": "height",
+      "type": "string | number",
+      "required": false,
+      "defaultValue": "250",
+      "description": "How tall the content may be before it is cut, as a number of pixels or any\nCSS length. Defaults to `250` — the reference's own default, with `60` the\nvalue it uses for a quoted user message.\n\nPublished as `--cue-elements-clamp-height` on the root, so a console can\nretune one clamp from a stylesheet without a prop."
+    },
+    {
+      "name": "fade",
+      "type": "number",
+      "required": false,
+      "defaultValue": "50",
+      "description": "How deep the dissolve at the cut is, in pixels. Defaults to `50`, the\nreference's most-used depth.\n\nFixed pixels rather than a fraction, deliberately: a percentage fade is a\ndifferent effect on a short row than on a long one. Published as\n`--cue-elements-clamp-fade`."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the content is showing in full."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "((open: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the reveal is used. Omit it and the clamp is a hard cut with a\nfade and no promise of more — which is the reference's own tool-result row,\nwhere the full text opens somewhere else entirely."
+    },
+    {
+      "name": "overflows",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Whether the content is taller than `height`, when the caller already knows.\nLeft out, the clamp measures itself and re-measures as the content and the\nbox change.\n\nThe measurement is the right default and the override is for the cases it\ncannot serve: a virtualised row that knows its own text, a replay frame\nthat must paint the same way on every mount, a server render."
+    },
+    {
+      "name": "labels",
+      "type": "Partial<ClampLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "The two words on the reveal. Defaults to {@link CLAMP_LABELS} — `Show more`\nand `Show less`, which is the reference's copy verbatim."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The content being clamped."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onToggle\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-elements-clamp-fade",
+    "--cue-elements-clamp-height",
+    "--cue-elements-clamp-mask",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-radius-control",
+    "--cue-text-ui"
+  ],
+  "summary": "Long content, cut to a height, dissolving at the cut, with a way back.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Clamp } from \"@cueplusplus/ui/elements\";\n\n<Clamp open={open} onOpenChange={setOpen}>\n  <pre>{output}</pre>\n</Clamp>\n// The reference's tool-result row: 60px of output, a 10px dissolve, and no\n// reveal at all — the full text opens in an editor tab instead.\n<Clamp height={60} fade={10} open={false} overflows onClick={openInEditor}>\n  {result}\n</Clamp>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/clamp",
+  "mdUrl": "/docs/components/clamp.md",
+  "jsonUrl": "/r/components/clamp.json",
+  "specimens": [
+    {
+      "title": "Clamp",
+      "group": "elements",
+      "components": [
+        "Clamp"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"clamped, with a way back\" wide>\n    <div className=\"w-full max-w-md\">\n      <Clamp\n        height={120}\n        fade={40}\n        open={shownInFull}\n        onOpenChange={setShownInFull}\n      >\n        <pre className=\"font-mono text-(length:--cue-text-ui) whitespace-pre-wrap text-fg-muted\">\n          {PATCH_REPORT}\n        </pre>\n      </Clamp>\n    </div>\n  </Specimen>\n  <Specimen label=\"a hard cut, and the full text opens elsewhere\" wide>\n    <div className=\"w-full max-w-md\">\n      <Clamp height={60} fade={10} open={false} overflows>\n        <pre className=\"font-mono text-(length:--cue-text-ui) whitespace-pre-wrap text-fg-muted\">\n          {PATCH_REPORT}\n        </pre>\n      </Clamp>\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "The truncation trio as one element: a height, a dissolve of a fixed number of pixels at the cut, and a way back. The fixed depth is the part worth copying — ten pixels of dissolve is the same cut over a two-line row and a forty-line one, which is why the reference's five different truncations read as one idea. The fade is a mask rather than a gradient of the surface colour, which is the bug the reference shipped: its diff variant hard-codes a dark grey and smears on a light theme. A mask fades the content itself, so it has no colour to get wrong in any theme, either mode, or inside the island.",
+      "interaction": "the reveal is always present and always focusable; hover and focus decide only how loudly it is drawn, and Show less is never dimmed at all. That is the one place this does not copy the reference, whose Show more chip appears on hover only and is unreachable for anyone not holding a pointer. The height and the fade are published as custom properties on the root, and the mask is written in terms of them, so a height overridden in a stylesheet moves the dissolve with it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/cli-tool-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "CliToolIcon",
+  "slug": "cli-tool-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A CLI tool in the registry: a thing that runs in a terminal.\n\nA window with a prompt in it, rather than a bare chevron. A chevron on its\nown is a disclosure everywhere else in this library, and a navigation row\nthat appeared to expand and then navigated instead is a worse failure than a\nslightly busier glyph at 10px.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "A CLI tool in the registry: a thing that runs in a terminal.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/cli-tool-icon",
+  "mdUrl": "/docs/components/cli-tool-icon.md",
+  "jsonUrl": "/r/components/cli-tool-icon.json",
+  "specimens": [
+    {
+      "title": "The container icon set",
+      "group": "icons",
+      "components": [
+        "CatalogueIcon",
+        "StackIcon",
+        "StacksMatrixIcon",
+        "AudienceIcon",
+        "ChannelReleasedIcon",
+        "ChannelBetaIcon",
+        "FolderIcon",
+        "McpServerIcon",
+        "CliToolIcon",
+        "SkillIcon"
+      ],
+      "code": "<Specimens>\n  {CONTAINERS.map(([label, name, Icon]) => (\n    <Specimen key={name} label={label}>\n      <Icon className=\"size-icon-md text-fg\" />\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  <Specimen label=\"icon-sm\">\n    <SkillIcon className=\"size-icon-sm text-fg\" />\n  </Specimen>\n  <Specimen label=\"icon-md\">\n    <SkillIcon className=\"size-icon-md text-fg\" />\n  </Specimen>\n  <Specimen label=\"inherited\">\n    <SkillIcon className=\"size-icon-md\" />\n  </Specimen>\n  <Specimen label=\"muted\">\n    <SkillIcon className=\"size-icon-md text-fg-muted\" />\n  </Specimen>\n  <Specimen label=\"accent\">\n    <SkillIcon className=\"size-icon-md text-accent\" />\n  </Specimen>\n  <Specimen label=\"danger\">\n    <SkillIcon className=\"size-icon-md text-danger\" />\n  </Specimen>\n</Specimens>\n<Specimens>\n  <Specimen label=\"in a row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      <ChannelReleasedIcon className=\"size-icon-md shrink-0\" />\n      Our skills · released\n    </span>\n  </Specimen>\n  <Specimen label=\"current row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg\">\n      <ChannelBetaIcon className=\"size-icon-md shrink-0\" />\n      Our skills · beta\n    </span>\n  </Specimen>\n</Specimens>",
+      "note": "One grid and one weight across all ten, at size-icon-md — the size a navigation row draws them at. Each is a plain <svg> that takes every SVG prop.",
+      "interaction": "none. They are decorative by default: aria-hidden, announced by nothing, because the row they mark already carries its name."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/code-diff.json

@@ -0,0 +1,87 @@
+{
+  "name": "CodeDiff",
+  "slug": "code-diff",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A unified diff with tinted additions and removals, sized for chat.",
+  "props": [
+    {
+      "name": "filename",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "File path shown in the diff header."
+    },
+    {
+      "name": "additions",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Addition count rendered in green next to the filename."
+    },
+    {
+      "name": "deletions",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Deletion count rendered in red next to the filename."
+    },
+    {
+      "name": "lines",
+      "type": "readonly DiffLine[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Unified diff lines with context, added, or removed kind."
+    },
+    {
+      "name": "cycle",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Identity key that remounts the body so entrance animation can replay."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"filename\" | \"additions\" | \"deletions\" | \"lines\" | \"cycle\"\n> & {\n  /** File path shown in the diff header. */\n  filename: string;\n  /** Addition count rendered in green next to the filename. */\n  additions: number;\n  /** Deletion count rendered in red next to the filename. */\n  deletions: number;\n  /** Unified diff lines with context, added, or removed kind. */\n  lines: readonly DiffLine[];\n  /** Identity key that remounts the body so entrance animation can replay. */\n  cycle: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-ui"
+  ],
+  "summary": "A unified diff with tinted additions and removals, sized for chat.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CodeDiff } from \"@cueplusplus/ui/elements\";\n\n<CodeDiff\n  filename=\"thread.tsx\"\n  additions={2}\n  deletions={1}\n  lines={[\n    { kind: \"removed\", text: \"const x = 1\" },\n    { kind: \"added\", text: \"const x = 2\" },\n  ]}\n  cycle={0}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/code-diff",
+  "mdUrl": "/docs/components/code-diff.md",
+  "jsonUrl": "/r/components/code-diff.json",
+  "specimens": [
+    {
+      "title": "CodeDiff",
+      "group": "elements",
+      "components": [
+        "CodeDiff"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"+3 −1\" wide>\n    <CodeDiff\n      filename=\"show/main-stage.cue\"\n      additions={3}\n      deletions={1}\n      lines={CUE_DIFF}\n      cycle={0}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A unified diff sized for a chat column: added and removed rows carry both a gutter mark and a tint, so the diff survives being read in greyscale. Rows animate in on `cycle`, which is an identity rather than a trigger.",
+      "interaction": "none. Scrolls sideways rather than wrapping, because a wrapped diff line is a lie about the file."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/code-runner.json

@@ -0,0 +1,97 @@
+{
+  "name": "CodeRunner",
+  "slug": "code-runner",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A snippet with a run button, and the output it produced attached below it.",
+  "props": [
+    {
+      "name": "language",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Language label above the snippet."
+    },
+    {
+      "name": "code",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The snippet. Rendered as plain mono; wrap it yourself for highlighting."
+    },
+    {
+      "name": "state",
+      "type": "\"idle\" | \"ok\" | \"running\" | \"error\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "idle hides the output pane entirely; error tints the output red."
+    },
+    {
+      "name": "output",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Output lines, revealed in sequence."
+    },
+    {
+      "name": "durationMs",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "How long the run took, printed once it settles."
+    },
+    {
+      "name": "onRun",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the run control is pressed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"language\" | \"code\" | \"state\" | \"output\" | \"durationMs\" | \"onRun\"\n> & {\n  /** Language label above the snippet. */\n  language: string;\n  /** The snippet. Rendered as plain mono; wrap it yourself for highlighting. */\n  code: string;\n  /** idle hides the output pane entirely; error tints the output red. */\n  state: RunState;\n  /** Output lines, revealed in sequence. */\n  output: readonly string[];\n  /** How long the run took, printed once it settles. */\n  durationMs?: number;\n  /** Called when the run control is pressed. */\n  onRun?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-overlay",
+    "--cue-surface-3",
+    "--cue-text-ui"
+  ],
+  "summary": "A snippet with a run button, and the output it produced attached below it.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CodeRunner } from \"@cueplusplus/ui/elements\";\n\n<CodeRunner\n  language=\"typescript\"\n  code={code}\n  state=\"ok\"\n  output={[\"1\"]}\n  durationMs={38}\n  onRun={run}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/code-runner",
+  "mdUrl": "/docs/components/code-runner.md",
+  "jsonUrl": "/r/components/code-runner.json",
+  "specimens": [
+    {
+      "title": "CodeRunner",
+      "group": "elements-agents",
+      "components": [
+        "CodeRunner"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"idle\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state={run}\n      output={OUTPUT}\n      onRun={() => setRun(\"ok\")}\n    />\n  </Specimen>\n  <Specimen label=\"running\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state=\"running\"\n      output={OUTPUT.slice(0, 2)}\n    />\n  </Specimen>\n  <Specimen label=\"finished\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state=\"ok\"\n      output={OUTPUT}\n      durationMs={412}\n    />\n  </Specimen>\n  <Specimen label=\"failed\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 4 --fixture esprite --count 6\"}\n      state=\"error\"\n      output={[\"universe 4 is not enabled on this show file\", \"exit 1\"]}\n      durationMs={88}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A snippet with a run button and the output it produced attached underneath, rather than in a console somewhere else. `idle` hides the output pane entirely — an empty black box is not a result — `error` tints what came back in the danger hue, and the duration prints once it settles.",
+      "interaction": "the run control is a labelled icon button (`Run this snippet`); while running it spins and the output arrives a line at a time."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/color-field.json

@@ -34,12 +34,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-1",

package/manifest/components/color-picker.json

@@ -130,12 +130,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-2",

package/manifest/components/combobox.json

@@ -144,6 +144,7 @@
     "--cue-accent-soft",
     "--cue-border",
     "--cue-border-overlay",
+    "--cue-border-strong",
     "--cue-chip-h",
     "--cue-control-lg",
     "--cue-control-md",
@@ -152,6 +153,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",