@cueplusplus/ui 0.12.0 → 0.14.0

package/manifest/components/band.json

@@ -0,0 +1,104 @@
+{
+  "name": "Band",
+  "slug": "band",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A full-bleed horizontal section: the page's rhythm, its separation, and a\ncolumn at the measure.\n\nThis is `Footer`'s recipe with the footer taken out of it — a `w-full`\nelement, a rule running edge to edge, and a centred `Container` inside so the\nline reaches the window while the words stop at the measure. `Footer` is\nbuilt on this rather than beside it; the recipe exists once.\n\nEvery dimension it spends belongs to the style axis, so the same markup\ncomposes differently under `[data-style]` without a prop changing: the\nvertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled\nunder `editorial`, trebled under `marketing`), the column is\n`--cue-measure-prose` unless `width` names a fixed rung, and the rule and the\nground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own\ndocumentation before choosing one, because two of the four can come out to\nnothing and they do not vanish symmetrically: `--cue-band-ground` is\n`transparent` on `:root` and on two of the three sets, so a `\"ground\"` paints\nnothing in three of the four states a page can be in, while `--cue-band-rule`\nis `0px` under `marketing` alone. Both are deliberate and nothing warns.\n\n**Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved\nat the element that declares it.** A `<Density>` island nested inside a\nstyled page moves every `--cue-space-*` and the band rhythm does **not**\nfollow it — the island inherits the rhythm already resolved above. Restate\nthe set on the island (`<Density density=\"compact\" styleSet=\"editorial\">`) to\nre-resolve it against that island's rung. Likewise a nested `[data-theme]`\nunder a marketing band paints the **outer** theme's `--cue-surface-1` through\nan already-resolved `--cue-band-ground`.\n\nIt renders a `<section>`, which is not a landmark until it has an accessible\nname — so a band with a heading should carry `aria-labelledby` pointing at\nit, and a band without one costs the document nothing.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "separation",
+      "type": "\"none\" | \"rule\" | \"ground\" | \"bleed\"",
+      "required": false,
+      "defaultValue": "rule",
+      "description": "How this band separates itself from the one above it. Defaults to `\"rule\"`.\n\n- **`\"rule\"`** — a line at the top edge, `--cue-band-rule` wide, in\n  `border-border`. What `Footer` has always drawn.\n- **`\"ground\"`** — a ground, `--cue-band-ground`, edge to edge. The one\n  value that touches colour, and it resolves through the single carve-out\n  the token layer allows a style set.\n- **`\"bleed\"`** — neither, and **no column**: the children run the band's\n  full width with no measure and no gutters. The separation is the change\n  of scale, which is what a full-width image or strip does. `width` has\n  nothing to apply to and is ignored.\n- **`\"none\"`** — neither, column kept. Sections separate by rhythm alone,\n  which is `--cue-band-y` and is what `editorial` leads with.\n\n**What a style set makes each of these do, because two of them can come out\nto nothing and there is no way for this component to warn you.** The values\nare the token layer's; `packages/ui/test/chrome/band.test.tsx` holds this\ntable to `packages/tokens/dist/axes.css`, so it cannot quietly stop being\ntrue.\n\n| set | `\"rule\"` draws | `\"ground\"` paints |\n|---|---|---|\n| *(no set)* and `console` | 1px | nothing — the ground is `transparent` |\n| `editorial` | a 0.5px hairline, **which Chromium paints at 1px at every DPR**; only retina WebKit draws it thinner | nothing — `transparent` |\n| `marketing` | **nothing — the rule is `0px`** | `--cue-surface-1` |\n\nRead the diagonal: `\"ground\"` is the marketing separation and `\"rule\"` is\neveryone else's. A band that wants to separate under *every* set separates\nby rhythm, which every set has.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "none",
+          "rule",
+          "ground",
+          "bleed"
+        ]
+      }
+    },
+    {
+      "name": "width",
+      "type": "\"narrow\" | \"wide\" | \"broad\" | \"full\" | \"prose\"",
+      "required": false,
+      "defaultValue": "prose",
+      "description": "Which measure the band's centred column takes. Defaults to `\"prose\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "narrow",
+          "wide",
+          "broad",
+          "full",
+          "prose"
+        ]
+      }
+    },
+    {
+      "name": "columnClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the centred column. Ignored when `separation` is `\"bleed\"`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The band's contents.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"section\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-band-ground",
+    "--cue-band-rule",
+    "--cue-band-y",
+    "--cue-border",
+    "--cue-measure-prose"
+  ],
+  "summary": "A full-bleed horizontal section: the page's rhythm, its separation, and a column at the measure.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Band aria-labelledby=\"pitch\">\n  <h2 id=\"pitch\">One import</h2>\n  <p>Everything on one token layer.</p>\n</Band>\n<Band separation=\"ground\" width=\"broad\">\n  <Bento.Root cols={3}>{tiles}</Bento.Root>\n</Band>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/band",
+  "mdUrl": "/docs/components/band.md",
+  "jsonUrl": "/r/components/band.json",
+  "specimens": [
+    {
+      "title": "Band",
+      "group": "chrome",
+      "components": [
+        "Band"
+      ],
+      "code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border bg-bg\">\n  {/*\n   * `separation=\"rule\"` is written out rather than left to the\n   * default, and it is load-bearing rather than tidy.\n   * `seedFromSpecimen` merges every `<Band>` open tag in this file\n   * first-wins, so with it omitted the seed took `separation` from\n   * the *second* band below and the generated `defaults` set became\n   * `{ separation: \"ground\", width: \"wide\" }`. A ground is\n   * `transparent` on every block but `marketing`, so the listing\n   * tile — which draws the opening preset with no children — painted\n   * nothing at all and `tests/browser/preview-stage.spec.ts` red with\n   * \"a set drove the component to nothing\". That is the documented\n   * trap in `Band`'s own docblock, landing on the library's own tile\n   * before it could land on anybody else's page.\n   */}\n  <Band separation=\"rule\" aria-labelledby=\"bench-band-one\" width=\"wide\">\n    <Stack gap={3}>\n      <Eyebrow>composition</Eyebrow>\n      <h3 id=\"bench-band-one\" className=\"font-mono text-(length:--cue-text-title) text-fg\">\n        One markup, three attributes\n      </h3>\n      <p className=\"font-mono text-(length:--cue-text-body) leading-(--cue-leading-prose) text-fg-muted\">\n        The measure, the line height and the rhythm of this band are the style axis&rsquo;s,\n        so the same markup composes three ways with no prop changing.\n      </p>\n    </Stack>\n  </Band>\n  <Band separation=\"ground\" aria-labelledby=\"bench-band-two\" width=\"wide\">\n    <Stack gap={3}>\n      <h3 id=\"bench-band-two\" className=\"font-mono text-(length:--cue-text-title) text-fg\">\n        Separated by ground\n      </h3>\n      <p className=\"font-mono text-(length:--cue-text-body) leading-(--cue-leading-prose) text-fg-muted\">\n        Which paints under <code>marketing</code> and is transparent everywhere else.\n      </p>\n    </Stack>\n  </Band>\n</div>",
+      "note": "A page's horizontal section: the rhythm, the separation and the column, all three off the style axis. Four separations — a rule, a ground, a full bleed with no column, and rhythm alone. Under no style set this is exactly what Footer draws above its links.",
+      "interaction": "none; what changes it is the [data-style] attribute above it, not a pointer."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/canvas-split-body.json

@@ -33,6 +33,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split-document.json

@@ -22,6 +22,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split-header.json

@@ -64,6 +64,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split-line.json

@@ -33,6 +33,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split-message.json

@@ -37,6 +37,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split-thread.json

@@ -22,6 +22,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/canvas-split.json

@@ -22,6 +22,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-body"

package/manifest/components/card.json

@@ -113,6 +113,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-surface",
     "--cue-space-1",
     "--cue-space-2",

package/manifest/components/channel-matrix.json

@@ -196,6 +196,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/chart-tooltip-content.json

@@ -100,6 +100,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/chat-panel-assistant-message.json

@@ -19,6 +19,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/chat-panel-composer.json

@@ -41,6 +41,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/chat-panel-messages.json

@@ -19,6 +19,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/chat-panel-typing.json

@@ -19,6 +19,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/chat-panel-user-message.json

@@ -19,6 +19,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/chat-panel.json

@@ -19,6 +19,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-body",

package/manifest/components/code-block.json

@@ -51,6 +51,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-pad-row-x",
     "--cue-pad-row-y",
     "--cue-space-4",

package/manifest/components/code-diff.json

@@ -71,6 +71,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-text-ui"

package/manifest/components/code-runner.json

@@ -91,6 +91,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-3",
     "--cue-text-ui"

package/manifest/components/collapsible.json

@@ -95,6 +95,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-pad-row-x",
     "--cue-space-1",
     "--cue-space-2",

package/manifest/components/colors-section.json

@@ -45,6 +45,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-font-sans",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-space-1",
     "--cue-space-2",

package/manifest/components/combobox.json

@@ -221,6 +221,7 @@
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/command-palette.json

@@ -161,6 +161,7 @@
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/comparison-card.json

@@ -62,6 +62,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-radius-surface",

package/manifest/components/composer.json

@@ -198,6 +198,7 @@
     "--cue-fg-subtle",
     "--cue-focus",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-space-2",
     "--cue-space-3",

package/manifest/components/confidence-marker.json

@@ -52,6 +52,7 @@
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-control",
     "--cue-text-body",

package/manifest/components/container.json

@@ -42,6 +42,9 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
+    "--cue-measure-broad",
+    "--cue-measure-narrow",
+    "--cue-measure-wide",
     "--cue-space-6"
   ],
   "summary": "A centred column with the standard gutters and nothing else.",

package/manifest/components/context-menu.json

@@ -94,6 +94,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/conversation-search.json

@@ -75,6 +75,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-surface",
     "--cue-surface-1",

package/manifest/components/cue-portal-frame.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "Inline version of the portal contract, for portals whose container cannot be\nchosen (a third-party overlay, or content already portaled by something else).\n\nWraps `children` in a `display: contents` element carrying the same\n`data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /\n`data-cue-fidelity` stamp, `--cue-font-scale` and `overrides` properties as\n{@link useCuePortalProps}. Prefer the hook — a stamped container costs one\nelement per overlay instead of one per render tree — and reach for this only\nwhen the container prop is not available.",
+  "description": "Inline version of the portal contract, for portals whose container cannot be\nchosen (a third-party overlay, or content already portaled by something else).\n\nWraps `children` in a `display: contents` element carrying the same\n`data-theme` / `data-density` / `data-font` / `data-mode` / `data-style` /\n`data-cue-skin` / `data-cue-fidelity` stamp, `--cue-font-scale` and\n`overrides` properties as {@link useCuePortalProps}. Prefer the hook — a\nstamped container costs one element per overlay instead of one per render\ntree — and reach for this only when the container prop is not available.",
   "props": [
     {
       "name": "children",

package/manifest/components/day-separator.json

@@ -29,6 +29,7 @@
   "tokensUsed": [
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-surface-1",
     "--cue-surface-2",

package/manifest/components/density.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "Re-scope any subtree to a different density level.\n\nRenders a plain `<div data-density=\"…\" data-cue-theme=\"…\">`: the geometry\ncustom properties are re-declared by the attribute selector and inherit\ndown, so nesting is free and needs no JS. The matching React context is\npublished alongside for the rare JS reads (`useDensity()`,\n`useControlHeight()`, portal stamping) — the DOM attributes, not the\ncontext, are what actually restyle the tree.\n\n`data-cue-theme` carries the nearest `<ThemeProvider>`'s name, or is\nomitted where there is none. It is read by nothing this island does —\ntheme and mode are deliberately *not* re-scoped here, density is the only\naxis an island may override (spec §6) — it exists so a theme's own\ngenerated CSS can address exactly this island regardless of how many\n*other* themed providers sit between it and the one it belongs to. A CSS\nancestor selector can only ask \"does some ancestor carry theme `x`\", never\n\"is `x` the *nearest* one\"; this stamp answers that question the way\n`useContext` already does, at render time, and hands the answer to CSS as\nan attribute rather than leaving it unanswerable there.",
+  "description": "Re-scope any subtree to a different density level.\n\nRenders a plain `<div data-density=\"…\" data-cue-theme=\"…\">`: the geometry\ncustom properties are re-declared by the attribute selector and inherit\ndown, so nesting is free and needs no JS. The matching React context is\npublished alongside for the rare JS reads (`useDensity()`,\n`useControlHeight()`, portal stamping) — the DOM attributes, not the\ncontext, are what actually restyle the tree.\n\n`data-cue-theme` carries the nearest `<ThemeProvider>`'s name, or is\nomitted where there is none. It is read by nothing this island does —\ntheme and mode are deliberately *not* re-scoped here; density was for a long\ntime the only axis an island could override (spec §6), and a named\n`styleSet` is the second and last — it exists so a theme's own\ngenerated CSS can address exactly this island regardless of how many\n*other* themed providers sit between it and the one it belongs to. A CSS\nancestor selector can only ask \"does some ancestor carry theme `x`\", never\n\"is `x` the *nearest* one\"; this stamp answers that question the way\n`useContext` already does, at render time, and hands the answer to CSS as\nan attribute rather than leaving it unanswerable there.\n\n`data-style` joins them when — and only when — a `styleSet` is named. Absence\nis how the axis inherits: custom properties inherit down the DOM, so an island\nthat stamped the ambient set would be restating an answer it already had, and\nan island that stamped a *default* set would silently re-point the rhythm of\nevery page that nested one.",
   "props": [
     {
       "name": "density",
@@ -24,6 +24,21 @@
         ]
       }
     },
+    {
+      "name": "styleSet",
+      "type": "\"console\" | \"editorial\" | \"marketing\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "A style set for this subtree: `console`, `editorial` or `marketing`.\n\nOptional, and **absent means inherit** — an island that names none stamps no\n`data-style` and passes the ambient set straight through, exactly as a bare\n`<Density>` does today. Naming one is what makes this the library's island\nform of the fourth axis, and there are two reasons to reach for it:\n\n- `console` inside a page that is not console. That is the whole job of the\n  default set: it restates the `:root` defaults, so a subtree stamped with\n  it renders the ordinary look inside an editorial or marketing page.\n- Moving the band rhythm with the rung. `--cue-band-y` is\n  `calc(var(--cue-space-7) * 2)` declared on the `[data-style]` element, and\n  a custom property's `var()` references are substituted where they are\n  declared — so a nested density island moves `--cue-space-*` but inherits\n  the rhythm already resolved above it. Restating the set here re-resolves\n  it against this island's rung, which is how a denser island gets a\n  proportionally tighter band instead of the outer one's.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "console",
+          "editorial",
+          "marketing"
+        ]
+      }
+    },
     {
       "name": "children",
       "type": "ReactNode",

package/manifest/components/dialog.json

@@ -168,6 +168,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/disclosure.json

@@ -96,6 +96,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-pad-row-x",
     "--cue-space-1",
     "--cue-space-2",

package/manifest/components/dmx-bar.json

@@ -66,6 +66,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/dmx-strip.json

@@ -76,6 +76,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/document-reference.json

@@ -73,6 +73,7 @@
     "--cue-border-strong",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-radius-surface",
     "--cue-surface-1",

package/manifest/components/drawer.json

@@ -162,6 +162,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/dropdown-menu.json

@@ -223,6 +223,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/edit-message.json

@@ -95,6 +95,7 @@
     "--cue-accent",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-radius-surface",
     "--cue-surface-2",

package/manifest/components/elements-timeline.json

@@ -41,6 +41,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-stream",
     "--cue-surface-2",

package/manifest/components/elicitation-form.json

@@ -92,6 +92,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-overlay",
     "--cue-radius-surface",

package/manifest/components/empty-state.json

@@ -75,6 +75,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-6",

package/manifest/components/export-dialog.json

@@ -76,6 +76,7 @@
     "--cue-fg-muted",
     "--cue-font-mono",
     "--cue-font-sans",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-space-1",
     "--cue-space-3",

package/manifest/components/footer.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": false,
-  "description": "The `contentinfo` landmark at the bottom of a document: a hairline, a\nmeasure, and room for whatever a page ends with.\n\nDeliberately **not** a link-list component. A \"complex footer\" in this system\nis `Grid` + `Stack` + `Link` inside this one — components that already exist\nand already carry the density ladder — and a `Grid` with `minItemWidth` fills\nthe row with as many columns as fit, so the footer is responsive without a\nbreakpoint and without a prop for how many columns to draw. What is left over\nis what a footer actually needs and nothing else has: the landmark, the rule\nthat separates it from the page, the measure that lines it up with the page,\nand the second rule above the fine print.\n\nThe band is full-bleed and the column inside it is centred, which is why the\nhairline runs edge to edge while the links stop at the measure. The column is\nset in the bar's register — mono, at the UI size — because a footer is\nfurniture. It paints no ground of its own: a footer is the end of the page,\nnot a bar, and the seam is the hairline. Give it `className=\"bg-surface-1\"`\nwhere a distinct band is wanted.\n\nInside `AppShell` this is a child of `AppShell.Scroller`, at the end of the\ncontent column — so it scrolls with the page and its full bleed is the\ncontent column's width, not the window's. A footer placed *beside* the\nnavigation column instead (after `AppShell.Body`) runs under the navigation\nand reads as chrome it is not. It coexists with `StatusBar`, which is the\nopposite object: a strip of the frame, always on screen, never scrolled.\n\nStatic markup — no `\"use client\"`.",
+  "description": "The `contentinfo` landmark at the bottom of a document: a hairline, a\nmeasure, and room for whatever a page ends with.\n\nDeliberately **not** a link-list component. A \"complex footer\" in this system\nis `Grid` + `Stack` + `Link` inside this one — components that already exist\nand already carry the density ladder — and a `Grid` with `minItemWidth` fills\nthe row with as many columns as fit, so the footer is responsive without a\nbreakpoint and without a prop for how many columns to draw. What is left over\nis what a footer actually needs and nothing else has: the landmark, the rule\nthat separates it from the page, the measure that lines it up with the page,\nand the second rule above the fine print.\n\nThe band is full-bleed and the column inside it is centred, which is why the\nhairline runs edge to edge while the links stop at the measure. The column is\nset in the bar's register — mono, at the UI size — because a footer is\nfurniture. It paints no ground of its own: a footer is the end of the page,\nnot a bar, and the seam is the hairline. Give it `className=\"bg-surface-1\"`\nwhere a distinct band is wanted.\n\nInside `AppShell` this is a child of `AppShell.Scroller`, at the end of the\ncontent column — so it scrolls with the page and its full bleed is the\ncontent column's width, not the window's. A footer placed *beside* the\nnavigation column instead (after `AppShell.Body`) runs under the navigation\nand reads as chrome it is not. It coexists with `StatusBar`, which is the\nopposite object: a strip of the frame, always on screen, never scrolled.\n\nUnder the skin this **is** `Band`'s recipe — `separation=\"rule\"`, spent\nthrough `bandClasses` rather than through `<Band>` itself, because `Band`\nrenders a `<section>` and this has to render the `<footer>` that makes it the\n`contentinfo` landmark. The two dimensions that recipe carries are the\nrhythm and the rule, and both are the style axis's now, the same as any other\nband: see `separation`'s table on `Band` for what each `[data-style]` set\nmakes them paint. With no set active nothing changes from what this component\nalways rendered. It does **not** reach `Band`'s other two style-owned\nspends — the ground and the reading measure — because `separation` is the\nliteral `\"rule\"` here and `width` is a `ContainerWidth`; `_band.ts`'s\ndocblock says why that is a fact about the published manifest and not only\nabout the markup.\n\nStatic markup — no `\"use client\"`.",
   "props": [
     {
       "name": "width",
@@ -64,13 +64,14 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
+    "--cue-band-rule",
+    "--cue-band-y",
     "--cue-border",
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-space-3",
     "--cue-space-5",
     "--cue-space-6",
-    "--cue-space-7",
     "--cue-text-label",
     "--cue-text-ui"
   ],

package/manifest/components/frac.json

@@ -39,6 +39,7 @@
     "--cue-border-strong",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-text-emphasis"
   ],

package/manifest/components/frames.json

@@ -88,6 +88,20 @@
           "control": {
             "kind": "boolean"
           }
+        },
+        {
+          "name": "layout",
+          "type": "\"column\" | \"board\"",
+          "required": false,
+          "defaultValue": "board",
+          "description": "How the frames are arranged. Defaults to `\"board\"`.\n\n`\"board\"` is the original: a short, wide, sideways scroller a reader drags\nthrough — right where the frames are a set you *browse*, on a homepage wall\nor a design surface.\n\n`\"column\"` stacks them one under the next, each at the full width it is\ngiven, and the canvas grows to whatever it holds. It exists for the page\nthat *reads*: a documentation page scrolls vertically already, and asking a\nreader to pan a second axis to reach the fifth variant of a component —\nwith that fifth variant clipped at the board's edge until they do — hides\nthe examples behind an interaction. A column has no fixed height, so\n`height` is ignored, and nothing pans, so `pan` and `hint` are moot.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              "column",
+              "board"
+            ]
+          }
         }
       ],
       "typeReferences": [

package/manifest/components/guardrail-notice.json

@@ -73,6 +73,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-radius-surface",
     "--cue-surface-1",

package/manifest/components/hover-card.json

@@ -148,6 +148,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",