@cueplusplus/ui 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,310 @@
 # @cueplusplus/ui
 
+## 0.14.0
+
+### Minor Changes
+
+- f9bb2ff: **`Frames` takes a `layout`.** The default, `"board"`, is what it has always
+  drawn: a picker across the top and one frame on the stage at a time. The new
+  `"column"` runs every frame down a single scroller instead — each with its own
+  caption and count, all of them on one ground — so a reader comparing eight
+  states of a component reads them rather than clicking through them.
+
+  ```tsx
+  <Frames layout="column" …/>
+  ```
+
+  Nothing changes for markup that does not pass it: `layout` defaults to
+  `"board"`, and a `Frames` with no `layout` prop renders byte-for-byte what it
+  rendered before.
+
+- f9bb2ff: **`ThemeProvider` takes a CSP `nonce`.**
+
+  When `overrides.densities` is set, the provider emits one `<style>` element for
+  the density layer. An application serving `style-src-elem 'self'
+'nonce-<per-request>'` had that element refused on every page load: React
+  renders it on the client, and a client-rendered element cannot pick up a server
+  nonce by itself.
+
+  ```tsx
+  // app/layout.tsx — the nonce your middleware already mints
+  <ThemeProvider nonce={nonce} overrides={{ densities: … }}>
+  ```
+
+  The attribute is set only when you pass one. It is absent otherwise rather than
+  present and empty, because `nonce=""` matches no `'nonce-…'` source and would
+  talk a policy out of admitting the element some other way.
+
+  Nothing else in this library emits a `<style>` element, and `prepaintScript()`
+  returns a string your application renders in a `<script>` of its own — so your
+  application already owns that element's nonce, and this prop is the whole of
+  what a strict `style-src-elem` needs from here.
+
+  **One thing a nonce cannot fix.** The provider always sets a style _attribute_
+  on its root — `color-scheme` and `--cue-font-scale`, plus the font families and
+  overrides where given. CSP has no nonce form for `style-src-attr`: it is
+  `'unsafe-inline'` or `'none'`. Under `'none'` the browser drops those
+  declarations, and no prop here can change that.
+
+### Patch Changes
+
+- 331501f: ## The scope goes public
+
+  Every package in `@cueplusplus` was private on npm. npm authenticates _every_
+  read of a private package, so each consumer needed a granular read-only token,
+  and it could not live in a committed `.npmrc` — pnpm 10 and later ignore an
+  env-expanded `_authToken` there by design. The failure mode was the expensive
+  part: npm answers a private package the same way to a reader it will not admit
+  exists, so a missing credential surfaced as `404 Not Found` rather than `401`,
+  and read as "this was never published".
+
+  That was a fair trade while the design system had no consumer outside the org.
+  It stopped being one the moment a public project depended on it, because a
+  public project cannot ask its readers for a token before they can install it.
+
+  So `access` is `public`, in the Changesets config and in all sixteen manifests.
+  Consumers now run `pnpm add @cueplusplus/ui` and nothing else: no token, no
+  `.npmrc`, nothing to rotate, and no extra step in CI or on a hosting provider.
+
+  Nothing else moves. Same registry, same names, same versions — so no consumer
+  needs to regenerate a lockfile, and a machine that keeps its npm token for
+  another private scope can keep it.
+
+  The guard tests are turned around rather than removed. `changeset-config` still
+  asserts the access level and `publishable-packages` still asserts the registry;
+  both now assert the public contract. `publishable-packages` additionally asserts
+  `access: "public"` per manifest, which it never did before: the Changesets config
+  decides what a release does, but npm defaults a scoped package to restricted, so
+  a manifest that forgets is the one that quietly stays private while its siblings
+  go public.
+
+- 52094a9: **The `@cueplusplus` scope is served by npm now, not GitHub Packages.** Every package is
+  **private** there, so installs still authenticate — but the credential and the configuration both
+  change, and the old ones stop working.
+
+  **What to remove.** The scope routing you were asked to commit:
+
+  ```ini
+  # .npmrc — delete this line
+  @cueplusplus:registry=https://npm.pkg.github.com
+  ```
+
+  Nothing replaces it. npm's own registry is where the scope resolves by default, so there is no
+  routing to commit at all — which also means a project that consumed this scope through a committed
+  `.npmrc` can usually delete the file.
+
+  **What to replace.** The classic GitHub PAT with `read:packages` is no longer used. In its place,
+  an npm **granular access token** with **read-only** permission on the `@cueplusplus` scope,
+  written once at the user level:
+
+  ```sh
+  pnpm config set //registry.npmjs.org/:_authToken npm_…
+  ```
+
+  It goes at the user level for the same reason as before: pnpm 10 and later ignore an env-expanded
+  `_authToken` in a project `.npmrc`, and the install then fails with a `404` — not a `401` — and a
+  warning nobody reads. npm answers a private package the same way to a reader it will not admit
+  exists, so the failure reads as "never published".
+
+  **One token, every scope.** npm authenticates per registry rather than per scope, so a machine
+  that installs other private scopes from npm needs one line, not one per scope — select them all on
+  the same token. Two different tokens for `registry.npmjs.org` cannot coexist in one config.
+
+  **CI changes too, and this one is easy to miss.** Under GitHub Packages a workflow's own
+  `GITHUB_TOKEN` could read the scope, so many workflows carried no secret. npm does not know about
+  that token. Every repository that installs these packages now needs the read-only npm token as a
+  secret, and `setup-node` pointed at `registry.npmjs.org`. The same applies to Vercel, Trigger.dev
+  and any Docker build that installs — `docs/CONSUMING.md` §1 has each of them.
+
+  Nothing about the packages themselves changed: same exports, same versions, same contents. What
+  moved is where they are served from and what proves you may read them.
+
+- Updated dependencies [331501f]
+- Updated dependencies [52094a9]
+  - @cueplusplus/theme-base@1.0.3
+  - @cueplusplus/tokens@0.14.0
+
+## 0.13.0
+
+### Minor Changes
+
+- f87c822: `Band`, the page's horizontal section — and `Footer` now spends its recipe
+  instead of carrying a second copy of it.
+
+  **What `Band` is.** A full-bleed element, a rule or a ground running edge to
+  edge, and a centred column at the measure — which is what a footer has always
+  been, minus the footer. Every dimension it spends belongs to the fourth axis,
+  so the same markup composes three ways under `data-style` with no prop
+  changing: `--cue-band-y` for the rhythm, `--cue-measure-prose` for the column
+  unless `width` names one of `Container`'s four fixed rungs, and
+  `--cue-band-rule` / `--cue-band-ground` for the separation. `separation` takes
+  `"rule"`, `"ground"`, `"bleed"` (no column — the children run the full width)
+  and `"none"` (rhythm alone). Two of those can come out to nothing, by design
+  and with nothing to warn you, and they do not vanish symmetrically: a ground is
+  `transparent` on `:root` and on two of the three sets, so it paints only under
+  `marketing`, while a rule is `0px` under `marketing` alone. The prop's
+  documentation carries the table, and a test holds the table to the stylesheet
+  so it cannot stop being true.
+
+  **What changed for existing callers.** `Footer` is built on `Band`'s recipe
+  now — `separation="rule"`, spent through two internal helpers rather than
+  through `<Band>` itself, because `Band` renders a `<section>` and `Footer` has
+  to keep rendering the `<footer>` that makes it the `contentinfo` landmark.
+  Under no style set it renders exactly what it rendered before: `--cue-band-y`
+  resolves to `var(--cue-space-7)`, the same rung the column always spelled, and
+  `--cue-band-rule` resolves to `var(--cue-border-width)`, the same 1px
+  `border-t` always painted. Inside a `[data-style]` subtree it now follows the
+  axis like any other band: a hairline and doubled rhythm under `editorial`, no
+  rule at all and trebled rhythm under `marketing`. **This is the first shipped
+  component to follow `data-style`.** An app that wants the old, fixed behaviour
+  inside a styled region wraps the footer in `<Density styleSet="console">`.
+
+  **What did not change.** `FooterProps` is the same four props —
+  `width`, `meta`, `columnClassName`, `children` — byte for byte; this is a
+  change of implementation, not of contract. The fine-print rule above the
+  meta row is still a literal `border-t border-border` and does not follow the
+  axis: it separates content inside the footer, not the footer from the page.
+
+  **What the published manifest says now.** The helper `Footer` spends `Band`'s
+  recipe through first landed in `band.tsx`, a public component file — and
+  `packages/docgen`'s token scanner only follows a component's imports into an
+  underscore-prefixed chassis file, the same convention `chrome/_drag.ts` already
+  uses. It never opened `band.tsx`, so `footer.json`'s `tokensUsed` — and the
+  token chips on `/docs/components/footer` — silently lost `--cue-space-7` and
+  gained neither of the two names that replaced it. The recipe now lives in
+  `chrome/_band.ts`, and `footer.json` publishes ten names: the nine it shipped
+  before this branch, less the `--cue-space-7` that `--cue-band-y` replaced, plus
+  `--cue-band-y` and `--cue-band-rule`. Those two
+  are the whole of what a `<footer>` takes from the recipe, so they are the whole
+  of what that file holds — the scanner reads a chassis file whole and cannot see
+  which branch a call takes, and `Footer` fixes `separation` at the literal
+  `"rule"` and types `width` as `ContainerWidth`. `Band`'s other two style-owned
+  spends, `--cue-band-ground` and `--cue-measure-prose`, are unreachable from a
+  footer and are written in `band.tsx` beside the prop values that select them,
+  so `band.json` publishes all five and `footer.json` claims neither. Nothing
+  else in either component's manifest entry moved.
+
+  **What it costs.** Nothing at runtime; the manifest grows one component.
+
+  **Correction, no behaviour change.** `layout/preview.tsx`'s docblock cited the
+  group pages' tooled `Preview` count as 325; `Band` landing raised the
+  library's component count and the tooled figure to 326. Comment-only, caught
+  by the branch's own review sweep, and folded in here because it is the last
+  commit that touches this package's authored tree before the note.
+
+- 5b40f07: **A fourth composable axis: `data-style`, for page composition.**
+
+  Theme, density and font already answer "what colour", "how tight" and "which
+  typeface". `data-style` answers the question none of them could: how a _page_ is
+  composed — reading measure, prose line height, and the rhythm of a band. Three
+  sets ship. `console` is the current look made explicit and provably unchanged,
+  `editorial` widens the measure and opens the leading for long-form reading, and
+  `marketing` narrows the measure and spends the vertical space a landing page
+  wants.
+
+  Each set declares `--cue-measure-prose`, `--cue-leading-prose`, `--cue-band-y`,
+  `--cue-band-rule` and `--cue-band-ground`; `editorial` and `marketing` add
+  `--cue-style-display` for a display type scale. Only the display rung composes
+  with `--cue-font-scale`, and a name added to the set vocabulary without an
+  answer is a build error rather than a silent guess.
+
+  **Driving it.** `<ThemeProvider styleSet="editorial">` stamps the attribute on
+  its own element and on `<html>`, `useTheme().styleSet` and `setStyleSet()` read
+  and drive it, and it persists beside theme, density, font and mode under a
+  `style` key — written only when there is a set. A pre-paint script applies a
+  stored set before the first paint, so turning one on _or off_ lands on the first
+  frame rather than the first commit. The set is carried into overlay portals,
+  `<Density styleSet>` islands and `<Preview styleSet>` stages, so an overlay
+  follows the subtree it was opened from and three sets can be shown side by side
+  on one page.
+
+  `useTheme().styleSet` is **the set in force, not the set named here**. A
+  provider that names no set of its own reports the one stamped around it —
+  including a `<Density styleSet>` island sitting between it and an outer provider
+  — exactly as the DOM resolves it. That is deliberate: it makes the context value
+  and the set a portal or a stage carries out of that DOM one value rather than
+  two that can disagree. `null` means nothing anywhere has chosen a set, which is
+  not the same fact as `console`.
+
+  `setStyleSet(null)` is the same distinction from the writing side: it clears the
+  set this provider **names**, not the set that applies to it. A nested provider
+  that clears its own goes back to inheriting whatever is stamped around it, and
+  `styleSet` reports that inherited set, because it is what the cascade resolves
+  to. At the root the two coincide, which is why only a nested provider shows the
+  difference. To positively leave an inherited set, pass `DEFAULT_STYLE_SET`: it
+  stamps an attribute whose block restates the `:root` defaults token for token,
+  and an attribute is the only thing that out-specifies an ancestor's.
+
+  Restating a set on a `<Density>` island is what re-resolves its band rhythm at
+  that island's rung: `--cue-band-y` is built from `--cue-space-7`, and a custom
+  property's `var()` references are substituted where they are declared, so an
+  island that only changes density inherits the rhythm already resolved above it.
+
+  `STYLE_SETS`, `DEFAULT_STYLE_SET`, `STYLE_CONTRACT`, `STYLE_SET_CONTRACT` and
+  the `StyleSet` type are exported from `@cueplusplus/tokens`, so an application
+  can type a prop and validate a stored preference against the same closed list
+  the stylesheet was built from.
+
+  **What it costs.**
+
+  - **Every consumer carries 144 more bytes of blocking inline pre-paint script**,
+    whether or not the application uses the axis — a typical script grows from 995
+    bytes to 1139. It has to read the stored set and stamp or clear the attribute
+    before the first paint, and an application that never touches the axis cannot
+    opt out of the branch that decides there is nothing to stamp.
+  - **The attribute is the generic `data-style`, not `data-cue-style`.** An
+    application already using `data-style` on `<html>` for its own purposes will
+    have it overwritten while a `<ThemeProvider>` is mounted, and cleared when the
+    provider holds no set; the original value is restored on unmount. The generic
+    name was chosen for readability, and this collision is the price. If you use
+    `data-style` on `<html>` yourself, move it before upgrading.
+
+  **What is unchanged.** A page that names no set is untouched: no attribute is
+  stamped anywhere, no stored preference gains a key, and a stored `"style": null`
+  is refused and scrubbed on the next load like every other value nothing
+  declares. `console`'s declarations are asserted at build time to be exactly the
+  `:root` defaults, and a browser test compares every `--cue-*` on two identical
+  subtrees — one bare, one under `console` — and requires them to compute
+  identically. Switching to the default set changes nothing, as a checked fact
+  rather than a promise.
+
+  One note on `editorial`'s hairline: its 0.5px `--cue-band-rule` paints a
+  measured 1px on Chromium at either device pixel ratio and 0.5px only on retina
+  WebKit, so the separation it actually ships is the doubled `--cue-space-7`
+  rhythm with a hairline under it.
+
+### Patch Changes
+
+- b1c2f25: **Every package now ships the licence it declares.** All sixteen have said `"license": "MIT"` in
+  their manifest since they were first published, and none of them carried the text. Installing one
+  gave you a licence field and nothing to read; anyone auditing their dependency tree found a package
+  that claimed a licence it did not include. Each package root now holds the MIT notice, and npm packs
+  a root `LICENSE` whether or not `files` lists it, so it is in the tarball you install.
+
+  `@cueplusplus/ui` additionally ships `NOTICE.md`, the third-party notice for the assistant-ui code
+  vendored into its elements. That one is not automatic — `files` had to name it — and it is byte-for-byte
+  the notice that already sat beside the source it covers, because a notice that travels without the
+  bytes it describes is not a notice.
+
+  Nothing else about these packages changed: same exports, same versions of every dependency, same
+  registry. If you are upgrading only for this, the diff you receive is licence text.
+
+- 0b30ba6: `ImageGeneration` now clears its blur with `blur-none`. It used to ask for `blur-0`, which is a Tailwind v3 class that v4 has no rule for, so the class did nothing at all. You will not see a difference — the image already came out of its blur when generation finished, because a filter transition runs to no filter just as it runs to zero blur — but the class now says what it does, and the elements sync renames it, so a re-sync from assistant-ui will not put it back.
+- 6f791a8: Two families of hard-coded values become tokens, with nothing rendering differently.
+
+  `PageShell` and `Container` spell their three capped measures as `max-w-(--cue-measure-narrow)` / `-wide` / `-broad` rather than as `max-w-[42rem]` / `[54rem]` / `[84rem]`. Nothing about the props changes — `PageWidth` and `ContainerWidth` still offer `narrow` / `wide` / `broad` / `full`, still default to `narrow`, and `full` still caps nothing.
+
+  And the 63 `leading-relaxed` utilities across 55 of this library's modules — dialogs, menus, settings panels, chat rows, tooltips, cards, the two shared class strings behind every collapsible and every popup surface — now spend `--cue-leading-ui`, which `@cueplusplus/tokens` pins at 1.625, Tailwind's own value for that utility. Ninety-one components pick the token up in their `tokensUsed`. `leading-none` is untouched: line-height 1 on an icon or a numeral is a shape decision, not a reading one, so a reading axis has nothing to say about it.
+
+  Both are exact no-ops today. What they buy you is a knob: one declaration of `--cue-leading-ui` or `--cue-measure-wide`, anywhere in your own CSS, and every component that spends it follows — with no fork and no `className` at the call site.
+
+- f813329: `Progress` now names its bar in the HTML your server sends. A screen-reader user on a server-rendered page heard "progress bar, 40%" and never the caption beside it: the words were on the page, but the `role="progressbar"` only pointed at them once the browser had hydrated — and on a page that never hydrates, never. Base UI makes that connection from a layout effect; this layer now hands the caption and the bar the same `useId` while it renders, so the name is in the markup from the first byte and the same reader hears "Rendering, progress bar, 40%" whether or not the JavaScript has arrived. Nothing moves on screen, and a bar you named yourself with `aria-label` or `aria-labelledby` keeps the name you gave it — in the served markup and after hydration alike, which is asserted in both renders rather than in the one the change was written in.
+- Updated dependencies [b1c2f25]
+- Updated dependencies [31a7567]
+- Updated dependencies [5b40f07]
+  - @cueplusplus/theme-base@1.0.2
+  - @cueplusplus/tokens@0.13.0
+
 ## 0.12.0
 
 ### Minor Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CUE++ contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,34 @@
