@cueplusplus/ui 0.10.0 → 0.11.0

package/manifest/components/inspector.json

@@ -0,0 +1,199 @@
+{
+  "name": "Inspector",
+  "slug": "inspector",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The shape a settings panel, a properties sidebar and a wrench menu share:\ntitled sections of label-and-control rows, with a footer.\n\nLayout and nothing else — the controls are the library's own. A section is\na group headed by a `SectionHeader`; a row is a label then its control, one\ncolumn in a narrow container and two from 18rem; the footer holds a quiet\nnote and one action.\n\n**Static markup — no hooks, no `\"use client\"`**, so a server page can draw\none. Labels are strings for the same reason: a row with no `htmlFor` lays its\nlabel on its control as `aria-label`, rather than pointing at an id nobody\nhas generated. The row itself carries no role.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Section",
+    "Row",
+    "Footer"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Inspector.Root",
+      "description": "The inspector's frame: a size container, so each row's columns follow the\ninspector's own width — a popover's, a sidebar's — and not the viewport's.\nIt holds the sections, then the footer.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The sections, then the footer.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Section",
+      "usage": "Inspector.Section",
+      "description": "One titled group of rows: a `SectionHeader` carrying its `label`, and a group named by the same words.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "defaultValue": null,
+          "description": "The section's title — \"Variants\", \"Stage\". Drawn by a `SectionHeader` and read as the group's name.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The section's rows.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Row",
+      "usage": "Inspector.Row",
+      "description": "One label and its control: one column in a narrow inspector, two from 18rem.\nWith `htmlFor` the label is a `<label>` for that control; without it the\nlabel is laid on the control as its `aria-label`, unless the control already\nnames itself. The row carries no role.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "defaultValue": null,
+          "description": "What the control sets — \"Size\", \"Theme\". Drawn before it, and read as its\nname: a `<label>` for it when `htmlFor` is given, and otherwise laid on\nthe control as `aria-label`, unless the control already names itself.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "htmlFor",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "The control's `id`, when it takes one: the label then becomes a `<label>` for it.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The control — one element, any of the library's own. A row names a single control.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Footer",
+      "usage": "Inspector.Footer",
+      "description": "The inspector's closing strip: a quiet `note` on the left and one `action` on the right, each drawn only when given.",
+      "props": [
+        {
+          "name": "note",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "A quiet line on the left: which preset this is, or that none matches.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The footer's one action, on the right — by convention a small `Button`.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "Titled sections of label-and-control rows, with a footer: the layout of a settings panel, a properties sidebar or a wrench menu.",
+  "examples": [
+    {
+      "title": "A wrench menu",
+      "code": "<Inspector.Root>\n  <Inspector.Section label=\"Variants\">\n    <Inspector.Row label=\"Size\">\n      <SegmentedControl aria-label=\"Size\" items={sizes} defaultValue=\"md\" />\n    </Inspector.Row>\n    <Inspector.Row label=\"Label\" htmlFor=\"label\">\n      <Input id=\"label\" defaultValue=\"Take cue\" />\n    </Inspector.Row>\n  </Inspector.Section>\n  <Inspector.Footer note=\"preset · button-hero\" action={<Button size=\"sm\">Reset</Button>} />\n</Inspector.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "Usage",
+      "code": "<Inspector.Root>\n  <Inspector.Section label=\"Variants\">\n    <Inspector.Row label=\"Size\"><SegmentedControl items={sizes} /></Inspector.Row>\n    <Inspector.Row label=\"Label\" htmlFor=\"label\"><Input id=\"label\" /></Inspector.Row>\n  </Inspector.Section>\n  <Inspector.Footer note=\"preset · button-hero\" action={<Button size=\"sm\">Reset</Button>} />\n</Inspector.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/inspector",
+  "mdUrl": "/docs/components/inspector.md",
+  "jsonUrl": "/r/components/inspector.json",
+  "whenToUse": [
+    "A popover or sidebar that edits several properties of one thing, grouped under a few headings.",
+    "Any panel whose rows are a label and a control — the controls stay the library's own; this lays them out."
+  ],
+  "whenNotToUse": [
+    "A form someone submits. That is `Field` and its family, which carry validation and descriptions an inspector row does not.",
+    "A list of records. That is `Panel` with `Row`."
+  ],
+  "commonMistakes": [
+    "Leaving a text input's row without `htmlFor`. The row then lays its words on the input as `aria-label`, which names it but gives it no `<label>` to click — give the input an `id` and the row `htmlFor`.",
+    "Putting two controls in one row. A row names one control; two controls are two rows.",
+    "Nesting sections. An inspector is one level of headings; a section inside a section is a second panel."
+  ],
+  "specimens": [
+    {
+      "title": "Inspector",
+      "group": "chrome",
+      "components": [
+        "Inspector"
+      ],
+      "code": "<div className=\"w-full max-w-[20rem] rounded-(--radius-surface) border border-border bg-surface-2\">\n  <Inspector.Root>\n    {/*\n      Data first, Variants second: `seedFromSpecimen` (`@repo/docgen`)\n      takes each prop's first tag-order value across the whole bench,\n      per prop name and not per row, so `defaults@Inspector.Row`'s\n      `label` and `htmlFor` have to come off the same row to name a\n      coherent pair — and `htmlFor` is only ever set on this one, the\n      only row whose control is a single labelable element. Putting\n      it first makes it that row for both props at once. Reordering\n      Size and Icon ahead of it would seed `label: \"Size\"` (the first\n      `Inspector.Row` tag) beside this row's `htmlFor`, pointing a\n      `<label for>` at an id that scope's control never renders.\n    */}\n    <Inspector.Section label=\"Data\">\n      <Inspector.Row label=\"Label\" htmlFor=\"inspector-bench-label\">\n        <Input id=\"inspector-bench-label\" defaultValue=\"Take cue\" />\n      </Inspector.Row>\n    </Inspector.Section>\n    <Inspector.Section label=\"Variants\">\n      <Inspector.Row label=\"Size\">\n        <SegmentedControl\n          aria-label=\"Size\"\n          size=\"sm\"\n          items={[\n            { value: \"sm\", label: \"sm\" },\n            { value: \"md\", label: \"md\" },\n            { value: \"lg\", label: \"lg\" },\n          ]}\n          defaultValue=\"md\"\n        />\n      </Inspector.Row>\n      <Inspector.Row label=\"Icon\">\n        <Switch aria-label=\"Icon\" defaultChecked />\n      </Inspector.Row>\n    </Inspector.Section>\n    <Inspector.Footer\n      note=\"preset · button-hero\"\n      action={\n        <Button size=\"sm\" variant=\"secondary\">\n          Reset\n        </Button>\n      }\n    />\n  </Inspector.Root>\n</div>",
+      "note": "Titled sections of label-and-control rows, with a footer — the shape of a settings panel, a properties sidebar and the docs' wrench menu. Layout only: the controls are the ones you already use.",
+      "interaction": "nothing of its own takes focus. Each row's control is a real one: a row given `htmlFor` labels its control with a `<label>`, and one without lays its label on the control as `aria-label`. A row is never a group of its own."
+    }
+  ]
+}

package/manifest/components/password-input.json

@@ -17,6 +17,16 @@
         "kind": "string"
       }
     },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the input, when no `FieldLabel` names it. Declared here\nrather than left to the inherited attribute so the props table carries the\nrow: a bare input outside a `Field` has no other way to be named.",
+      "control": {
+        "kind": "string"
+      }
+    },
     {
       "name": "size",
       "type": "\"sm\" | \"md\" | \"lg\"",
@@ -42,6 +52,16 @@
         "kind": "string"
       }
     },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "An example of what goes in the field, shown while it is empty. Not a name:\nit disappears on the first keystroke, so pair it with `aria-label` or a\n`FieldLabel`. Declared for the props-table row, as `aria-label` is above.",
