@cueplusplus/ui 0.20.1 → 0.22.0

package/manifest/components/event-row.json

@@ -0,0 +1,116 @@
+{
+  "name": "EventRow",
+  "slug": "event-row",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One event, as a feed row: time, a toned dot, kind, title, and a one-line\npreview under the title. Exported for a list of the caller's own.\n\nInside an {@link EventFeed} it is an `option` of the feed's listbox. Drawn\nalone it claims no role, and in a listbox of the caller's it takes\n`role=\"option\"` from its props; either way `aria-selected` follows `selected`\nonly when the row is an option.",
+  "props": [
+    {
+      "name": "event",
+      "type": "FeedEvent",
+      "required": true,
+      "defaultValue": null,
+      "description": "The record this row draws.",
+      "control": {
+        "kind": "opaque",
+        "fixture": "agents.feed-event"
+      }
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Whether this row is the selected one.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onSelect",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the event's `id` when the row is clicked.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "formatTime",
+      "type": "((timestamp: string | number | Date) => string)",
+      "required": false,
+      "defaultValue": "formatTimestamp",
+      "description": "Formats the time column. Defaults to a time of day for a `Date` or a number.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"onSelect\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-stream",
+    "--cue-style-focus-width",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "One event as an activity feed draws it, for a list of your own.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<div role=\"listbox\" aria-label=\"Recent\">\n  <EventRow role=\"option\" event={event} selected={event.id === id} onSelect={setId} />\n</div>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/event-row",
+  "mdUrl": "/docs/components/event-row.md",
+  "jsonUrl": "/r/components/event-row.json",
+  "whenToUse": [
+    "A custom list of typed records that should look like `EventFeed`'s rows: grouped by run, virtualised, or interleaved with headings."
+  ],
+  "whenNotToUse": [
+    "A plain filterable feed. `EventFeed` draws these rows with chips and a keyboard already."
+  ],
+  "commonMistakes": [
+    "Rows in a listbox of your own without `role=\"option\"`. Outside an `EventFeed` a row claims no role, so pass it, and the row then says whether it is selected.",
+    "Expecting the row to move the selection from the keyboard. `EventFeed` owns that; a list of your own must too."
+  ],
+  "specimens": [
+    {
+      "title": "EventRow",
+      "group": "elements",
+      "components": [
+        "EventRow"
+      ],
+      "code": "<div role=\"listbox\" aria-label=\"Two run events\" className=\"flex w-full max-w-md flex-col\">\n  <EventRow role=\"option\" event={RUN_EVENTS[0]} onSelect={setRunEvent} />\n  <EventRow role=\"option\" event={RUN_EVENTS[3]} selected onSelect={setRunEvent} />\n</div>",
+      "note": "One event as the feed draws it, for a list of your own: the time, the toned dot, the kind, the title and its preview. The second row is the selected one.",
+      "interaction": "click a row: it reports its id through onSelect. Inside an EventFeed the feed owns the keyboard."
+    }
+  ]
+}

package/manifest/components/generative-ui.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui/elements/generative",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "The vocabulary a model composes at runtime.\n\nEvery other component in this library is handed props by a programmer, and a\nwrong one costs a type error at the call site. This one is handed a tree by a\nlanguage model over a network, so its whole contract is what it does with\ninput nobody checked. A model emits JSON — 27 intrinsic names, nested — and\n`GenerativeUI` turns it into elements. There is no compile step between the\ntwo and there cannot be one.\n\nThat reverses the usual priorities. The interesting question is not what a\ncorrect spec renders as, it is what an incorrect one does, and the answer is\nthree-fold and never an exception:\n\n- a `$type` from a newer catalogue draws an in-place notice and its siblings\n  still render;\n- a spec that is not a component tree at all draws a legible error state,\n  never a blank box that looks like a message still streaming;\n- a tree nested deeper than {@link GENERATIVE_MAX_DEPTH} stops and says so,\n  rather than exhausting the stack and taking the console with it.\n\nThe root is a plain `<div data-slot=\"generative-ui\" data-aui=\"root\">` and it\nis always there: an unreadable spec draws the error state *inside* it rather\nthan instead of it, so a caller's layout, `className` and ref hold whatever\nthe model sent.\n\n## Why it is not Tailwind\n\nThe stylesheet is plain `[data-aui]` CSS, and the tree it draws carries no\n`class` attribute anywhere. That is upstream's arrangement and it is worth\nkeeping precisely: a widget a model composed has to draw inside whatever\nconsole it was sent to, and a console is very often somebody else's app with\nno utility framework, no shadcn and no design system of its own. The\nconsequence runs all the way down — the icons are hand-drawn rather than\n`lucide-react`, the chart is 300 lines of SVG rather than `recharts`, and\n`./elements/generative` declares no optional peer at all. There is no package\nin the tree whose absence turns a weather card into a stack trace.\n\n```tsx\nimport { GenerativeUI } from \"@cueplusplus/ui/elements/generative\";\nimport \"@cueplusplus/ui/elements/generative.css\";\n```\n\n## Two skins\n\n`skin` and `fidelity` are the same two axes {@link AgentSurface } publishes,\nand for the same reason: the vocabulary has cue's values by default and\nassistant-ui's under `skin=\"aui\"`, which is upstream's own\n`data-aui-theme=\"elements\"` layer — a 20px card, a borderless 12px field, a\npill button. Pass them here when the tree is its own island; leave them off\ninside an `AgentSurface`, which has already stamped the subtree and whose\nvalues inherit through CSS with nothing threaded.",
+  "description": "The vocabulary a model composes at runtime.\n\nEvery other component in this library is handed props by a programmer, and a\nwrong one costs a type error at the call site. This one is handed a tree by a\nlanguage model over a network, so its whole contract is what it does with\ninput nobody checked. A model emits JSON — 27 intrinsic names, nested — and\n`GenerativeUI` turns it into elements. There is no compile step between the\ntwo and there cannot be one.\n\nThat reverses the usual priorities. The interesting question is not what a\ncorrect spec renders as, it is what an incorrect one does, and the answer is\nthree-fold and never an exception:\n\n- a `$type` from a newer catalogue draws an in-place notice and its siblings\n  still render;\n- a spec that is not a component tree at all draws a legible error state,\n  never a blank box that looks like a message still streaming;\n- a tree nested deeper than {@link GENERATIVE_MAX_DEPTH} stops and says so,\n  rather than exhausting the stack and taking the console with it.\n\nThe root is a plain `<div data-slot=\"generative-ui\" data-aui=\"root\">` and it\nis always there: an unreadable spec draws the error state *inside* it rather\nthan instead of it, so a caller's layout, `className` and ref hold whatever\nthe model sent.\n\n## Why it is not Tailwind\n\nThe stylesheet is plain `[data-aui]` CSS, and the tree it draws carries no\n`class` attribute anywhere. That is upstream's arrangement and it is worth\nkeeping precisely: a widget a model composed has to draw inside whatever\nconsole it was sent to, and a console is very often somebody else's app with\nno utility framework, no shadcn and no design system of its own. The\nconsequence runs all the way down — the icons are hand-drawn rather than\n`lucide-react`, the chart is 300 lines of SVG rather than `recharts`, and\n`./elements/generative` declares no optional peer at all. There is no package\nin the tree whose absence turns a weather card into a stack trace.\n\n```tsx\nimport { GenerativeUI } from \"@cueplusplus/ui/elements/generative\";\nimport \"@cueplusplus/ui/elements/generative.css\";\n```\n\n## Skins\n\n`skin` and `fidelity` are the same two axes {@link AgentSurface } publishes,\nand for the same reason: the vocabulary has cue's values by default,\nCursor's under `skin=\"cursor\"`, and assistant-ui's under `skin=\"aui\"`, which\nis upstream's own\n`data-aui-theme=\"elements\"` layer — a 20px card, a borderless 12px field, a\npill button. Pass them here when the tree is its own island; leave them off\ninside an `AgentSurface`, which has already stamped the subtree and whose\nvalues inherit through CSS with nothing threaded.",
   "props": [
     {
       "name": "spec",
@@ -62,13 +62,14 @@
     },
     {
       "name": "skin",
-      "type": "\"cue\" | \"aui\"",
+      "type": "\"cursor\" | \"cue\" | \"aui\"",
       "required": false,
       "defaultValue": null,
-      "description": "Which value-set paints this tree: `cue` (the default) or `aui`, which\ninstalls assistant-ui's own surface language. Leave it off inside an\n{@link AgentSurface }, which has stamped the subtree already.",
+      "description": "Which value-set paints this tree: `cue` (the default), `aui`, which\ninstalls assistant-ui's own surface language, or `cursor`, Cursor's\nagent-pane values. Leave it off inside an {@link AgentSurface }, which has\nstamped the subtree already.",
       "control": {
         "kind": "enum",
         "members": [
+          "cursor",
           "cue",
           "aui"
         ]

package/manifest/components/hover-card.json

@@ -147,6 +147,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/input-group.json

@@ -100,6 +100,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/input.json

@@ -96,6 +96,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/menubar.json

@@ -143,6 +143,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/multi-select.json

@@ -215,6 +215,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-sm",
     "--cue-info",
@@ -268,6 +269,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/musical-time-input.json

@@ -128,6 +128,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/navigation-menu.json

@@ -229,6 +229,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-sm",
     "--cue-leading-ui",
     "--cue-paint-rim-width",

package/manifest/components/number-field.json

@@ -117,6 +117,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/otp-field.json

@@ -150,6 +150,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/pane-seam.json

@@ -0,0 +1,171 @@
+{
+  "name": "PaneSeam",
+  "slug": "pane-seam",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One accessible seam that resizes one pane, with no dependency (cue-ui-55).\n\n`Resizable` divides a frame between panel groups on `react-resizable-panels`,\nan optional peer. Most consoles need one thing less: a side pane whose edge a\nreader can drag, and move from the keyboard. This is that edge, and nothing\nelse. It owns a number, not a layout: apply `value` to the pane's width (or\nheight) and the seam supplies the rest.\n\nThe rest is the part a hand-written separator forgets. It is a focusable\n`role=\"separator\"` that says its size and its bounds (`aria-valuenow`,\n`-valuemin`, `-valuemax`), so the width is spoken as well as draggable. The\narrows move it by `step`, Shift by `largeStep`, and Home and End jump to the\nbounds. Every value is clamped, so the pane can never squeeze its neighbour\nout of use.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The name a screen reader lists the seam by: `Resize the inspector`. Required,\nbecause a separator nobody can name is one a keyboard user cannot find.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The pane's size in pixels, when the caller holds it.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "defaultValue",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The size to start from when nothing controls it. Defaults to `min`.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with every new size, already clamped to `min` and `max`.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The smallest the pane may become, in pixels.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The largest the pane may become, in pixels.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "required": false,
+      "defaultValue": "16",
+      "description": "How far one arrow press moves the seam, in pixels. Defaults to 16.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "largeStep",
+      "type": "number",
+      "required": false,
+      "defaultValue": "64",
+      "description": "How far Shift with an arrow moves it, in pixels. Defaults to 64.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "orientation",
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "vertical",
+      "description": "`vertical`, the default, divides side-by-side panes and resizes a width;\n`horizontal` divides stacked panes and resizes a height.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "horizontal",
+          "vertical"
+        ]
+      }
+    },
+    {
+      "name": "edge",
+      "type": "\"end\" | \"start\"",
+      "required": false,
+      "defaultValue": "start",
+      "description": "Where the pane sits: `start`, the default, before the seam (left, or top),\nor `end`, after it. Moving the seam away from the pane grows it. A vertical\nseam reads the document's direction, so `start` is the right-hand pane\nunder `dir=\"rtl\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "end",
+          "start"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"defaultValue\" | \"onChange\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-style-focus-width"
+  ],
+  "summary": "One accessible seam that resizes one pane, with no dependency.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "const [width, setWidth] = React.useState(320);\nconst inspector = { width };\n\n<div className=\"flex\">\n  <main className=\"min-w-0 flex-1\">…</main>\n  <PaneSeam\n    label=\"Resize the inspector\"\n    edge=\"end\"\n    min={240}\n    max={640}\n    value={width}\n    onValueChange={setWidth}\n  />\n  <aside style={inspector}>…</aside>\n</div>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/pane-seam",
+  "mdUrl": "/docs/components/pane-seam.md",
+  "jsonUrl": "/r/components/pane-seam.json",
+  "whenToUse": [
+    "A side pane whose edge a reader can drag and move from the keyboard: an inspector, a file tree, a thread beside a canvas.",
+    "Keeping the layout yours. The seam reports a size and you apply it, so it fits any flex or grid frame."
+  ],
+  "whenNotToUse": [
+    "Several panels that divide one frame by percentage. Use `Resizable`, from `@cueplusplus/ui/layout/resizable`.",
+    "A list beside a detail that should stack when narrow. `SplitPane` builds that on this seam."
+  ],
+  "commonMistakes": [
+    "Rendering the seam and not applying its `value`. It moves nothing by itself; put the value on the pane's width or height.",
+    "Setting `edge` for the wrong side. `edge=\"end\"` is a pane after the seam, which grows as the seam moves toward the start.",
+    "A `label` that names the seam rather than the pane. A screen reader lists it by name, so say what it resizes: `Resize the inspector`."
+  ],
+  "specimens": [
+    {
+      "title": "PaneSeam",
+      "group": "layout",
+      "components": [
+        "PaneSeam"
+      ],
+      "code": "<div className=\"flex h-[9rem] w-full max-w-[36rem] overflow-hidden rounded-(--radius-surface) border border-border\">\n  <div className=\"flex min-w-0 flex-1 items-center justify-center font-mono text-(length:--cue-text-ui) text-fg-muted\">\n    Patch\n  </div>\n  <PaneSeam\n    label=\"Resize the inspector\"\n    edge=\"end\"\n    min={160}\n    max={360}\n    value={inspector}\n    onValueChange={setInspector}\n  />\n  <div\n    className=\"flex shrink-0 items-center justify-center font-mono text-(length:--cue-text-ui) text-fg-muted\"\n    style={{ width: inspector }}\n  >\n    Inspector · {inspector}px\n  </div>\n</div>",
+      "note": "One seam that resizes one pane, with no dependency. It owns a number, not a layout: the inspector below takes the seam's value as its width, and the seam clamps it so the patch list always keeps its room.",
+      "interaction": "drag the seam, or tab to it: the arrows move it 16px, Shift+arrow 64px, and Home and End jump to the inspector's narrowest and widest. A screen reader hears the width and its bounds."
+    }
+  ]
+}

package/manifest/components/password-input.json

@@ -158,6 +158,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/popover.json

@@ -177,6 +177,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/question-card.json

@@ -0,0 +1,157 @@
+{
+  "name": "QuestionCard",
+  "slug": "question-card",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "An agent's free-text question, answered in place.\n\nThe answer is the caller's to deliver. The card reports it through\n`onAnswer` and says where it has got to from `delivery`: on its way, arrived,\nor not arrived. It never claims more than that.",
+  "props": [
+    {
+      "name": "question",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the agent asked, in its own words. It also names the answer field.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "context",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "A supporting line under the question: who is asking, or why.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The field's resting text. Defaults to `QUESTION_LABELS.placeholder`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "answer",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The answer as the caller holds it. Drawn as sent while `delivery` is\n`sending` or `sent`, and put back in the field when it is `failed`, so a\nretry is one press.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "delivery",
+      "type": "\"failed\" | \"sending\" | \"sent\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where the answer has got to: `sending`, `sent` or `failed`. Unset while\nthe question is still waiting on the person.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "failed",
+          "sending",
+          "sent"
+        ]
+      }
+    },
+    {
+      "name": "onAnswer",
+      "type": "((answer: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the typed answer, trimmed, when the person sends it.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onDismiss",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the person skips the question. Skip is drawn only when this is set.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "labels",
+      "type": "Partial<QuestionLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace any of the card's own copy.",
+      "control": {
+        "kind": "opaque"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"onSubmit\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-style-focus-width",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "An agent's free-text question, answered in place, with where the answer has got to.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QuestionCard } from \"@cueplusplus/ui/elements\";\n\n<QuestionCard\n  question=\"Which branch should I deploy?\"\n  context=\"Asked by the release agent\"\n  onAnswer={(text) => reply(request.id, text)}\n/>\n// While the answer travels, the card shows it and takes no other.\n<QuestionCard question=\"Which branch?\" answer=\"main\" delivery=\"sending\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/question-card",
+  "mdUrl": "/docs/components/question-card.md",
+  "jsonUrl": "/r/components/question-card.json",
+  "whenToUse": [
+    "An agent asking something whose answer is a sentence: which branch, what to call the release, what the user meant.",
+    "Relaying a remote agent, where the answer can be on its way, arrive, or fail. `delivery` says which."
+  ],
+  "whenNotToUse": [
+    "A question with typed fields, such as a repository, a toggle or a choice. `ElicitationForm` draws those.",
+    "A yes or no about running something. `ApprovalCard` draws the decision as buttons."
+  ],
+  "commonMistakes": [
+    "Setting `delivery` to `sent` and treating the question as answered by the agent. Sent says the answer arrived, nothing more.",
+    "Dropping `answer` when delivery fails. Pass it back, and the field holds it again so the retry is one press."
+  ],
+  "specimens": [
+    {
+      "title": "QuestionCard",
+      "group": "elements",
+      "components": [
+        "QuestionCard"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"asking\" wide>\n    <LiveQuestion />\n  </Specimen>\n  <Specimen label=\"sending\" wide>\n    <QuestionCard\n      question=\"Which universe holds the house lights?\"\n      answer=\"Universe 1, channels 1 to 12\"\n      delivery=\"sending\"\n    />\n  </Specimen>\n  <Specimen label=\"not sent\" wide>\n    <QuestionCard\n      question=\"Which universe holds the house lights?\"\n      answer=\"Universe 1, channels 1 to 12\"\n      delivery=\"failed\"\n      onAnswer={() => {}}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "An agent's free-text question, answered in place. The answer is the caller's to deliver: the card reports it and says where it has got to. While it travels the card shows it and takes no other, and a failed delivery keeps what was typed, so sending again is one press.",
+      "interaction": "type an answer and press Enter to send it; Shift+Enter breaks the line. The first card is live and shows its answer as sent. Skip is drawn only when the question can be skipped."
+    }
+  ]
+}

package/manifest/components/resizable.json

@@ -7,7 +7,7 @@
     "react-resizable-panels"
   ],
   "clientOnly": true,
-  "description": "Split panes the user can drag, on `react-resizable-panels`.\n\n`react-resizable-panels` is an **optional peer**: import this from\n`@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app\nwith no split view never installs one.",
+  "description": "Split panes the user can drag, on `react-resizable-panels`.\n\n`react-resizable-panels` is an **optional peer**: import this from\n`@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app\nwith no split view never installs one. For one seam beside one pane,\n`PaneSeam` in the core barrel needs no peer at all.",
   "props": [],
   "typeReferences": [],
   "subcomponents": [

package/manifest/components/scrub-input.json

@@ -244,6 +244,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/search-input.json

@@ -182,6 +182,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/select.json

@@ -202,6 +202,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-paint-rest-shade",
@@ -235,6 +236,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/sheet.json

@@ -167,6 +167,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",