@cueplusplus/ui 0.13.0

package/manifest/components/end-of-turn-summary.json

@@ -0,0 +1,89 @@
+{
+  "name": "EndOfTurnSummary",
+  "slug": "end-of-turn-summary",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "What the turn came to, in one line: `3 files changed +48 −12`.\n\nA rollup, not a control: it says what happened and offers nothing to do about\nit, because the things to do about it — review, keep, reject — belong to a\nbar above the composer that acts on the whole run, and a per-turn row with\nthose buttons on it is a row that can be pressed after the next turn has\nalready changed the same files.\n\nThe counts are drawn only when there are some. A turn that read four files\nand wrote nothing says `No files changed` and stops, rather than saying it\nwith two zeroes.",
+  "props": [
+    {
+      "name": "files",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many files the turn touched.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "additions",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Lines added across them.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "deletions",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Lines removed across them.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The whole line, replacing the one {@link formatChangeSummary} would build —\nfor a turn whose result is not a diff at all: `2 cues written`,\n`Nothing to change`.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-ok",
+    "--cue-text-ui"
+  ],
+  "summary": "What the turn came to, in one line: `3 files changed +48 −12`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { EndOfTurnSummary } from \"@cueplusplus/ui/elements\";\n\n<EndOfTurnSummary files={3} additions={48} deletions={12} />\n<EndOfTurnSummary files={0} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/end-of-turn-summary",
+  "mdUrl": "/docs/components/end-of-turn-summary.md",
+  "jsonUrl": "/r/components/end-of-turn-summary.json",
+  "specimens": [
+    {
+      "title": "EndOfTurnSummary",
+      "group": "elements-thread",
+      "components": [
+        "EndOfTurnSummary"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"three files\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={3} additions={48} deletions={12} />\n    </div>\n  </Specimen>\n  <Specimen label=\"one file, additions only\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={1} additions={6} />\n    </div>\n  </Specimen>\n  <Specimen label=\"nothing changed\" wide>\n    <div className=\"w-full max-w-md\">\n      <EndOfTurnSummary files={0} />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "What the turn came to, in one line. A rollup and not a control: review, keep and reject act on the whole run and belong above the composer, where they cannot be pressed after the next turn has already changed the same files. The + and − are CodeDiff's glyphs, so one transcript never shows two conventions for the same number, and a turn that changed nothing says so instead of saying it with two zeroes.",
+      "interaction": "none. It is a sentence with two tinted numbers in it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/env-var-input.json

@@ -0,0 +1,194 @@
+{
+  "name": "EnvVarInput",
+  "slug": "env-var-input",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A config value that may be a literal *or* a reference to an environment\nvariable — and looks unmistakably different in each case.\n\nWhen the value matches `env(NAME)` the text box is replaced by a warn-toned\npill naming the variable. That swap is the entire point: a config screen full\nof identical text boxes gives no way to tell \"this is the key\" from \"this is\nwhere the key comes from\", and the difference decides whether the value is\nsafe to screenshot, commit or paste into a ticket. Warn is the system's amber,\nso the pill reads as \"resolved elsewhere — check the environment\" rather than\nas an error.\n\nPorted from supbuddy's config editor, where the pattern earned its keep.",
+  "props": [
+    {
+      "name": "value",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The value — a literal, or an `env(NAME)` reference. Use with `onValueChange`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initial value for an uncontrolled field.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the new value: on every keystroke in the literal state, and with\n`\"\"` when the variable pill is cleared. One argument, because the pill's\nclear button has no DOM change event to hand on.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Shown while the literal field is empty.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "secret",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Mask the literal value. The reference is never masked — a name is not a secret.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the control ladder. Defaults to `\"md\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Prevent editing and grey the control out.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Name for the underlying input, when the field is part of a form.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id forwarded to the underlying input.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the field, when no {@link FieldLabel } names it.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "clearLabel",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Clear environment variable",
+      "description": "Accessible name for the pill's clear button. Defaults to `\"Clear environment variable\"`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the wrapper.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A config value that may be a literal *or* a reference to an environment variable — and looks unmistakably different in each case.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<EnvVarInput aria-label=\"Service key\" secret value={key} onValueChange={setKey} />\n<EnvVarInput aria-label=\"Project URL\" defaultValue={envReference(\"SUPABASE_URL\")} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/env-var-input",
+  "mdUrl": "/docs/components/env-var-input.md",
+  "jsonUrl": "/r/components/env-var-input.json",
+  "specimens": [
+    {
+      "title": "EnvVarInput",
+      "group": "forms",
+      "components": [
+        "EnvVarInput"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"literal\">\n    <EnvVarInput aria-label=\"Node address, literal\" defaultValue=\"10.0.0.42\" />\n  </Specimen>\n  <Specimen label=\"env reference\">\n    <EnvVarInput aria-label=\"Node address, reference\" defaultValue=\"env(ARTNET_HOST)\" />\n  </Specimen>\n  <Specimen label=\"secret\">\n    <EnvVarInput aria-label=\"API token\" defaultValue=\"env(CUE_API_TOKEN)\" secret />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <EnvVarInput aria-label=\"Locked reference\" defaultValue=\"env(ARTNET_HOST)\" disabled />\n  </Specimen>\n</Specimens>",
+      "note": "A literal value and an `env(NAME)` reference are different things, so they do not look the same: the reference swaps to an amber token pill.",
+      "interaction": "the mode switch is a button; typing `env(` in the field is enough to flip it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/error-state.json

@@ -0,0 +1,93 @@
+{
+  "name": "ErrorState",
+  "slug": "error-state",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A quiet failure banner with a retry path, not a modal in your face.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Primary failure headline shown in the banner.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "detail",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Supporting detail under the title explaining what went wrong.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "retrying",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the banner swaps to a spinning Retrying status instead of the error.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onRetry",
+      "type": "() => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the retry control is pressed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"role\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-radius-overlay",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A quiet failure banner with a retry path, not a modal in your face.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ErrorState } from \"@cueplusplus/ui/elements\";\n\n<ErrorState\n  title=\"Request failed\"\n  detail=\"The model timed out.\"\n  retrying={false}\n  onRetry={() => {}}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/error-state",
+  "mdUrl": "/docs/components/error-state.md",
+  "jsonUrl": "/r/components/error-state.json",
+  "specimens": [
+    {
+      "title": "ErrorState",
+      "group": "elements-agents",
+      "components": [
+        "ErrorState"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"failed\" wide>\n    <ErrorState\n      title=\"The desk refused the patch\"\n      detail=\"Universe 3 is not enabled on this show file. Enable it on the desk, or patch into universes 1 and 2.\"\n      retrying={false}\n      onRetry={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"retrying\" wide>\n    <ErrorState\n      title=\"The desk refused the patch\"\n      detail=\"Universe 3 is not enabled on this show file.\"\n      retrying\n      onRetry={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A failure banner, not a modal: it sits in the flow where the answer would have been, says what broke and what to do, and leaves the rest of the page alone. Retrying is a different element entirely rather than a disabled button — `role='alert'` while it is a failure, `role='status'` while it is trying again, which is the difference between interrupting a screen reader and not.",
+      "interaction": "Retry is a named button that tints on hover. The retrying state has no control at all, because there is nothing to press while it works."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/export-dialog.json

@@ -0,0 +1,101 @@
+{
+  "name": "ExportDialog",
+  "slug": "export-dialog",
+  "group": "configurator",
+  "importPath": "@cueplusplus/ui/configurator",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The export dialog: CSS, DTCG tokens, a `createTheme()` call and a shadcn\n`registry:theme` item.\n\nAll four are generated from the overrides the panel is applying, so the CSS\none is *literally* the stylesheet on the page. Nothing here re-derives a\nvalue.",
+  "props": [
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Whether the dialog is showing.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when it should open or close.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "overrides",
+      "type": "ThemeOverrides",
+      "required": true,
+      "defaultValue": null,
+      "description": "The overrides to export.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "scope",
+      "type": "ThemeScope",
+      "required": true,
+      "defaultValue": null,
+      "description": "The theme and mode they were made in.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "defaultFormat",
+      "type": "\"css\" | \"dtcg\" | \"create-theme\" | \"registry\"",
+      "required": false,
+      "defaultValue": "css",
+      "description": "Format shown first. Defaults to `\"css\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "css",
+          "dtcg",
+          "create-theme",
+          "registry"
+        ]
+      }
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-font-sans",
+    "--cue-leading-ui",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-sunken",
+    "--cue-text-label",
+    "--cue-text-micro"
+  ],
+  "summary": "The export dialog: CSS, DTCG tokens, a `createTheme()` call and a shadcn `registry:theme` item.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ExportDialog open={open} onOpenChange={setOpen} overrides={overrides} scope={scope} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/export-dialog",
+  "mdUrl": "/docs/components/export-dialog.md",
+  "jsonUrl": "/r/components/export-dialog.json",
+  "todo": true
+}

package/manifest/components/eyebrow.json

@@ -0,0 +1,59 @@
+{
+  "name": "Eyebrow",
+  "slug": "eyebrow",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The small accent kicker that sits above a title: `// PATCH`.\n\nMono, uppercase and widely tracked, in the theme's accent — the one place\nwhere the accent is used for pure typography rather than for a control. The\nslashes are marked `aria-hidden` and `select-none`, so a screen reader reads\n\"patch\" and a copy-paste of the page does not carry punctuation that was only\never decoration.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "slashes",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Print the `//` motif ahead of the label. Defaults to `true` — the slashes\nare the brand mark of this system, and an eyebrow without them is just\nsmall uppercase text. Pass `false` for a plain kicker.",
+      "control": {
+        "kind": "boolean"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"span\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-text-label"
+  ],
+  "summary": "The small accent kicker that sits above a title: `// PATCH`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Eyebrow>Patch</Eyebrow>\n<Eyebrow slashes={false}>Beta</Eyebrow>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/eyebrow",
+  "mdUrl": "/docs/components/eyebrow.md",
+  "jsonUrl": "/r/components/eyebrow.json",
+  "specimens": [
+    {
+      "title": "Eyebrow",
+      "group": "chrome",
+      "components": [
+        "Eyebrow"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"default\">\n    <Eyebrow>smoke matrix</Eyebrow>\n  </Specimen>\n  <Specimen label=\"no slashes\">\n    <Eyebrow slashes={false}>smoke matrix</Eyebrow>\n  </Specimen>\n</Specimens>",
+      "note": "The `//` motif from the brand site, in mono micro.",
+      "interaction": "none."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/feedback-dialog.json

@@ -0,0 +1,133 @@
+{
+  "name": "FeedbackDialog",
+  "slug": "feedback-dialog",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A thumbs-down that asks why, so the signal arrives with a reason attached.",
+  "props": [
+    {
+      "name": "reasons",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The reason chips offered. Keep them short enough to scan in one line.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "selected",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which reasons are currently picked. More than one is allowed.",
+      "control": {
+        "kind": "array",
+        "fixture": "agent.transcript"
+      }
+    },
+    {
+      "name": "note",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Free-text detail, always optional.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "sent",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "Replaces the whole form with an acknowledgement once the report is filed.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "onToggleReason",
+      "type": "((reason: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a reason chip is picked or unpicked.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onNoteChange",
+      "type": "((note: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the free-text note is typed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onSubmit",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the report is sent.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"reasons\"\n  | \"selected\"\n  | \"note\"\n  | \"sent\"\n  | \"onToggleReason\"\n  | \"onNoteChange\"\n  | \"onSubmit\"\n> & {\n  /** The reason chips offered. Keep them short enough to scan in one line. */\n  reasons: readonly string[];\n  /** Which reasons are currently picked. More than one is allowed. */\n  selected: readonly string[];\n  /** Free-text detail, always optional. */\n  note: string;\n  /** Replaces the whole form with an acknowledgement once the report is filed. */\n  sent: boolean;\n  /** Called when a reason chip is picked or unpicked. */\n  onToggleReason?: (reason: string) => void;\n  /** Called as the free-text note is typed. */\n  onNoteChange?: (note: string) => void;\n  /** Called when the report is sent. */\n  onSubmit?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A thumbs-down that asks why, so the signal arrives with a reason attached.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { FeedbackDialog } from \"@cueplusplus/ui/elements\";\n\n<FeedbackDialog\n  reasons={[\"Not factual\", \"Too long\"]}\n  selected={selected}\n  note={note}\n  sent={sent}\n  onToggleReason={toggle}\n  onNoteChange={setNote}\n  onSubmit={send}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/feedback-dialog",
+  "mdUrl": "/docs/components/feedback-dialog.md",
+  "jsonUrl": "/r/components/feedback-dialog.json",
+  "specimens": [
+    {
+      "title": "FeedbackDialog",
+      "group": "elements-composer",
+      "components": [
+        "FeedbackDialog"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"collecting\" wide>\n    <FeedbackDialog\n      reasons={[\"Wrong universe\", \"Bad addressing\", \"Too slow\", \"Touched the desk\"]}\n      selected={reasons}\n      note={note}\n      sent={sent}\n      onToggleReason={(reason) =>\n        setReasons((current) =>\n          current.includes(reason)\n            ? current.filter((item) => item !== reason)\n            : [...current, reason],\n        )\n      }\n      onNoteChange={setNote}\n      onSubmit={() => setSent(true)}\n    />\n  </Specimen>\n  <Specimen label=\"sent\" wide>\n    <FeedbackDialog\n      reasons={[\"Wrong universe\", \"Bad addressing\"]}\n      selected={[\"Wrong universe\"]}\n      note=\"\"\n      sent\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A thumbs-down that asks why, so the signal arrives with a reason attached. The reasons are chips rather than a select because more than one is usually true, and the note is marked optional in the header — a feedback form that demands prose collects nothing. Sending replaces the whole form with an acknowledgement.",
+      "interaction": "each chip is `aria-pressed`. The acknowledgement lives in a `status` live region mounted from the start and empty until it is not — a region created together with its text is the case a screen reader is free to miss."
+    }
+  ],
+  "todo": true
+}