+      "control": {
+        "kind": "string"
+      }
+    },
     {
       "name": "revealed",
       "type": "boolean",

package/manifest/components/preview.json

@@ -0,0 +1,202 @@
+{
+  "name": "Preview",
+  "slug": "preview",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A frame for one component: a stage that is its own theme island, a slot for\ntools at the top right, and a footer.\n\n**The stage is the island; the chrome is not.** `theme`, `mode`, `density`\nand `font` land on the stage element only, and the stage republishes the\ntheme and density contexts so an overlay opened on it follows it. The tools,\nthe footer, the grips and anything they open stay in the scope around the\nPreview — a `terminal` preview's own controls do not turn cyan. With none of\nthe four set, the stage carries no attribute and costs what a `<div>` costs.\nA stage `theme` with no `mode` repeats the page's mode 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 two 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": "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"
+      }
+    }
+  ],
+  "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-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"
+  ],
+  "summary": "A frame for one component: a stage that is its own theme island, tools at the top right, 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": "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>",
+      "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."
+  ],
+  "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."
+  ],
+  "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."
+  ],
+  "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 frame 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/search-input.json

@@ -27,6 +27,16 @@
         "kind": "string"
       }
     },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the input, when no `FieldLabel` names it. Declared here\nrather than left to the inherited attribute so the props table carries the\nrow: a bare input outside a `Field` has no other way to be named.",
