@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/status-bar.json

@@ -0,0 +1,58 @@
+{
+  "name": "StatusBar",
+  "slug": "status-bar",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The quiet strip along the bottom of a window.\n\nThe smallest type in the system in the subtlest ink: a status bar is read\nwhen you go looking for it and ignored otherwise, so it must never compete\nwith the work above it. Height comes from `--cue-chrome-statusbar`.\n\nNot a live region — a status bar changes constantly (frame counters, DMX\noutput), and announcing every change would make the app unusable with a\nscreen reader. Put anything that genuinely must be announced in a `Toast`.\n\nStatic markup — no `\"use client\"`.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-busy",
+    "--cue-chrome-statusbar",
+    "--cue-danger",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-info",
+    "--cue-ok",
+    "--cue-pad-row-x",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-surface-1",
+    "--cue-text-label",
+    "--cue-warn"
+  ],
+  "summary": "The quiet strip along the bottom of a window.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<StatusBar>\n  <StatusBar.Item icon={Plug} tone=\"ok\">Art-Net connected</StatusBar.Item>\n  <StatusBar.Item push>512 channels</StatusBar.Item>\n</StatusBar>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/status-bar",
+  "mdUrl": "/docs/components/status-bar.md",
+  "jsonUrl": "/r/components/status-bar.json",
+  "specimens": [
+    {
+      "title": "StatusBar",
+      "group": "chrome",
+      "components": [
+        "StatusBar"
+      ],
+      "code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border\">\n  <StatusBar>\n    <StatusBar.Item>universe 1</StatusBar.Item>\n    <StatusBar.Item tone=\"ok\">44 Hz</StatusBar.Item>\n    <StatusBar.Item tone=\"warn\">2 conflicts</StatusBar.Item>\n    <StatusBar.Item push>10.0.0.42</StatusBar.Item>\n    <StatusBar.Item tone=\"info\">art-net</StatusBar.Item>\n  </StatusBar>\n</div>",
+      "note": "The bottom strip: tone-inked items, and a `push` item that takes the remaining space.",
+      "interaction": "none by default; items are plain readouts."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/status-dot.json

@@ -0,0 +1,78 @@
+{
+  "name": "StatusDot",
+  "slug": "status-dot",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A 6px state dot — the densest possible status indicator.\n\nColour alone never carries meaning here: the dot is `aria-hidden` and the\ncomponent always emits an `sr-only` label inside a `role=\"status\"` wrapper,\nso the state is announced as well as shown (WCAG 1.4.1).\n\nThe wrapper is `relative` for that label's sake and no other reason.\n`.sr-only` is `position: absolute`; without a positioned ancestor its\ncontaining block is the initial one, so its scrollable overflow lands on\n`<html>` rather than on whatever scroller it is nested in. One dot is\nharmless and a table of two thousand rows is a document several thousand\npixels taller than anything visible on it.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "tone",
+      "type": "\"danger\" | \"idle\" | \"busy\" | \"ok\" | \"warn\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which state to paint. `idle` renders a hollow ring."
+    },
+    {
+      "name": "pulse",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Pulse the dot to signal live activity. Automatically stilled under\n`prefers-reduced-motion`."
+    },
+    {
+      "name": "size",
+      "type": "number",
+      "required": false,
+      "defaultValue": "6",
+      "description": "Diameter in px at the default 16px root font size. Emitted as `rem`, so it\nscales with browser zoom and the user's font size. Defaults to `6`."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Screen-reader text. Defaults to the tone name, which is usually the honest\nanswer; pass something specific when the surrounding row does not say it."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"span\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-busy",
+    "--cue-danger",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-warn"
+  ],
+  "summary": "A 6px state dot — the densest possible status indicator.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<StatusDot tone=\"ok\" />\n<StatusDot tone=\"busy\" pulse label=\"Rendering preview\" size={8} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/status-dot",
+  "mdUrl": "/docs/components/status-dot.md",
+  "jsonUrl": "/r/components/status-dot.json",
+  "specimens": [
+    {
+      "title": "StatusDot",
+      "group": "primitives",
+      "components": [
+        "StatusDot"
+      ],
+      "code": "<Specimens>\n  {STATUS_TONES.map((tone) => (\n    <Specimen key={tone} label={tone}>\n      <StatusDot tone={tone} label={tone} />\n    </Specimen>\n  ))}\n  <Specimen label=\"pulse\">\n    <StatusDot tone=\"busy\" pulse label=\"Cueing\" />\n  </Specimen>\n  <Specimen label=\"size 10\">\n    <StatusDot tone=\"ok\" size={10} label=\"Online\" />\n  </Specimen>\n</Specimens>",
+      "note": "Five states, and the pulse that means work is in flight. The label is the accessible name, not decoration.",
+      "interaction": "none. A dot is a readout."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/stepper.json

@@ -0,0 +1,89 @@
+{
+  "name": "Stepper",
+  "slug": "stepper",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The step trail: `1 target · 2 preview · 3 apply`.\n\nDeliberately a line of mono text rather than the usual row of numbered discs\njoined by rules. A stepper drawn as circles-and-lines is 60px tall and says\nexactly as much as one line of 9px type — and in a console that vertical\nspace belongs to the thing being configured, not to the wizard chrome around\nit. Only the numbers carry the accent, so the trail reads as one sentence\nwith the position marked, which is what a progress indicator is for.\n\nForward steps are never buttons: a step you have not reached is not a place\nyou can go, and offering it as a control is a promise the flow cannot keep.",
+  "props": [
+    {
+      "name": "steps",
+      "type": "readonly StepperStep[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The steps, in order."
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The `id` of the step in progress. An unknown id leaves every step upcoming."
+    },
+    {
+      "name": "onStepChange",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the `id` of a step the user asked to go back to. Passing it\nturns the finished steps into buttons; leaving it off keeps the trail\nstatic, which is the honest rendering when the earlier steps cannot be\nrevisited."
+    },
+    {
+      "name": "separator",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "·",
+      "description": "What sits between steps. Defaults to `\"·\"`."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Progress",
+      "description": "The nav's accessible name. Defaults to `\"Progress\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"nav\">, \"children\" | \"onChange\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-text-label"
+  ],
+  "summary": "The step trail: `1 target · 2 preview · 3 apply`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Stepper steps={[{ id: \"target\", label: \"target\" }, { id: \"preview\", label: \"preview\" }]} current=\"preview\" />\n<Stepper steps={steps} current={step} onStepChange={setStep} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/stepper",
+  "mdUrl": "/docs/components/stepper.md",
+  "jsonUrl": "/r/components/stepper.json",
+  "specimens": [
+    {
+      "title": "Stepper",
+      "group": "layout",
+      "components": [
+        "Stepper"
+      ],
+      "code": "<Stepper steps={STEPS} current={step} onStepChange={setStep} />",
+      "note": "The step trail: `1 target · 2 preview · 3 apply`, with reached steps tinted rather than filled.",
+      "interaction": "a reached step is a button; an upcoming one is not."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/stopped-run.json

@@ -0,0 +1,81 @@
+{
+  "name": "StoppedRun",
+  "slug": "stopped-run",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "You pressed stop. The half-written answer stays, and continuing is one tap away.",
+  "props": [
+    {
+      "name": "words",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The partial answer as it stood when the run stopped. It stays on screen."
+    },
+    {
+      "name": "reason",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Why it ended: stopped by you, hit the token limit, timed out."
+    },
+    {
+      "name": "onContinue",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to resume from where the answer left off."
+    },
+    {
+      "name": "onDiscard",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to drop the partial answer."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"words\" | \"reason\" | \"onContinue\" | \"onDiscard\"\n> & {\n  /** The partial answer as it stood when the run stopped. It stays on screen. */\n  words: readonly string[];\n  /** Why it ended: stopped by you, hit the token limit, timed out. */\n  reason: string;\n  /** Called to resume from where the answer left off. */\n  onContinue?: () => void;\n  /** Called to drop the partial answer. */\n  onDiscard?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "You pressed stop.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { StoppedRun } from \"@cueplusplus/ui/elements\";\n\n<StoppedRun words={words} reason=\"stopped by you\" onContinue={resume} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/stopped-run",
+  "mdUrl": "/docs/components/stopped-run.md",
+  "jsonUrl": "/r/components/stopped-run.json",
+  "specimens": [
+    {
+      "title": "StoppedRun",
+      "group": "elements-thread",
+      "components": [
+        "StoppedRun"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"stopped by the user\" wide>\n    <StoppedRun\n      words={SPOKEN.slice(0, 5)}\n      reason=\"stopped by you\"\n      onContinue={() => undefined}\n      onDiscard={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"stopped by a limit\" wide>\n    <StoppedRun words={SPOKEN.slice(0, 3)} reason=\"token budget reached\" />\n  </Specimen>\n</Specimens>",
+      "note": "You pressed stop. The half-written answer stays exactly where it stopped, with a caret to say so, and the run gives its reason on a chip. Continuing is one tap; discarding is the quieter of the two, which is the right ranking.",
+      "interaction": "Continue leads and carries the arrow; Discard is a ghost. Both are ordinary buttons — nothing here is a destructive-action dialog."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/streaming-text.json

@@ -0,0 +1,71 @@
+{
+  "name": "StreamingText",
+  "slug": "streaming-text",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Tokens arrive softly: the newest words land in blue and settle into ink.",
+  "props": [
+    {
+      "name": "segments",
+      "type": "Segment[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text chunks to stream, optionally marked mono for inline code chips."
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many words from the flattened segments are visible."
+    },
+    {
+      "name": "streaming",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the newest words tint blue and a caret blinks at the end."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"p\">,\n  \"children\" | \"segments\" | \"count\" | \"streaming\"\n> & {\n  /** Text chunks to stream, optionally marked mono for inline code chips. */\n  segments: Segment[];\n  /** How many words from the flattened segments are visible. */\n  count: number;\n  /** When true the newest words tint blue and a caret blinks at the end. */\n  streaming: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "Tokens arrive softly: the newest words land in blue and settle into ink.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { StreamingText } from \"@cueplusplus/ui/elements\";\n\n<StreamingText\n  segments={[{ text: \"Hello world\" }, { text: \"thread.tsx\", mono: true }]}\n  count={3}\n  streaming\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/streaming-text",
+  "mdUrl": "/docs/components/streaming-text.md",
+  "jsonUrl": "/r/components/streaming-text.json",
+  "specimens": [
+    {
+      "title": "StreamingText",
+      "group": "elements-thread",
+      "components": [
+        "StreamingText"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"mid-stream\" wide>\n    <StreamingText segments={ANSWER} count={9} streaming />\n  </Specimen>\n  <Specimen label=\"settled\" wide>\n    <StreamingText segments={ANSWER} count={40} streaming={false} />\n  </Specimen>\n</Specimens>",
+      "note": "Tokens landing a word at a time: the newest two are lit in the streaming hue and cool into ink behind them, and a caret sits at the end while more is coming. A segment marked mono becomes a chip, which is how a path or a channel range survives being read aloud in prose.",
+      "interaction": "none, and deliberately: it is a paragraph, and it stays selectable, copyable text at every count."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/sub.json

@@ -0,0 +1,44 @@
+{
+  "name": "Sub",
+  "slug": "sub",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A subscript inside an expression: a bound or a label, set upright inside the italic.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-text-emphasis"
+  ],
+  "summary": "A subscript inside an expression: a bound or a label, set upright inside the italic.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/sub",
+  "mdUrl": "/docs/components/sub.md",
+  "jsonUrl": "/r/components/sub.json",
+  "specimens": [
+    {
+      "title": "MathBlock",
+      "group": "elements-knowledge",
+      "components": [
+        "MathBlock",
+        "Frac",
+        "Sub",
+        "Sup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"worked through\" wide>\n    <MathBlock label=\"illuminance at the deck\" steps={MATH} visibleSteps={MATH.length} />\n  </Specimen>\n  <Specimen label=\"first step only\" wide>\n    <MathBlock steps={MATH} visibleSteps={1} />\n  </Specimen>\n</Specimens>",
+      "note": "Maths with the working shown, a step at a time. The expressions are nodes rather than a string, so there is no parser and no KaTeX in the bundle — `Frac` stacks a numerator over a rule, `Sup` and `Sub` set an index upright inside the serif italic, and anything else is text.",
+      "interaction": "none. Each step's note says what justified it, which is what turns three lines of algebra into an explanation."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/subagent-list.json

@@ -0,0 +1,88 @@
+{
+  "name": "SubagentList",
+  "slug": "subagent-list",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Parallel workers with their own progress, models, and completions.",
+  "props": [
+    {
+      "name": "agents",
+      "type": "readonly SubagentItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Parallel workers shown as cards with name and model."
+    },
+    {
+      "name": "completedCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many agents from the start are marked complete."
+    },
+    {
+      "name": "progress",
+      "type": "readonly number[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Per-agent progress widths used while a worker is still running."
+    },
+    {
+      "name": "showSummary",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the summary agent card is revealed under the list."
+    },
+    {
+      "name": "summaryAgent",
+      "type": "SubagentItem",
+      "required": true,
+      "defaultValue": null,
+      "description": "Agent shown in the summary card once showSummary is true."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"agents\"\n  | \"completedCount\"\n  | \"progress\"\n  | \"showSummary\"\n  | \"summaryAgent\"\n> & {\n  /** Parallel workers shown as cards with name and model. */\n  agents: readonly SubagentItem[];\n  /** How many agents from the start are marked complete. */\n  completedCount: number;\n  /** Per-agent progress widths used while a worker is still running. */\n  progress: readonly number[];\n  /** When true the summary agent card is revealed under the list. */\n  showSummary: boolean;\n  /** Agent shown in the summary card once showSummary is true. */\n  summaryAgent: SubagentItem;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "Parallel workers with their own progress, models, and completions.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SubagentList } from \"@cueplusplus/ui/elements\";\n\n<SubagentList\n  agents={[{ name: \"Researcher\", model: \"Sonnet\" }]}\n  completedCount={0}\n  progress={[40]}\n  showSummary={false}\n  summaryAgent={{ name: \"Summarizer\", model: \"Haiku\" }}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/subagent-list",
+  "mdUrl": "/docs/components/subagent-list.md",
+  "jsonUrl": "/r/components/subagent-list.json",
+  "specimens": [
+    {
+      "title": "SubagentList",
+      "group": "elements",
+      "components": [
+        "SubagentList"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"two running\" wide>\n    <SubagentList\n      agents={WORKERS}\n      completedCount={1}\n      progress={[100, 62, 24]}\n      showSummary={false}\n      summaryAgent={SUMMARISER}\n    />\n  </Specimen>\n  <Specimen label=\"summarising\" wide>\n    <SubagentList\n      agents={WORKERS}\n      completedCount={WORKERS.length}\n      progress={[100, 100, 100]}\n      showSummary\n      summaryAgent={SUMMARISER}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Parallel workers, each with its own model and its own progress. `completedCount` marks the finished ones from the start of the list, and the summary card appears under them when the agent that folds their answers together starts work.",
+      "interaction": "none. Delegation is something to watch, not something to steer from here."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/suggestions.json

@@ -0,0 +1,84 @@
+{
+  "name": "Suggestions",
+  "slug": "suggestions",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Prompt pills that stagger in after a reply and invite the next turn.",
+  "props": [
+    {
+      "name": "suggestions",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Follow-up prompt pills rendered in order."
+    },
+    {
+      "name": "selectedSuggestion",
+      "type": "string | null",
+      "required": true,
+      "defaultValue": null,
+      "description": "The pill currently pressed, or null when none is selected."
+    },
+    {
+      "name": "cycle",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Identity key that remounts the row so the stagger entrance can replay."
+    },
+    {
+      "name": "onSuggestion",
+      "type": "(suggestion: string) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when a suggestion pill is pressed."
+    },
+    {
+      "name": "variant",
+      "type": "\"list\" | \"pills\"",
+      "required": false,
+      "defaultValue": "pills",
+      "description": "pills wraps suggestions into a centered row; list stacks them as full-width rows."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "Prompt pills that stagger in after a reply and invite the next turn.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Suggestions } from \"@cueplusplus/ui/elements\";\n\n<Suggestions\n  suggestions={[\"Explain more\", \"Show an example\"]}\n  selectedSuggestion={null}\n  cycle={0}\n  onSuggestion={setSelected}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/suggestions",
+  "mdUrl": "/docs/components/suggestions.md",
+  "jsonUrl": "/r/components/suggestions.json",
+  "specimens": [
+    {
+      "title": "Suggestions",
+      "group": "elements-thread",
+      "components": [
+        "Suggestions"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"pills\" wide>\n    <Suggestions\n      suggestions={FOLLOW_UPS}\n      selectedSuggestion={suggestion}\n      cycle={0}\n      onSuggestion={setSuggestion}\n    />\n  </Specimen>\n  <Specimen label=\"list\" wide>\n    <Suggestions\n      suggestions={FOLLOW_UPS}\n      selectedSuggestion={FOLLOW_UPS[0] ?? null}\n      cycle={1}\n      onSuggestion={setSuggestion}\n      variant=\"list\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Where the conversation could go next, staggered in after a reply. Pills for a centred empty state, a list for a side panel; either way `cycle` is the key that re-runs the entrance when a new set replaces the old one.",
+      "interaction": "each pill is a button carrying aria-pressed, lifts a pixel on hover and presses in on click. The selected one inverts."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/sup.json

@@ -0,0 +1,44 @@
+{
+  "name": "Sup",
+  "slug": "sup",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A superscript inside an expression: an exponent or an index, set upright inside the\nitalic.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-text-emphasis"
+  ],
+  "summary": "A superscript inside an expression: an exponent or an index, set upright inside the italic.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/sup",
+  "mdUrl": "/docs/components/sup.md",
+  "jsonUrl": "/r/components/sup.json",
+  "specimens": [
+    {
+      "title": "MathBlock",
+      "group": "elements-knowledge",
+      "components": [
+        "MathBlock",
+        "Frac",
+        "Sub",
+        "Sup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"worked through\" wide>\n    <MathBlock label=\"illuminance at the deck\" steps={MATH} visibleSteps={MATH.length} />\n  </Specimen>\n  <Specimen label=\"first step only\" wide>\n    <MathBlock steps={MATH} visibleSteps={1} />\n  </Specimen>\n</Specimens>",
+      "note": "Maths with the working shown, a step at a time. The expressions are nodes rather than a string, so there is no parser and no KaTeX in the bundle — `Frac` stacks a numerator over a rule, `Sup` and `Sub` set an index upright inside the serif italic, and anything else is text.",
+      "interaction": "none. Each step's note says what justified it, which is what turns three lines of algebra into an explanation."
+    }
+  ],
+  "todo": true
+}