@cueplusplus/ui 0.13.0

package/manifest/components/segmented-control.json

@@ -0,0 +1,178 @@
+{
+  "name": "SegmentedControl",
+  "slug": "segmented-control",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A one-of-N switch drawn as a row of segments: the console's view picker.\n\nBuilt on Base UI's `ToggleGroup`, so arrow-key roving focus and the\npressed-state ARIA come from the primitive. Two rules are added on top:\n\n1. **It cannot be emptied.** A toggle group lets you unpress the pressed\n   item; a segmented control is a choice between N things, so clicking the\n   active segment is a no-op rather than a way to end up with nothing\n   selected. This is why the underlying group is always controlled here, even\n   when the wrapper is not.\n2. **The active segment is tinted, not filled** — see {@link ITEM_CLASSES}.\n\nGive the group an `aria-label`: on its own it is an unnamed group of buttons.",
+  "props": [
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The initially picked value when uncontrolled.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the group frame.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "previousLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show earlier segments",
+      "description": "Accessible name for the chevron that reveals segments off the leading edge.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "nextLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Show later segments",
+      "description": "Accessible name for the chevron that reveals segments off the trailing edge.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "overflow",
+      "type": "\"clip\" | \"scroll\"",
+      "required": false,
+      "defaultValue": "scroll",
+      "description": "What the control does when its segments do not fit. Defaults to `\"scroll\"`.\n\nThe same behaviour `Toolbar` has, from the same module, for the same\nreason: a switcher with five segments in a page header's actions slot runs\noff a phone-width screen, and wrapping it would turn a one-rung control\ninto a two-row block that no longer reads as one switch. `\"scroll\"` keeps\nthe rim and the height, scrolls the segments inside them, fades the\noverflowing edge and offers a pager chevron there.\n\n`\"clip\"` is the old behaviour, for a control already inside something that\nscrolls.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "clip",
+          "scroll"
+        ]
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Which rung of the control ladder to sit on. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The picked value when controlled. Pass with `onValueChange`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the newly picked value. Never called with `undefined`.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "items",
+      "type": "readonly SegmentedControlItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The segments, in display order.",
+      "control": {
+        "kind": "array",
+        "fixture": "chrome.console-modes"
+      }
+    },
+    {
+      "name": "itemClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for every segment.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n    ToggleGroup.Props<string>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"multiple\" | \"className\" | \"children\"\n  >"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-edge-fade",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A one-of-N switch drawn as a row of segments: the console's view picker.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SegmentedControl\n  aria-label=\"View\"\n  value={view}\n  onValueChange={setView}\n  items={[{ value: \"beams\", label: \"Beams\" }, { value: \"patch\", label: \"Patch\" }]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/segmented-control",
+  "mdUrl": "/docs/components/segmented-control.md",
+  "jsonUrl": "/r/components/segmented-control.json",
+  "specimens": [
+    {
+      "title": "SegmentedControl",
+      "group": "chrome",
+      "components": [
+        "SegmentedControl"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"sm\">\n    <SegmentedControl\n      aria-label=\"Console mode, small\"\n      items={MODE_ITEMS}\n      value={mode}\n      onValueChange={setMode}\n      size=\"sm\"\n    />\n  </Specimen>\n  <Specimen label=\"md\">\n    <SegmentedControl\n      aria-label=\"Console mode\"\n      items={MODE_ITEMS}\n      value={mode}\n      onValueChange={setMode}\n    />\n  </Specimen>\n  <Specimen label=\"with icons\">\n    <SegmentedControl\n      aria-label=\"Console mode, icons\"\n      items={[\n        { value: \"patch\", label: \"Patch\", icon: Lightbulb },\n        { value: \"cues\", label: \"Cues\", icon: List },\n        { value: \"live\", label: \"Live\", icon: Monitor, disabled: true },\n      ]}\n      value={mode}\n      onValueChange={setMode}\n      size=\"lg\"\n    />\n  </Specimen>\n  <Specimen label=\"overflowing\" wide>\n    <div className=\"w-full max-w-[15rem]\">\n      <SegmentedControl\n        aria-label=\"Page state\"\n        items={STATE_ITEMS}\n        value={state}\n        onValueChange={setState}\n        size=\"sm\"\n      />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "Three sizes. The active segment is `accent-soft`, on the same ruling as the active tab. The last specimen is five segments in 15rem: the rim and the height hold, the segments scroll inside them — the same overflow behaviour Toolbar and AppBar have, from the same module.",
+      "interaction": "arrow keys move the selection and reach the segments off-screen; the whole control is one tab stop. A chevron appears at whichever edge still hides one."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/select.json

@@ -0,0 +1,253 @@
+{
+  "name": "Select",
+  "slug": "select",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A dropdown for choosing one of a known set of values.\n\nThe trigger rides the recessed control chassis so a select lines up with the\n{@link Input }s beside it; the popup wears the overlay surface\n(`surface-2` + `border-overlay` + the overlay radius) that every floating\nelement in this system shares. Rows are one `control-sm` tall — the list is\nmeant to show a dozen options without scrolling.\n\nThe popup is portalled through {@link useCuePortalProps}, so it carries the\ncaller's `data-theme` / `data-density` / `data-mode` even though it mounts at\nthe end of `<body>`. Without that a select opened inside an ultra-compact\nisland would render at the page's density.",
+  "props": [
+    {
+      "name": "items",
+      "type": "readonly SelectOption[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The rows, in display order.",
+      "control": {
+        "kind": "array",
+        "fixture": "sample.blend-modes"
+      }
+    },
+    {
+      "name": "value",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": null,
+      "description": "Selected value. Use with `onValueChange` for a controlled select.",
+      "control": {
+        "kind": "string",
+        "nullable": true
+      }
+    },
+    {
+      "name": "defaultValue",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initially selected value for an uncontrolled select.",
+      "control": {
+        "kind": "string",
+        "nullable": true
+      }
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string | null) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the newly selected value (`null` when cleared).",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Shown in the trigger while nothing is selected.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder for the trigger. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Prevent opening and grey the trigger out.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Require a value before the owning form submits.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name for the hidden input, when the select is part of a form.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id forwarded to the select's hidden input.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the trigger, when no {@link FieldLabel } names it.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id of the element naming the trigger.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "modal",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Lock interaction to the popup while it is open. Defaults to `true`, matching\nBase UI; set `false` inside a canvas or a drag surface that must keep\nreceiving pointer events.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the trigger.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "popupClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the popup surface.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "sideOffset",
+      "type": "number",
+      "required": false,
+      "defaultValue": "4",
+      "description": "Distance in px between the trigger and the popup. Defaults to `4`.",
+      "control": {
+        "kind": "number"
+      }
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A dropdown for one value out of a known, short set.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Select\n  aria-label=\"Blend mode\"\n  items={[{ value: \"htp\", label: \"HTP\" }, { value: \"ltp\", label: \"LTP\" }]}\n  value={mode}\n  onValueChange={setMode}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/select",
+  "mdUrl": "/docs/components/select.md",
+  "jsonUrl": "/r/components/select.json",
+  "whenToUse": [
+    "Picking one of roughly three to twelve options that are all known ahead of time.",
+    "Anywhere the trigger has to line up with the inputs beside it: it rides the same recessed chassis."
+  ],
+  "whenNotToUse": [
+    "A long or open-ended list the user should type into. Use `Combobox` or `Autocomplete`.",
+    "Two or three options that fit on screen. Use `SegmentedControl` or `RadioGroup`.",
+    "More than one value at a time. Use `MultiSelect`."
+  ],
+  "commonMistakes": [
+    "Shipping without an accessible name. Pass `aria-label`, or wrap it in a `Field` with a `FieldLabel`.",
+    "Hand-rolling the popup with a raw Base UI portal, which loses the theme and density stamps the portal contract puts on it."
+  ],
+  "specimens": [
+    {
+      "title": "Select",
+      "group": "forms",
+      "components": [
+        "Select"
+      ],
+      "code": "<Specimens>\n  {SIZES.map((size) => (\n    <Specimen key={size} label={size}>\n      <Select\n        aria-label={`Blend mode, ${size}`}\n        items={[...BLEND_MODES]}\n        defaultValue=\"htp\"\n        size={size}\n      />\n    </Specimen>\n  ))}\n  <Specimen label=\"placeholder\">\n    <Select aria-label=\"Blend mode, empty\" items={[...BLEND_MODES]} placeholder=\"Choose\" />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Select\n      aria-label=\"Blend mode, disabled\"\n      items={[...BLEND_MODES]}\n      defaultValue=\"ltp\"\n      disabled\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A listbox, not a native select: the popup is portalled through the stamping contract, so it keeps the density of the island it was opened from.",
+      "interaction": "type-ahead jumps to a matching item; Escape closes and returns focus to the trigger."
+    }
+  ]
+}

package/manifest/components/separator.json

@@ -0,0 +1,56 @@
+{
+  "name": "Separator",
+  "slug": "separator",
+  "group": "primitives",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A hairline rule that screen readers can see.\n\nWraps Base UI's `Separator`, which contributes `role=\"separator\"` and\n`aria-orientation`. The line itself is a 1px block painted with the `border`\ntoken rather than an actual CSS border: a bordered zero-height box collapses\nunpredictably inside flex rows, while a `h-px` block never does.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the hairline defaults.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseSeparator.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border"
+  ],
+  "summary": "A hairline rule that screen readers can see.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Separator />\n<div className=\"flex items-center gap-2\">a <Separator orientation=\"vertical\" /> b</div>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/separator",
+  "mdUrl": "/docs/components/separator.md",
+  "jsonUrl": "/r/components/separator.json",
+  "specimens": [
+    {
+      "title": "Separator",
+      "group": "primitives",
+      "components": [
+        "Separator"
+      ],
+      "code": "<div className=\"flex w-full max-w-[28rem] flex-col gap-(--cue-space-4)\">\n  <Separator />\n  <div className=\"flex h-8 items-center gap-(--cue-space-4)\">\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">Cue 1</span>\n    <Separator orientation=\"vertical\" />\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">3.0s</span>\n    <Separator orientation=\"vertical\" />\n    <span className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">HTP</span>\n  </div>\n</div>",
+      "note": "A hairline in either orientation.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/settings-panel.json

@@ -0,0 +1,152 @@
+{
+  "name": "SettingsPanel",
+  "slug": "settings-panel",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "props": [
+    {
+      "name": "model",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Selected model.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "models",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Models offered in the segmented control. Keep it to a few; more wants the model\npicker.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "systemPrompt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current system prompt.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "temperature",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current temperature, 0 to 2.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "toggles",
+      "type": "readonly SettingToggle[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Capability switches with a line each explaining what they turn on.",
+      "control": {
+        "kind": "array",
+        "fixture": "composer.toggles"
+      }
+    },
+    {
+      "name": "onModelChange",
+      "type": "((model: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the model changes.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onSystemPromptChange",
+      "type": "((prompt: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the prompt is edited.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onTemperatureChange",
+      "type": "((temperature: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the slider moves.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onToggle",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the switched capability's key.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"model\"\n  | \"models\"\n  | \"systemPrompt\"\n  | \"temperature\"\n  | \"toggles\"\n  | \"onModelChange\"\n  | \"onSystemPromptChange\"\n  | \"onTemperatureChange\"\n  | \"onToggle\"\n> & {\n  /** Selected model. */\n  model: string;\n  /**\n   * Models offered in the segmented control. Keep it to a few; more wants the model\n   * picker.\n   */\n  models: readonly string[];\n  /** Current system prompt. */\n  systemPrompt: string;\n  /** Current temperature, 0 to 2. */\n  temperature: number;\n  /** Capability switches with a line each explaining what they turn on. */\n  toggles: readonly SettingToggle[];\n  /** Called when the model changes. */\n  onModelChange?: (model: string) => void;\n  /** Called as the prompt is edited. */\n  onSystemPromptChange?: (prompt: string) => void;\n  /** Called as the slider moves. */\n  onTemperatureChange?: (temperature: number) => void;\n  /** Called with the switched capability's key. */\n  onToggle?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-leading-ui",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SettingsPanel } from \"@cueplusplus/ui/elements\";\n\n<SettingsPanel\n  model={model}\n  models={models}\n  systemPrompt={prompt}\n  temperature={0.7}\n  toggles={toggles}\n  onModelChange={setModel}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/settings-panel",
+  "mdUrl": "/docs/components/settings-panel.md",
+  "jsonUrl": "/r/components/settings-panel.json",
+  "specimens": [
+    {
+      "title": "SettingsPanel",
+      "group": "elements-composer",
+      "components": [
+        "SettingsPanel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"live\" wide>\n    <SettingsPanel\n      model={settingsModel}\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt={prompt}\n      temperature={temperature}\n      toggles={toggles}\n      onModelChange={setSettingsModel}\n      onSystemPromptChange={setPrompt}\n      onTemperatureChange={setTemperature}\n      onToggle={(key) =>\n        setToggles((current) =>\n          current.map((item) => (item.key === key ? { ...item, on: !item.on } : item)),\n        )\n      }\n    />\n  </Specimen>\n  <Specimen label=\"locked down for a show\" wide>\n    <SettingsPanel\n      model=\"Haiku 5\"\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt=\"Read-only. Answer questions about the rig; change nothing.\"\n      temperature={0}\n      toggles={TOGGLES.map((item) => ({ ...item, on: false }))}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Model, system prompt, temperature, and what the assistant is allowed to do — the four settings a chat product actually has, on one card. The capability switches each carry a line saying what turning them on does, which is the difference between a settings page and a list of nouns. The panel holds none of it: every value here is the caller's.",
+      "interaction": "the segmented model control is a row of `aria-pressed` buttons, and both the prompt textarea and the temperature slider carry their own labels, so nothing on the card depends on the mono caption above it being read."
+    }
+  ],
+  "todo": true
+}