+      "control": {
+        "kind": "string"
+      }
+    },
     {
       "name": "size",
       "type": "\"sm\" | \"md\" | \"lg\"",
@@ -62,6 +72,16 @@
         "kind": "string"
       }
     },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "An example of what goes in the field, shown while it is empty. Not a name:\nit disappears on the first keystroke, so pair it with `aria-label` or a\n`FieldLabel`. Declared for the props-table row, as `aria-label` is above.",
+      "control": {
+        "kind": "string"
+      }
+    },
     {
       "name": "onValueChange",
       "type": "((value: string) => void)",

package/manifest/components/textarea.json

@@ -26,6 +26,26 @@
       "control": {
         "kind": "number"
       }
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the textarea, when no `FieldLabel` names it. Declared\nhere rather than left to the inherited attribute so the props table carries\nthe row: a bare textarea outside a `Field` has no other way to be named.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "An example of what goes in the box, shown while it is empty. Not a name:\nit disappears on the first keystroke, so pair it with `aria-label` or a\n`FieldLabel`. Declared for the props-table row, as `aria-label` is above.",
+      "control": {
+        "kind": "string"
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/toggle.json

@@ -17,6 +17,16 @@
         "kind": "string"
       }
     },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name. An icon-only toggle has no text to be named by, so this is\nits name; declared here rather than left to the inherited attribute so the\nprops table carries the row the sentence above tells a caller to pass.",
+      "control": {
+        "kind": "string"
+      }
+    },
     {
       "name": "children",
       "type": "ReactNode",

package/manifest/fixtures.json

@@ -12,6 +12,11 @@
       "kind": "node",
       "label": "A bold line and a paragraph"
     },
