@cueplusplus/ui 0.13.0

package/manifest/components/preview.json

@@ -0,0 +1,294 @@
+{
+  "name": "Preview",
+  "slug": "preview",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A card for one component: a stage that is its own theme island, a slot for\ntools at the top right, and a footer.\n\n**Two presentations, one stage.** `\"panel\"`, the default and what every\nexisting caller gets, is that card: a border, a fill, a dot grid under the\nspecimen, and the tools floating over the stage's top right. `\"frame\"` is a\ndesign-canvas frame — no card, no border, no fill; the name, the count and\nthe tools sit in a row *above* the stage rather than over it, four crosshairs\nmark the stage's outer corners, and the stage paints nothing by default, so\nwhatever canvas the frame sits on shows through. Everything below holds in\nboth.\n\n**The stage is the island; the chrome is not.** `theme`, `mode`, `density`,\n`font` and `styleSet` land on the stage element only, and the stage\nrepublishes the theme, density and style-set contexts so an overlay opened on\nit follows it. The tools, the footer, the grips and anything they open stay\nin the scope around the Preview — a `terminal` preview's own controls do not\nturn cyan. With none of the five set, the stage carries no attribute and\ncosts what a `<div>` costs. A stage `theme` with no `mode` repeats the page's\nmode beside it.\n\n**`resizable` is handles of its own**, both axes by default: an edge grip per\naxis that is a keyboard-operable `separator` valued in pixels, and a corner\ngrip for the pointer. Double-click resets an axis. The width never outgrows\nthe frame: its bound in force is the frame's own width, observed live, when\nthat is under `maxWidth`. Not `Resizable`, which is split panes on an\noptional peer.\n\nProps, not a compound: one stage and its slots, each saying what it is.",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The specimen. It renders on the stage, inside whatever scope the stage sets.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The frame's accessible name — \"Button preview\". Required: a frame that holds\ncontrols and has no name is a group nobody can find.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "theme",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "A theme for the stage only. Unset, the stage inherits — no attribute is\nemitted at all. **Naming a theme does not load it**: the stage is scoped to\n`[data-theme=\"<name>\"]`, and that theme's stylesheet must already be on the\npage (`@cueplusplus/theme-<name>/theme.css`). The tools, the footer and\nanything they open stay in the page's theme. With no `mode`, the stage\nrepeats the page's mode beside the theme — `\"system\"` included — so a light\npage's stage paints the theme's light block, not its dark one, and agrees\nwith every overlay opened on it.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "mode",
+      "type": "\"system\" | \"dark\" | \"light\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Dark, light or system, for the stage only. A theme's light block is the\ncompound selector `[data-theme][data-mode]`, so with no `theme` the stage\nrestates the page's theme beside the mode; outside any `ThemeProvider` there\nis no theme to restate and the mode alone changes nothing. A stage\n`\"system\"` is stamped as it is, so the stylesheet's `[data-mode=\"system\"]`\nblock follows the OS; `useTheme().resolvedMode` read on the stage reports\nthe page's resolved mode.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "system",
+          "dark",
+          "light"
+        ]
+      }
+    },
+    {
+      "name": "density",
+      "type": "\"normal\" | \"large\" | \"compact\" | \"ultra-compact\" | \"ultra-large\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "A rung of the density ladder for the stage only, as a `<Density>` island would set it.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "normal",
+          "large",
+          "compact",
+          "ultra-compact",
+          "ultra-large"
+        ]
+      }
+    },
+    {
+      "name": "font",
+      "type": "\"source\" | \"system\" | \"geist\" | \"inter\" | \"plex\" | \"roboto\" | \"apple\" | \"office\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "A font pairing for the stage only, as `data-font`. Portals still follow the root's pairing.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "source",
+          "system",
+          "geist",
+          "inter",
+          "plex",
+          "roboto",
+          "apple",
+          "office"
+        ]
+      }
+    },
+    {
+      "name": "styleSet",
+      "type": "\"console\" | \"editorial\" | \"marketing\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "A style set for the stage only: `console`, `editorial` or `marketing`.\n\nUnset, the stage inherits and **no attribute is emitted at all** — the same\nrule the other four follow here. Unlike `theme`, naming one loads nothing\nand needs nothing: the three sets are emitted by `@cueplusplus/tokens` into\nthe stylesheet every consumer already imports, so a stage is scoped to\n`[data-style=\"<name>\"]` and the block is on the page by construction.\n\nThe set is republished to React as well as stamped, so a popover opened on\nthe stage follows the stage rather than the page — a portal mounts on\n`<body>` and inherits nothing from the stage's DOM.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "console",
+          "editorial",
+          "marketing"
+        ]
+      }
+    },
+    {
+      "name": "resizable",
+      "type": "boolean | PreviewResizeOptions",
+      "required": false,
+      "defaultValue": null,
+      "description": "Resize the stage by dragging or with the keyboard. `true` gives both axes\ninside the default bounds (160–1280 px wide, 96–960 px tall); an object\nnarrows the axis or moves the bounds. The width never outgrows the frame:\nits bound in force is the smaller of `maxWidth` and the frame's own width,\nobserved with a `ResizeObserver`, so a Preview in a grid track stays inside\nit as the viewport changes. The height is bounded by `maxHeight` alone, and\na taller stage grows its frame. Unset, the stage is fixed: no grips, and\nnothing measured or observed.\n\nA resizable frame fills its container's width (`w-full`), because the room\nit measures has to be its container's. In a flex row or a centred column a\nframe sized by its content would measure its own stage, and a stage bounded\nby itself can only shrink, with each step lowering the ceiling. A fixed\nPreview keeps sizing to its content; `className` can still set a width.",
+      "control": {
+        "kind": "opaque"
+      }
+    },
+    {
+      "name": "tools",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The top-right slot — by convention a row of `IconButton`s. Drawn outside the stage.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "footer",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The strip under the stage: the thin text and the way out. Drawn outside the stage.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "presentation",
+      "type": "\"frame\" | \"panel\"",
+      "required": false,
+      "defaultValue": "panel",
+      "description": "`\"panel\"` (the default, and what every existing caller gets): a bordered\ncard, `tools` floating at the stage's top right, `footer` under it.\n`\"frame\"`: a design-canvas frame — the label row drawn *above* the stage\nrather than over it, four crosshair corners at the stage's outer corners,\nand a transparent stage so whatever the frame sits on shows through.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "frame",
+          "panel"
+        ]
+      }
+    },
+    {
+      "name": "name",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The label row's leading slot, drawn only in `\"frame\"`. A plain node, or a\ncontrol: apps/docs passes a `DropdownMenu` whose trigger is the frame's\nname. Unset, the row opens with `label` as text.\n\nA slot and not a built-in menu, because `Preview` imports no overlay today\nand `/` draws seventeen of it under a 766-byte headroom.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "The count drawn after the name — how many items this frame holds. Frame only.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "ground",
+      "type": "\"none\" | \"plain\" | \"dots\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "The stage's ground. Defaults to `\"dots\"` in `\"panel\"` and `\"none\"` in\n`\"frame\"`, where the canvas under it already carries a ground and two dot\ngrids at different pitches read as a moiré.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "none",
+          "plain",
+          "dots"
+        ]
+      }
+    },
+    {
+      "name": "captions",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether `Frames.Item` captions are shown inside this stage. Defaults to\n`true`. Off is paint and nothing more: a hidden caption is still rendered,\nstill in the tree and still read aloud (§4.1 Decision 4).",
+      "control": {
+        "kind": "boolean"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-hair-strong",
+    "--cue-radius-control",
+    "--cue-radius-surface",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-space-6",
+    "--cue-space-8",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-label",
+    "--cue-text-micro"
+  ],
+  "summary": "A card for one component: a stage that is its own theme island, tools at the top right — or, in the `frame` presentation a design canvas draws, in a label row above the stage beside the name and the count — a footer, and grips that resize it on both axes.",
+  "examples": [
+    {
+      "title": "Inheriting the page, resizable",
+      "code": "<Preview label=\"Button preview\" resizable footer={<span>Button</span>}>\n  <Button variant=\"primary\">Take cue</Button>\n</Preview>",
+      "language": "tsx"
+    },
+    {
+      "title": "Its own theme and density",
+      "code": "<Preview label=\"Chip preview\" theme=\"terminal\" density=\"compact\">\n  <Chip tone=\"accent\">Standby</Chip>\n</Preview>",
+      "language": "tsx"
+    },
+    {
+      "title": "A canvas frame",
+      "code": "<Preview\n  presentation=\"frame\"\n  label=\"Button tone\"\n  name={<ToneMenu />}\n  count={3}\n  tools={<IconButton aria-label=\"Configure Button tone\" icon={Wrench} />}\n>\n  <div className=\"flex flex-wrap items-end gap-(--cue-space-6)\">\n    <Frames.Item caption=\"accent\">\n      <Button variant=\"primary\">Take cue</Button>\n    </Frames.Item>\n  </div>\n</Preview>",
+      "language": "tsx"
+    },
+    {
+      "title": "A frame with its captions off",
+      "code": "<Preview presentation=\"frame\" label=\"Button density\" count={2} captions={false}>\n  <div className=\"flex flex-wrap items-end gap-(--cue-space-6)\">\n    <Frames.Item caption=\"compact\">\n      <Button size=\"sm\">Go</Button>\n    </Frames.Item>\n    <Frames.Item caption=\"normal\">\n      <Button>Go</Button>\n    </Frames.Item>\n  </div>\n</Preview>",
+      "language": "tsx"
+    },
+    {
+      "title": "Usage",
+      "code": "<Preview label=\"Button preview\" tools={<IconButton aria-label=\"Configure Button\" icon={Wrench} />}>\n  <Button variant=\"primary\">Take cue</Button>\n</Preview>\n<Preview label=\"Chip preview\" theme=\"terminal\" density=\"compact\" resizable>\n  <Chip tone=\"accent\">Standby</Chip>\n</Preview>\n<Preview label=\"Button\" presentation=\"frame\" count={3}>\n  <Button variant=\"primary\">Take cue</Button>\n</Preview>\n<Preview label=\"Editorial band\" styleSet=\"editorial\" presentation=\"frame\">\n  <Container className=\"max-w-(--cue-measure-prose)\">…</Container>\n</Preview>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/preview",
+  "mdUrl": "/docs/components/preview.md",
+  "jsonUrl": "/r/components/preview.json",
+  "whenToUse": [
+    "Showing one component in a state a reader can see and change — a gallery tile, a docs listing, a design review page.",
+    "Putting a component in a different theme, mode, density or font from the page around it, without re-theming the controls that change it.",
+    "Letting a reader watch a component respond to its container: pass `resizable` and drag it narrow, or short.",
+    "Drawing one axis of a component on a design canvas: `presentation=\"frame\"` moves the label row above the stage, puts `tools` in it, makes the stage transparent and marks the four corners."
+  ],
+  "whenNotToUse": [
+    "Laying several components out side by side. That is `Bento` or `Grid`; a Preview holds one specimen.",
+    "Split panes a user resizes as part of an app. That is `Resizable`; a Preview's grips resize a stage, not a layout.",
+    "Building the frame's name menu into the Preview. `name` is a slot: pass your own `DropdownMenu`. This component imports no overlay, and a page that draws seventeen Previews cannot afford one."
+  ],
+  "commonMistakes": [
+    "Naming a `theme` whose stylesheet is not on the page. The stage is scoped to `[data-theme]`, and a Preview loads no CSS — import `@cueplusplus/theme-<name>/theme.css` yourself, or the stage paints the blank base.",
+    "Setting `mode` outside any `ThemeProvider` and expecting a change. A theme's light block needs the theme on the same element, and with no provider there is no theme to restate.",
+    "Putting the controls that configure the specimen in `children`. They would take the stage's theme; put them in `tools`, which follows the page.",
+    "Setting `presentation=\"frame\"` and leaving `ground` alone on a page that already draws a dot grid. A frame's ground defaults to `none` for exactly that reason; naming `dots` puts a second grid at a second pitch over the first, and the two read as a moiré.",
+    "Reading `count` as something the Preview works out. It counts nothing — `count` is what the caller knows, and `0` is a count it will draw.",
+    "Passing `resizable` to a `presentation=\"frame\"` Preview. The crosshair marks follow the frame box, not a resized stage, so dragging the grips puts the marks off the stage's corners — use `resizable` on a panel, or keep the frame a fixed size."
+  ],
+  "specimens": [
+    {
+      "title": "Preview",
+      "group": "layout",
+      "components": [
+        "Preview"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"inherits the page, resizable\" wide>\n    <Preview\n      label=\"Button preview\"\n      resizable\n      footer={<span className=\"font-mono text-(length:--cue-text-label) text-fg-subtle\">Button · inherits</span>}\n    >\n      <Button variant=\"primary\">Take cue</Button>\n    </Preview>\n  </Specimen>\n  <Specimen label=\"its own theme and density\" wide>\n    <Preview\n      label=\"Chip preview\"\n      theme=\"terminal\"\n      density=\"compact\"\n      footer={<span className=\"font-mono text-(length:--cue-text-label) text-fg-subtle\">Chip · terminal · compact</span>}\n    >\n      <Chip tone=\"accent\">Standby</Chip>\n    </Preview>\n  </Specimen>\n</Specimens>",
+      "note": "A card for one component. The stage is its own theme island — theme, mode, density and font land on it and nowhere else — while the tools, the footer and anything they open follow the page.",
+      "interaction": "with `resizable`, the width and height grips are separators: Left and Right step the width, Up and Down the height, 8 px a press and 64 with Shift; Home and End reach the bounds, and a double-click resets an axis. The corner grip is a pointer convenience over the two."
+    }
+  ]
+}

package/manifest/components/progress.json

@@ -0,0 +1,114 @@
+{
+  "name": "Progress",
+  "slug": "progress",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "Determinate work, drawn as a filling rule.\n\nWraps Base UI's `Progress`, so `role=\"progressbar\"`, the value formatting and\nthe completion status are the primitive's; this layer adds the console skin:\na sunk `surface-3` track, an accent fill and a 120ms linear width transition\n— linear because a progress bar that eases is lying about its rate.\n\nPassing `value={null}` makes it indeterminate: the fill collapses and the\ntrack pulses instead, which says \"working, size unknown\" without inventing a\nnumber. The pulse stills under `prefers-reduced-motion`.\n\nUse `Meter` instead for a *level* (how full something is); a progress bar is\nfor a *task* (how far along something is).\n\n**Named in the markup, not on hydration.** Base UI names the bar from the\ncaption by having `Progress.Label` report its id to the root, and it reports\nit from a `useIsoLayoutEffect` (`@base-ui/react/utils/useRegisteredLabelId`),\nwhich the root keeps in `useState`. A render that runs no effects — SSR\nbefore hydration, `renderToStaticMarkup`, a page that never hydrates — emitted\nthe caption with its id and a `role=\"progressbar\"` that pointed at nothing, so\nthe delivered HTML had a progressbar with no accessible name. Both ends are\ngiven the same `useId` here instead, so the first render is already correct\nand Base UI's effect later resolves the label to the id it was handed.\n\nStatic markup — no `\"use client\"`. `useId` is the one hook it calls, and it\nis one a Server Component may call: React's Flight server implements `useId`\nin its hooks dispatcher, where the hooks a Server Component may not call are\n`unsupportedHook`.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Caption above the bar, and the bar's accessible name: this layer points the\n`role=\"progressbar\"` at it with `aria-labelledby` **at render**, so the name\nis in the markup a server sends. Pass one, or an `aria-label` — a root that\nalready carries `aria-label` or `aria-labelledby` keeps the name it was\ngiven.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the frame that holds the header and the track.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": "5",
+      "description": "Track height in px at the 16px root, emitted as `rem`. Defaults to `5`.",
+      "control": {
+        "kind": "number"
+      }
+    },
+    {
+      "name": "showValue",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Show the formatted value opposite the label. Defaults to `false`.",
+      "control": {
+        "kind": "boolean"
+      }
+    },
+    {
+      "name": "trackClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the track.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "indicatorClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the fill.",
+      "control": {
+        "kind": "string"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseProgress.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-surface-3",
+    "--cue-text-label"
+  ],
+  "summary": "Determinate work, drawn as a filling rule.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Progress value={40} label=\"Rendering\" showValue />\n<Progress value={null} aria-label=\"Connecting\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/progress",
+  "mdUrl": "/docs/components/progress.md",
+  "jsonUrl": "/r/components/progress.json",
+  "specimens": [
+    {
+      "title": "Progress",
+      "group": "instruments",
+      "components": [
+        "Progress"
+      ],
+      "code": "<div className=\"flex w-full max-w-[36rem] flex-col gap-(--cue-space-5)\">\n  <Progress label=\"Rendering preview\" value={62} showValue />\n  <Progress label={COPY.loading.title} value={null} />\n  <Progress label=\"Tall\" value={30} height={8} showValue />\n</div>",
+      "note": "Determinate and indeterminate, with an optional printed value.",
+      "interaction": "the indeterminate track stills under prefers-reduced-motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/prompt-library.json

@@ -0,0 +1,122 @@
+{
+  "name": "PromptLibrary",
+  "slug": "prompt-library",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Prompts you saved, searchable, with their variables shown before you insert one.",
+  "props": [
+    {
+      "name": "prompts",
+      "type": "readonly SavedPrompt[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Everything saved. Filtering happens inside against the name.",
+      "control": {
+        "kind": "array",
+        "fixture": "composer.prompts"
+      }
+    },
+    {
+      "name": "query",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current search text.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "selectedId",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which prompt is previewed below the list.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onQueryChange",
+      "type": "((query: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the search is typed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onSelect",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a prompt is highlighted.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "onInsert",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called on double click, to drop the prompt into the composer.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"prompts\"\n  | \"query\"\n  | \"selectedId\"\n  | \"onQueryChange\"\n  | \"onSelect\"\n  | \"onInsert\"\n> & {\n  /** Everything saved. Filtering happens inside against the name. */\n  prompts: readonly SavedPrompt[];\n  /** Current search text. */\n  query: string;\n  /** Which prompt is previewed below the list. */\n  selectedId: string;\n  /** Called as the search is typed. */\n  onQueryChange?: (query: string) => void;\n  /** Called when a prompt is highlighted. */\n  onSelect?: (id: string) => void;\n  /** Called on double click, to drop the prompt into the composer. */\n  onInsert?: (id: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-leading-ui",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Prompts you saved, searchable, with their variables shown before you insert one.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { PromptLibrary } from \"@cueplusplus/ui/elements\";\n\n<PromptLibrary\n  prompts={prompts}\n  query={query}\n  selectedId={selectedId}\n  onQueryChange={setQuery}\n  onSelect={setSelectedId}\n  onInsert={insert}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/prompt-library",
+  "mdUrl": "/docs/components/prompt-library.md",
+  "jsonUrl": "/r/components/prompt-library.json",
+  "specimens": [
+    {
+      "title": "PromptLibrary",
+      "group": "elements-composer",
+      "components": [
+        "PromptLibrary"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"browsing\" wide>\n    <PromptLibrary\n      prompts={PROMPTS}\n      query={promptQuery}\n      selectedId={promptId}\n      onQueryChange={setPromptQuery}\n      onSelect={setPromptId}\n      onInsert={setPromptId}\n    />\n  </Specimen>\n  <Specimen label=\"nothing matches\" wide>\n    <PromptLibrary prompts={PROMPTS} query=\"haze\" selectedId=\"\" />\n  </Specimen>\n</Specimens>",
+      "note": "Prompts somebody saved, searchable, with the holes in them counted before you insert one — `3 vars` is the difference between a prompt you can send and a template you still have to fill. The preview underneath is the whole body, because a prompt library that hides the prompt is a list of file names.",
+      "interaction": "arrows walk the list and Enter inserts; a row also inserts on double-click, so the mouse has the same two gestures the keyboard does. An empty result says what it found nothing for rather than showing an empty box."
+    }
+  ],
+  "todo": true
+}