+# Third-party notice — assistant-ui Elements
+
+The files in this directory are vendored from [assistant-ui/assistant-ui](https://github.com/assistant-ui/assistant-ui)
+at commit `31a049fcfa846a76da7c8e2c0bcd62960825dbd4` (2026-08-22), from `packages/ui/src/components/elements/`.
+They are rewritten onto CUE++ tokens by `scripts/elements-sync/`, which also records every
+byte it fetched in `scripts/elements-sync/elements-sync.lock.json`.
+
+Elements are distributed only as copy-in source through a shadcn registry — there is no npm
+package to depend on — so vendoring is the intended use, and the licence below is the whole
+obligation it carries.
+
+```
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/README.md

@@ -5,25 +5,8 @@ Base UI underneath for behaviour and accessibility, Tailwind v4 on top for the p
 
 ## Install
 
-The `@cueplusplus` scope is served by **GitHub Packages**, not npmjs.com, and GitHub Packages
-authenticates *every* install. That is two settings, in two places, and the split is not
-cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
-with `401`.
-
-Commit the scope routing, and nothing else, at the root of your project:
-
-```ini
-# .npmrc
-@cueplusplus:registry=https://npm.pkg.github.com
-```
-
-Then write the credential once, at the **user** level, where pnpm reads it from. It is a
-**classic** personal access token with `read:packages` — GitHub Packages accepts neither
-fine-grained PATs nor OIDC:
-
-```sh
-pnpm config set //npm.pkg.github.com/:_authToken ghp_…
-```
+The `@cueplusplus` scope is **public on npm** and resolves there by default, so there is nothing
+to configure and no credential to supply — it installs like any other package.
 
 ```sh
 pnpm add @cueplusplus/ui @cueplusplus/tokens @cueplusplus/theme-cue @base-ui/react

package/dist/agent-runtime/tool-call-card.js

@@ -165,7 +165,7 @@ const ToolCallCard = React.forwardRef(function ToolCallCard({ className, tool, a
 						children: argsLabel
 					}), /* @__PURE__ */ jsx("pre", {
 						"data-slot": "tool-call-card-args",
-						className: "m-0 min-w-0 overflow-x-auto font-mono text-(length:--cue-text-micro) leading-relaxed break-words whitespace-pre-wrap text-fg-muted",
+						className: "m-0 min-w-0 overflow-x-auto font-mono text-(length:--cue-text-micro) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg-muted",
 						children: args
 					})] }) : null,
 					hasResult ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
