@cueplusplus/ui 0.13.0

package/manifest/components/generation-loader.json

@@ -0,0 +1,78 @@
+{
+  "name": "GenerationLoader",
+  "slug": "generation-loader",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The wait before there is anything to show. A nine-cell matrix keeps time under a\nshimmering label, driven by a `tick` the caller advances — so a paused replay pauses\nthe loader too.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Status copy shown under the pixel grid while the model has nothing else to show.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "tick",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Animation clock that advances the pixel pattern and the elapsed seconds counter.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "variant",
+      "type": "\"dots\" | \"squares\" | \"rounded\"",
+      "required": false,
+      "defaultValue": "dots",
+      "description": "Cell shape of the pixel matrix.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "dots",
+          "squares",
+          "rounded"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-muted",
+    "--cue-radius-control",
+    "--cue-text-body"
+  ],
+  "summary": "The wait before there is anything to show.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/generation-loader",
+  "mdUrl": "/docs/components/generation-loader.md",
+  "jsonUrl": "/r/components/generation-loader.json",
+  "specimens": [
+    {
+      "title": "GenerationLoader",
+      "group": "elements-thread",
+      "components": [
+        "GenerationLoader"
+      ],
+      "code": "<Specimens>\n  {LOADER_VARIANTS.map((variant, index) => (\n    <Specimen key={variant} label={variant}>\n      <GenerationLoader label=\"Working on the patch\" tick={index * 4} variant={variant} />\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "The wait before there is anything at all to show. Nine cells keep time under a shimmering label, driven by a tick the caller advances — so a paused replay pauses the loader too, which a CSS animation could never do. The three variants are three shapes for the same clock.",
+      "interaction": "none. The matrix is aria-hidden; the label is the only thing a screen reader gets, which is the right amount."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/generative-ui.json

@@ -0,0 +1,125 @@
+{
+  "name": "GenerativeUI",
+  "slug": "generative-ui",
+  "group": "elements",
+  "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.",
+  "props": [
+    {
+      "name": "spec",
+      "type": "unknown",
+      "required": true,
+      "defaultValue": null,
+      "description": "The tree to draw, exactly as it arrived.\n\nTyped `unknown` rather than `GenerativeNode` on purpose. A caller who has\njust parsed a tool result holds a `JSON.parse` return, and a signature that\ndemanded a node would push every consumer into the same cast — which is a\nclaim about the bytes that nobody is in a position to make. The renderer\nreads what it was given and reports what it could not use.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "onAction",
+      "type": "((action: GenerativeAction) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where a control's press goes: a button, a form submit, a list row, a\ncheckbox, a card's confirm.\n\nCalled with the `$action` string the model put on the node, the intrinsic\nthat fired it, and — where the control has one — its own value. Omit it and\nevery control is inert, which is the right default for a transcript that is\nbeing re-read rather than used.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onFault",
+      "type": "((fault: GenerativeFault) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Told about every node the renderer refused to guess at, after the render\nthat refused it.\n\nThe counterpart of never throwing. A fallback is legible on screen, but the\nperson who needs to know that this console is a version behind the model\ndriving it is usually not the person looking at it — so the faults are also\na stream, one call per refusal, suitable for a counter or a log line.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "renderMarkdown",
+      "type": "((value: string) => ReactNode)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Turns a `Markdown` node's source into elements.\n\nWithout it the source renders verbatim, as characters, because this subpath\nships no parser and will not acquire one: `@cueplusplus/ui/elements/markdown`\nis the sanitized renderer this prop is shaped for, and it carries two peers\nthat a console drawing a weather card should not have to install.\n\n```tsx\nimport { MarkdownText } from \"@cueplusplus/ui/elements/markdown\";\n\n<GenerativeUI spec={spec} renderMarkdown={(md) => <MarkdownText>{md}</MarkdownText>} />\n```",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "maxDepth",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "How many levels to walk before drawing the depth notice. Defaults to\n{@link GENERATIVE_MAX_DEPTH}; anything below one level is read as one,\nsince a tree with no levels is not a tree.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "skin",
+      "type": "\"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.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "cue",
+          "aui"
+        ]
+      }
+    },
+    {
+      "name": "fidelity",
+      "type": "\"upstream\" | \"cue-metrics\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Whether the density knobs follow cue's ladder (`cue-metrics`, the default)\nor pin assistant-ui's own numbers (`upstream`).",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "upstream",
+          "cue-metrics"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [],
+  "summary": "The vocabulary a model composes at runtime.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<GenerativeUI\n  spec={JSON.parse(toolResult)}\n  onAction={(action) => send({ type: \"ui-action\", ...action })}\n  onFault={(fault) => telemetry.warn(\"generative\", fault)}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/generative-ui",
+  "mdUrl": "/docs/components/generative-ui.md",
+  "jsonUrl": "/r/components/generative-ui.json",
+  "specimens": [
+    {
+      "title": "GenerativeUI",
+      "group": "elements-knowledge",
+      "components": [
+        "GenerativeUI"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"a composed dashboard\" wide>\n    <GenerativeUI spec={RIG_DASHBOARD} />\n  </Specimen>\n  <Specimen label=\"a form\" wide>\n    <GenerativeUI\n      spec={patchRequest(patchSent)}\n      onAction={(action) => {\n        if (action.action !== \"patch-request\") return;\n        const values = action.values ?? {};\n        setPatchSent(\n          values[\"fixture\"] === undefined\n            ? null\n            : `${values[\"fixture\"]} on ${values[\"universe\"] === \"\" ? \"no universe yet\" : values[\"universe\"]}, from ${values[\"from\"]}.`,\n        );\n      }}\n    />\n  </Specimen>\n  <Specimen label=\"a chart\" wide>\n    <GenerativeUI spec={DRAW_CHART} />\n  </Specimen>\n  <Specimen label=\"an unknown component\" wide>\n    <GenerativeUI spec={FROM_THE_FUTURE} />\n  </Specimen>\n  <Specimen label=\"a malformed spec\" wide>\n    <GenerativeUI spec={NOT_A_TREE} />\n  </Specimen>\n</Specimens>",
+      "note": "The one component here nobody wrote props for. A model emits a tree of 27 intrinsic names as JSON and this draws it, with no compile step in between and none possible, so the specimens are the spec objects themselves: a dashboard the model composed out of facts, a chart and a table; a patch form whose confirm hands back every named field at once; and a chart on its own. The last two are wrong on purpose. A $type from a newer catalogue draws an in-place notice and its siblings still render; a spec that is not a tree at all draws a legible error rather than the blank box that reads as a message still streaming. Neither throws, which is the whole contract. It draws from plain [data-aui] CSS with no utilities and no icon or chart package behind it, because the console a model is talking to is usually somebody else's app.",
+      "interaction": "every control is a real control and takes the house focus ring; text fires on blur rather than per keystroke, since $action is a message to the model. The form specimen is live: submit it and the model's own card gains a success alert with what the desk received."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/grid.json

@@ -0,0 +1,132 @@
+{
+  "name": "Grid",
+  "slug": "grid",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "Two-dimensional layout: equal columns, or as many as fit.\n\nSame bargain as `Stack` — the gap is a rung of the density ladder rather than\na hand-picked pixel value, so a card grid tightens with the rest of the\nconsole when the user asks for ultra-compact.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "cols",
+      "type": "4 | 1 | 2 | 3 | 5 | 6",
+      "required": false,
+      "defaultValue": "1",
+      "description": "How many equal columns. Defaults to `1`. Ignored when `minItemWidth` is set.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          4,
+          1,
+          2,
+          3,
+          5,
+          6
+        ],
+        "min": 1,
+        "max": 6
+      }
+    },
+    {
+      "name": "gap",
+      "type": "0 | 4 | 8 | 1 | 2 | 3 | 5 | 6 | 7",
+      "required": false,
+      "defaultValue": "4",
+      "description": "Which rung of the density space ladder to spend between cells. Defaults to `4`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          0,
+          4,
+          8,
+          1,
+          2,
+          3,
+          5,
+          6,
+          7
+        ],
+        "min": 0,
+        "max": 8
+      }
+    },
+    {
+      "name": "minItemWidth",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fill the row with as many columns of at least this width as fit, instead of\na fixed count. Any CSS length (`\"12rem\"`, `\"200px\"`).\n\nPrefer this over a column count wherever the content has a natural minimum\nmeasure — it is responsive without a single breakpoint.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "align",
+      "type": "\"center\" | \"end\" | \"baseline\" | \"start\" | \"stretch\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Cross-axis alignment of the cells.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "center",
+          "end",
+          "baseline",
+          "start",
+          "stretch"
+        ]
+      }
+    },
+    {
+      "name": "justify",
+      "type": "\"center\" | \"end\" | \"start\" | \"between\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Main-axis distribution of the tracks.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "center",
+          "end",
+          "start",
+          "between"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-grid-min"
+  ],
+  "summary": "Two-dimensional layout: equal columns, or as many as fit.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Grid cols={3} gap={5}>{cards}</Grid>\n<Grid minItemWidth=\"14rem\" gap={4}>{cards}</Grid>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/grid",
+  "mdUrl": "/docs/components/grid.md",
+  "jsonUrl": "/r/components/grid.json",
+  "specimens": [
+    {
+      "title": "Grid",
+      "group": "layout",
+      "components": [
+        "Grid"
+      ],
+      "code": "<div className=\"flex w-full flex-col gap-(--cue-space-5)\">\n  <Grid cols={4} gap={3}>\n    {[\"1\", \"2\", \"3\", \"4\"].map((cell) => (\n      <Panel\n        key={cell}\n        className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label) text-fg-subtle\"\n      >\n        {cell}\n      </Panel>\n    ))}\n  </Grid>\n  <Grid minItemWidth=\"12rem\" gap={3}>\n    {[\"auto\", \"fit\", \"from\", \"12rem\"].map((cell) => (\n      <Panel\n        key={cell}\n        className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label) text-fg-subtle\"\n      >\n        {cell}\n      </Panel>\n    ))}\n  </Grid>\n</div>",
+      "note": "Fixed columns, or auto-fit from a minimum item width.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/group-bar.json

@@ -0,0 +1,122 @@
+{
+  "name": "GroupBar",
+  "slug": "group-bar",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The distribution strip: one flex cell per group, weighted by its value.\n\nA stacked bar with no axis and no numbers — the shape *is* the reading. Three\nrules keep it honest:\n\n1. **Empty groups get no cell.** A minimum width is what makes a two-pixel\n   sliver visible, and a minimum width on a zero would draw a group that is\n   not there.\n2. **The percentages add to 100.** Shares are rounded by largest remainder,\n   so the legend never sums to 99 and never to 101.\n3. **Colour is never the only channel.** The strip is a `role=\"img\"` whose\n   accessible name spells the whole distribution out (WCAG 1.4.1); the legend\n   repeats it in text when there is room for one.\n\nThe cells are divided by the same 1px seam as `SeamList`, so a distribution\nstrip and a seam list sitting in the same panel share one hairline language.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "items",
+      "type": "readonly GroupBarItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The slices, in display order.",
+      "control": {
+        "kind": "array",
+        "fixture": "instruments.patch-groups"
+      }
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "6",
+      "description": "Strip height in px at the 16px root, emitted as `rem`. Defaults to `6`.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "What the distribution is *of*. Required in practice — it names the graphic.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "legend",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "List the slices with their shares underneath the strip.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "formatShare",
+      "type": "((share: number, item: GroupBarItem) => string)",
+      "required": false,
+      "defaultValue": "(share) => `${share}%`",
+      "description": "Format one share for the summary and the legend. Defaults to `\"42%\"`.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "emptyLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "no data",
+      "description": "What to say when every slice is empty. Defaults to `\"no data\"`.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-busy",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-info",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-text-label",
+    "--cue-warn"
+  ],
+  "summary": "The distribution strip: one flex cell per group, weighted by its value.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<GroupBar\n  label=\"Universe load\"\n  items={[\n    { label: \"dimmers\", value: 212, tone: \"accent\" },\n    { label: \"movers\", value: 96, tone: \"info\" },\n    { label: \"free\", value: 204 },\n  ]}\n  legend\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/group-bar",
+  "mdUrl": "/docs/components/group-bar.md",
+  "jsonUrl": "/r/components/group-bar.json",
+  "specimens": [
+    {
+      "title": "GroupBar",
+      "group": "instruments",
+      "components": [
+        "GroupBar"
+      ],
+      "code": "<div className=\"flex w-full max-w-[36rem] flex-col gap-(--cue-space-5)\">\n  <GroupBar items={GROUP_ITEMS} label=\"Channel allocation by group\" />\n  <GroupBar items={[]} label=\"Empty allocation\" emptyLabel={COPY.empty.title} />\n</div>",
+      "note": "The distribution strip: one flex cell per item, coloured by tone, with a legend that names each share.",
+      "interaction": "none. It is a picture of a breakdown, and the legend is the text version of it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/guardrail-notice.json

@@ -0,0 +1,109 @@
+{
+  "name": "GuardrailNotice",
+  "slug": "guardrail-notice",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A refusal in its own shape, with the nearest thing it can do instead.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The refusal in one line, stated plainly rather than apologetically.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "explanation",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Why, and where the line actually sits.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "policy",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Short label for the rule that applied.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "alternatives",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The nearest things it can do. Pass an empty array to hide the section.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "onPick",
+      "type": "((alternative: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when an alternative is chosen.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"explanation\" | \"policy\" | \"alternatives\" | \"onPick\"\n> & {\n  /** The refusal in one line, stated plainly rather than apologetically. */\n  title: string;\n  /** Why, and where the line actually sits. */\n  explanation: string;\n  /** Short label for the rule that applied. */\n  policy: string;\n  /** The nearest things it can do. Pass an empty array to hide the section. */\n  alternatives: readonly string[];\n  /** Called when an alternative is chosen. */\n  onPick?: (alternative: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-leading-ui",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A refusal in its own shape, with the nearest thing it can do instead.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { GuardrailNotice } from \"@cueplusplus/ui/elements\";\n\n<GuardrailNotice\n  title=\"I can't help with that\"\n  explanation=\"This asks for a working attack against infrastructure you don't own.\"\n  policy=\"policy\"\n  alternatives={alternatives}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/guardrail-notice",
+  "mdUrl": "/docs/components/guardrail-notice.md",
+  "jsonUrl": "/r/components/guardrail-notice.json",
+  "specimens": [
+    {
+      "title": "GuardrailNotice",
+      "group": "elements-agents",
+      "components": [
+        "GuardrailNotice"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"three ways round it\" wide>\n    <GuardrailNotice\n      title=\"I will not write to the desk while the house is open.\"\n      explanation=\"The show is running and this patch changes fixtures that are live on stage. Outside show hours the same change is fine.\"\n      policy=\"live-desk\"\n      alternatives={[\n        \"Write the patch to a file for the LX crew\",\n        \"Queue it for the post-show window\",\n        \"Show me what would change\",\n      ]}\n      onPick={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"nothing else to offer\" wide>\n    <GuardrailNotice\n      title=\"I cannot open universe 4 on this desk.\"\n      explanation=\"The show file is licensed for three universes. This is a limit on the desk, not a policy I can waive.\"\n      policy=\"capability\"\n      alternatives={[]}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A refusal in its own shape: what it will not do, why, the rule that applied, and the nearest things it *can* do. The alternatives are the whole point — a refusal that ends at 'no' hands the work back with nothing attached, and this one hands back three next moves.",
+      "interaction": "each alternative is a button reporting its own text to `onPick`. With an empty list the section disappears rather than leaving an empty rule."
+    }
+  ],
+  "todo": true
+}