@cueplusplus/ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,345 @@
 # @cueplusplus/ui
 
+## 0.15.0
+
+### Minor Changes
+
+- 5493c5a: A style set can now say what colour the line between two bands is.
+
+  `band-rule` was only ever its WIDTH. The colour was the literal string
+  `border-border`, spelled twice — once in `SEPARATION_PAINT` and once in
+  `Footer`'s own class list — so a set could say how thick the rule is and had no
+  way to say what it was made of.
+
+  `--cue-band-rule-color` joins the style-set contract, which becomes six required
+  names. It takes `var(--cue-border)`, `var(--cue-border-subtle)`,
+  `var(--cue-border-strong)` or `transparent` — structural inks only, because a
+  brand colour on a structural line belongs to a different axis. The `:root`
+  default and all three shipped sets declare `var(--cue-border)`, which is
+  byte-for-byte what both call sites drew before, so this is a no-op until a set
+  spends it.
+
+  Measured across thirteen reference sites on 2026-09-22: every one that separates
+  bands by a line picks a line lighter than its box edge. `--cue-border` is a box
+  edge, and repeating a box edge between sections is what `--cue-border-subtle`'s
+  own docblock argues against one layer down. Until now no axis could express the
+  difference.
+
+- c6e26c0: `Density`, `Preview` and portals carry the paint axis
+
+  `<Density paint>` and `<Preview paint>` stamp `data-paint` on their subtree, and
+  a portal opened inside either follows it — the same three-publisher arrangement
+  the style axis already has, for the same reason: a portal mounts on `<body>` and
+  inherits nothing from the DOM it was written in, so it has to be told.
+
+  ```tsx
+  <Density density="compact" paint="none">
+    <Toolbar />
+  </Density>
+
+  <Preview paint="none">
+    <Card>…</Card>
+  </Preview>
+  ```
+
+  **Absent means inherit, and `none` is a value rather than an absence.** An island
+  that names no pack stamps no attribute and passes the ambient pack straight
+  through; `none` restates the `:root` defaults, which is what a subtree stamps to
+  opt _out_ of a pack its parent set. Collapsing the two would make every unpainted
+  subtree override its parent instead of inheriting from it.
+
+  New: `PaintContext`, and a `paint` prop on `DensityProps` and `PreviewProps`.
+  `CuePortalStamp` gains a `paint` field.
+
+  The provider half — a `paint` prop on `<ThemeProvider>`, persistence, and the
+  blocking prepaint script — is not here. This is the island path, which works on
+  its own: a subtree can re-scope the axis without a provider, exactly as
+  `<Density styleSet>` does.
+
+- e7a2405: `ThemeProvider` carries the paint axis, and persists it
+
+  `<ThemeProvider paint>` stamps `data-paint`, `useTheme()` reports it and
+  `setPaint()` switches it, and the blocking pre-paint script puts it on `<html>`
+  before the first frame — so a page restored from storage does not flash an
+  unpainted frame before React commits.
+
+  ```tsx
+  <ThemeProvider theme="cue" paint="none">
+    …
+  </ThemeProvider>;
+
+  const { paint, setPaint } = useTheme();
+  ```
+
+  **An app that never touches the axis writes the object it always wrote, byte for
+  byte.** The pack is persisted only when there is one — the rule `styleSet`
+  already follows — because a `"paint": null` in storage would be a value the
+  pre-paint script has to hold an opinion about for ever, for a preference nobody
+  expressed.
+
+  **The root never promotes an ambient pack.** `useTheme().paint` reports the pack
+  in force, but the `data-paint` stamp stays on the provider's own state, so a
+  `<Density paint>` island cannot become a document-wide attribute and from there
+  reach storage and the next load.
+
+  New: `paint` on `ThemeProviderProps` and `PrepaintDefaults`, `paint` and
+  `setPaint` on the `useTheme()` value, `isPaint()` beside `isStyleSet()`, and
+  `paint` on `PersistedPreferences`.
+
+  The skills learn the axis too: `ui-theming` documents five axes rather than four,
+  and the generated token reference carries the eighteen paint names — so an agent
+  asked to compose a page can find `--cue-paint-glow-blur` instead of spelling a
+  shadow literal by hand.
+
+- d5c4183: Letter spacing becomes a token a style set can retune.
+
+  The system had already decided this and never finished it. `leading-ui` is spent
+  63 times through a token against 2 literals. The only tracking name that existed,
+  `tracking-label`, was spent **zero** times — while 34 hard-coded `tracking-[…]`
+  literals sat across 27 chassis files at six distinct values.
+
+  Three names join the style-set contract, at the values those literals already
+  held: `tracking-caps` (0.15em, 23 call sites), `tracking-caps-tight` (0.1em, 5)
+  and `tracking-caps-loose` (0.2em, 1 — `Eyebrow`, the one place the system spends
+  the accent on pure typography, so a set that wants a different kicker has
+  nowhere else to say so). Two optional names join beside `style-display`:
+  `style-tracking-display` and `style-leading-display`, the latter a second name
+  rather than a widened `leading-prose` because a display register routinely sits
+  under 1 and a paragraph must not.
+
+  32 literals become token spends. Two survive deliberately: `tracking-[inherit]`
+  on `Stepper`, which is a pass-through rather than a value, and `tracking-[0.06em]`
+  on `Chip`'s tag, one call site at a value no other rung shares.
+
+  `tracking-label` stays in the frozen base and does **not** move. Its three call
+  sites now spend `--cue-tracking-label` instead of a literal, which finally makes
+  a declared-and-never-spent token do its job.
+
+  Measured across thirteen reference sites on 2026-09-22: a display tracking is
+  missing in twelve of them — more than any single paint device. Apple's curve is
+  non-monotone (-0.022em at 17px, +0.012em at 19px, 0 at 40px, -0.015em at 80px);
+  vercel wants -0.02/-0.04/-0.06em; stripe -0.025em. None of it was expressible.
+
+  Every value is unchanged. The defaults restate the literals they replace.
+
+### Patch Changes
+
+- 9c7041a: The dot screen and the app bar's glass spend paint tokens
+
+  `Preview` and `Frames`' dots ground reads `--cue-paint-screen` and
+  `--cue-paint-screen-size` instead of spelling the gradient out.
+
+  **Nothing renders differently, and that is proved in a browser rather than
+  argued.** Each token's `:root` default is the value its literal held, so a page
+  that never stamps `data-paint` computes exactly what it computed before.
+  `tests/browser/paint-noop.spec.ts` measures it on the built site: the adopted
+  utility and the literal it replaced compute the same `background-image` and
+  `background-size`, and every value is required to be non-`none` first — because two absences would satisfy an equality, and "the dots
+  stopped painting" is the regression that guards against.
+
+  A pack can now retune the finish without touching a component.
+
+  **One duplicate collapsed.** `apps/docs`' ground picker carried a hand-copied
+  second spelling of the same gradient, with a comment saying it was "the same
+  gradient `Preview`'s own `dots` ground paints" — and nothing tied the two
+  together. Both spend the token now, so they are the same value rather than the
+  same text.
+
+  **`AppBar` keeps `backdrop-blur`.** Adopting `--cue-paint-glass-filter` there was
+  tried and reverted: Tailwind composes every backdrop utility into one
+  declaration, so a raw `[backdrop-filter:var(…)]` would stop a consumer's
+  `backdrop-brightness-50` from combining with the bar's blur. The glass slice
+  owns that decision.
+
+- Updated dependencies [a20e98e]
+- Updated dependencies [5493c5a]
+- Updated dependencies [96f6f6b]
+- Updated dependencies [d5c4183]
+  - @cueplusplus/tokens@0.15.0
+
+## 0.14.1
+
+### Patch Changes
+
+- 9857b93: Every chrome component now ships hand-written guidance in the manifest.
+
+  Fifteen of the twenty-three had extracted facts and nothing that said when to
+  reach for one. `chrome` joins `layout`, `forms` and `primitives` as a complete
+  group.
+
+  The guidance names the rules these components enforce and a hand-rolled
+  replacement always loses: `SegmentedControl` cannot be emptied and `ToggleGroup`
+  can, which is the whole difference between a view picker and a filter bar;
+  `NavigationMenu` must not take `role="menu"`, because that tells a screen reader
+  to expect commands and swallows the browser's own link affordances; `Toolbar` is
+  one tab stop with arrow keys inside, which is what a flex row of buttons throws
+  away; and `Tree` earns its hand-built implementation on three details together —
+  roving tabindex, a flat DOM carrying `aria-level`/`aria-posinset`/`aria-setsize`,
+  and the keyboard contract.
+
+  No API changed.
+
+- d11bcb7: The six domain groups ship hand-written guidance: date, color, flow, midi, dmx
+  and charts.
+
+  Twenty-eight components gained `whenToUse`, `whenNotToUse` and `commonMistakes`,
+  completing every one of the six. Coverage is 164 of 326, and only `elements` and
+  `icons` remain.
+
+  These are the components most often reached for wrongly, because the right
+  choice depends on the domain rather than the shape: a `DateField` beats a
+  `DatePicker` whenever the user already knows the date, and `TimeField` takes
+  `hourCycle={24}` because a control room does not read AM/PM. `MusicalTimeInput`
+  exists because a number field asks for 4.25 and means "bar 2, beat 1, one
+  sixteenth in". `UniverseGrid` is deliberately not a table: position _is_ the
+  address, which is what makes an overlap visible rather than inferred. And three
+  of them refuse a prop on purpose — `FlowBackground`'s `color` writes a property
+  that outranks the theme map, so passing one opts out of theming rather than
+  into it.
+
+  No API changed.
+
+- 2a5b3aa: Every component in the library now ships hand-written guidance.
+
+  The last 162 — all 152 of `elements` and all 10 of `icons` — gained `whenToUse`,
+  `whenNotToUse` and `commonMistakes`. Coverage is **326 of 326**: an agent reading
+  `manifest.json` now gets the judgement as well as the API for every component,
+  not for the thirty-eight that happened to have prose.
+
+  The guidance is derived from each component's own record, never invented, and
+  where a record had only a one-line summary the file is short rather than padded.
+  What that surfaces is the reasoning the source already carried:
+
+  - `GenerativeUI` takes `spec` as `unknown` on purpose, because a cast is a claim
+    about the bytes nobody is in a position to make — and it never throws, so an
+    error boundary around it is waiting for something that will not happen.
+  - `RevertDock` will not render without `This action cannot be undone.` on screen,
+    and picking a scope only arms it, because the old layout put the destructive
+    control _inside_ the scope control's box at 448px.
+  - `AnimatedNumber` is `tabular-nums` because a proportional `1` is narrower than
+    a `0`, so a stepping counter nudges everything to its right on every update.
+  - `Message` renders React nodes verbatim and will never parse markdown, which is
+    what keeps a consumer from being one prompt away from an injection.
+  - The ten icons each say what misreading their shape prevents: an audience drawn
+    as a tag files people with the folders, an empty beta ring reads as "nothing
+    here yet", and a bare chevron for a CLI tool promises a disclosure that
+    navigates instead.
+
+  No API changed.
+
+- 0b5ed2d: Every forms control now ships hand-written guidance in the manifest.
+
+  Twenty-three of the twenty-nine carried extracted facts — props, variants, types
+  — but nothing that said when to reach for one. They now carry `whenToUse`,
+  `whenNotToUse` and `commonMistakes` alongside the rest, so `forms` joins
+  `primitives` as a complete group.
+
+  The guidance is mostly about pairs that look alike and are not:
+  `Autocomplete` accepts what you typed and `Combobox` does not, which decides what
+  downstream code may assume about the value. `ToggleGroup` can be empty and
+  `SegmentedControl` cannot, which is the difference between a filter bar and a
+  view switcher. `Toggle` announces `aria-pressed` and `Switch` announces
+  `aria-checked`, which is why one belongs in a toolbar and the other in a settings
+  list. `MultiSelect` takes a known set and `TagsInput` takes anything.
+
+  No API changed.
+
+- 3e928f8: Every instrument now ships hand-written guidance in the manifest.
+
+  Fourteen of the twenty-one had extracted facts and nothing that said when to
+  reach for one. `instruments` joins `chrome`, `layout`, `forms` and `primitives`
+  as a complete group.
+
+  Several of these components exist because a hand-rolled version gets one rule
+  wrong, and the guidance names which: `Sparkline` and `UsageChart` fix their axis
+  at 0–100, because a trace scaled to its own range makes a flat 3% look identical
+  to a flat 95%; `Progress` transitions linearly, because a bar that eases is lying
+  about its rate; `GroupBar` gives no cell to an empty group, because a minimum
+  width on a zero draws a group that is not there; `LogViewer` fixes its row height
+  so the virtualiser never measures; and `TwoStepButton` is the right shape for a
+  _routine_ destructive action, where a modal would only teach people to dismiss
+  dialogs.
+
+  No API changed.
+
+- f2e5203: Every layout component now ships hand-written guidance in the manifest.
+
+  Seventeen of the twenty had extracted facts and nothing that said when to reach
+  for one. `layout` joins `forms` and `primitives` as a complete group.
+
+  The guidance is mostly about three disclosure components that look alike and are
+  not: `Accordion` coordinates several peer sections, `Collapsible` is one of them
+  alone, and `Disclosure` is neither — it is an annotation on the form it sits in,
+  which is why giving those fields a summary row makes a form read as twice as long
+  as it is. Also why `Stack` exists at all: `flex gap-2` written by hand pins
+  spacing to a pixel value and quietly opts out of the density ladder.
+
+  No API changed.
+
+- ba6d72e: `ThemeProvider`'s `nonce` now reaches Base UI's style element too, not just the
+  density layer.
+
+  `@base-ui/react` renders one `<style>` of its own — a hoisted
+  `<style precedence>` carrying `.base-ui-disable-scrollbar` — and `ScrollAreaRoot`
+  and `SelectPopup` give it a nonce they read from Base UI's `CSPContext`. Nothing
+  fills that context unless a `CSPProvider` is rendered above them, so under
+  `style-src-elem 'self' 'nonce-<per-request>'` that element shipped bare and the
+  browser refused it by content hash, on every page rendering a Select, a Popover
+  or a ScrollArea.
+
+  It was reported to us as a density-layer problem and it never was: the
+  application that hit it passes no `overrides`, so the density `<style>` did not
+  exist in its tree at all. The nonce prop added for that report was correct and
+  addressed a different element. This is the half that was actually biting.
+
+  Given a nonce, `ThemeProvider` now renders `CSPProvider` around its tree. Given
+  none, it renders none — deliberately, so an application that wraps itself in its
+  own `CSPProvider` keeps it. An unconditional inner provider would overwrite that
+  outer context with `undefined` and un-nonce every Base UI style element in the
+  tree, which is the bug this fixes, caused by its fix.
+
+  No API changed. A tree with no nonce renders exactly what it rendered before.
+
+- b12c65d: Four more groups ship hand-written guidance: overlays, system, chat and the
+  configurator.
+
+  Twenty-one components gained `whenToUse`, `whenNotToUse` and `commonMistakes`,
+  completing all four groups. Coverage is 136 of 326.
+
+  Two of these matter beyond the component they describe. `Message` renders React
+  nodes verbatim and will never parse markdown or HTML, because model output is
+  untrusted text and a component that quietly parsed it would make every consumer
+  of this library one prompt away from an injection — a caller that wants rich text
+  passes its own renderer and owns that decision. And `AskBox` holds only the
+  _draft_ answer: the fact of having answered comes back from the host, because
+  local state as the source of truth for a decision a run depends on survives
+  exactly until the pane unmounts.
+
+  The overlay family's distinctions are the rest: `AlertDialog` refuses
+  outside-press dismissal and `Dialog` does not; `Sheet` is a side channel and
+  `Drawer` is its swipe-dismissable cousin; `HoverCard` is reachable by the pointer
+  and a `Tooltip` is not; `ContextMenu` and `Menubar` re-export `DropdownMenu`'s
+  own rows, so a user can never tell from a row how they got to it.
+
+  No API changed.
+
+- f1fa7b6: Every primitive now ships hand-written guidance in the manifest.
+
+  `Avatar`, `AvatarGroup`, `IconButton`, `Kbd`, `Separator`, `Skeleton`, `Spinner`
+  and `StatusDot` carried extracted facts — props, variants, types — but nothing
+  that said when to reach for one. They now carry `whenToUse`, `whenNotToUse` and
+  `commonMistakes` alongside the rest, so the ten components in `primitives` are
+  complete. An agent reading `manifest.json` gets the judgement as well as the API:
+  that `StatusDot`'s wrapper is the containing block its `sr-only` label needs,
+  that `Skeleton` has no intrinsic size and collapses without one, that
+  `IconButton`'s `aria-label` is the only name the control has.
+
+  No API changed. These are fields the manifest schema already had and thirty-eight
+  other components already filled.
+
+- Updated dependencies [abd9a57]
+  - @cueplusplus/tokens@0.14.1
+
 ## 0.14.0
 
 ### Minor Changes

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

