@cueplusplus/ui 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,162 @@
 # @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

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
 		});
 	}),

package/dist/layout/preview.d.ts

@@ -1,6 +1,6 @@
 import { PreviewGround } from "./_ground.js";
 import * as React from "react";
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, StyleSet } from "@cueplusplus/tokens";
 import { Density as Density$1, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
 //#region src/layout/preview.d.ts
 /** Where the chrome sits and what the stage's ground is. */
@@ -71,6 +71,18 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
    * `<body>` and inherits nothing from the stage's DOM.
    */
   styleSet?: StyleSet;
+  /**
+   * A look pack for the stage: the finish its surfaces wear.
+   *
+   * Stamped as `data-paint` on the stage element, and republished to React for
+   * the same reason `styleSet` is — a popover opened on the stage mounts on
+   * `<body>` and inherits nothing from the stage's DOM, so it has to be told.
+   *
+   * Absent means inherit. `none` is a value that opts OUT of an ambient pack,
+   * which is what a stage uses to show a component unpainted inside a page that
+   * is not.
+   */
+  paint?: Paint;
   /**
    * Resize the stage by dragging or with the keyboard. `true` gives both axes
    * inside the default bounds (160–1280 px wide, 96–960 px tall); an object

package/dist/layout/preview.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
-import { AmbientThemeContext, DensityContext, StyleSetContext } from "../system/density.js";
+import { AmbientThemeContext, DensityContext, PaintContext, StyleSetContext } from "../system/density.js";
 import { OverridesContext } from "../system/overrides.js";
 import { ThemeContext } from "../system/theme-provider.js";
 import { GROUND_CLASSES } from "./_ground.js";
@@ -241,6 +241,7 @@ function stageAttributes(asked, page) {
 	}
 	if (asked.font !== void 0) attributes["data-font"] = asked.font;
 	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
+	if (asked.paint !== void 0) attributes["data-paint"] = asked.paint;
 	return attributes;
 }
 /**
@@ -258,12 +259,13 @@ function stageAttributes(asked, page) {
 * route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
 * and a popup opened on the stage inherits nothing from the stage's DOM.
 */
-function StageScope({ theme, mode, density, styleSet, children }) {
+function StageScope({ theme, mode, density, styleSet, paint, children }) {
 	const outer = React.useContext(ThemeContext);
 	const outerOverrides = React.useContext(OverridesContext);
 	const outerDensity = React.useContext(DensityContext);
 	const outerAmbient = React.useContext(AmbientThemeContext);
 	const outerStyleSet = React.useContext(StyleSetContext);
+	const outerPaint = React.useContext(PaintContext);
 	const value = React.useMemo(() => {
 		if (outer === null || theme === void 0 && mode === void 0) return outer;
 		const scoped = theme ?? outer.theme;
@@ -286,11 +288,14 @@ function StageScope({ theme, mode, density, styleSet, children }) {
 			value: density ?? outerDensity,
 			children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
 				value: styleSet ?? outerStyleSet,
-				children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
-					value: stamped ? null : outerOverrides,
-					children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
-						value,
-						children
+				children: /* @__PURE__ */ jsx(PaintContext.Provider, {
+					value: paint ?? outerPaint,
+					children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
+						value: stamped ? null : outerOverrides,
+						children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+							value,
+							children
+						})
 					})
 				})
 			})
@@ -505,7 +510,7 @@ function Grips({ label, options, size }) {
 *   <Container className="max-w-(--cue-measure-prose)">…</Container>
 * </Preview>
 */
-const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, styleSet, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
+const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, styleSet, paint, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
 	const outer = React.useContext(ThemeContext);
 	const bench = React.useRef(null);
 	const given = resolveResize(resizable);
@@ -517,7 +522,8 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 		mode,
 		density,
 		font,
-		styleSet
+		styleSet,
+		paint
 	}, outer);
 	const framed = presentation === "frame";
 	const stage = /* @__PURE__ */ jsx("div", {
@@ -530,6 +536,7 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 			mode,
 			density,
 			styleSet,
+			paint,
 			children
 		})
 	});

package/dist/layout/sidebar.js

@@ -101,7 +101,7 @@ const Sidebar = {
 			...elementProps,
 			children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "sidebar-section-label",
-				className: "flex h-control-sm items-center px-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "flex h-control-sm items-center px-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}), children]
 		});

package/dist/layout/stepper.js

@@ -43,7 +43,7 @@ const Stepper = React.forwardRef(function Stepper({ className, steps, current, o
 		className: cn("min-w-0", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-3) p-0 font-mono text-(length:--cue-text-label) tracking-[0.1em] uppercase",
+			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-3) p-0 font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) uppercase",
 			children: steps.map((step, index) => {
 				const state = currentIndex === -1 || index > currentIndex ? "upcoming" : index === currentIndex ? "current" : "complete";
 				const navigable = onStepChange !== void 0 && state === "complete";

package/dist/overlays/_surface.d.ts

@@ -59,7 +59,7 @@ declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-s
  */
 declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
 /** The uppercase mono caption over a group of menu rows. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
 /** The hairline between menu groups. */
 declare const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/overlays/_surface.js

@@ -59,7 +59,7 @@ const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3)
 */
 const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
 /** The uppercase mono caption over a group of menu rows. */
-const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
 /** The hairline between menu groups. */
 const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/overlays/command-palette.js

@@ -155,7 +155,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								items: group.items,
 								className: "block",
 								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase select-none",
+									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none",
 									children: group.value
 								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
 									value: item,

package/dist/overlays/toast.js

@@ -87,7 +87,7 @@ function ToastItem({ toast, className, closeLabel }) {
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",
-				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
 			}),
 			/* @__PURE__ */ jsx(Toast.Close, {
 				"aria-label": closeLabel,