@cueplusplus/ui 0.15.0 → 0.17.0

package/README.md

@@ -53,6 +53,32 @@ To stop the defaults flashing on first paint, add `prepaintScript()` beside the
 both the same array — [§4 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#4-the-provider)
 is the whole layout.
 
+Beside `theme` and `mode`, the provider takes four axes, and each one changes a single thing:
+`density` the geometry, `font` the typeface pairing, `styleSet` the page composition, and `paint`
+the finish — rims, strokes, elevation, glow, glass, texture and edge fades. `paint` is off unless
+you ask for it: the provider stamps no `data-paint`, so a page looks exactly as it did until you
+pass one of `none`, `halo`, `hatch`, `lift`, `frost`, `bevel` or `grain`. Any subtree can take its
+own with `<Density paint="frost">` — the same island that re-scopes `density` and `styleSet`. The
+font pairing is the one axis a subtree cannot change: it lives on `<html>`, so it is the root's.
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system" paint="halo">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+The ten packs, where each was measured from and what each refuses:
+<https://ui.cueplusplus.com/docs/paint>. Serving a nonce-based Content-Security-Policy? Read
+[§4.5 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#45-content-security-policy-the-nonce-prop-and-what-it-does-not-reach)
+before you ship it — `paint="grain"` alone needs `img-src data:`.
+
 ## What it ships
 
 Common components come from the root entry. Groups that need an optional peer have a subpath of

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

@@ -2,8 +2,12 @@
 import { cn } from "../lib/cn.js";
 import { AGENT_ROOT_COLOR, agentColor } from "../chat/agent-color.js";
 import { CheckGlyph } from "../chat/_glyphs.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
 import { Chip } from "../primitives/chip.js";
 import { Spinner } from "../primitives/spinner.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/agent-runtime/tool-call-card.tsx
@@ -23,9 +27,9 @@ const DANGER_TONES = {
 * card with nothing to disclose draws instead — the two must sit at exactly the
 * same height and ink, or a list of calls ripples as some of them gain detail.
 */
-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";
+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_RING_OFFSET_2}`;
 /** 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-(--cue-tracking-caps) uppercase text-fg-subtle";
+const EYEBROW = `${LABEL_FACE} text-(length:--cue-text-micro) ${LABEL_TRACKING} ${LABEL_CASE} text-fg-subtle`;
 /**
 * An LLM's own tool call, shown while it runs and after.
 *
@@ -96,7 +100,7 @@ const ToolCallCard = React.forwardRef(function ToolCallCard({ className, tool, a
 		"data-status": status,
 		"data-state": hasDetail ? open ? "open" : "closed" : void 0,
 		"data-danger": danger,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) rounded-(--radius-control) border border-border px-(--cue-space-3) py-(--cue-space-2)", className),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) rounded-control border border-border px-(--cue-space-3) py-(--cue-space-2)", className),
 		style: {
 			"--agent-color": color,
 			...style

package/dist/brand/_chassis.d.ts

@@ -22,7 +22,7 @@ type BrandSize = "sm" | "md" | "lg";
  *
  * Not a light/dark pair. The source artwork ships two files that hard-code
  * `white`, `black` and `#1E1E1E`; this library ships one component that reads
- * the token layer, so a single element is correct in all ten presets and both
+ * the token layer, so a single element is correct in every preset and both
  * modes without anybody choosing a file.
  */
 type BrandTone = "inherit" | "fg" | "accent";

package/dist/brand/cue-mark.d.ts

@@ -8,7 +8,7 @@ interface CueMarkProps extends BrandAssetProps {}
  * Square at every size, drawn from the artwork's own path data, and painted
  * entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
  * take the ground, which is exactly the relationship the two shipped SVGs
- * encode by hand. One element is therefore correct in all ten presets and
+ * encode by hand. One element is therefore correct in every preset and
  * both modes, and there is no light/dark variant to pick.
  *
  * The two glyphs are {@link Plussie}'s eyes; both components read one geometry

package/dist/brand/cue-mark.js

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Square at every size, drawn from the artwork's own path data, and painted
 * entirely from tokens — the disc takes the tone's ink and the two "+" glyphs
 * take the ground, which is exactly the relationship the two shipped SVGs
-* encode by hand. One element is therefore correct in all ten presets and
+* encode by hand. One element is therefore correct in every preset and
 * both modes, and there is no light/dark variant to pick.
 *
 * The two glyphs are {@link Plussie}'s eyes; both components read one geometry

package/dist/charts/ramps.js

@@ -600,7 +600,7 @@ const ChartRamp = React.forwardRef(function ChartRamp({ className, colors, label
 		role: "img",
 		"aria-label": label,
 		"data-slot": "chart-ramp",
-		className: cn("flex w-full overflow-hidden rounded-(--radius-control)", className),
+		className: cn("flex w-full overflow-hidden rounded-control", className),
 		style: { height: toRem(height) },
 		...elementProps,
 		children: colors.map((color, index) => /* @__PURE__ */ jsx("span", {

package/dist/chat/agent-pile.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { agentColor } from "./agent-color.js";
 import { CrownGlyph } from "./_glyphs.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/agent-pile.tsx
@@ -62,7 +63,7 @@ const AgentPile = React.forwardRef(function AgentPile({ className, agents, root,
 				agent.working === true ? "working" : null,
 				agent.asking === true ? "asking a question" : null
 			].filter(Boolean).join(" · ");
-			const avatarClasses = cn("relative flex shrink-0 items-center justify-center rounded-full border border-(--agent-color) bg-surface-2 font-mono leading-none text-(--agent-color) uppercase outline-none", AVATAR_SIZES[size], selected === agent.slug ? "ring-2 ring-(--agent-color)" : null, onSelect === void 0 ? null : "cursor-pointer transition-colors hover:bg-surface-3 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent");
+			const avatarClasses = cn("relative flex shrink-0 items-center justify-center rounded-full border border-(--agent-color) bg-surface-2 font-mono leading-none text-(--agent-color) uppercase outline-none", AVATAR_SIZES[size], selected === agent.slug ? "ring-2 ring-(--agent-color)" : null, onSelect === void 0 ? null : `cursor-pointer transition-colors hover:bg-surface-3 ${FOCUS_RING_OFFSET_2}`);
 			const initial = name.slice(0, 1).toUpperCase();
 			return /* @__PURE__ */ jsxs("span", {
 				"data-slot": "agent-pile-item",

package/dist/chat/ask-box.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
 import { CheckGlyph } from "./_glyphs.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { Checkbox } from "../forms/checkbox.js";
 import { Input } from "../forms/input.js";
 import { NumberField } from "../forms/number-field.js";
@@ -114,14 +115,14 @@ const AskBox = React.forwardRef(function AskBox({ className, question, kind = "t
 		"data-slot": "ask-box",
 		"data-answered": "true",
 		"data-kind": kind,
-		className: cn("flex min-w-0 flex-col rounded-(--radius-surface) border border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
+		className: cn("flex min-w-0 flex-col rounded-surface border border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
 		style: boxStyle,
 		...elementProps,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-slot": "ask-box-summary",
 			"aria-expanded": open,
-			className: "relative flex min-w-0 cursor-pointer items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
+			className: `relative flex min-w-0 cursor-pointer items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) outline-none ${FOCUS_RING_OFFSET_2}`,
 			onClick: () => setOpen((current) => !current),
 			children: [
 				/* @__PURE__ */ jsx("span", {
@@ -304,7 +305,7 @@ const AskBox = React.forwardRef(function AskBox({ className, question, kind = "t
 		"data-slot": "ask-box",
 		"data-answered": "false",
 		"data-kind": kind,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) rounded-(--radius-surface) border border-(--agent-color) bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) rounded-surface border border-(--agent-color) bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
 		style: boxStyle,
 		...elementProps,
 		children: [

package/dist/chat/delegation-card.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { agentColor } from "./agent-color.js";
 import { CheckGlyph } from "./_glyphs.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { Spinner } from "../primitives/spinner.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -52,7 +53,7 @@ const DelegationCard = React.forwardRef(function DelegationCard({ className, age
 		"data-direction": direction,
 		"data-state": open ? "open" : "closed",
 		"data-status": status,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) rounded-(--radius-control) border border-border px-(--cue-space-3) py-(--cue-space-2)", className),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) rounded-control border border-border px-(--cue-space-3) py-(--cue-space-2)", className),
 		style: {
 			"--agent-color": color,
 			...style
@@ -64,7 +65,7 @@ const DelegationCard = React.forwardRef(function DelegationCard({ className, age
 				"data-slot": "delegation-card-trigger",
 				"aria-expanded": open,
 				"aria-controls": open ? bodyId : void 0,
-				className: "flex min-w-0 cursor-pointer 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",
+				className: `flex min-w-0 cursor-pointer 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_RING_OFFSET_2}`,
 				onClick: toggle,
 				children: [
 					/* @__PURE__ */ jsx("span", {

package/dist/chat/message-list.js

@@ -1,7 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { ChevronDownGlyph } from "./_glyphs.js";
+import { FOCUS_RING, FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/message-list.tsx
@@ -116,7 +118,7 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 			"aria-label": ariaLabel,
 			tabIndex: 0,
 			"data-slot": "message-list-scroller",
-			className: "min-h-0 flex-1 overflow-y-auto outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
+			className: `min-h-0 flex-1 overflow-y-auto outline-none ${FOCUS_RING_INSET_2}`,
 			onScroll,
 			children: count === 0 ? /* @__PURE__ */ jsx("div", {
 				"data-slot": "message-list-empty",
@@ -131,7 +133,7 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 		}), behind ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-slot": "message-list-jump",
-			className: "absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-control border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent ${FOCUS_RING}`,
 			onClick: jumpToLatest,
 			children: [/* @__PURE__ */ jsx(ChevronDownGlyph, { className: "size-icon-sm" }), jumpLabel]
 		}) : null]

package/dist/chat/message.js

@@ -1,5 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/message.tsx
@@ -9,14 +12,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * The tight corner is the tail, and it points at whoever is speaking: bottom
 * right for the right-aligned user turn, bottom left for the agent's. Written
-* against the radius tokens rather than literal pixels, so the whole family
-* tightens with `--cue-radius-scale` at ultra-compact density instead of
-* staying a fixed 10px blob next to 2px controls.
+* as the overlay rung with one corner overridden to the control rung, rather
+* than a `[border-radius:…]` arbitrary value reading `var(--radius-*)`
+* directly — a `--radius-*` reader bypasses the compiled bridge utilities
+* `rounded-control`/`rounded-overlay` resolve to, so it neither shows up in
+* the class-token scan that guards this bridge nor tightens with
+* `--cue-radius-scale` through the same path every other radius in this
+* system does. `rounded-br-control`/`rounded-bl-control` are ordinary
+* per-corner bridge utilities (`packages/tokens/build.mjs`'s `SIDES` table
+* covers every corner, not just the four edges), so the four-value shorthand
+* upstream Tailwind has no plain form for is two ordinary utility classes.
 */
 const ROLE_RADII = {
-	user: "[border-radius:var(--radius-overlay)_var(--radius-overlay)_var(--radius-control)_var(--radius-overlay)]",
-	agent: "[border-radius:var(--radius-overlay)_var(--radius-overlay)_var(--radius-overlay)_var(--radius-control)]",
-	system: "rounded-(--radius-control)"
+	user: "rounded-overlay rounded-br-control",
+	agent: "rounded-overlay rounded-bl-control",
+	system: "rounded-control"
 };
 /**
 * Fill per role.
@@ -72,7 +82,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-(--cue-tracking-caps) uppercase",
+				className: cn("flex min-w-0 items-baseline justify-between gap-(--cue-space-3) text-(length:--cue-text-micro)", LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 				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/_edge-scroller.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
@@ -95,7 +96,7 @@ function useEdgeScroll(enabled = true) {
 * `relative` frame.
 */
 function EdgeChevrons({ edges, onNudge, previousLabel, nextLabel, className }) {
-	const base = "absolute inset-y-0 z-10 flex w-(--cue-space-5) cursor-pointer items-center justify-center text-fg-muted outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+	const base = `absolute inset-y-0 z-10 flex w-(--cue-space-5) cursor-pointer items-center justify-center text-fg-muted outline-none hover:text-fg ${FOCUS_RING_INSET_2}`;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [edges.start ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-slot": "edge-scroll-previous",

package/dist/chrome/_status-bar.js

@@ -1,4 +1,6 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
 //#region src/chrome/_status-bar.ts
 /**
 * The class half of `StatusBar` (see `./status-bar.tsx`).
@@ -42,8 +44,12 @@ const ITEM_BASE = "inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2)
 *
 * The reset first: a `<button>` arrives with a border, a ground, a gutter and a
 * font of the user agent's choosing, and none of them belong in a 24px strip.
-* `text-(length:--cue-text-label)` and `font-mono` are re-declared rather than
-* inherited for the same reason — form controls do not inherit type.
+* `text-(length:--cue-text-label)` and the face are re-declared rather than
+* inherited for the same reason — form controls do not inherit type. The face
+* is the bar's own, {@link LABEL_FACE}, and not a fixed `font-mono`: the bar
+* reads `--cue-style-label-face`, and a restatement that did not read it too
+* left every control mono while the readings beside it went sans under a
+* sans-voiced Look (tender, kiln, porcelain) — one bar in two faces.
 *
 * `h-full` is the VS Code reading of a status item and the one that makes hover
 * legible: the fill is the height of the bar, not the height of the words, so a
@@ -58,7 +64,7 @@ const ITEM_BASE = "inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2)
 * never match `:disabled` — the pseudo-class is defined on form controls — so
 * without the data twin a disabled link would read as perfectly live.
 */
-const INTERACTIVE_CHASSIS = "h-full cursor-pointer border-0 bg-transparent py-0 font-mono text-(length:--cue-text-label) outline-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none";
+const INTERACTIVE_CHASSIS = `h-full cursor-pointer border-0 bg-transparent py-0 ${LABEL_FACE} text-(length:--cue-text-label) outline-none transition-colors duration-150 ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none`;
 /**
 * A quiet control's gutter, and the negative margin that pays for it.
 *

package/dist/chrome/_tabs-scroll.d.ts

@@ -56,8 +56,24 @@ declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, cli
  * overflowing edge is often the gap between two tabs, and fading empty space is
  * invisible — hence the chevron buttons in the component.
  *
+ * **The default reach is a custom property, not a number**, so a paint pack can
+ * lengthen or shorten every edge fade in the library at once. It is written as
+ * `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+ * ink or a paint name is declared with a `:root` default here but the mask is
+ * also built by this function in isolation — a test calling it with no DOM
+ * would otherwise produce a gradient with an unresolvable stop.
+ *
+ * `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+ * so the swap renders identically: measured pixel for pixel in Chromium and
+ * WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+ * see a difference.
+ *
+ * An explicit `fadePx` still wins, and stays a plain number: a caller that has
+ * measured its own reach is not asking for the axis's.
+ *
  * @param edges Which edges overflow, from {@link computeScrollEdges}.
- * @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+ * @param fadePx How far the fade reaches in. Omitted, it follows
+ * `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
  * @returns A `linear-gradient(...)` value, or `undefined` when nothing
  * overflows — no mask property at all, rather than a fully opaque one, so the
  * common case creates no compositing layer.

package/dist/chrome/_tabs-scroll.js

@@ -59,15 +59,32 @@ function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
 * overflowing edge is often the gap between two tabs, and fading empty space is
 * invisible — hence the chevron buttons in the component.
 *
+* **The default reach is a custom property, not a number**, so a paint pack can
+* lengthen or shorten every edge fade in the library at once. It is written as
+* `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+* ink or a paint name is declared with a `:root` default here but the mask is
+* also built by this function in isolation — a test calling it with no DOM
+* would otherwise produce a gradient with an unresolvable stop.
+*
+* `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+* so the swap renders identically: measured pixel for pixel in Chromium and
+* WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+* see a difference.
+*
+* An explicit `fadePx` still wins, and stays a plain number: a caller that has
+* measured its own reach is not asking for the axis's.
+*
 * @param edges Which edges overflow, from {@link computeScrollEdges}.
-* @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+* @param fadePx How far the fade reaches in. Omitted, it follows
+* `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
 * @returns A `linear-gradient(...)` value, or `undefined` when nothing
 * overflows — no mask property at all, rather than a fully opaque one, so the
 * common case creates no compositing layer.
 */
-function edgeFadeMask(edges, fadePx = 24) {
+function edgeFadeMask(edges, fadePx) {
 	if (!edges.start && !edges.end) return void 0;
-	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${fadePx}px` : "black 0px"}, ${edges.end ? `black calc(100% - ${fadePx}px), transparent 100%` : "black 100%"})`;
+	const reach = fadePx === void 0 ? `var(--cue-paint-fade-length,24px)` : `${fadePx}px`;
+	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${reach}` : "black 0px"}, ${edges.end ? `black calc(100% - ${reach}), transparent 100%` : "black 100%"})`;
 }
 //#endregion
 export { TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/app-bar.js

@@ -2,6 +2,9 @@ import { cn } from "../lib/cn.js";
 import { Link } from "../layout/link.js";
 import { Separator } from "../primitives/separator.js";
 import { EdgeScrollNav } from "./_edge-scroller.js";
+import { GLASS_CLASSES } from "../system/_paint-glass.js";
+import { APP_BAR_CHROME, APP_BAR_LINK, APP_BAR_QUIET_INK } from "../system/_style-app-bar.js";
+import { NAV_VOICE } from "../system/_style-nav-voice.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/app-bar.tsx
@@ -11,6 +14,10 @@ import { jsx } from "react/jsx-runtime";
 * One rung of the chrome ladder tall, from `--cue-chrome-toolbar` — the same
 * token `Toolbar` and the docs site's hand-rolled header use, so a page that
 * stacks a bar on a toolbar gets two equal strips rather than two guesses.
+* A style set may make it taller, lighten, drop or dash its rule and widen its
+* inline inset (`style-appbar-height`, `style-chrome-rule`,
+* `style-chrome-rule-style`, `style-appbar-inset`); under a set that names
+* none of them it is exactly this.
 *
 * Sticky by default, and translucent because of it: a bar pinned over scrolling
 * content needs a ground, and `bg-surface-1/95` plus `backdrop-blur` says
@@ -53,7 +60,7 @@ const AppBarRoot = React.forwardRef(function AppBarRoot({ className, sticky = tr
 	return /* @__PURE__ */ jsx("header", {
 		ref,
 		"data-slot": "app-bar",
-		className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-4) border-b border-border bg-surface-1/95 px-(--cue-space-5) backdrop-blur", sticky ? "sticky top-0 z-40" : null, className),
+		className: cn(`flex w-full shrink-0 items-center gap-(--cue-space-4) border-b ${APP_BAR_CHROME} ${GLASS_CLASSES}`, sticky ? "sticky top-0 z-40" : null, className),
 		...elementProps
 	});
 });
@@ -108,7 +115,7 @@ const AppBarNav = React.forwardRef(function AppBarNav({ className, frameClassNam
 	});
 });
 const REGISTERS = {
-	muted: "text-fg-muted",
+	muted: APP_BAR_QUIET_INK,
 	strong: "text-fg"
 };
 /**
@@ -150,7 +157,7 @@ const AppBar = {
 			ref,
 			"data-active": active ? "" : void 0,
 			"aria-current": active ? "page" : void 0,
-			className: cn("shrink-0 font-mono text-(length:--cue-text-ui)", active ? "text-accent" : REGISTERS[register], className),
+			className: cn(`shrink-0 rounded-control ${NAV_VOICE} ${APP_BAR_LINK}`, active ? "text-accent" : REGISTERS[register], className),
 			...linkProps
 		});
 	}),

package/dist/chrome/app-shell.js

@@ -5,6 +5,7 @@ import { Sidebar } from "../layout/sidebar.js";
 import { CrossGlyph } from "../overlays/_glyphs.js";
 import { Drawer } from "../overlays/drawer.js";
 import { IconButton } from "../primitives/icon-button.js";
+import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
 import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -113,7 +114,7 @@ const AppShell = {
 				ref,
 				"data-slot": "app-shell",
 				"data-rail": rail ? "" : void 0,
-				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", className),
+				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", TEXTURE_CLASSES, className),
 				style: {
 					[NAV_WIDTH_PROPERTY]: rail ? railWidth : navWidth,
 					...style

package/dist/chrome/band.d.ts

@@ -9,7 +9,7 @@ type BandSeparation = "rule" | "ground" | "bleed" | "none";
  *
  * `"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
+ * 60ch under `marketing` and `graphite`. 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.
@@ -39,13 +39,15 @@ interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
    *
    * | set | `"rule"` draws | `"ground"` paints |
    * |---|---|---|
-   * | *(no set)* and `console` | 1px | nothing — the ground is `transparent` |
+   * | *(no set)*, `console`, `tender`, `zine` and `porcelain` | 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` |
+   * | `kiln` | **nothing — the rule is `0px`**; `Footer` keeps its own, through `--cue-style-footer-rule` | `--cue-sunken`, the recessed ground |
+   * | `graphite` | 1px, in `--cue-border` | nothing — `transparent` |
    *
-   * 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.
+   * Read the diagonal: `"ground"` is the marketing and kiln 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"`. */
@@ -67,23 +69,27 @@ interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
  * 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
+ * under `editorial`, trebled under `marketing` and `graphite`), 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.
+ * `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
+ * `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
+ * under those two 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`.
+ * re-resolve it against that island's rung. Likewise a hand-stamped
+ * `[data-theme]` element under a marketing page paints the **outer** theme's
+ * `--cue-surface-1` through an already-resolved `--cue-band-ground`, and its
+ * rule in the outer theme's border. The library's own theme islands do not: a
+ * nested `ThemeProvider` that names a theme or a mode, and a `Preview` stage
+ * with a theme, a mode or a pairing, restate the set in force beside it, so a
+ * band inside one paints that island's ground and rule.
  *
  * 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

package/dist/chrome/band.js

@@ -1,34 +1,15 @@
 import { cn } from "../lib/cn.js";
+import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
+import { BAND_BROAD_WIDTH, BAND_Y_HALVES } from "../system/_style-band.js";
+import { GROUND_PATTERN_CLASSES } from "../system/_paint-ground-pattern.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/band.tsx
-/**
-* What each separation adds to the frame `bandClasses` draws, and the two
-* `--cue-*` names that live in this file rather than in the chassis beside it.
-*
-* `_band.ts` holds only what `Footer` can also render — the rhythm and the
-* rule — because docgen's token scanner reads a chassis file whole and cannot
-* see that `Footer` calls `bandClasses` with the literal `"rule"`. The ground
-* is reachable only from `<Band separation="ground">`, so it is written here,
-* next to the prop whose value selects it. `_band.ts`'s own docblock carries
-* 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 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-(--cue-band-rule-color)",
-	ground: "bg-(--cue-band-ground)",
+	ground: `bg-(--cue-band-ground) ${GROUND_PATTERN_CLASSES} ${TEXTURE_CLASSES} before:[mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)] before:[-webkit-mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)]`,
 	bleed: null,
 	none: null
 };
@@ -44,23 +25,27 @@ const SEPARATION_PAINT = {
 * 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
+* under `editorial`, trebled under `marketing` and `graphite`), 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.
+* `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
+* `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
+* under those two 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`.
+* re-resolve it against that island's rung. Likewise a hand-stamped
+* `[data-theme]` element under a marketing page paints the **outer** theme's
+* `--cue-surface-1` through an already-resolved `--cue-band-ground`, and its
+* rule in the outer theme's border. The library's own theme islands do not: a
+* nested `ThemeProvider` that names a theme or a mode, and a `Preview` stage
+* with a theme, a mode or a pairing, restate the set in force beside it, so a
+* band inside one paints that island's ground and rule.
 *
 * 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
@@ -82,6 +67,9 @@ const Band = React.forwardRef(function Band({ className, columnClassName, separa
 	const column = width === "prose" ? {
 		width: "full",
 		className: "max-w-(--cue-measure-prose)"
+	} : width === "broad" ? {
+		width: "full",
+		className: BAND_BROAD_WIDTH
 	} : {
 		width,
 		className: null
@@ -90,7 +78,7 @@ const Band = React.forwardRef(function Band({ className, columnClassName, separa
 		ref,
 		"data-slot": "band",
 		"data-separation": separation,
-		className: cn(bandClasses(separation), SEPARATION_PAINT[separation], className),
+		className: cn(bandClasses(separation), BAND_Y_HALVES, SEPARATION_PAINT[separation], className),
 		...elementProps,
 		children: separation === "bleed" ? children : /* @__PURE__ */ jsx(Container, {
 			width: column.width,