@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/tool-call.json

@@ -0,0 +1,119 @@
+{
+  "name": "ToolCall",
+  "slug": "tool-call",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One tool invocation with its request and result tucked behind a disclosure.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Tool name shown on the collapsed trigger row."
+    },
+    {
+      "name": "activeLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Verb shown with a shimmer while the tool is running, for example Searching the docs."
+    },
+    {
+      "name": "query",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Short chip next to the label summarizing the call target."
+    },
+    {
+      "name": "request",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Request payload shown inside the expanded disclosure."
+    },
+    {
+      "name": "result",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Result payload shown once the call is no longer running."
+    },
+    {
+      "name": "running",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true a spinner replaces the success check on the trigger."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the request and result panel is expanded."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the user expands or collapses the call."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes merged onto the root."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "One tool invocation with its request and result tucked behind a disclosure.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ToolCall } from \"@cueplusplus/ui/elements\";\n\n<ToolCall\n  label=\"Searched\"\n  activeLabel=\"Searching\"\n  query=\"composer props\"\n  request='{\"q\":\"composer\"}'\n  result='{\"hits\":2}'\n  running={false}\n  open\n  onOpenChange={setOpen}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tool-call",
+  "mdUrl": "/docs/components/tool-call.md",
+  "jsonUrl": "/r/components/tool-call.json",
+  "specimens": [
+    {
+      "title": "ToolCall",
+      "group": "elements",
+      "components": [
+        "ToolCall"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"running\" wide>\n    <ToolCall\n      label=\"Read the plot\"\n      activeLabel=\"Reading the plot\"\n      query=\"front-truss.gdtf\"\n      request='{\"path\":\"plots/front-truss.gdtf\"}'\n      result=\"\"\n      running\n      open={open[\"running\"] ?? false}\n      onOpenChange={opener(\"running\")}\n    />\n  </Specimen>\n  <Specimen label=\"settled, open\" wide>\n    <ToolCall\n      label=\"Read the plot\"\n      activeLabel=\"Reading the plot\"\n      query=\"front-truss.gdtf\"\n      request='{\"path\":\"plots/front-truss.gdtf\"}'\n      result=\"6 fixtures, Source Four 26°.\"\n      running={false}\n      open={open[\"settled\"] ?? false}\n      onOpenChange={opener(\"settled\")}\n    />\n  </Specimen>\n  <Specimen label=\"settled, collapsed\" wide>\n    <ToolCall\n      label=\"Wrote cue 1\"\n      activeLabel=\"Writing cue 1\"\n      query=\"house-to-half\"\n      request='{\"cue\":1,\"fade\":3}'\n      result=\"Cue 1 holds at 3.0s.\"\n      running={false}\n      open={open[\"collapsed\"] ?? false}\n      onOpenChange={opener(\"collapsed\")}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "One invocation, with the request and the result behind a disclosure. While it runs the verb shimmers and the row is wider; when it settles the label swaps, the box shrinks to fit and a check lands. Both payloads are printed as text, never parsed.",
+      "interaction": "the whole trigger row is the toggle, and it takes focus. The check fades in rather than appearing, so a settled call reads as having settled."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tool-error.json

@@ -0,0 +1,114 @@
+{
+  "name": "ToolError",
+  "slug": "tool-error",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "One call failed. The error, the attempt count, and a retry that doesn't restart the\nturn.",
+  "props": [
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Tool that failed."
+    },
+    {
+      "name": "target",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What it was called against."
+    },
+    {
+      "name": "message",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The raw error, shown in mono rather than reworded."
+    },
+    {
+      "name": "attempt",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which attempt this was."
+    },
+    {
+      "name": "maxAttempts",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many the runtime will make."
+    },
+    {
+      "name": "retrying",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Swaps the retry control for a spinner and disables it."
+    },
+    {
+      "name": "onRetry",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to run the call again without restarting the turn."
+    },
+    {
+      "name": "onSkip",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to give up on this call and let the turn continue."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"name\"\n  | \"target\"\n  | \"message\"\n  | \"attempt\"\n  | \"maxAttempts\"\n  | \"retrying\"\n  | \"onRetry\"\n  | \"onSkip\"\n> & {\n  /** Tool that failed. */\n  name: string;\n  /** What it was called against. */\n  target: string;\n  /** The raw error, shown in mono rather than reworded. */\n  message: string;\n  /** Which attempt this was. */\n  attempt: number;\n  /** How many the runtime will make. */\n  maxAttempts: number;\n  /** Swaps the retry control for a spinner and disables it. */\n  retrying: boolean;\n  /** Called to run the call again without restarting the turn. */\n  onRetry?: () => void;\n  /** Called to give up on this call and let the turn continue. */\n  onSkip?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "One call failed.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ToolError } from \"@cueplusplus/ui/elements\";\n\n<ToolError\n  name=\"fetch\"\n  target=\"https://api.example.com/v1/issues\"\n  message=\"ETIMEDOUT after 30000ms\"\n  attempt={2}\n  maxAttempts={3}\n  retrying={false}\n  onRetry={retry}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tool-error",
+  "mdUrl": "/docs/components/tool-error.md",
+  "jsonUrl": "/r/components/tool-error.json",
+  "specimens": [
+    {
+      "title": "ToolError",
+      "group": "elements",
+      "components": [
+        "ToolError"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"failed\" wide>\n    <ToolError\n      name=\"artnet.probe\"\n      target=\"10.0.0.255\"\n      message=\"ETIMEDOUT after 30000ms\"\n      attempt={attempt}\n      maxAttempts={3}\n      retrying={false}\n      onRetry={() => setAttempt((count) => Math.min(3, count + 1))}\n      onSkip={() => setAttempt(2)}\n    />\n  </Specimen>\n  <Specimen label=\"retrying\" wide>\n    <ToolError\n      name=\"artnet.probe\"\n      target=\"10.0.0.255\"\n      message=\"ETIMEDOUT after 30000ms\"\n      attempt={3}\n      maxAttempts={3}\n      retrying\n    />\n  </Specimen>\n  <Specimen label=\"no skip offered\" wide>\n    <ToolError\n      name=\"cue.write\"\n      target=\"show/main-stage.cue\"\n      message=\"EACCES: show file is read-only\"\n      attempt={1}\n      maxAttempts={1}\n      retrying={false}\n      onRetry={() => {}}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "One call failed, and the turn did not. The message is the raw error in mono rather than a reworded one, the attempt count is the runtime's, and Retry re-runs the call in place. Skip is disabled unless the host offers one, because a control that cannot do anything should say so.",
+      "interaction": "Retry raises the attempt count here; Skip puts it back. While retrying, the control is a spinner and takes no clicks."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tool-group.json

@@ -0,0 +1,83 @@
+{
+  "name": "ToolGroup",
+  "slug": "tool-group",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Calls that went out together, collapsed to one row until you want the detail.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the group did, as one line."
+    },
+    {
+      "name": "tools",
+      "type": "readonly GroupedTool[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Calls issued together. The header summarizes them: progress while any run,\nfailures if any failed, otherwise the count."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the per-call list is expanded."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "((open: boolean) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the group is expanded or collapsed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"label\" | \"tools\" | \"open\" | \"onOpenChange\"\n> & {\n  /** What the group did, as one line. */\n  label: string;\n  /**\n   * Calls issued together. The header summarizes them: progress while any run,\n   * failures if any failed, otherwise the count.\n   */\n  tools: readonly GroupedTool[];\n  /** Whether the per-call list is expanded. */\n  open: boolean;\n  /** Called when the group is expanded or collapsed. */\n  onOpenChange?: (open: boolean) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-text-body"
+  ],
+  "summary": "Calls that went out together, collapsed to one row until you want the detail.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ToolGroup } from \"@cueplusplus/ui/elements\";\n\n<ToolGroup\n  label=\"Read 4 files in parallel\"\n  tools={tools}\n  open={open}\n  onOpenChange={setOpen}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tool-group",
+  "mdUrl": "/docs/components/tool-group.md",
+  "jsonUrl": "/r/components/tool-group.json",
+  "specimens": [
+    {
+      "title": "ToolGroup",
+      "group": "elements",
+      "components": [
+        "ToolGroup"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"3 of 4 back\" wide>\n    <ToolGroup\n      label=\"Probed the rig in parallel\"\n      tools={PARALLEL}\n      open={open[\"group-running\"] ?? false}\n      onOpenChange={opener(\"group-running\")}\n    />\n  </Specimen>\n  <Specimen label=\"all done, collapsed\" wide>\n    <ToolGroup\n      label=\"Probed the rig in parallel\"\n      tools={SETTLED}\n      open={open[\"group-done\"] ?? false}\n      onOpenChange={opener(\"group-done\")}\n    />\n  </Specimen>\n  <Specimen label=\"one failed\" wide>\n    <ToolGroup\n      label=\"Probed the rig in parallel\"\n      tools={BROKEN}\n      open={open[\"group-failed\"] ?? false}\n      onOpenChange={opener(\"group-failed\")}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Calls that went out together, rolled up to one row. The summary counts rather than describes: progress while any are still out, the failure count if any failed, otherwise the total.",
+      "interaction": "the header is one button with aria-expanded; the rows underneath are a list, not a menu."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tool-timeline.json

@@ -0,0 +1,119 @@
+{
+  "name": "ToolTimeline",
+  "slug": "tool-timeline",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A whole working session summarized as verbs, targets, and file stats.",
+  "props": [
+    {
+      "name": "steps",
+      "type": "readonly TimelineStep[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Working-session verbs, chips, and icons to reveal over time."
+    },
+    {
+      "name": "visibleSteps",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many steps from the start are currently shown."
+    },
+    {
+      "name": "streaming",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the trigger shows Working with a shimmer and elapsed timer."
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the collapsible timeline body is expanded."
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the user expands or collapses the timeline."
+    },
+    {
+      "name": "restingLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Trigger label once streaming finishes."
+    },
+    {
+      "name": "activeLabel",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Full-size live label while streaming, for example Working for 12s."
+    },
+    {
+      "name": "stats",
+      "type": "TimelineStat[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Per-file addition and removal counts listed under the steps."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes merged onto the root."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-label"
+  ],
+  "summary": "A whole working session summarized as verbs, targets, and file stats.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { FileSearchIcon } from \"lucide-react\";\nimport { ToolTimeline } from \"@cueplusplus/ui/elements\";\n\n<ToolTimeline\n  steps={[{ verb: \"Read\", chip: \"thread.tsx\", icon: FileSearchIcon }]}\n  visibleSteps={1}\n  streaming\n  open\n  onOpenChange={setOpen}\n  restingLabel=\"Worked for 12s\"\n  activeLabel=\"Working for 12s\"\n  stats={[{ file: \"thread.tsx\", added: 4, removed: 1 }]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tool-timeline",
+  "mdUrl": "/docs/components/tool-timeline.md",
+  "jsonUrl": "/r/components/tool-timeline.json",
+  "specimens": [
+    {
+      "title": "ToolTimeline",
+      "group": "elements-agents",
+      "components": [
+        "ToolTimeline"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"streaming, open\" wide>\n    <ToolTimeline\n      steps={STEPS}\n      visibleSteps={3}\n      streaming\n      open={timelineOpen}\n      onOpenChange={setTimelineOpen}\n      restingLabel=\"Read 3 files, ran 1 command\"\n      activeLabel=\"Working on the patch\"\n      stats={[]}\n    />\n  </Specimen>\n  <Specimen label=\"settled, collapsed\" wide>\n    <ToolTimeline\n      steps={STEPS}\n      visibleSteps={STEPS.length}\n      streaming={false}\n      open={false}\n      onOpenChange={() => undefined}\n      restingLabel=\"Read 3 files, ran 1 command\"\n      activeLabel=\"Working on the patch\"\n      stats={STATS}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A whole working session folded into one line — `Read 4 files, ran 1 command` — that opens into the verbs, the things they were done to, and the files that ended up changed. It is the summary a transcript gets *after* the fact, where `ToolCall` is what it looks like during.",
+      "interaction": "the trigger is a labelled button taking cue's focus ring; the chevron turns with the panel, which animates its own height through Base UI. While streaming the label shimmers and the live step's verb shimmers with it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/toolbar.json

@@ -0,0 +1,163 @@
+{
+  "name": "Toolbar",
+  "slug": "toolbar",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The strip of controls across the top of a view.\n\nWraps Base UI's `Toolbar`, so the whole bar is one tab stop with arrow-key\nroving focus inside it — which is the entire point of the ARIA toolbar\npattern and the reason not to hand-roll this out of a flex row of buttons.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Button",
+    "Group",
+    "Separator"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Toolbar.Root",
+      "description": "The bar itself: chrome-toolbar tall, hairline underneath, surface fill.\n\nHeight comes from `--cue-chrome-toolbar`, which is a *chrome* token rather\nthan a control token — the bar is part of the window furniture and gets its\nown rung of the density ladder, one that stays legible when the controls\ninside it shrink.\n\nThe bar element is also its own scroller, rather than sitting inside one:\nthat is what keeps the height, the hairline and the fill on the element with\n`role=\"toolbar\"`, so a bar that overflows still looks like one bar rather\nthan a strip inside a box. The wrapper the scrolling shape adds is an\nunpainted `relative` frame whose only job is to hold the pager chevrons.\n\nGive it an `aria-label`: a toolbar with no name is announced as \"toolbar\".",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the bar."
+        },
+        {
+          "name": "previousLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Show earlier controls",
+          "description": "Accessible name for the chevron that reveals controls off the leading edge."
+        },
+        {
+          "name": "nextLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Show later controls",
+          "description": "Accessible name for the chevron that reveals controls off the trailing edge."
+        },
+        {
+          "name": "overflow",
+          "type": "\"clip\" | \"scroll\"",
+          "required": false,
+          "defaultValue": "scroll",
+          "description": "What the bar does when its controls do not fit. Defaults to `\"scroll\"`.\n\n`\"scroll\"` is the library's one overflow behaviour (see\n`./_edge-scroller` for why it is scrolling rather than wrapping or a \"more\"\nmenu): the bar keeps its single chrome-rung height, the controls scroll\ninside it, the overflowing edge is faded and a pager chevron appears there.\nA bar whose controls all fit renders exactly as it did before — no mask, no\nchevrons, no compositing layer.\n\n`\"clip\"` restores the old behaviour and adds no wrapper element, for a bar\nthat is already inside something which scrolls.\n\nA vertical toolbar ignores this: the affordance is horizontal, and a\nvertical bar overflows on the axis this does not measure."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseToolbar.Root.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Button",
+      "usage": "Toolbar.Button",
+      "description": "A borderless toolbar control.\n\nDeliberately not a `Button`: inside a bar, six rimmed buttons in a row read\nas six competing objects. Toolbar controls speak through text colour and a\nhover fill only (the venu convention), which keeps the bar reading as one\nstrip. Reach for `<Toolbar.Button render={<Button variant=\"primary\" />}>`\nwhen exactly one action in the bar must be loud.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the button."
+        },
+        {
+          "name": "icon",
+          "type": "ElementType<any, keyof IntrinsicElements>",
+          "required": false,
+          "defaultValue": null,
+          "description": "Optional leading icon (e.g. a lucide icon), drawn `aria-hidden`."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseToolbar.Button.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Group",
+      "usage": "Toolbar.Group",
+      "description": "A tight cluster of related controls inside the bar.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the group."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseToolbar.Group.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Separator",
+      "usage": "Toolbar.Separator",
+      "description": "A hairline between clusters. Base UI orients it perpendicular to the bar, so\na horizontal toolbar gets a vertical rule with no prop to remember; the\nclasses follow `data-orientation` for the same reason.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the rule."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseToolbar.Separator.Props, \"className\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-chrome-toolbar",
+    "--cue-control-md",
+    "--cue-edge-fade",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-pad-row-x",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "The strip of controls across the top of a view.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Toolbar.Root aria-label=\"Cue actions\">\n  <Toolbar.Group aria-label=\"Playback\">\n    <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n    <Toolbar.Button icon={Square}>Stop</Toolbar.Button>\n  </Toolbar.Group>\n  <Toolbar.Separator />\n  <Toolbar.Button icon={Save}>Save</Toolbar.Button>\n</Toolbar.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/toolbar",
+  "mdUrl": "/docs/components/toolbar.md",
+  "jsonUrl": "/r/components/toolbar.json",
+  "specimens": [
+    {
+      "title": "Toolbar",
+      "group": "chrome",
+      "components": [
+        "Toolbar"
+      ],
+      "code": "<div className=\"flex w-full flex-col gap-(--cue-space-4)\">\n  <Toolbar.Root aria-label=\"Text formatting\">\n    <Toolbar.Group>\n      <Toolbar.Button icon={Bold} aria-label=\"Bold\" />\n      <Toolbar.Button icon={Italic} aria-label=\"Italic\" />\n      <Toolbar.Button icon={Underline} aria-label=\"Underline\" />\n    </Toolbar.Group>\n    <Toolbar.Separator />\n    <Toolbar.Group>\n      <Toolbar.Button icon={List}>Cue list</Toolbar.Button>\n      <Toolbar.Button icon={Monitor} disabled>\n        Preview\n      </Toolbar.Button>\n    </Toolbar.Group>\n  </Toolbar.Root>\n\n  <div className=\"w-full max-w-[16rem] overflow-hidden rounded-(--radius-surface) border border-border\">\n    <Toolbar.Root aria-label=\"Playback, boxed\">\n      <Toolbar.Button icon={List}>Cue list</Toolbar.Button>\n      <Toolbar.Separator />\n      <Toolbar.Button icon={Monitor}>Preview</Toolbar.Button>\n      <Toolbar.Button icon={Plus}>Add cue</Toolbar.Button>\n      <Toolbar.Button icon={Eye}>Blind</Toolbar.Button>\n    </Toolbar.Root>\n  </div>\n</div>",
+      "note": "Borderless text-colour feedback: a pressed tool changes ink, not ground. Boxed to 16rem below, the bar scrolls rather than clipping — it stays one chrome rung tall, because a second row would be stolen from the work area.",
+      "interaction": "hover lifts the ink to `--cue-fg`; arrow keys move between tools and reach the ones off-screen, Tab leaves the toolbar."
+    }
+  ],
+  "todo": true
+}