@cueplusplus/ui 0.3.0 → 0.5.0

package/manifest/components/settings-panel.json

@@ -0,0 +1,118 @@
+{
+  "name": "SettingsPanel",
+  "slug": "settings-panel",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "props": [
+    {
+      "name": "model",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Selected model."
+    },
+    {
+      "name": "models",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Models offered in the segmented control. Keep it to a few; more wants the model\npicker."
+    },
+    {
+      "name": "systemPrompt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current system prompt."
+    },
+    {
+      "name": "temperature",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current temperature, 0 to 2."
+    },
+    {
+      "name": "toggles",
+      "type": "readonly SettingToggle[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Capability switches with a line each explaining what they turn on."
+    },
+    {
+      "name": "onModelChange",
+      "type": "((model: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the model changes."
+    },
+    {
+      "name": "onSystemPromptChange",
+      "type": "((prompt: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the prompt is edited."
+    },
+    {
+      "name": "onTemperatureChange",
+      "type": "((temperature: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the slider moves."
+    },
+    {
+      "name": "onToggle",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the switched capability's key."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"model\"\n  | \"models\"\n  | \"systemPrompt\"\n  | \"temperature\"\n  | \"toggles\"\n  | \"onModelChange\"\n  | \"onSystemPromptChange\"\n  | \"onTemperatureChange\"\n  | \"onToggle\"\n> & {\n  /** Selected model. */\n  model: string;\n  /**\n   * Models offered in the segmented control. Keep it to a few; more wants the model\n   * picker.\n   */\n  models: readonly string[];\n  /** Current system prompt. */\n  systemPrompt: string;\n  /** Current temperature, 0 to 2. */\n  temperature: number;\n  /** Capability switches with a line each explaining what they turn on. */\n  toggles: readonly SettingToggle[];\n  /** Called when the model changes. */\n  onModelChange?: (model: string) => void;\n  /** Called as the prompt is edited. */\n  onSystemPromptChange?: (prompt: string) => void;\n  /** Called as the slider moves. */\n  onTemperatureChange?: (temperature: number) => void;\n  /** Called with the switched capability's key. */\n  onToggle?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SettingsPanel } from \"@cueplusplus/ui/elements\";\n\n<SettingsPanel\n  model={model}\n  models={models}\n  systemPrompt={prompt}\n  temperature={0.7}\n  toggles={toggles}\n  onModelChange={setModel}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/settings-panel",
+  "mdUrl": "/docs/components/settings-panel.md",
+  "jsonUrl": "/r/components/settings-panel.json",
+  "specimens": [
+    {
+      "title": "SettingsPanel",
+      "group": "elements-composer",
+      "components": [
+        "SettingsPanel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"live\" wide>\n    <SettingsPanel\n      model={settingsModel}\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt={prompt}\n      temperature={temperature}\n      toggles={toggles}\n      onModelChange={setSettingsModel}\n      onSystemPromptChange={setPrompt}\n      onTemperatureChange={setTemperature}\n      onToggle={(key) =>\n        setToggles((current) =>\n          current.map((item) => (item.key === key ? { ...item, on: !item.on } : item)),\n        )\n      }\n    />\n  </Specimen>\n  <Specimen label=\"locked down for a show\" wide>\n    <SettingsPanel\n      model=\"Haiku 5\"\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt=\"Read-only. Answer questions about the rig; change nothing.\"\n      temperature={0}\n      toggles={TOGGLES.map((item) => ({ ...item, on: false }))}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Model, system prompt, temperature, and what the assistant is allowed to do — the four settings a chat product actually has, on one card. The capability switches each carry a line saying what turning them on does, which is the difference between a settings page and a list of nouns. The panel holds none of it: every value here is the caller's.",
+      "interaction": "the segmented model control is a row of `aria-pressed` buttons, and both the prompt textarea and the temperature slider carry their own labels, so nothing on the card depends on the mono caption above it being read."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/shared-conversation.json

@@ -0,0 +1,89 @@
+{
+  "name": "SharedConversation",
+  "slug": "shared-conversation",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A read-only transcript someone sent you, with a way to pick it up yourself.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Name of the shared thread."
+    },
+    {
+      "name": "sharedBy",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Who shared it."
+    },
+    {
+      "name": "sharedAt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted share time."
+    },
+    {
+      "name": "turns",
+      "type": "readonly SharedTurn[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The transcript, read only."
+    },
+    {
+      "name": "onContinue",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to fork the transcript into the reader's own thread."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"sharedBy\" | \"sharedAt\" | \"turns\" | \"onContinue\"\n> & {\n  /** Name of the shared thread. */\n  title: string;\n  /** Who shared it. */\n  sharedBy: string;\n  /** Pre-formatted share time. */\n  sharedAt: string;\n  /** The transcript, read only. */\n  turns: readonly SharedTurn[];\n  /** Called to fork the transcript into the reader's own thread. */\n  onContinue?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A read-only transcript someone sent you, with a way to pick it up yourself.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SharedConversation } from \"@cueplusplus/ui/elements\";\n\n<SharedConversation\n  title=\"Draft restore across threads\"\n  sharedBy=\"harry\"\n  sharedAt=\"2 days ago\"\n  turns={turns}\n  onContinue={fork}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/shared-conversation",
+  "mdUrl": "/docs/components/shared-conversation.md",
+  "jsonUrl": "/r/components/shared-conversation.json",
+  "specimens": [
+    {
+      "title": "SharedConversation",
+      "group": "elements-composer",
+      "components": [
+        "SharedConversation"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"with a way in\" wide>\n    <SharedConversation\n      title=\"Why the desk refused universe 3\"\n      sharedBy=\"priya\"\n      sharedAt=\"2 days ago\"\n      turns={SHARED}\n      onContinue={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"read only\" wide>\n    <SharedConversation\n      title=\"Why the desk refused universe 3\"\n      sharedBy=\"priya\"\n      sharedAt=\"2 days ago\"\n      turns={SHARED.slice(0, 2)}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A read-only transcript somebody sent you, with the one action a reader ever wants: pick it up yourself. The header says who shared it and when, because a published thread with no attribution is a screenshot. Turns render verbatim — this is somebody else's conversation, and it is not the place to start interpreting markdown.",
+      "interaction": "continuing forks the transcript into the reader's own thread rather than joining the original, which is why the action is offered and not implied by clicking a turn."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/shimmer-label.json

@@ -0,0 +1,59 @@
+{
+  "name": "ShimmerLabel",
+  "slug": "shimmer-label",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A label that sweeps while something is still happening.\n\nThe sweep is `.cue-elements-shimmer`, declared with its keyframes in\n`@cueplusplus/ui/elements.css`; without that stylesheet the label simply\nsits still, which is also what it does under `prefers-reduced-motion`.",
+  "props": [
+    {
+      "name": "active",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether the sweep is running. Defaults to `true`."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"span\"> & {\n  /** Whether the sweep is running. Defaults to `true`. */\n  active?: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-stream",
+    "--cue-sunken",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-label"
+  ],
+  "summary": "A label that sweeps while something is still happening.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/shimmer-label",
+  "mdUrl": "/docs/components/shimmer-label.md",
+  "jsonUrl": "/r/components/shimmer-label.json",
+  "specimens": [
+    {
+      "title": "ShimmerLabel",
+      "group": "elements",
+      "components": [
+        "ShimmerLabel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"active\">\n    <ShimmerLabel>Patching universe 3</ShimmerLabel>\n  </Specimen>\n  <Specimen label=\"resting\">\n    <ShimmerLabel active={false}>Patched universe 3</ShimmerLabel>\n  </Specimen>\n</Specimens>",
+      "note": "A band of full-strength ink travelling through a muted label, clipped to the glyphs. It is the family's one ambient animation and it means exactly one thing: this is happening now. A reader who asked for less motion gets the muted label and no sweep at all.",
+      "interaction": "none. It is text, and it stays selectable text."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/skill-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "SkillIcon",
+  "slug": "skill-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A skill: the thing every other container in this set holds.\n\nOne mark, and a spark rather than a document, because what is being filed is\na capability. The file it happens to be written in is an implementation\ndetail of how it travels, and a page glyph would have made the catalogue look\nlike a folder of documents rather than a list of things an agent can now do.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "A skill: the thing every other container in this set holds.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/skill-icon",
+  "mdUrl": "/docs/components/skill-icon.md",
+  "jsonUrl": "/r/components/skill-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/sources.json

@@ -0,0 +1,83 @@
+{
+  "name": "Sources",
+  "slug": "sources",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Citations collapsed into a pill, expanding into scannable source cards.",
+  "props": [
+    {
+      "name": "sources",
+      "type": "readonly Source[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Citation cards revealed when the sources pill expands."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the source list is expanded under the pill."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the user expands or collapses the sources."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes merged onto the root."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "Citations collapsed into a pill, expanding into scannable source cards.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Sources } from \"@cueplusplus/ui/elements\";\n\n<Sources\n  sources={[{ domain: \"docs.example.com\", title: \"Composer guide\" }]}\n  open\n  onOpenChange={setOpen}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/sources",
+  "mdUrl": "/docs/components/sources.md",
+  "jsonUrl": "/r/components/sources.json",
+  "specimens": [
+    {
+      "title": "Sources",
+      "group": "elements-knowledge",
+      "components": [
+        "Sources"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"open\" wide>\n    <Sources sources={SOURCES} open={sourcesOpen} onOpenChange={setSourcesOpen} />\n  </Specimen>\n  <Specimen label=\"collapsed\" wide>\n    <Sources sources={SOURCES} open={false} onOpenChange={() => undefined} />\n  </Specimen>\n</Specimens>",
+      "note": "Citations folded into a pill until somebody wants them. Collapsed it is a count — four sources, no argument; open it is a scannable grid of cards, one per site, each lifting a pixel under the pointer. The count is the whole affordance: it says provenance exists without spending a paragraph on it.",
+      "interaction": "the pill is the trigger and takes cue's focus ring; the chevron turns with the panel, which animates its own height through Base UI rather than a max-height guess."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/speaker-identity.json

@@ -0,0 +1,61 @@
+{
+  "name": "SpeakerIdentity",
+  "slug": "speaker-identity",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Who is talking, once a thread holds more than a user and one model.",
+  "props": [
+    {
+      "name": "turns",
+      "type": "readonly SpeakerTurn[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Turns in order, each naming who produced it."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"turns\"> & {\n  /** Turns in order, each naming who produced it. */\n  turns: readonly SpeakerTurn[];\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-surface",
+    "--cue-stream",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "Who is talking, once a thread holds more than a user and one model.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SpeakerIdentity } from \"@cueplusplus/ui/elements\";\n\n<SpeakerIdentity turns={turns} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/speaker-identity",
+  "mdUrl": "/docs/components/speaker-identity.md",
+  "jsonUrl": "/r/components/speaker-identity.json",
+  "specimens": [
+    {
+      "title": "SpeakerIdentity",
+      "group": "elements-composer",
+      "components": [
+        "SpeakerIdentity"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"four voices\" wide>\n    <SpeakerIdentity turns={SPEAKERS} />\n  </Specimen>\n  <Specimen label=\"just the two of you\" wide>\n    <SpeakerIdentity turns={SPEAKERS.slice(0, 2)} />\n  </Specimen>\n</Specimens>",
+      "note": "Who is talking, once a thread holds more than a user and one model. Four kinds — you, the agent, a subagent it delegated to, and a tool that answered — with the subagent's badge rounded so a delegated turn reads as delegated at a glance. `detail` is the second fact the name needs: which model spoke, or how long the tool took.",
+      "interaction": "none. It is a transcript, not a control; the badges are the only thing distinguishing four voices that would otherwise be four paragraphs."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/spec-sheet.json

@@ -0,0 +1,80 @@
+{
+  "name": "SpecSheet",
+  "slug": "spec-sheet",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The most common structured answer after a table: one object, labeled.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the sheet describes."
+    },
+    {
+      "name": "subtitle",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Secondary identifier: a model id, a SKU, a version."
+    },
+    {
+      "name": "rows",
+      "type": "readonly SpecRow[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Label and value pairs. Values are pre-formatted and right-aligned on tabular figures."
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many rows have landed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"subtitle\" | \"rows\" | \"visibleCount\"\n> & {\n  /** What the sheet describes. */\n  title: string;\n  /** Secondary identifier: a model id, a SKU, a version. */\n  subtitle?: string;\n  /** Label and value pairs. Values are pre-formatted and right-aligned on tabular figures. */\n  rows: readonly SpecRow[];\n  /** How many rows have landed. */\n  visibleCount: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "The most common structured answer after a table: one object, labeled.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SpecSheet } from \"@cueplusplus/ui/elements\";\n\n<SpecSheet title=\"Opus 5\" subtitle=\"claude-opus-5\" rows={rows} visibleCount={6} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/spec-sheet",
+  "mdUrl": "/docs/components/spec-sheet.md",
+  "jsonUrl": "/r/components/spec-sheet.json",
+  "specimens": [
+    {
+      "title": "SpecSheet",
+      "group": "elements-knowledge",
+      "components": [
+        "SpecSheet"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"the whole sheet\" wide>\n    <SpecSheet\n      title=\"Robe ESPRITE\"\n      subtitle=\"as configured for the front truss\"\n      rows={SPEC}\n      visibleCount={SPEC.length}\n    />\n  </Specimen>\n  <Specimen label=\"arriving\" wide>\n    <SpecSheet title=\"Robe ESPRITE\" rows={SPEC} visibleCount={3} />\n  </Specimen>\n</Specimens>",
+      "note": "One object, labelled — the commonest structured answer after a table. Labels sit in mono on the leading edge and values in tabular figures on the trailing one, so a column of numbers lines up even though nothing here is a table. `emphasis` promotes the one row that answers the question.",
+      "interaction": "none. `visibleCount` is what makes it arrive a row at a time instead of appearing whole."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/stack-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "StackIcon",
+  "slug": "stack-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One person's stack: the set of things they have actually installed.\n\nPlates seen edge-on — the layers idiom — because a stack is an accumulation\nand not a container: things go into it one at a time and the order they went\nin is part of what it is.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "One person's stack: the set of things they have actually installed.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/stack-icon",
+  "mdUrl": "/docs/components/stack-icon.md",
+  "jsonUrl": "/r/components/stack-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/stacks-matrix-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "StacksMatrixIcon",
+  "slug": "stacks-matrix-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "Every stack at once, one column each: who has what, read across.\n\nA table rather than more plates. The head rule and the name column are what\nmake it a matrix instead of a grid — the question it answers is \"which of\nthese does that person not have\", and that is a question with two axes.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "Every stack at once, one column each: who has what, read across.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/stacks-matrix-icon",
+  "mdUrl": "/docs/components/stacks-matrix-icon.md",
+  "jsonUrl": "/r/components/stacks-matrix-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
+}