@cueplusplus/ui 0.3.0 → 0.5.0

package/manifest/components/catalogue-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "CatalogueIcon",
+  "slug": "catalogue-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The catalogue itself: everything there is, before anything has been narrowed.\n\nOne tile repeated over a 2×2 rather than a stack of rows, because the row\nthis marks is the one that *undoes* a filter — \"all of it\" is a shape, and a\nlist glyph would have promised an ordering the row does not have.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "The catalogue itself: everything there is, before anything has been narrowed.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/catalogue-icon",
+  "mdUrl": "/docs/components/catalogue-icon.md",
+  "jsonUrl": "/r/components/catalogue-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/channel-beta-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "ChannelBetaIcon",
+  "slug": "channel-beta-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The beta channel: the same things, one merge earlier.\n\nThe released ring at half fill. Half rather than empty because a beta is not\nan absence of a release — it is a release that has not finished happening,\nand an empty ring would have read as \"nothing here yet\".",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "The beta channel: the same things, one merge earlier.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/channel-beta-icon",
+  "mdUrl": "/docs/components/channel-beta-icon.md",
+  "jsonUrl": "/r/components/channel-beta-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/channel-released-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "ChannelReleasedIcon",
+  "slug": "channel-released-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The released channel: what a colleague gets when they install without asking\nfor anything in particular.\n\nA ring filled solid. Its pair, {@link ChannelBetaIcon}, is the same ring\nfilled halfway — the two are one mark told twice, so a reader never has to\nlearn which of two unrelated pictures means \"finished\".",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "The released channel: what a colleague gets when they install without asking for anything in particular.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/channel-released-icon",
+  "mdUrl": "/docs/components/channel-released-icon.md",
+  "jsonUrl": "/r/components/channel-released-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/chart.json

