@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/two-step-button.json

@@ -0,0 +1,113 @@
+{
+  "name": "TwoStepButton",
+  "slug": "two-step-button",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Arm, then confirm: a destructive action that takes two deliberate presses.\n\nThe most-reused interaction in the portfolio (fifteen call sites, three\nhand-rolled implementations) and the right shape for a destructive action\nthat is *routine* — deleting a cue, clearing a patch. A modal\n`AlertDialog` is the right shape for a rare and expensive one; putting a\ndialog in front of an action people take twenty times an hour just teaches\nthem to dismiss dialogs.\n\nFour ways out, because an armed button left lying around is a trap: Cancel,\nEscape, moving focus away, and a timeout. Focus lands on **Cancel** when the\npair arms, never on the destructive half — the same ruling as a destructive\ndialog's default button, and it means a stuck Enter key cannot walk through\nboth steps.",
+  "props": [
+    {
+      "name": "onConfirm",
+      "type": "() => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Fired once, when the *second* press lands."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The idle label — name the action, not the button (\"Delete rig\", not \"Delete\")."
+    },
+    {
+      "name": "confirmLabel",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "Confirm",
+      "description": "Label on the armed half. Defaults to `\"Confirm\"`."
+    },
+    {
+      "name": "cancelLabel",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "Cancel",
+      "description": "Label on the escape hatch. Defaults to `\"Cancel\"`."
+    },
+    {
+      "name": "tone",
+      "type": "\"danger\" | \"warn\"",
+      "required": false,
+      "defaultValue": "danger",
+      "description": "How severe this is. Defaults to `\"danger\"`."
+    },
+    {
+      "name": "timeout",
+      "type": "number",
+      "required": false,
+      "defaultValue": "4000",
+      "description": "ms before an untouched armed state disarms itself. `0` disables. Defaults to `4000`."
+    },
+    {
+      "name": "onArmedChange",
+      "type": "((armed: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the new armed state on every arm and disarm."
+    },
+    {
+      "name": "render",
+      "type": "RenderProp<Record<string, unknown>>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace the rendered element (Base UI render prop). Accepts an element —\n`render={<a href=\"/x\" />}` — or a function returning one. When set, the\ndefault `type=\"button\"` is dropped so non-button elements stay valid."
+    },
+    {
+      "name": "icon",
+      "type": "ElementType<any, keyof IntrinsicElements>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Optional leading icon component (e.g. a lucide icon). Rendered\n`aria-hidden` and sized to the density icon token, so it tracks the density\nlevel without the caller passing a pixel size."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ButtonProps, \"onClick\" | \"variant\" | \"onConfirm\" | \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-danger-fg",
+    "--cue-space-2",
+    "--cue-warn",
+    "--cue-warn-fg"
+  ],
+  "summary": "Arm, then confirm: a destructive action that takes two deliberate presses.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<TwoStepButton onConfirm={() => deleteRig(id)}>Delete rig</TwoStepButton>\n<TwoStepButton tone=\"warn\" timeout={0} confirmLabel=\"Reset it\" onConfirm={reset}>\n  Reset patch\n</TwoStepButton>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/two-step-button",
+  "mdUrl": "/docs/components/two-step-button.md",
+  "jsonUrl": "/r/components/two-step-button.json",
+  "specimens": [
+    {
+      "title": "TwoStepButton",
+      "group": "instruments",
+      "components": [
+        "TwoStepButton"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"danger\">\n    <TwoStepButton\n      tone=\"danger\"\n      onConfirm={() => setConfirmed((count) => count + 1)}\n      confirmLabel={COPY.destructive.action}\n    >\n      {COPY.destructive.action}\n    </TwoStepButton>\n  </Specimen>\n  <Specimen label=\"warn\">\n    <TwoStepButton tone=\"warn\" onConfirm={() => setConfirmed((count) => count + 1)}>\n      Reset patch\n    </TwoStepButton>\n  </Specimen>\n  <Specimen label=\"short timeout\">\n    <TwoStepButton timeout={2000} onConfirm={() => setConfirmed((count) => count + 1)}>\n      Unpatch all\n    </TwoStepButton>\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <TwoStepButton disabled onConfirm={() => {}}>\n      Unpatch all\n    </TwoStepButton>\n  </Specimen>\n  <Specimen label=\"confirmed\">\n    <Chip tone={confirmed === 0 ? \"neutral\" : \"ok\"}>{confirmed} confirmed</Chip>\n  </Specimen>\n</Specimens>",
+      "note": "Arm, then confirm. The portfolio's most-reused interaction, unified from three upstream implementations.",
+      "interaction": "Escape, blur and the timeout all disarm; the armed state shows a visible Cancel next to a tone-solid confirm."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/typing-indicator.json

@@ -0,0 +1,53 @@
+{
+  "name": "TypingIndicator",
+  "slug": "typing-indicator",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The classic three dots, tuned to read as presence rather than noise.",
+  "props": [
+    {
+      "name": "variant",
+      "type": "\"bubble\" | \"bare\"",
+      "required": false,
+      "defaultValue": "bubble",
+      "description": "bubble wraps the dots in a pill; bare renders only the three dots."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"variant\" | \"role\" | \"aria-label\"\n> & {\n  /** bubble wraps the dots in a pill; bare renders only the three dots. */\n  variant?: \"bubble\" | \"bare\";\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-surface-3"
+  ],
+  "summary": "The classic three dots, tuned to read as presence rather than noise.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { TypingIndicator } from \"@cueplusplus/ui/elements\";\n\n<TypingIndicator />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/typing-indicator",
+  "mdUrl": "/docs/components/typing-indicator.md",
+  "jsonUrl": "/r/components/typing-indicator.json",
+  "specimens": [
+    {
+      "title": "TypingIndicator",
+      "group": "elements-thread",
+      "components": [
+        "TypingIndicator"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"bubble\">\n    <TypingIndicator />\n  </Specimen>\n  <Specimen label=\"bare\">\n    <TypingIndicator variant=\"bare\" />\n  </Specimen>\n</Specimens>",
+      "note": "The gap between sending and the first token. Three dots that read as presence rather than noise — bare when the transcript has no bubbles, in a pill when it does.",
+      "interaction": "none. Both variants carry role='status' and a name, so the wait is announced once instead of animating silently."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/universe-grid.json

@@ -0,0 +1,127 @@
+{
+  "name": "UniverseGrid",
+  "slug": "universe-grid",
+  "group": "dmx",
+  "importPath": "@cueplusplus/ui/dmx",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A universe as 512 slots of occupancy: who holds what, and where two fixtures\nwere given the same address.\n\nPorted from stagetool's patching panel, which is the only audited product with\na real patch model behind it. What it draws is deliberately not a table:\n\n- **Position is the address.** A block's left edge *is* channel `start`, so the\n  shape of a patch — the gaps, the drift, the fixture that starts at 497 —\n  reads without anyone counting.\n- **A one-channel fixture is still visible.** Blocks have a two-pixel floor,\n  which is the whole reason the bar can honestly claim to show everything\n  patched.\n- **A conflict is drawn twice.** Both offending blocks get a danger ring *and*\n  the contested slots get a band, because \"these two overlap\" and \"here is\n  where\" are two different questions.\n\nAccessibility follows the `GroupBar` rule: colour is never the only channel.\nWithout `onSelect` the bar is one `role=\"img\"` whose name spells the whole\npatch out; with it, each block becomes a named button and the bar becomes a\ngroup.",
+  "props": [
+    {
+      "name": "allocations",
+      "type": "readonly DmxAllocation[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The patch. Order is display order; overlaps are found, not assumed away."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Which universe this is. Names the graphic; also the group label when selectable."
+    },
+    {
+      "name": "slots",
+      "type": "number",
+      "required": false,
+      "defaultValue": "512",
+      "description": "Frame length. Defaults to a full universe of 512."
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "18",
+      "description": "Bar height in px at the 16px root, emitted as `rem`. Defaults to `18`."
+    },
+    {
+      "name": "ruler",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Draw the address ruler. Defaults to `true`."
+    },
+    {
+      "name": "legend",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Draw the legend row. Defaults to `true`."
+    },
+    {
+      "name": "legendMax",
+      "type": "number",
+      "required": false,
+      "defaultValue": "6",
+      "description": "Legend entries before the tail collapses. Defaults to `6`."
+    },
+    {
+      "name": "onSelect",
+      "type": "((allocation: DmxAllocation) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Make the blocks buttons. Without it they are decoration inside one\n`role=\"img\"`, which is what keeps a 40-fixture patch from becoming 40 tab\nstops."
+    },
+    {
+      "name": "emptyLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "No patch assignments",
+      "description": "What to say when nothing is patched. Defaults to `\"No patch assignments\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"onSelect\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-busy",
+    "--cue-danger",
+    "--cue-danger-soft",
+    "--cue-data-ground",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-info",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-warn"
+  ],
+  "summary": "A universe as 512 slots of occupancy: who holds what, and where two fixtures were given the same address.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<UniverseGrid\n  label=\"Universe 1\"\n  allocations={[\n    { label: \"wash\", start: 1, size: 24, tone: \"accent\" },\n    { label: \"movers\", start: 129, size: 32, tone: \"info\" },\n  ]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/universe-grid",
+  "mdUrl": "/docs/components/universe-grid.md",
+  "jsonUrl": "/r/components/universe-grid.json",
+  "specimens": [
+    {
+      "title": "UniverseGrid",
+      "group": "dmx",
+      "components": [
+        "UniverseGrid"
+      ],
+      "code": "<div className=\"flex w-full flex-col gap-(--cue-space-5)\">\n  <UniverseGrid allocations={ALLOCATIONS} label=\"Universe 1 patch\" />\n  <UniverseGrid\n    allocations={[\n      { label: \"Front truss\", start: 1, size: 48, tone: \"accent\" },\n      { label: \"Movers\", start: 40, size: 32, tone: \"info\" },\n    ]}\n    label=\"Universe 2 patch, with a conflict\"\n  />\n  <UniverseGrid allocations={[]} label=\"Universe 3 patch\" emptyLabel={COPY.empty.title} />\n  <UniverseGrid\n    allocations={ALLOCATIONS}\n    ruler={false}\n    legend={false}\n    height={10}\n    label=\"Universe 1 patch, bare\"\n  />\n</div>",
+      "note": "512 slots of occupancy: minimum 2px slivers so a two-channel fixture is still visible, a conflict ring where two allocations overlap, a tick ruler at 1/64/…/512 and a legend that folds to `+N more`.",
+      "interaction": "each block is a button; the accessible name spells the whole patch out, so the picture is not the only channel."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/unread-divider.json

@@ -0,0 +1,55 @@
+{
+  "name": "UnreadDivider",
+  "slug": "unread-divider",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The rule that says \"you have read down to here\": an accented line with its\nlabel at the end.\n\nThe second row of Cursor's union that no catalogue ships, and the one with a\nrule of its own that is easy to get wrong: it marks where the reader *was*,\nso it does not move while they read. A divider that chased the last-seen\nmessage would vanish the moment it appeared, which is why this component\ntakes no messages, no counts and no scroll position — the caller decides\nwhere it goes and when it leaves, and the row is only ever the mark.\n\nAccented rather than neutral, and asymmetric rather than centred, so it can\nnever be mistaken for a {@link TimeBoundary} two rows above it.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "New",
+      "description": "What the rule says. `New` by default — one word, because the row is a place\nmarker and not an announcement, and because the sentence a reader wants is\nthe one below the rule."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg-subtle"
+  ],
+  "summary": "The rule that says \"you have read down to here\": an accented line with its label at the end.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { UnreadDivider } from \"@cueplusplus/ui/elements\";\n\n<UnreadDivider />\n<UnreadDivider label=\"New since you left\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/unread-divider",
+  "mdUrl": "/docs/components/unread-divider.md",
+  "jsonUrl": "/r/components/unread-divider.json",
+  "specimens": [
+    {
+      "title": "UnreadDivider",
+      "group": "elements-thread",
+      "components": [
+        "UnreadDivider"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"default\" wide>\n    <div className=\"w-full max-w-md\">\n      <UnreadDivider />\n    </div>\n  </Specimen>\n  <Specimen label=\"its own words\" wide>\n    <div className=\"w-full max-w-md\">\n      <UnreadDivider label=\"New since you left\" />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "The second rule Cursor's row union has and no catalogue ships: where you had read down to. It takes no messages, no count and no scroll position, because the one rule it must obey is that it does not move while you read — a divider that chased the last-seen message would vanish the moment it appeared. Accented and asymmetric, so it can never be mistaken for a time boundary two rows above it.",
+      "interaction": "none, deliberately. The mark is the whole component; when it leaves is the caller's decision."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/usage-chart.json

@@ -0,0 +1,124 @@
+{
+  "name": "UsageChart",
+  "slug": "usage-chart",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A quota trace: where you sit against the ceiling, over time.\n\nDependency-free inline SVG — a charting library is a large price for one\nline and five gridlines, and none of them draws the three things that make\nthis chart honest:\n\n1. **The y axis is always 0–100.** A quota chart auto-scaled to its own range\n   makes a flat 3% look identical to a flat 95%. The ceiling is the reading,\n   so the ceiling is always drawn.\n2. **Gaps are gaps.** When the sweep does not run, the line breaks. Joining\n   across a hole invents data — and worse, invents a *smooth* trend across\n   exactly the window nothing is known about. The area fill stops at the\n   break for the same reason.\n3. **Out-of-range values are clamped, not plotted.** Upstream numbers are\n   reverse-engineered and can be anything; 140% should read as a flat line on\n   the ceiling, not as a path drawn over the axis labels.",
+  "props": [
+    {
+      "name": "points",
+      "type": "readonly UsageChartPoint[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The series. Sorted and cleaned internally; order in is not order out."
+    },
+    {
+      "name": "tone",
+      "type": "\"danger\" | \"accent\" | \"busy\" | \"ok\" | \"warn\" | \"info\"",
+      "required": false,
+      "defaultValue": "accent",
+      "description": "Stroke tone. Defaults to `\"accent\"`."
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "120",
+      "description": "Plot height in px at the 16px root. Defaults to `120`."
+    },
+    {
+      "name": "gapMs",
+      "type": "number",
+      "required": false,
+      "defaultValue": "15 * 60 * 1000",
+      "description": "Break the line when consecutive samples are further apart than this, in ms."
+    },
+    {
+      "name": "threshold",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Draw a dashed rule at this percentage — where throttling starts, say."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The accessible name. Name the series; the shape is not self-describing."
+    },
+    {
+      "name": "emptyLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "No data yet",
+      "description": "What to say when there is nothing to plot. Defaults to `\"No data yet\"`."
+    },
+    {
+      "name": "formatTimestamp",
+      "type": "((t: number) => string)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Format a sample's timestamp for the tooltip. Defaults to a short local date-time."
+    },
+    {
+      "name": "formatValue",
+      "type": "((v: number) => string)",
+      "required": false,
+      "defaultValue": "(value) => `${Math.round(value)}%`",
+      "description": "Format a sample's value for the tooltip. Defaults to `\"87%\"`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-busy",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-info",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-3",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-warn"
+  ],
+  "summary": "A quota trace: where you sit against the ceiling, over time.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<UsageChart label=\"API requests\" points={series} threshold={80} tone=\"warn\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/usage-chart",
+  "mdUrl": "/docs/components/usage-chart.md",
+  "jsonUrl": "/r/components/usage-chart.json",
+  "specimens": [
+    {
+      "title": "UsageChart",
+      "group": "instruments",
+      "components": [
+        "UsageChart"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <UsageChart points={USAGE} gapMs={2 * MINUTE} threshold={80} label=\"Output level\" />\n  <UsageChart points={[]} label=\"No samples\" emptyLabel={COPY.empty.title} />\n</div>",
+      "note": "A dependency-free SVG chart pinned to 0–100, with gap-aware path segmentation: a hole in the data is a hole in the line, not a straight edge across it.",
+      "interaction": "hover draws a crosshair at the nearest point and a tooltip chip; the whole chart carries a text summary for readers who get no hover."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/verdict-row.json

@@ -0,0 +1,91 @@
+{
+  "name": "VerdictRow",
+  "slug": "verdict-row",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "What the run thought of its own work, attached to the turn that did it.\n\nThe second of the two elements nothing in the field ships. A finished turn\nsays what it changed and how long it took; whether it is any *good* is the\none question the reader actually has, and every agent runtime that runs a\ncritic, a test suite or a self-review already has an answer to it. This is\nthat answer as a row: a rating out of five, the exact score beside it, the\nscorer's sentence, and the problems it thinks are most likely, each with how\nsure it is.\n\nEvery number is defended. Scores arrive from a model, so `NaN`, `Infinity`\nand out-of-range values are normal traffic and all of them clamp — a verdict\nrow is worthless if a bad payload can make it render `NaN out of 5`.\n\nTone is stated as `data-verdict` on the element, from OpenHands' own\nthresholds (`ok` at 0.6, `warn` at 0.4, `danger` below), and the chips take\ntheirs from the probability (`danger` at 0.7, `warn` at 0.5). The stars are\none `role=\"img\"` with the rating as its name rather than five glyphs a screen\nreader would read out one at a time.",
+  "props": [
+    {
+      "name": "score",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the scorer thought of the work, `0`–`1`. Clamped, and a non-finite\nscore is worth no stars — see {@link verdictStars}."
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "What the scorer is called. Defaults to `VERDICT_LABELS.title`\n(`Verification`), which is deliberately not `Critic`: the same row fits a\ntest run, a linter or a second model."
+    },
+    {
+      "name": "summary",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "One line of the scorer's own prose, under the rating."
+    },
+    {
+      "name": "issues",
+      "type": "readonly VerdictIssue[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "What it thinks is probably wrong, drawn as chips with their probabilities\nand tinted by them. Order is the caller's — most likely first reads best."
+    },
+    {
+      "name": "labels",
+      "type": "Partial<VerdictLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "The row's three strings, merged over `VERDICT_LABELS`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "What the run thought of its own work, attached to the turn that did it.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { VerdictRow } from \"@cueplusplus/ui/elements\";\n\n<VerdictRow\n  score={0.82}\n  summary=\"The patch matches the plot and the cue holds.\"\n  issues={[{ label: \"No fallback for a missing fixture\", probability: 0.54 }]}\n/>\n// A verdict that failed the work, from a test run rather than a model.\n<VerdictRow score={0.24} title=\"Test run\" summary=\"3 of 41 checks failed.\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/verdict-row",
+  "mdUrl": "/docs/components/verdict-row.md",
+  "jsonUrl": "/r/components/verdict-row.json",
+  "specimens": [
+    {
+      "title": "VerdictRow",
+      "group": "elements",
+      "components": [
+        "VerdictRow"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"it holds\" wide>\n    <div className=\"w-full max-w-md\">\n      <VerdictRow score={0.86} summary=\"The patch matches the plot and cue 1 holds at 3.0s.\" />\n    </div>\n  </Specimen>\n  <Specimen label=\"doubtful, with what it doubts\" wide>\n    <div className=\"w-full max-w-md\">\n      <VerdictRow\n        score={0.52}\n        summary=\"The universe is patched, but nothing proves the cue fires.\"\n        issues={DOUBTS}\n      />\n    </div>\n  </Specimen>\n  <Specimen label=\"failed, from a test run rather than a model\" wide>\n    <div className=\"w-full max-w-md\">\n      <VerdictRow score={0.24} title=\"Test run\" summary=\"3 of 41 checks failed.\" />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "What the run thought of its own work, attached to the turn that did it. A finished turn says what it changed and how long it took; whether it is any good is the question the reader actually has, and every runtime that runs a critic, a test suite or a self-review already has an answer. The scorer is unnamed on purpose — the same row fits a critic model, a linter and a second pair of eyes. The stars are the shape and the percentage is the number, because 0.58 against 0.62 is a decision and rounding it away hides the thing that moved the colour.",
+      "interaction": "none, but every number is defended: scores arrive from a model over a network, so NaN, Infinity and out-of-range values all clamp rather than reaching the DOM. The rating is one role=img with `Rated 4 out of 5` as its name, not five glyphs read out one at a time."
+    }
+  ],
+  "todo": true
+}