@cueplusplus/ui 0.2.0 → 0.5.0

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/spectrum-visualizer.json

@@ -0,0 +1,115 @@
+{
+  "name": "SpectrumVisualizer",
+  "slug": "spectrum-visualizer",
+  "group": "midi",
+  "importPath": "@cueplusplus/ui/midi",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The FFT, drawn: one bar per frequency band, or one line across all of them.\n\nPorted from ableton-sync's analyser, with the colours taken off the caller's\nhands. The original asked for a `color` per band and defaulted to `#00FF00`\nwhen it did not get one, which is how an audio tool ends up with two\ndifferent greens for the same band in two different panels. Here the bands\n*are* the ramp — the same `BANDS_7`/`BANDS_10`/`BANDS_16`/`BANDS_31` the\n`/charts` subpath publishes — so bass is the same red in the analyser, in the\nlegend and in any chart of the same data.\n\nThose ramps are deliberately theme-independent (see `charts/ramps.tsx`): a\nlistener who has learnt \"bass is red\" must not have to relearn it because the\nconsole switched to a different accent. Everything *around* the data — the\ngrid, the line trace — does read tokens, and is resolved at paint time so a\ntheme switch needs no subscription.\n\nSelection dims rather than hides. A band that vanished when deselected would\nchange the shape of the spectrum, and the shape is the reading.",
+  "props": [
+    {
+      "name": "levels",
+      "type": "readonly number[] | Float32Array<ArrayBufferLike>",
+      "required": true,
+      "defaultValue": null,
+      "description": "One level per band, `0`–`1`, in the ramp's own order.\n\nPositional rather than keyed by band id: an FFT hands back an array forty\ntimes a second, and building a lookup per frame to match it up is work for\nno information."
+    },
+    {
+      "name": "ramp",
+      "type": "readonly FrequencyBand[] | \"bands-7\" | \"bands-10\" | \"bands-16\" | \"bands-31\"",
+      "required": false,
+      "defaultValue": "bands-7",
+      "description": "The bands: a ramp from `/charts` by name, or a band list. Defaults to `\"bands-7\"`."
+    },
+    {
+      "name": "mode",
+      "type": "\"line\" | \"bars\"",
+      "required": false,
+      "defaultValue": "bars",
+      "description": "Bars or a line trace. Defaults to `\"bars\"`."
+    },
+    {
+      "name": "thresholds",
+      "type": "number | readonly number[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Trigger levels to rule, one per band or one for all of them."
+    },
+    {
+      "name": "selected",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Band ids to keep bright. Empty or absent means every band is bright."
+    },
+    {
+      "name": "sensitivity",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "Display gain applied to every level before drawing. Defaults to `1`."
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "96",
+      "description": "Graph height in px at the 16px root, emitted as `rem`. Defaults to `96`."
+    },
+    {
+      "name": "labels",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "List the band names under the graph. Defaults to `true`."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Spectrum",
+      "description": "What is being analysed. Defaults to `\"Spectrum\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-data-ground",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-text-micro"
+  ],
+  "summary": "The FFT, drawn: one bar per frequency band, or one line across all of them.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SpectrumVisualizer levels={fft} ramp=\"bands-31\" thresholds={0.7} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/spectrum-visualizer",
+  "mdUrl": "/docs/components/spectrum-visualizer.md",
+  "jsonUrl": "/r/components/spectrum-visualizer.json",
+  "specimens": [
+    {
+      "title": "SpectrumVisualizer",
+      "group": "midi",
+      "components": [
+        "SpectrumVisualizer"
+      ],
+      "code": "<div className=\"flex w-full flex-col gap-(--cue-space-5)\">\n  <SpectrumVisualizer levels={LEVELS} height={140} label=\"Seven-band analyser\" />\n  <SpectrumVisualizer\n    levels={LEVELS}\n    mode=\"line\"\n    thresholds={0.5}\n    height={120}\n    label=\"Seven-band analyser, line mode\"\n  />\n  <SpectrumVisualizer\n    levels={LEVELS_31}\n    ramp=\"bands-31\"\n    selected={[\"sub\", \"bass\"]}\n    labels={false}\n    height={120}\n    label=\"31-band analyser, bass selected\"\n  />\n</div>",
+      "note": "Bars or line, with band colours taken from the /charts ramps. Those are literals on purpose: a listener who has learnt `bass is red` must not relearn it because the console switched accent.",
+      "interaction": "a selection dims the bands outside it rather than hiding them; thresholds are dashed rules per band."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/spinner.json

@@ -0,0 +1,61 @@
+{
+  "name": "Spinner",
+  "slug": "spinner",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "An indeterminate progress ring, drawn in CSS only — no SVG, no animation\nlibrary, one element.\n\nThe ring is a conic gradient masked to a hairline annulus, inked with\n`currentColor`, so it inherits whatever text colour surrounds it (a spinner\ninside a `danger` button is red without being told). Under\n`prefers-reduced-motion` the rotation stops and the ring stays as a static\narc rather than disappearing.",
+  "props": [
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the density icon ladder to draw at. Defaults to `\"md\"`."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Loading",
+      "description": "Accessible label announced while the spinner is on screen. Defaults to `\"Loading\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"span\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "An indeterminate progress ring, drawn in CSS only — no SVG, no animation library, one element.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Spinner size=\"sm\" />\n<Button disabled><Spinner /> Rendering…</Button>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/spinner",
+  "mdUrl": "/docs/components/spinner.md",
+  "jsonUrl": "/r/components/spinner.json",
+  "specimens": [
+    {
+      "title": "Spinner",
+      "group": "primitives",
+      "components": [
+        "Spinner"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"sm\">\n    <Spinner size=\"sm\" />\n  </Specimen>\n  <Specimen label=\"md\">\n    <Spinner />\n  </Specimen>\n  <Specimen label=\"labelled\">\n    <Spinner label=\"Reading show file\" />\n  </Specimen>\n</Specimens>",
+      "note": "Two sizes. Carries a visually hidden label so a screen reader is told the wait, not left with a spinning div.",
+      "interaction": "stills under prefers-reduced-motion."
+    }
+  ],
+  "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/stack.json

@@ -0,0 +1,96 @@
+{
+  "name": "Stack",
+  "slug": "stack",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One-dimensional layout: the flex row or column, with the gap tokenised.\n\nExists so that spacing between siblings is a density decision rather than a\nper-call-site guess. A `Stack gap={4}` is 8px at normal density and 6px at\nultra-compact without touching the markup, which is the whole point of the\ndensity system — and something `flex gap-2` written by hand quietly opts out\nof.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "direction",
+      "type": "\"row\" | \"column\"",
+      "required": false,
+      "defaultValue": "column",
+      "description": "`\"column\"` (default) or `\"row\"`."
+    },
+    {
+      "name": "gap",
+      "type": "0 | 4 | 8 | 1 | 2 | 3 | 5 | 6 | 7",
+      "required": false,
+      "defaultValue": "4",
+      "description": "Which rung of the density space ladder to spend between children. Defaults to `4`."
+    },
+    {
+      "name": "align",
+      "type": "\"center\" | \"end\" | \"baseline\" | \"start\" | \"stretch\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Cross-axis alignment. Omit to inherit the flex default (`stretch`)."
+    },
+    {
+      "name": "justify",
+      "type": "\"center\" | \"end\" | \"start\" | \"between\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Main-axis distribution. Omit to inherit the flex default (`start`)."
+    },
+    {
+      "name": "wrap",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Let a row wrap onto more lines."
+    },
+    {
+      "name": "inline",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Lay out as `inline-flex`, so the stack sits in a line of text."
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-space-",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-space-6",
+    "--cue-space-7",
+    "--cue-space-8"
+  ],
+  "summary": "One-dimensional layout: the flex row or column, with the gap tokenised.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Stack gap={5}><Panel /><Panel /></Stack>\n<Stack direction=\"row\" gap={2} align=\"center\"><StatusDot tone=\"ok\" />Online</Stack>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/stack",
+  "mdUrl": "/docs/components/stack.md",
+  "jsonUrl": "/r/components/stack.json",
+  "specimens": [
+    {
+      "title": "Stack",
+      "group": "layout",
+      "components": [
+        "Stack"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"row, gap 3\">\n    <Stack direction=\"row\" gap={3}>\n      <Chip>one</Chip>\n      <Chip>two</Chip>\n      <Chip>three</Chip>\n    </Stack>\n  </Specimen>\n  <Specimen label=\"column, gap 5\">\n    <Stack gap={5}>\n      <Chip>one</Chip>\n      <Chip>two</Chip>\n    </Stack>\n  </Specimen>\n  <Specimen label=\"row, between\">\n    <Stack direction=\"row\" justify=\"between\" className=\"w-[14rem]\">\n      <Chip>left</Chip>\n      <Chip>right</Chip>\n    </Stack>\n  </Specimen>\n</Specimens>",
+      "note": "Flex with the gap taken from a rung of the density ladder, never a length. That is what makes a layout tighten with the rest of the console.",
+      "interaction": "none."
+    }
+  ],
+  "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
+}

package/manifest/components/stat.json

@@ -0,0 +1,87 @@
+{
+  "name": "Stat",
+  "slug": "stat",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One number, named: the console's KPI tile.\n\nReads label-first (micro, uppercase, tracked) so a row of tiles scans as a\nlist of captions with the readings underneath, and the value is set in\n`tabular-nums` mono so a changing number does not shuffle the layout under\nthe reader.\n\nOnly the value takes the tone. Tinting the caption too would make a red tile\nwhere the intent is a red *number* — the label is not the alarm.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is being measured. Rendered as a micro uppercase caption."
+    },
+    {
+      "name": "value",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The reading itself — the one thing the eye should land on."
+    },
+    {
+      "name": "detail",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Optional second line: a delta, a window, a unit."
+    },
+    {
+      "name": "tone",
+      "type": "\"danger\" | \"accent\" | \"busy\" | \"neutral\" | \"ok\" | \"warn\" | \"info\"",
+      "required": false,
+      "defaultValue": "neutral",
+      "description": "Tints the value only. Defaults to `\"neutral\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-busy",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-info",
+    "--cue-ok",
+    "--cue-space-2",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-title",
+    "--cue-warn"
+  ],
+  "summary": "One number, named: the console's KPI tile.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Stat label=\"Universes\" value=\"512\" />\n<Stat label=\"Dropped frames\" value=\"12\" detail=\"last hour\" tone=\"danger\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/stat",
+  "mdUrl": "/docs/components/stat.md",
+  "jsonUrl": "/r/components/stat.json",
+  "specimens": [
+    {
+      "title": "Stat",
+      "group": "instruments",
+      "components": [
+        "Stat"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-4) sm:grid-cols-2 lg:grid-cols-4\">\n  <Stat label=\"Universes\" value=\"4\" detail=\"of 8 patched\" />\n  <Stat label=\"Latency\" value=\"7 ms\" detail=\"art-net\" tone=\"ok\" />\n  <Stat label=\"Dropped\" value=\"0.4%\" detail=\"last hour\" tone=\"warn\" />\n  <Stat label=\"Faults\" value=\"2\" detail=\"since 18:00\" tone=\"danger\" />\n</div>",
+      "note": "A label, a figure and a detail line. Figures are mono `tabular-nums`, so a changing digit never shifts the column.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}