@cueplusplus/ui 0.13.0

package/manifest/components/queue-dock.json

@@ -0,0 +1,139 @@
+{
+  "name": "QueueDock",
+  "slug": "queue-dock",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "What you typed while it was still working, stacked and still yours to change.\n\nThe dock over the composer, and one of the two elements the teardown found\nmissing everywhere. Its whole reason to exist is the three things you can do\nto a queued turn *before* it sends: rewrite it now that you have seen what\nthe run did, jump it to the front, or drop it. A queue you can only watch is\na queue you will let send something you no longer mean.\n\nIt folds. Four queued turns above a composer is a wall, so the collapsed\nstate is one line — `4 queued messages` — and the entries come back on a\nclick. Open state is a prop like everything else in this family, so a\nscripted replay of the dock is arithmetic rather than a component with a mind\nof its own.\n\nAn empty queue draws **nothing**: no line, no empty state, no rule. Every\nproduct in the study does the same, and it is the right answer — a dock that\nannounces it has nothing in it is a permanent strip of chrome apologising for\nitself.",
+  "props": [
+    {
+      "name": "messages",
+      "type": "readonly QueuedFollowUp[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The turns waiting to send, in the order they will drain. Ordering is the\ncaller's: Cursor lets a person drag one up the list, and a component that\nsorted the array it was given could not be dragged.",
+      "control": {
+        "kind": "array",
+        "fixture": "agents.follow-ups"
+      }
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the entries are showing, or only the summary line.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onOpenChange",
+      "type": "((open: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the dock is expanded or collapsed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onEdit",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Put this turn back in the composer to be rewritten. The control exists\nonly when this is given.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onSendNow",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Send this turn now rather than waiting for the run to finish — Cursor's\n`Send now`, Zed's steer button. The control exists only when this is given.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onRemove",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Drop this turn before it ever sends. The control exists only when this is\ngiven.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "summary",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The summary line, replacing the one {@link formatQueueSummary} would build\n— for a dock that counts something else: `2 follow-ups`, `3 steps queued`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "labels",
+      "type": "Partial<QueueLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Copy for the five controls, merged over `QUEUE_LABELS`. Partial: overriding\n`sendNow` does not cost you the other four.",
+      "control": {
+        "kind": "opaque"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "What you typed while it was still working, stacked and still yours to change.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QueueDock } from \"@cueplusplus/ui/elements\";\n\n<QueueDock\n  messages={queued}\n  open={open}\n  onOpenChange={setOpen}\n  onEdit={(id) => lift(id)}\n  onSendNow={(id) => steer(id)}\n  onRemove={(id) => drop(id)}\n/>\n// Read-only: the same dock in a shared transcript, with nothing to press.\n<QueueDock messages={queued} open />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/queue-dock",
+  "mdUrl": "/docs/components/queue-dock.md",
+  "jsonUrl": "/r/components/queue-dock.json",
+  "specimens": [
+    {
+      "title": "QueueDock",
+      "group": "elements-agents",
+      "components": [
+        "QueueDock"
+      ],
+      "code": "<Specimens>\n  <Specimen label={queueOpen ? \"three waiting\" : \"folded\"} wide>\n    <div className=\"w-full max-w-md\">\n      <QueueDock\n        messages={queued}\n        open={queueOpen}\n        onOpenChange={setQueueOpen}\n        onEdit={drain}\n        onSendNow={drain}\n        onRemove={drain}\n      />\n    </div>\n  </Specimen>\n  <Specimen label=\"read-only, in a shared transcript\" wide>\n    <div className=\"w-full max-w-md\">\n      <QueueDock messages={FOLLOW_UPS.slice(0, 2)} open />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "What you typed while it was still working — and the three things you can still do about it. Cursor, opencode, Cline, Roo and Zed all ship this dock and assistant-ui's catalogue has nothing like it; the vendored MessageQueue two files along is the strip without the verbs. It folds to one line, because four queued turns above a composer is a wall, and an empty queue draws nothing at all rather than a strip of chrome apologising for itself.",
+      "interaction": "the summary line is the trigger and carries its own aria-expanded; each entry's three controls are named after the turn they belong to (`Send now: Then export the whole show to the desk`), so a screen reader hears which one it is about to jump. Press any of them here and the entry drains — the bench refills when the last one goes."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/quota-banner.json

@@ -0,0 +1,113 @@
+{
+  "name": "QuotaBanner",
+  "slug": "quota-banner",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "How much is left, when it comes back, and the way to get more.",
+  "props": [
+    {
+      "name": "used",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How much has been consumed.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "limit",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The allowance. The banner turns amber at 90 percent.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "unit",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is being counted: messages, runs, credits.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "resetsIn",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted time until the window rolls over.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "upgradeLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Label for the way out.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onUpgrade",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the upgrade action.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"used\"\n  | \"limit\"\n  | \"unit\"\n  | \"resetsIn\"\n  | \"upgradeLabel\"\n  | \"onUpgrade\"\n> & {\n  /** How much has been consumed. */\n  used: number;\n  /** The allowance. The banner turns amber at 90 percent. */\n  limit: number;\n  /** What is being counted: messages, runs, credits. */\n  unit: string;\n  /** Pre-formatted time until the window rolls over. */\n  resetsIn: string;\n  /** Label for the way out. */\n  upgradeLabel: string;\n  /** Called from the upgrade action. */\n  onUpgrade?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "How much is left, when it comes back, and the way to get more.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QuotaBanner } from \"@cueplusplus/ui/elements\";\n\n<QuotaBanner used={47} limit={50} unit=\"messages\" resetsIn=\"3h 12m\" upgradeLabel=\"Upgrade\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/quota-banner",
+  "mdUrl": "/docs/components/quota-banner.md",
+  "jsonUrl": "/r/components/quota-banner.json",
+  "specimens": [
+    {
+      "title": "QuotaBanner",
+      "group": "elements-agents",
+      "components": [
+        "QuotaBanner"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"comfortable\" wide>\n    <QuotaBanner\n      used={140}\n      limit={500}\n      unit=\"agent runs\"\n      resetsIn=\"12 days\"\n      upgradeLabel=\"Raise the limit\"\n      onUpgrade={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"nearly out\" wide>\n    <QuotaBanner\n      used={472}\n      limit={500}\n      unit=\"agent runs\"\n      resetsIn=\"3 days\"\n      upgradeLabel=\"Raise the limit\"\n      onUpgrade={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "How much is left, when it comes back, and the way to get more — in that order, which is the order the question is actually asked in. It turns warn at nine tenths rather than at the wall, so the warning arrives while there is still something to do about it.",
+      "interaction": "the upgrade action is an ink button with the label the caller passes; nothing here is a link, so the destination is entirely the host app's business."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/quote-reply.json

@@ -0,0 +1,129 @@
+{
+  "name": "QuoteReply",
+  "slug": "quote-reply",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.",
+  "props": [
+    {
+      "name": "before",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text preceding the selection.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "selection",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The highlighted run the actions apply to.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "after",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text following the selection.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "actions",
+      "type": "readonly QuoteAction[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the toolbar offers. Each action names one of the three built-in icons.",
+      "control": {
+        "kind": "array",
+        "fixture": "thread.quote-actions"
+      }
+    },
+    {
+      "name": "toolbarVisible",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the floating toolbar is showing. Drive it from your own selection handler.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "quoted",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Once quoted, the text carried into the composer, shown under a rule.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onAction",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the key of the action that was chosen.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"before\"\n  | \"selection\"\n  | \"after\"\n  | \"actions\"\n  | \"toolbarVisible\"\n  | \"quoted\"\n  | \"onAction\"\n> & {\n  /** Text preceding the selection. */\n  before: string;\n  /** The highlighted run the actions apply to. */\n  selection: string;\n  /** Text following the selection. */\n  after: string;\n  /** What the toolbar offers. Each action names one of the three built-in icons. */\n  actions: readonly QuoteAction[];\n  /** Whether the floating toolbar is showing. Drive it from your own selection handler. */\n  toolbarVisible: boolean;\n  /** Once quoted, the text carried into the composer, shown under a rule. */\n  quoted?: string;\n  /** Called with the key of the action that was chosen. */\n  onAction?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-leading-ui",
+    "--cue-radius-control",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { QuoteReply } from \"@cueplusplus/ui/elements\";\n\n<QuoteReply\n  before=\"The regression happens because \"\n  selection=\"the converter drops parts with no text\"\n  after=\", so the turn never lands.\"\n  actions={actions}\n  toolbarVisible\n  onAction={handle}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/quote-reply",
+  "mdUrl": "/docs/components/quote-reply.md",
+  "jsonUrl": "/r/components/quote-reply.json",
+  "specimens": [
+    {
+      "title": "QuoteReply",
+      "group": "elements-thread",
+      "components": [
+        "QuoteReply"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"toolbar up\" wide>\n    <QuoteReply\n      before=\"Patched 6 fixtures on \"\n      selection=\"universe 3, channels 1 to 48\"\n      after=\". Cue 1 is untouched.\"\n      actions={QUOTE_ACTIONS}\n      toolbarVisible\n    />\n  </Specimen>\n  <Specimen label=\"quoted\" wide>\n    <QuoteReply\n      before=\"Patched 6 fixtures on \"\n      selection=\"universe 3, channels 1 to 48\"\n      after=\". Cue 1 is untouched.\"\n      actions={QUOTE_ACTIONS}\n      toolbarVisible={false}\n      quoted=\"universe 3, channels 1 to 48\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Select a phrase in an answer and act on that phrase rather than the whole turn. The selection stays lit in the streaming hue while the toolbar is up, and what you quoted is repeated under the composer so the next turn's subject is never in doubt.",
+      "interaction": "the toolbar's row is reserved whether or not it is showing, so nothing below it jumps when a selection appears. Each action is a labelled button."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/radio-group.json

@@ -0,0 +1,83 @@
+{
+  "name": "RadioGroup",
+  "slug": "radio-group",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a\nsingle value.\n\nArrow keys move *and* select, per the WAI-ARIA radio group pattern that Base\nUI implements — so the whole group is one tab stop, which is what keeps a\ndense settings panel navigable.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the stack defaults.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "orientation",
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "vertical",
+      "description": "Lay the options out in a column (default) or a row.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "horizontal",
+          "vertical"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseRadioGroup.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-ui"
+  ],
+  "summary": "One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a single value.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<RadioGroup aria-label=\"Blend mode\" value={mode} onValueChange={setMode}>\n  <Radio value=\"htp\" label=\"HTP\" />\n  <Radio value=\"ltp\" label=\"LTP\" />\n</RadioGroup>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/radio-group",
+  "mdUrl": "/docs/components/radio-group.md",
+  "jsonUrl": "/r/components/radio-group.json",
+  "specimens": [
+    {
+      "title": "RadioGroup",
+      "group": "forms",
+      "components": [
+        "RadioGroup",
+        "Radio"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <RadioGroup aria-label=\"Blend mode\" defaultValue=\"htp\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n  </RadioGroup>\n  <RadioGroup aria-label=\"Blend mode, horizontal\" defaultValue=\"ltp\" orientation=\"horizontal\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n    <Radio value=\"off\" label=\"Off\" disabled />\n  </RadioGroup>\n</div>",
+      "note": "One choice out of a short set, in either orientation.",
+      "interaction": "arrow keys move the selection, and the group is one tab stop."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/radio.json

@@ -0,0 +1,94 @@
+{
+  "name": "Radio",
+  "slug": "radio",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One option inside a {@link RadioGroup}.\n\nRound, to say \"exactly one\" the way a square {@link Checkbox } says \"any\nnumber\". Checked draws an accent rim with an accent core rather than a solid\nfill, so the selected option stays legible against the sunken field colour on\nevery theme.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Inline label rendered beside the dot and wrapped with it in a `<label>`, so\nthe text is both the accessible name and part of the hit target.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the dot defaults.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the density icon ladder for the dot. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseRadio.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-ui"
+  ],
+  "summary": "One option inside a {@link RadioGroup}.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Radio value=\"htp\" label=\"Highest takes precedence\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/radio",
+  "mdUrl": "/docs/components/radio.md",
+  "jsonUrl": "/r/components/radio.json",
+  "specimens": [
+    {
+      "title": "RadioGroup",
+      "group": "forms",
+      "components": [
+        "RadioGroup",
+        "Radio"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <RadioGroup aria-label=\"Blend mode\" defaultValue=\"htp\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n  </RadioGroup>\n  <RadioGroup aria-label=\"Blend mode, horizontal\" defaultValue=\"ltp\" orientation=\"horizontal\">\n    {BLEND_MODES.map((option) => (\n      <Radio key={option.value} value={option.value} label={option.label} />\n    ))}\n    <Radio value=\"off\" label=\"Off\" disabled />\n  </RadioGroup>\n</div>",
+      "note": "One choice out of a short set, in either orientation.",
+      "interaction": "arrow keys move the selection, and the group is one tab stop."
+    }
+  ],
+  "todo": true
+}