@@ -174,7 +174,7 @@ const ToolCallCard = React.forwardRef(function ToolCallCard({ className, tool, a
 						children: resultLabel
 					}), /* @__PURE__ */ jsx("div", {
 						"data-slot": "tool-call-card-result",
-						className: "min-w-0 font-mono text-(length:--cue-text-micro) leading-relaxed break-words whitespace-pre-wrap text-fg",
+						className: "min-w-0 font-mono text-(length:--cue-text-micro) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg",
 						children: result
 					})] }) : null,
 					children

package/dist/chat/ask-box.js

@@ -154,7 +154,7 @@ const AskBox = React.forwardRef(function AskBox({ className, question, kind = "t
 			className: "mt-(--cue-space-3) flex flex-col gap-(--cue-space-2) border-t border-border pt-(--cue-space-3)",
 			children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "text-(length:--cue-text-ui) leading-relaxed break-words whitespace-pre-wrap text-fg-muted",
+					className: "text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg-muted",
 					children: question
 				}),
 				/* @__PURE__ */ jsx("p", {
@@ -326,7 +326,7 @@ const AskBox = React.forwardRef(function AskBox({ className, question, kind = "t
 			/* @__PURE__ */ jsx("p", {
 				id: questionId,
 				"data-slot": "ask-box-question",
-				className: "min-w-0 text-(length:--cue-text-body) leading-relaxed break-words whitespace-pre-wrap text-fg",
+				className: "min-w-0 text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg",
 				children: question
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/chat/composer.js

@@ -104,7 +104,7 @@ const Composer = React.forwardRef(function Composer({ className, onSend, value:
 						placeholder,
 						disabled,
 						value,
-						className: cn(bareControlClasses, "min-h-control-lg resize-none self-stretch py-(--cue-space-2) text-(length:--cue-text-body) leading-relaxed"),
+						className: cn(bareControlClasses, "min-h-control-lg resize-none self-stretch py-(--cue-space-2) text-(length:--cue-text-body) leading-(--cue-leading-ui)"),
 						onChange: (event) => setValue(event.target.value),
 						onKeyDown
 					}),

package/dist/chat/message.js

@@ -85,7 +85,7 @@ const Message = React.forwardRef(function Message({ className, role = "agent", a
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				"data-slot": "message-body",
-				className: "relative min-w-0 text-(length:--cue-text-body) leading-relaxed break-words whitespace-pre-wrap",
+				className: "relative min-w-0 text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-pre-wrap",
 				children: [children, pending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					"data-slot": "message-caret",
 					"aria-hidden": "true",

package/dist/chrome/_band.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+//#region src/chrome/_band.ts
+/**
+* The rule a band draws at its top edge.
+*
+* Spelt as `border-t-(length:--cue-band-rule)` and not as
+* `border-t-(--cue-band-rule)`. Both compile. The second sets
+* `border-top-color`, which would give every band a 1px rule in the token's own
+* text as a colour — a rule that is always drawn and never right. The `length:`
+* hint is what makes Tailwind emit `border-top-width`. It does not carry
+* `border-border` — the element that spends this adds that itself, so both
+* `Band` and `Footer` say in their own class list what colours their rule,
+* rather than one of the two inheriting it silently from the other.
+*/
+const RULE = "border-t-(length:--cue-band-rule)";
+/**
+* The band recipe as class strings, for the one other element in this library
+* that is a band and cannot be a `<section>`.
+*
+* `Footer` is the `contentinfo` landmark: it has to render a `<footer>`, and
+* this library has exactly one polymorphic escape hatch (`ThemeProvider`'s
+* `asChild`) whose own documentation calls it the one place. So rather than
+* give `Band` a second one, or let `Footer` keep a second copy of the recipe
+* — which is the thing spec Decision 4 refuses by name — the strings live here
+* and both elements spend them.
+*
+* It lives in an underscore-prefixed chassis file rather than in `band.tsx` on
+* purpose: `packages/docgen`'s token scanner only follows a component's imports
+* into files whose basename starts with `_`, and `Footer` spends this recipe
+* without rendering `<Band>` itself. Keeping the strings on `band.tsx` left
+* `footer.json`'s published `tokensUsed` silently missing the two tokens this
+* function spends — the rhythm and the rule — because the scanner had no reason
+* to open a public component file it was not asked to document. This file is
+* that reason.
+*
+* **Exactly those two names live here, and that is the second half of the same
+* mechanism.** The scanner reads a chassis file whole; it does not know which
+* branch a call takes, so every `--cue-*` written in this file is published as
+* a token *both* elements render with. `Footer` calls this with the literal
+* `"rule"` and types its own `width` as `ContainerWidth`, so `Band`'s other two
+* spends — `bg-(--cue-band-ground)` for `separation="ground"` and
+* `max-w-(--cue-measure-prose)` for `width="prose"` — are unreachable from a
+* `<footer>` and are written in `band.tsx`, beside the prop that selects them.
+* Moving them here would make `footer.json` claim two tokens the component
+* cannot paint, which is the same defect as the omission this file was written
+* to fix, pointing the other way.
+*
+* It is not exported from the package. A caller who wants a band uses `Band`.
+*/
+function bandClasses(separation) {
+	return cn("w-full py-(--cue-band-y)", separation === "rule" ? RULE : null);
+}
+//#endregion
+export { bandClasses };

package/dist/chrome/band.d.ts

@@ -0,0 +1,106 @@
+import { ContainerWidth } from "../layout/container.js";
+import * as React from "react";
+//#region src/chrome/band.d.ts
+/** How a band separates itself from the section above it. */
+type BandSeparation = "rule" | "ground" | "bleed" | "none";
+/**
+ * Which measure a band's column takes: `Container`'s four fixed rungs, plus
+ * `"prose"` — the reading measure a style set owns.
+ *
+ * `"prose"` is the default and is the only one of the five that moves with
+ * `[data-style]`: 68ch with no set and under `console`, 74ch under `editorial`,
+ * 60ch under `marketing`. The four rungs are fixed aliases and a band that
+ * names one has opted out of the axis for its measure — which is the right
+ * answer for a band holding a `Bento` or a device frame, and the wrong one for
+ * a band holding a paragraph.
+ */
+type BandWidth = ContainerWidth | "prose";
+interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
+  /**
+   * How this band separates itself from the one above it. Defaults to `"rule"`.
+   *
+   * - **`"rule"`** — a line at the top edge, `--cue-band-rule` wide, in
+   *   `border-border`. What `Footer` has always drawn.
+   * - **`"ground"`** — a ground, `--cue-band-ground`, edge to edge. The one
+   *   value that touches colour, and it resolves through the single carve-out
+   *   the token layer allows a style set.
+   * - **`"bleed"`** — neither, and **no column**: the children run the band's
+   *   full width with no measure and no gutters. The separation is the change
+   *   of scale, which is what a full-width image or strip does. `width` has
+   *   nothing to apply to and is ignored.
+   * - **`"none"`** — neither, column kept. Sections separate by rhythm alone,
+   *   which is `--cue-band-y` and is what `editorial` leads with.
+   *
+   * **What a style set makes each of these do, because two of them can come out
+   * to nothing and there is no way for this component to warn you.** The values
+   * are the token layer's; `packages/ui/test/chrome/band.test.tsx` holds this
+   * table to `packages/tokens/dist/axes.css`, so it cannot quietly stop being
+   * true.
+   *
+   * | set | `"rule"` draws | `"ground"` paints |
+   * |---|---|---|
+   * | *(no set)* and `console` | 1px | nothing — the ground is `transparent` |
+   * | `editorial` | a 0.5px hairline, **which Chromium paints at 1px at every DPR**; only retina WebKit draws it thinner | nothing — `transparent` |
+   * | `marketing` | **nothing — the rule is `0px`** | `--cue-surface-1` |
+   *
+   * Read the diagonal: `"ground"` is the marketing separation and `"rule"` is
+   * everyone else's. A band that wants to separate under *every* set separates
+   * by rhythm, which every set has.
+   */
+  separation?: BandSeparation;
+  /** Which measure the band's centred column takes. Defaults to `"prose"`. */
+  width?: BandWidth;
+  /** Extra classes for the centred column. Ignored when `separation` is `"bleed"`. */
+  columnClassName?: string;
+  /** The band's contents. */
+  children?: React.ReactNode;
+}
+/**
+ * A full-bleed horizontal section: the page's rhythm, its separation, and a
+ * column at the measure.
+ *
+ * This is `Footer`'s recipe with the footer taken out of it — a `w-full`
+ * element, a rule running edge to edge, and a centred `Container` inside so the
+ * line reaches the window while the words stop at the measure. `Footer` is
+ * built on this rather than beside it; the recipe exists once.
+ *
+ * Every dimension it spends belongs to the style axis, so the same markup
+ * composes differently under `[data-style]` without a prop changing: the
+ * vertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled
+ * under `editorial`, trebled under `marketing`), the column is
+ * `--cue-measure-prose` unless `width` names a fixed rung, and the rule and the
+ * ground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own
+ * documentation before choosing one, because two of the four can come out to
+ * nothing and they do not vanish symmetrically: `--cue-band-ground` is
+ * `transparent` on `:root` and on two of the three sets, so a `"ground"` paints
+ * nothing in three of the four states a page can be in, while `--cue-band-rule`
+ * is `0px` under `marketing` alone. Both are deliberate and nothing warns.
+ *
+ * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
+ * at the element that declares it.** A `<Density>` island nested inside a
+ * styled page moves every `--cue-space-*` and the band rhythm does **not**
+ * follow it — the island inherits the rhythm already resolved above. Restate
+ * the set on the island (`<Density density="compact" styleSet="editorial">`) to
+ * re-resolve it against that island's rung. Likewise a nested `[data-theme]`
+ * under a marketing band paints the **outer** theme's `--cue-surface-1` through
+ * an already-resolved `--cue-band-ground`.
+ *
+ * It renders a `<section>`, which is not a landmark until it has an accessible
+ * name — so a band with a heading should carry `aria-labelledby` pointing at
+ * it, and a band without one costs the document nothing.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Band aria-labelledby="pitch">
+ *   <h2 id="pitch">One import</h2>
+ *   <p>Everything on one token layer.</p>
+ * </Band>
+ * @example
+ * <Band separation="ground" width="broad">
+ *   <Bento.Root cols={3}>{tiles}</Bento.Root>
+ * </Band>
+ */
+declare const Band: React.ForwardRefExoticComponent<BandProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Band, BandProps, BandSeparation, BandWidth };