@@ -0,0 +1,93 @@
+{
+  "name": "Chart",
+  "slug": "chart",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Area, line, and bars, with points landing one at a time as the series streams in.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the series measures."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The headline figure, pre-formatted. The chart never formats numbers itself."
+    },
+    {
+      "name": "delta",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Change against the previous window. Renders green unless it starts with a minus sign."
+    },
+    {
+      "name": "points",
+      "type": "readonly number[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The full series. The scale is computed from all of it, so the axis does not jump\nwhile streaming."
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many points have arrived."
+    },
+    {
+      "name": "variant",
+      "type": "\"area\" | \"line\" | \"bars\"",
+      "required": false,
+      "defaultValue": "area",
+      "description": "Mark type. The last point stays emphasized in all three."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"label\"\n  | \"value\"\n  | \"delta\"\n  | \"points\"\n  | \"visibleCount\"\n  | \"variant\"\n> & {\n  /** What the series measures. */\n  label: string;\n  /** The headline figure, pre-formatted. The chart never formats numbers itself. */\n  value: string;\n  /** Change against the previous window. Renders green unless it starts with a minus sign. */\n  delta?: string;\n  /**\n   * The full series. The scale is computed from all of it, so the axis does not jump\n   * while streaming.\n   */\n  points: readonly number[];\n  /** How many points have arrived. */\n  visibleCount: number;\n  /** Mark type. The last point stays emphasized in all three. */\n  variant?: ChartVariant;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-text-title"
+  ],
+  "summary": "Area, line, and bars, with points landing one at a time as the series streams in.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Chart } from \"@cueplusplus/ui/elements\";\n\n<Chart\n  label=\"Runs this week\"\n  value=\"92\"\n  delta=\"+34%\"\n  points={points}\n  visibleCount={points.length}\n  variant=\"area\"\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/chart",
+  "mdUrl": "/docs/components/chart.md",
+  "jsonUrl": "/r/components/chart.json",
+  "specimens": [
+    {
+      "title": "Chart",
+      "group": "elements-knowledge",
+      "components": [
+        "Chart"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"area\" wide>\n    <Chart\n      label=\"FOH leg\"\n      value=\"29.1 A\"\n      delta=\"+18.1\"\n      points={LOAD}\n      visibleCount={LOAD.length}\n    />\n  </Specimen>\n  <Specimen label=\"line, still arriving\" wide>\n    <Chart label=\"FOH leg\" value=\"17.4 A\" points={LOAD} visibleCount={4} variant=\"line\" />\n  </Specimen>\n  <Specimen label=\"bars, falling\" wide>\n    <Chart\n      label=\"Headroom\"\n      value=\"2.9 A\"\n      delta=\"−8.1\"\n      points={[...LOAD].reverse()}\n      visibleCount={LOAD.length}\n      variant=\"bars\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "One series, three ways, on one scale: an area, a bare line, or bars with the newest one lit. It draws its own SVG at a fixed viewBox and stretches — there is no charting library under this, which is the point of it being an element rather than an instrument.",
+      "interaction": "none, and it is not a substitute for the charts group: no axes, no legend, no tooltip. The `<svg>` carries role='img' and a label built from the figure beside it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/chat-empty-state.json

@@ -0,0 +1,55 @@
+{
+  "name": "ChatEmptyState",
+  "slug": "chat-empty-state",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The first screen: a greeting, three ways in, and the composer front and center.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-text-body",
+    "--cue-text-emphasis",
+    "--cue-text-title"
+  ],
+  "summary": "The first screen: a greeting, three ways in, and the composer front and center.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import {\n  EmptyState,\n  EmptyStateComposer,\n  EmptyStateGreeting,\n  EmptyStateSuggestion,\n  EmptyStateSuggestions,\n} from \"@cueplusplus/ui/elements\";\n\n<EmptyState>\n  <EmptyStateGreeting>What are we building?</EmptyStateGreeting>\n  <EmptyStateSuggestions>\n    {items.map((item, i) => (\n      <EmptyStateSuggestion key={item} index={i} onClick={() => send(item)}>\n        {item}\n      </EmptyStateSuggestion>\n    ))}\n  </EmptyStateSuggestions>\n  <EmptyStateComposer placeholder=\"Ask anything\" onSend={send} />\n</EmptyState>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-empty-state",
+  "mdUrl": "/docs/components/chat-empty-state.md",
+  "jsonUrl": "/r/components/chat-empty-state.json",
+  "specimens": [
+    {
+      "title": "ChatEmptyState",
+      "group": "elements-composer",
+      "components": [
+        "ChatEmptyState",
+        "EmptyStateGreeting",
+        "EmptyStateSuggestions",
+        "EmptyStateSuggestion",
+        "EmptyStateComposer"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"greeting, ways in, composer\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>What is the rig doing tonight?</EmptyStateGreeting>\n      <EmptyStateSuggestions>\n        {OPENERS.map((opener, index) => (\n          <EmptyStateSuggestion key={opener} index={index}>\n            {opener}\n          </EmptyStateSuggestion>\n        ))}\n      </EmptyStateSuggestions>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" onSend={() => undefined} />\n    </ChatEmptyState>\n  </Specimen>\n  <Specimen label=\"greeting only\" wide>\n    <ChatEmptyState>\n      <EmptyStateGreeting>Ready when you are.</EmptyStateGreeting>\n      <EmptyStateComposer placeholder=\"Ask about the rig\" />\n    </ChatEmptyState>\n  </Specimen>\n</Specimens>",
+      "note": "The first screen, composed rather than configured: a greeting, some ways in, and a composer-shaped invitation. `EmptyStateComposer` is a display and not a working input — the placeholder is a string and send takes a handler — for the screen whose real composer is somewhere else. The suggestions stagger their entrance from `index`, so the row arrives left to right instead of all at once. Named `ChatEmptyState` because cue already publishes a layout `EmptyState`.",
+      "interaction": "each suggestion is a button with cue's focus ring; the greeting is an `h2`, so a screen reader lands on the sentence rather than the pills."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/chat-panel-assistant-message.json

@@ -0,0 +1,51 @@
+{
+  "name": "ChatPanelAssistantMessage",
+  "slug": "chat-panel-assistant-message",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One message from the model: plain text on the leading edge, no bubble.",
+  "props": [],
+  "typeReferences": [
+    "ComponentProps<\"p\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "One message from the model: plain text on the leading edge, no bubble.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel-assistant-message",
+  "mdUrl": "/docs/components/chat-panel-assistant-message.md",
+  "jsonUrl": "/r/components/chat-panel-assistant-message.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/chat-panel-composer.json

@@ -0,0 +1,66 @@
+{
+  "name": "ChatPanelComposer",
+  "slug": "chat-panel-composer",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The panel's composer row. It is a display of a composer rather than a working one —\nthe placeholder is a string and the send button takes a handler.",
+  "props": [
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Resting text in the input bar."
+    },
+    {
+      "name": "onSend",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the send control. Omit it and the control renders disabled."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"placeholder\"> & {\n  /** Resting text in the input bar. */\n  placeholder: string;\n  /** Called from the send control. Omit it and the control renders disabled. */\n  onSend?: () => void;\n}"
+  ],
+  "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 panel's composer row.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel-composer",
+  "mdUrl": "/docs/components/chat-panel-composer.md",
+  "jsonUrl": "/r/components/chat-panel-composer.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/chat-panel-messages.json

@@ -0,0 +1,51 @@
+{
+  "name": "ChatPanelMessages",
+  "slug": "chat-panel-messages",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The scrolling transcript inside a `ChatPanel`. Bottom-aligned, so a short\nconversation sits on the composer rather than floating at the top of the panel.",
+  "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 scrolling transcript inside a `ChatPanel`.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel-messages",
+  "mdUrl": "/docs/components/chat-panel-messages.md",
+  "jsonUrl": "/r/components/chat-panel-messages.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/chat-panel-typing.json

@@ -0,0 +1,51 @@
+{
+  "name": "ChatPanelTyping",
+  "slug": "chat-panel-typing",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The three-dot rest state, for the gap between sending and the first token.",
+  "props": [],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\">"
+  ],
+  "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 three-dot rest state, for the gap between sending and the first token.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel-typing",
+  "mdUrl": "/docs/components/chat-panel-typing.md",
+  "jsonUrl": "/r/components/chat-panel-typing.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/chat-panel-user-message.json

@@ -0,0 +1,51 @@
+{
+  "name": "ChatPanelUserMessage",
+  "slug": "chat-panel-user-message",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One message from the person, drawn as a filled bubble on the trailing edge.",
+  "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": "One message from the person, drawn as a filled bubble on the trailing edge.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/chat-panel-user-message",
+  "mdUrl": "/docs/components/chat-panel-user-message.md",
+  "jsonUrl": "/r/components/chat-panel-user-message.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
+}