@@ -25,7 +25,7 @@ const DANGER_TONES = {
 */
 const HEADER = "flex min-w-0 items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) text-fg-muted outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
 /** The label over a block in the body, in the same eyebrow as a message header. */
-const EYEBROW = "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase text-fg-subtle";
+const EYEBROW = "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase text-fg-subtle";
 /**
 * An LLM's own tool call, shown while it runs and after.
 *

package/dist/chat/message.js

@@ -72,7 +72,7 @@ const Message = React.forwardRef(function Message({ className, role = "agent", a
 		children: [
 			hasHeader ? /* @__PURE__ */ jsxs("div", {
 				"data-slot": "message-header",
-				className: "flex min-w-0 items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+				className: "flex min-w-0 items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 				children: [name === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					"data-slot": "message-author",
 					className: cn("min-w-0 truncate", role === "user" ? "text-accent-fg opacity-70" : "text-(--agent-color)"),

package/dist/chrome/band.js

@@ -16,12 +16,18 @@ import { jsx } from "react/jsx-runtime";
 * the argument.
 *
 * `rule`'s entry is the colour and not the width: the width is
-* `--cue-band-rule` and belongs to the chassis, and both elements name
-* `border-border` in their own class list rather than inheriting it from the
-* other.
+* `--cue-band-rule` and belongs to the chassis, and both elements name the ink
+* in their own class list rather than inheriting it from the other.
+*
+* That ink is now a token. It was the literal `border-border`, spelled here and
+* again in `Footer`, which meant a style set could say how THICK the line
+* between two bands is and had no way to say what colour it was — and every
+* site measured in the 2026-09-22 corpus that separates bands by a line picks
+* one lighter than its box edge. `--cue-band-rule-color` defaults to
+* `var(--cue-border)` on `:root`, which is byte-for-byte what this drew before.
 */
 const SEPARATION_PAINT = {
-	rule: "border-border",
+	rule: "border-(--cue-band-rule-color)",
 	ground: "bg-(--cue-band-ground)",
 	bleed: null,
 	none: null

package/dist/chrome/eyebrow.js

@@ -22,7 +22,7 @@ const Eyebrow = React.forwardRef(function Eyebrow({ className, slashes = true, c
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "eyebrow",
-		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.2em] text-accent uppercase", className),
+		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-loose) text-accent uppercase", className),
 		...elementProps,
 		children: [slashes ? /* @__PURE__ */ jsx("span", {
 			"data-slot": "eyebrow-glyph",

package/dist/chrome/footer.js

@@ -66,7 +66,7 @@ const Footer = React.forwardRef(function Footer({ className, columnClassName, wi
 		ref,
 		"data-slot": "footer",
 		"data-separation": "rule",
-		className: cn(bandClasses("rule"), "border-border", className),
+		className: cn(bandClasses("rule"), "border-(--cue-band-rule-color)", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsxs(Container, {
 			width,

package/dist/chrome/section-header.js

@@ -35,7 +35,7 @@ const SectionHeader = React.forwardRef(function SectionHeader({ className, label
 		}) : null,
 		/* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-label",
-			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
 			children: label
 		}),
 		count === void 0 ? null : /* @__PURE__ */ jsx("span", {

package/dist/configurator/configurator.js

@@ -221,7 +221,7 @@ function ThemeConfigurator({ position: positionProp, defaultPosition = "floating
 					}),
 					/* @__PURE__ */ jsx("span", {
 						id: titleId,
-						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
 						children: title
 					}),
 					moved === 0 ? null : /* @__PURE__ */ jsx(Chip, {

package/dist/configurator/export-dialog.js

@@ -70,7 +70,7 @@ function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "c
 				/* @__PURE__ */ jsxs(Field, {
 					className: "gap-(--cue-space-1)",
 					children: [/* @__PURE__ */ jsx(FieldLabel, {
-						className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+						className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 						children: "Theme name"
 					}), /* @__PURE__ */ jsx(Input, {
 						size: "sm",

package/dist/configurator/panel-sections.js

@@ -133,7 +133,7 @@ function TextTokenField({ label, token, edits, placeholder }) {
 	return /* @__PURE__ */ jsxs(Field, {
 		className: "gap-(--cue-space-1)",
 		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+			className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 			children: label
 		}), /* @__PURE__ */ jsx(Input, {
 			size: "sm",

package/dist/configurator/token-editor.js

@@ -133,7 +133,7 @@ function TokenEditor({ values, overridden, onTokenChange, onTokenReset, groups =
 			"data-slot": "configurator-token-group",
 			className: "flex flex-col gap-(--cue-space-2)",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: group.label
 			}), group.tokens.map((token) => {
 				const property = tokenProperty(token);

package/dist/date/calendar.js

@@ -23,14 +23,14 @@ const CALENDAR_CLASSES = {
 	months: "relative flex flex-wrap items-start gap-(--cue-space-5)",
 	month: "flex flex-col gap-(--cue-space-2)",
 	month_caption: "flex h-control-sm items-center justify-center",
-	caption_label: "font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+	caption_label: "font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 	nav: "absolute inset-x-0 top-0 flex h-control-sm items-center justify-between",
 	button_previous: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
 	button_next: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
 	chevron: "size-icon-sm fill-current",
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
-	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-[0.1em] text-fg-subtle uppercase",
+	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-(--cue-tracking-caps-tight) text-fg-subtle uppercase",
 	week: "",
 	day: "p-0 text-center align-middle",
 	day_button: "size-control-sm cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",

package/dist/elements/context-usage.js

@@ -136,17 +136,17 @@ const ContextUsage = React.forwardRef(function ContextUsage({ categories, limit,
 					children: [
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-start font-normal tracking-[0.12em]",
+							className: "pb-1 text-start font-normal tracking-(--cue-tracking-label)",
 							children: copy.category
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							className: "pb-1 text-end font-normal tracking-(--cue-tracking-label)",
 							children: copy.tokens
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							className: "pb-1 text-end font-normal tracking-(--cue-tracking-label)",
 							children: copy.usage
 						})
 					]

package/dist/elements/transcript-rules.js

@@ -86,7 +86,7 @@ const UnreadDivider = React.forwardRef(function UnreadDivider({ label = "New", c
 			className: "bg-accent/40 h-px flex-1"
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn(mono, "text-accent shrink-0 tracking-[0.15em] uppercase"),
+			className: cn(mono, "text-accent shrink-0 tracking-(--cue-tracking-caps) uppercase"),
 			children: label
 		})]
 	});

package/dist/forms/field.js

@@ -43,7 +43,7 @@ const FieldLabel = React.forwardRef(function FieldLabel({ className, ...elementP
 	return /* @__PURE__ */ jsx(Field.Label, {
 		ref,
 		"data-slot": "field-label",
-		className: cn("font-mono text-(length:--cue-text-label) leading-none tracking-[0.1em] text-fg-muted uppercase select-none data-[disabled]:opacity-40", className),
+		className: cn("font-mono text-(length:--cue-text-label) leading-none tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase select-none data-[disabled]:opacity-40", className),
 		...elementProps
 	});
 });

package/dist/forms/slider.js

@@ -40,7 +40,7 @@ const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label
 		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
 		...elementProps,
 		children: [label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase",
+			className: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase",
 			children: [label === void 0 ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsx(Slider.Label, { children: label }), showValue ? /* @__PURE__ */ jsx(Slider.Value, { className: "tabular-nums text-fg normal-case tracking-normal" }) : null]
 		}), /* @__PURE__ */ jsx(Slider.Control, {
 			"data-slot": "slider-control",

package/dist/instruments/code-block.js

@@ -159,7 +159,7 @@ const CodeBlock = React.forwardRef(function CodeBlock({ code, label, language =
 			className: "flex items-center justify-between gap-(--cue-space-4) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "code-block-label",
-				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label ?? language
 			}), /* @__PURE__ */ jsx(CopyButton, { value: code })]
 		}), /* @__PURE__ */ jsx("pre", {

package/dist/instruments/ledger.js

@@ -13,7 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * be said out loud, because `<h2>` and `<h3>` come bold by default and a bold
 * micro-label in a dense list reads as a second kind of emphasis.
 */
-const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] text-fg-subtle uppercase";
+const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) text-fg-subtle uppercase";
 /**
 * The disclosure button a collapsible heading holds.
 *

package/dist/instruments/progress.js

@@ -58,7 +58,7 @@ const Progress$1 = React.forwardRef(function Progress$2({ className, trackClassN
 			children: [label === void 0 ? null : /* @__PURE__ */ jsx(Progress.Label, {
 				id: namedByCaption ? captionId : void 0,
 				"data-slot": "progress-label",
-				className: "truncate tracking-[0.15em] text-fg-subtle uppercase",
+				className: "truncate tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}), showValue ? /* @__PURE__ */ jsx(Progress.Value, {
 				"data-slot": "progress-value",

package/dist/instruments/stat.js

@@ -39,7 +39,7 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-label",
-				className: "truncate font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "truncate font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {

package/dist/instruments/table.js

@@ -122,7 +122,7 @@ const TableHead = React.forwardRef(function TableHead({ className, numeric = fal
 		scope,
 		"data-slot": "table-head",
 		"data-numeric": numeric ? "" : void 0,
-		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
 		...elementProps
 	});
 });
@@ -201,7 +201,7 @@ const Table = {
 				colSpan: span,
 				scope: "rowgroup",
 				"data-slot": "table-group-cell",
-				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
 				children: [/* @__PURE__ */ jsx(Label, {
 					"data-slot": "table-group-label",
 					className: TABLE_GROUP_LABEL,

package/dist/instruments/terminal-frame.js

@@ -191,7 +191,7 @@ const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title
 			className: "flex h-control-md shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-title",
-				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: title
 			}), copy ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-copy",

package/dist/layout/_ground.js

@@ -2,7 +2,7 @@
 /** What each ground paints. `"none"` paints nothing, so whatever is behind shows through. */
 const GROUND_CLASSES = {
 	plain: "bg-surface-1",
-	dots: "bg-surface-1 bg-[radial-gradient(circle,var(--cue-hair-strong)_1px,transparent_1.3px)] bg-[length:14px_14px]",
+	dots: "bg-surface-1 bg-(image:--cue-paint-screen) bg-(length:--cue-paint-screen-size)",
 	none: ""
 };
 //#endregion

package/dist/layout/collapsible.js

@@ -94,7 +94,7 @@ const Disclosure = React.forwardRef(function Disclosure({ className, label = "ad
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			ref,
 			"data-slot": "disclosure-trigger",
-			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
 			...elementProps,
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/layout/description-list.js

@@ -20,7 +20,7 @@ const DescriptionList = {
 		return /* @__PURE__ */ jsx("dt", {
 			ref,
 			"data-slot": "description-list-term",
-			className: cn("font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase", className),
+			className: cn("font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase", className),
 			...elementProps
 		});
 	}),