+    {
+      "id": "children.label",
+      "kind": "node",
+      "label": "A short label"
+    },
     {
       "id": "bento.tiles",
       "kind": "node",

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "cue",
@@ -29,7 +29,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "da4ab9ce51ff4d26641da90b5e7f018c2a1c181e932080a4ed287e96255cf0a5"
+    "sha256": "0da7f4a2dd5bde4a91d9402d09e11dad26fb9ee607db38c372e875d07e1ee48d"
   },
   "systemApis": [
     {
@@ -454,6 +454,19 @@
       "path": "./components/footer.json",
       "sha256": "19aeac290a3141f986d307732ea889d06af942ee9ab16d5a12a9e3a118d095e2"
     },
+    {
+      "name": "Inspector",
+      "slug": "inspector",
+      "group": "chrome",
+      "importPath": "@cueplusplus/ui",
+      "summary": "Titled sections of label-and-control rows, with a footer: the layout of a settings panel, a properties sidebar or a wrench menu.",
+      "status": "stable",
+      "url": "/docs/components/inspector",
+      "mdUrl": "/docs/components/inspector.md",
+      "jsonUrl": "/r/components/inspector.json",
+      "path": "./components/inspector.json",
+      "sha256": "67c675b0a485804c99db1ad436093c8c687af294a93271d9aa25948869ae4612"
+    },
     {
       "name": "NavigationMenu",
       "slug": "navigation-menu",
@@ -3117,7 +3130,7 @@
       "mdUrl": "/docs/components/input.md",
       "jsonUrl": "/r/components/input.json",
       "path": "./components/input.json",
-      "sha256": "891dd51873f17c96fd0a0e6b851a484796d5c1839fcfe87f1581486fa8afabe8"
+      "sha256": "8c81a85831d864899e9d0ebf8d41286dfcbb04138a0c46e96285f593b0e529a1"
     },
     {
       "name": "InputGroup",
@@ -3182,7 +3195,7 @@
       "mdUrl": "/docs/components/password-input.md",
       "jsonUrl": "/r/components/password-input.json",
       "path": "./components/password-input.json",
-      "sha256": "ce9410082ecb3f757d23a7b5d44fb2e264cb052f4fd83b860f899061c7d910ae"
+      "sha256": "93007b72df5a5dcb660b6bc8e34ffe73150cd680394bdc03afe869a85fea48c7"
     },
     {
       "name": "Radio",
@@ -3247,7 +3260,7 @@
       "mdUrl": "/docs/components/search-input.md",
       "jsonUrl": "/r/components/search-input.json",
       "path": "./components/search-input.json",
-      "sha256": "0bd9b8ad5b5dfeed200e007d81fa60c4cf6064c7aefefd754507089f2d6b217e"
+      "sha256": "172f028e01b635d0a68dc7b6b4a062702b681a487af00d59f06d51fa880cccda"
     },
     {
       "name": "Select",
@@ -3312,7 +3325,7 @@
       "mdUrl": "/docs/components/textarea.md",
       "jsonUrl": "/r/components/textarea.json",
       "path": "./components/textarea.json",
-      "sha256": "c28ee70b1e428b5148e6affcbf752daf21f99731ad15cd99194cccb53900cfac"
+      "sha256": "6d2eab2642fc7b1c287310accf8694fac910f02f52c3bf69cddbff51143d2b02"
     },
     {
       "name": "Toggle",
@@ -3325,7 +3338,7 @@
       "mdUrl": "/docs/components/toggle.md",
       "jsonUrl": "/r/components/toggle.json",
       "path": "./components/toggle.json",
-      "sha256": "c9b24fa9da718b0af6aade2b734020f6f190dfab47e9833a16a07baac67e54bf"
+      "sha256": "a334c3ea14f7e41b55c8ff2d3b1662cf06e11814fe432aa69f3eae0c8e8b3a2e"
     },
     {
       "name": "ToggleGroup",
@@ -3483,6 +3496,19 @@
       "path": "./components/app-window-frame.json",
       "sha256": "b9864857ce00f46aff4c4cd11fadc0ae29ed3e8b0b694cb1317f23ee435ee7c8"
     },
+    {
+      "name": "CodeBlock",
+      "slug": "code-block",
+      "group": "instruments",
+      "importPath": "@cueplusplus/ui",
+      "summary": "A block of code with a copy button and no highlighter palette; `language=\"jsx\"` adds emphasis in three inks the theme already has.",
+      "status": "stable",
+      "url": "/docs/components/code-block",
+      "mdUrl": "/docs/components/code-block.md",
+      "jsonUrl": "/r/components/code-block.json",
+      "path": "./components/code-block.json",
+      "sha256": "c8ceba2d609b900c1032b480070f6b1046752b9f5bbdecdc1e9555f0f24f9aa2"
+    },
     {
       "name": "CopyButton",
       "slug": "copy-button",
@@ -3899,6 +3925,19 @@
       "path": "./components/pagination.json",
       "sha256": "b61ac63fe74b38fff64d239efbca77934effc61dd3f02818a5b333890dc29dc4"
     },
+    {
+      "name": "Preview",
+      "slug": "preview",
+      "group": "layout",
+      "importPath": "@cueplusplus/ui",
+      "summary": "A frame for one component: a stage that is its own theme island, tools at the top right, a footer, and grips that resize it on both axes.",
+      "status": "stable",
+      "url": "/docs/components/preview",
+      "mdUrl": "/docs/components/preview.md",
+      "jsonUrl": "/r/components/preview.json",
+      "path": "./components/preview.json",
+      "sha256": "5d76161163185776ed88381d903742ba9c6bd079ff10c9a817024cac95bcb6b8"
+    },
     {
       "name": "Resizable",
       "slug": "resizable",

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/tokens",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "themes": [
     {
       "name": "cue",