@cueplusplus/ui 0.18.2 → 0.20.0

package/dist/system/_stage-scope.js

@@ -0,0 +1,199 @@
+"use client";
+import { usePublish, useRead } from "./published.js";
+import { AmbientThemeContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes } from "./density.js";
+import { OverridesContext } from "./overrides.js";
+import { ScopedPairingContext } from "./_scoped-pairing.js";
+import { NO_PAIRING_SEED, PairingSeedContext, ThemeContext } from "./theme-provider.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/system/_stage-scope.tsx
+/**
+* The attributes the stage carries — and, when nothing is asked, none at all.
+*
+* Inheriting is the *absence* of attributes, which is why every branch below
+* is conditional. Three branches add a second attribute, each for a reason in
+* the stylesheets rather than in taste.
+*
+* A theme's light block is the compound selector
+* `[data-theme="t"][data-mode="light"]`, so a mode with no theme restates the
+* page's theme on the same element. Read the other way, a theme with no mode
+* repeats the page's mode. Otherwise the stage would match the theme's dark
+* block under a light page, while every popup opened on it came up light:
+* popups are stamped from the context `StageScope` publishes, which carries
+* the page's mode.
+*
+* A theme's density overrides are addressed through `data-cue-theme`, the
+* stamp `<Density>` writes, so a density names the nearest theme the same way.
+*
+* A stage that ends up naming a theme and no rung — its own theme, or the
+* page's restated beside a mode (`scoped`, below) — restates the rung in force
+* around it, as `data-density` with the theme as `data-cue-theme` (spec
+* 2026-09-26-looks-fidelity §4.1.1). A theme's rung retunes are keyed on the
+* theme and the rung on one element, or a rung below the theme, so a stage that
+* re-themes with no `data-density` of its own inherits the rung already
+* resolved against the PAGE's theme, and its own theme's retune of that rung
+* never applies. `/looks` opens every stage this way: a theme and no rung. It
+* is what a nested `ThemeProvider` that names a theme already does — theme,
+* rung and mode together. The rung is the one `DensityContext` carries: `null`
+* outside every provider, where nothing is restated, and never `useDensity()`'s
+* `compact` fallback, which would invent one.
+*
+* The style set adds no second attribute, and that is the difference worth
+* writing down beside the three that do: a `[data-style]` block is a single
+* attribute selector naming no other axis, so a set stamped alone matches on
+* its own.
+*
+* But a stage that re-themes, re-modes or re-faces restates the set and the pack
+* in force around it (`around`), for a reason in custom properties rather than
+* in selectors. Their blocks declare names whose values read those axes — a
+* pack's stroke stops are the theme's borders, a set's band rule and ground are
+* the theme's border and surface — and a custom property's `var()`s are
+* substituted where it is declared. Declared only on the page, they arrive at
+* the stage already resolved against the page's theme and pairing; restated on
+* the stage, beside its own `data-theme` or `data-font`, they resolve against
+* those. A rung alone changes no ink and restates nothing. `around` is `null`
+* until the stage may restate: under a root that persists, not before the stage
+* has mounted, when the set and pack in force are the root's props rather than
+* the visitor's (see `useRestateReady`).
+*
+* The page's mode and rung, restated beside a stage theme — and the page's
+* theme, restated beside a stage mode or as a stage rung's `data-cue-theme` —
+* wait for the same mount on the same terms (tracking plan F13): under a
+* persisting root each is the root's, whose value on the server is its prop
+* while `<html>` carries the visitor's. So until then `followed` holds it back,
+* and `data-cue-follows` names it instead — the theme stylesheets' blocks each
+* have a twin keyed on `<html>`'s value and that marker (a followed rung
+* included: the base rung's twin in `axes.css`, and each theme's retune of it
+* keyed on the stage's own `data-theme`), and a rung node with no
+* `data-cue-theme` is reached by the rung rules' structural form, so the stage
+* paints the visitor's theme, mode and rung from the first frame (see
+* `useFollowedAxes`). A theme, mode or rung the stage names, or one named
+* between it and the root, is stamped as it always was. A followed rung takes
+* its `data-cue-theme` with it: the stamp addresses a `data-density` on the
+* same element, and there is none to address until the rung is stamped.
+*/
+function stageAttributes(asked, page, around, aroundDensity, followed) {
+	const attributes = {};
+	const scoped = asked.theme ?? (asked.mode === void 0 ? null : page?.theme ?? null);
+	if (scoped !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-theme"] = scoped;
+	const moded = asked.mode ?? (asked.theme === void 0 ? void 0 : page?.mode);
+	if (moded !== void 0 && !followed.mode) attributes["data-mode"] = moded;
+	if (asked.density !== void 0) {
+		attributes["data-density"] = asked.density;
+		const nearest = asked.theme ?? page?.theme ?? null;
+		if (nearest !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-cue-theme"] = nearest;
+	} else if (scoped !== null && aroundDensity !== null && !followed.density) {
+		attributes["data-density"] = aroundDensity;
+		if (asked.theme !== void 0 || !followed.theme) attributes["data-cue-theme"] = scoped;
+	}
+	if (followed.marker !== null) attributes["data-cue-follows"] = followed.marker;
+	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;
+	const restates = around !== null && (scoped !== null || moded !== void 0 || asked.font !== void 0);
+	if (restates && asked.styleSet === void 0 && around.styleSet !== null) attributes["data-style"] = around.styleSet;
+	if (restates && asked.paint === void 0 && around.paint !== null) attributes["data-paint"] = around.paint;
+	return attributes;
+}
+/**
+* The contexts the stage republishes, so an overlay opened on it follows it.
+*
+* `useCuePortalProps()` stamps a portal container from `ThemeContext` and
+* `DensityContext`; a popup mounts on `<body>` and inherits nothing from the
+* stage's DOM. So the stage's subtree reads a theme context with the stage's
+* theme and mode, and a density context with the stage's rung. The tools and
+* footer are outside this subtree, so what they open follows the page. A theme
+* the provider did not register leaves `manifest` null, which is what
+* `useTheme()` already reports for a name nobody registered.
+*
+* The style set travels with the density for the same reason and by the same
+* route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
+* and a popup opened on the stage inherits nothing from the stage's DOM.
+*
+* And the pairing travels in the theme context, because that is where the
+* portal stamp reads `data-font` from (`theme?.font`). It used not to: the
+* stage stamped `data-font` on its own element and republished nothing, so a
+* popover opened on a `plex` stage came up in the root's pairing — a limit the
+* `font` prop's docblock stated rather than a rule anybody chose. A pairing on
+* the stage is the stage's, exactly as its theme is; `setFont` read here still
+* drives the root, because the pairing's setter has no island form.
+*/
+function StageScope({ theme, mode, density, font, styleSet, paint, children }) {
+	const outer = useRead(ThemeContext);
+	const outerOverrides = useRead(OverridesContext);
+	const outerDensity = useRead(DensityContext);
+	const outerAmbient = useRead(AmbientThemeContext);
+	const outerStyleSet = useRead(StyleSetContext);
+	const outerPaint = useRead(PaintContext);
+	const value = React.useMemo(() => {
+		if (outer === null || theme === void 0 && mode === void 0 && font === void 0) return outer;
+		const scoped = theme ?? outer.theme;
+		return {
+			...outer,
+			theme: scoped,
+			manifest: scoped === outer.theme ? outer.manifest : null,
+			mode: mode ?? outer.mode,
+			font: font ?? outer.font,
+			resolvedMode: mode === "dark" || mode === "light" ? mode : outer.resolvedMode
+		};
+	}, [
+		outer,
+		theme,
+		mode,
+		font
+	]);
+	const stamped = theme !== void 0 || mode !== void 0;
+	const inputs = [
+		theme,
+		mode,
+		density,
+		font,
+		styleSet,
+		paint,
+		React.useContext(ThemeContext),
+		React.useContext(OverridesContext),
+		React.useContext(DensityContext),
+		React.useContext(AmbientThemeContext),
+		React.useContext(StyleSetContext),
+		React.useContext(PaintContext)
+	];
+	const publishedAmbient = usePublish(theme ?? outerAmbient, inputs);
+	const publishedDensity = usePublish(density ?? outerDensity, inputs);
+	const publishedStyleSet = usePublish(styleSet ?? outerStyleSet, inputs);
+	const publishedPaint = usePublish(paint ?? outerPaint, inputs);
+	const publishedOverrides = usePublish(stamped ? null : outerOverrides, inputs);
+	const publishedValue = usePublish(value, inputs);
+	const outerPairingSeed = React.useContext(PairingSeedContext);
+	const outerScopedPairing = React.useContext(ScopedPairingContext);
+	const outerRootAxes = React.useContext(RootAxesContext);
+	return /* @__PURE__ */ jsx(RootAxesContext.Provider, {
+		value: rootAxes(outerRootAxes.theme && theme === void 0, outerRootAxes.mode && mode === void 0, outerRootAxes.density && density === void 0),
+		children: /* @__PURE__ */ jsx(AmbientThemeContext.Provider, {
+			value: publishedAmbient,
+			children: /* @__PURE__ */ jsx(DensityContext.Provider, {
+				value: publishedDensity,
+				children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
+					value: publishedStyleSet,
+					children: /* @__PURE__ */ jsx(PaintContext.Provider, {
+						value: publishedPaint,
+						children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
+							value: publishedOverrides,
+							children: /* @__PURE__ */ jsx(PairingSeedContext.Provider, {
+								value: font === void 0 ? outerPairingSeed : NO_PAIRING_SEED,
+								children: /* @__PURE__ */ jsx(ScopedPairingContext.Provider, {
+									value: font !== void 0 || outerScopedPairing,
+									children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+										value: publishedValue,
+										children
+									})
+								})
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { StageScope, stageAttributes };

package/dist/system/_style-check.js

@@ -26,7 +26,7 @@ const CHECK_EDGE = "border-[color:var(--cue-style-check-edge,var(--cue-border))]
 * box is 18px on a phone and 16px on a desktop, rounded at 0.4 of its control
 * corner (4px). The `sm` box keeps its `icon-sm`.
 */
-const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /** @see CHECK_RADIUS */
 const CHECK_SIZE_MD = "size-[var(--cue-style-check-size,var(--cue-icon-md))]";
 /**

package/dist/system/_style-chip.js

@@ -69,7 +69,7 @@ const CHIP_TRACKING = "tracking-[var(--cue-style-chip-tracking,var(--cue-trackin
 /** @see CHIP_CASE — the `tag` variant's tracking; its own closed `0.06em` by default. */
 const CHIP_TRACKING_TAG = "tracking-[var(--cue-style-chip-tracking,0.06em)]";
 /** @see CHIP_CASE — the chip's radius; what `rounded-control` compiles to by default. */
-const CHIP_RADIUS = "rounded-[var(--cue-style-chip-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const CHIP_RADIUS = "rounded-[var(--cue-style-chip-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /** @see CHIP_CASE — each tone's fill: `var(--cue-style-chip-fill, 10%)` of the tone over transparent. */
 const CHIP_FILL = {
 	accent: "bg-[color:color-mix(in_oklab,var(--cue-accent)_var(--cue-style-chip-fill,10%),transparent)]",

package/dist/system/_style-field-chassis.js

@@ -24,6 +24,19 @@ const FIELD_PAD_SM = "px-[calc(var(--cue-space-3)*var(--cue-style-field-pad,1))]
 const FIELD_PAD_MD = "px-[calc(var(--cue-space-4)*var(--cue-style-field-pad,1))]";
 /** The `lg` rung's inline padding. */
 const FIELD_PAD_LG = "px-[calc(var(--cue-space-5)*var(--cue-style-field-pad,1))]";
+/**
+* A text-entry field's corner (2026-10-04): `style-field-radius`, and the
+* control's own radius — a set's `style-control-radius` or the density's rung,
+* times the scale, exactly what `rounded-control` resolves to — when a set names
+* none. A set whose buttons are pills (Prism, Ledger) names it so its fields,
+* textareas, drop zones and data panes are rounded rectangles rather than pills;
+* every other set draws what it drew before. Spelled through `--cue-*` names,
+* as `_style-check.ts`'s corner is, and never through a `--radius-*` reader.
+*/
+const FIELD_RADIUS = "rounded-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
+/** The same corner on one side, for a shape that tightens only its tail (a message bubble). */
+const FIELD_RADIUS_BR = "rounded-br-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
+const FIELD_RADIUS_BL = "rounded-bl-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /** The edge under a pointer that can hover. */
 const FIELD_HOVER_EDGE = "hover:border-[color:var(--cue-style-field-hover-edge,transparent)]";
 /** An invalid field's edge: `danger`, the class the chassis drew before round 6. */
@@ -35,4 +48,4 @@ const INVALID_EDGE = "data-[invalid]:border-danger";
 */
 const SELECT_HOVER_EDGE = "hover:not-data-disabled:border-[color:var(--cue-style-field-hover-edge,var(--cue-border-strong))]";
 //#endregion
-export { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE, SELECT_HOVER_EDGE };
+export { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, FIELD_RADIUS, FIELD_RADIUS_BL, FIELD_RADIUS_BR, INVALID_EDGE, SELECT_HOVER_EDGE };

package/dist/system/_style-group-label.js

@@ -4,21 +4,25 @@
 * `style-group-label-size`, `style-group-label-ink`): a menu's and a command
 * palette's group labels. A menu's falls back through `style-label-size` and
 * `style-label-ink` to the rung and ink it drew; the palette's, which read no
-* label name, to its `text-micro` and `fg-subtle`. coss.com/ui sets both at
+* label name, to its `text-micro`. coss.com/ui sets both at
 * 12px in `fg-muted` (P163.label-size, P152.group-label, P152.group-label-ink),
 * where its field labels are 14px `fg`.
 *
 * **Optional** (spec §3.0). Its own module for docgen's reason: one token per
 * file, so only the components that read it are credited with it.
 *
+* Both inks fall back to `fg-muted`, not `fg-subtle`: a group label is label
+* text, held to 4.5:1 (structural Looks, spec 2026-10-02 §4.1; see
+* `_style-label-ink.ts`).
+*
 * @internal Not part of the public API.
 */
 const GROUP_LABEL_SIZE = "text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))]";
 /** @see GROUP_LABEL_SIZE */
-const GROUP_LABEL_INK = "text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))]";
+const GROUP_LABEL_INK = "text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
 /** @see GROUP_LABEL_SIZE — the palette's, which read no label name. */
 const GROUP_LABEL_SIZE_MICRO = "text-[length:var(--cue-style-group-label-size,var(--cue-text-micro))]";
 /** @see GROUP_LABEL_SIZE */
-const GROUP_LABEL_INK_SUBTLE = "text-[color:var(--cue-style-group-label-ink,var(--cue-fg-subtle))]";
+const GROUP_LABEL_INK_SUBTLE = "text-[color:var(--cue-style-group-label-ink,var(--cue-fg-muted))]";
 //#endregion
 export { GROUP_LABEL_INK, GROUP_LABEL_INK_SUBTLE, GROUP_LABEL_SIZE, GROUP_LABEL_SIZE_MICRO };

package/dist/system/_style-hero-title.js

@@ -0,0 +1,41 @@
+//#region src/system/_style-hero-title.ts
+/**
+* The `Hero` title's voice: the style set's **display** rung, falling back to
+* the page title's voice (`_style-page-title.ts`) name by name, and through it
+* to the class the page title replaced.
+*
+* Spec 2026-10-02-structural-looks §16 (revision 8). A hero is a page's display
+* line, and the sources say so: Tender's opens at 48px where its page titles
+* are 32px, Porcelain's at 48px against 36px, Zine's at 96px. The display rung
+* is where every measured set already records that size, so the hero reads it
+* first. `style-hero-title-size` sits in front of the size for the one source
+* whose hero is larger than its display rung: Graphite's is 56px, and its
+* display rung is its 46px section heading.
+*
+* | property                | reads, outermost first |
+* |-------------------------|------------------------|
+* | font-family             | `style-display-face` → `style-page-title-face` → `var(--cue-font-mono)` |
+* | font-size               | `style-hero-title-size` → `style-display` → `style-page-title-size` → `var(--cue-text-title)` |
+* | font-weight             | `style-display-weight` → `style-page-title-weight` → `500` |
+* | letter-spacing          | `style-tracking-display` → `style-page-title-tracking` → `normal` |
+* | line-height             | `style-leading-display` → `style-page-title-leading` → `inherit` |
+* | font-variation-settings | `style-display-variation` → `normal` |
+* | color                   | `style-heading-ink` → `var(--cue-fg)` |
+* | text-transform          | `style-display-case` → `none` |
+*
+* **Who moves.** A set that declares none of the display names draws its hero
+* exactly as before, because each chain ends in the page title's reader. The
+* four structural sets of phase 3 declare both rungs equal. `editorial` and
+* `marketing` declare a display size and no page-title size, so their heroes
+* grow to it (22 → 52px and 22 → 64px at scale 1); that is what a display rung
+* is for. `tests/browser/hero-voice.spec.ts` pins every set.
+*
+* **Its own module**, for the reason `_style-page-title.ts` gives: `@repo/docgen`
+* attributes a token to a component by the file its class string lives in, and
+* the display names belong to the hero.
+*
+* @internal Not part of the public API.
+*/
+const HERO_TITLE_VOICE = "font-[family-name:var(--cue-style-display-face,var(--cue-style-page-title-face,var(--cue-font-mono)))] text-[length:var(--cue-style-hero-title-size,var(--cue-style-display,var(--cue-style-page-title-size,var(--cue-text-title))))] font-[number:var(--cue-style-display-weight,var(--cue-style-page-title-weight,500))] tracking-[var(--cue-style-tracking-display,var(--cue-style-page-title-tracking,normal))] leading-[var(--cue-style-leading-display,var(--cue-style-page-title-leading,inherit))] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))] [text-transform:var(--cue-style-display-case,none)] [overflow-wrap:anywhere]";
+//#endregion
+export { HERO_TITLE_VOICE };

package/dist/system/_style-kbd.js

@@ -41,7 +41,7 @@ const KBD_SIZE = "text-[length:var(--cue-style-kbd-size,var(--cue-style-chip-siz
 * where its key caps stay 12px. It falls back through the chip's size, so a
 * Look that names only the chip's keeps its key caps beside it.
 */
-const KBD_BOX = "h-[var(--cue-style-kbd-height,var(--cue-chip-h))] min-w-[var(--cue-style-kbd-height,var(--cue-chip-h))] px-[var(--cue-style-kbd-pad,var(--cue-space-2))] rounded-[var(--cue-style-kbd-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const KBD_BOX = "h-[var(--cue-style-kbd-height,var(--cue-chip-h))] min-w-[var(--cue-style-kbd-height,var(--cue-chip-h))] px-[var(--cue-style-kbd-pad,var(--cue-space-2))] rounded-[var(--cue-style-kbd-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /**
 * A key's leading (round 6, spec §11, lane R6.P: `style-kbd-leading`), falling
 * back to the `leading-none` it drew. coss.com/ui's keys set 12px on a 16px line

package/dist/system/_style-label-ink.js

@@ -12,9 +12,16 @@
 * once, which is why the name exists.
 *
 * **Optional, so each reader keeps its own fallback** (spec §3.0, F-3): under
-* no set, `console` and every set that declines the name this resolves to
-* exactly what `text-fg-muted` or `text-fg-subtle` resolved to, at the label
-* itself — so a nested theme island still repaints it.
+* no set, `console` and every set that declines the name this resolves at the
+* label itself, so a nested theme island still repaints it.
+*
+* **Both fall back to `fg-muted`** (structural Looks, spec 2026-10-02 §4.1).
+* A label names what sits beside it, so it is held to 4.5:1 like body text,
+* and the quieter `fg-subtle` the second reader spent is a hint's ink, not a
+* label's: under Classic it drew stat labels, the logo strip's caption and a
+* sidebar section's label at 2.4:1 in dark and 3.1:1 in light, on the
+* rendered sweep. `LABEL_INK_SUBTLE` keeps its name so the readers that spent
+* `text-fg-subtle` stay findable.
 *
 * **Its own module**, for the reason `_style-control-face.ts` gives: one
 * token per file, so `@repo/docgen` credits exactly the components that read
@@ -23,7 +30,7 @@
 * @internal Not part of the public API.
 */
 const LABEL_INK = "text-[color:var(--cue-style-label-ink,var(--cue-fg-muted))]";
-/** @see LABEL_INK — for a reader that spent `text-fg-subtle` before this existed. */
-const LABEL_INK_SUBTLE = "text-[color:var(--cue-style-label-ink,var(--cue-fg-subtle))]";
+/** @see LABEL_INK — for a reader that spent `text-fg-subtle` before this existed; it falls back to `fg-muted` too. */
+const LABEL_INK_SUBTLE = LABEL_INK;
 //#endregion
 export { LABEL_INK, LABEL_INK_SUBTLE };

package/dist/system/_style-menu.js

@@ -25,7 +25,7 @@ const MENU_ITEM_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted)
 * rows read the same name with a `0px` fallback (`_style-option.ts`), since
 * they drew no corner.
 */
-const MENU_ITEM_RADIUS = "rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const MENU_ITEM_RADIUS = "rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /**
 * A menu popup's minimum width (round 6, spec §11, lane R6.P:
 * `style-menu-min-width`), falling back to the `10rem` it drew. coss.com/ui's

package/dist/system/_style-page-title.js

@@ -43,6 +43,6 @@
 *
 * @internal Not part of the public API.
 */
-const PAGE_TITLE_VOICE = "font-[family-name:var(--cue-style-page-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-page-title-size,var(--cue-text-title))] font-[number:var(--cue-style-page-title-weight,500)] tracking-[var(--cue-style-page-title-tracking,normal)] leading-[var(--cue-style-page-title-leading,inherit)] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))] [overflow-wrap:anywhere]";
+const PAGE_TITLE_VOICE = "font-[family-name:var(--cue-style-page-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-page-title-size,var(--cue-text-title))] font-[number:var(--cue-style-page-title-weight,500)] tracking-[var(--cue-style-page-title-tracking,normal)] leading-[var(--cue-style-page-title-leading,inherit)] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))] [text-transform:var(--cue-style-display-case,none)] [overflow-wrap:anywhere]";
 //#endregion
 export { PAGE_TITLE_VOICE };

package/dist/system/_style-segmented-control.js

@@ -72,7 +72,7 @@ const SEGMENTED_TRACK = "bg-[color:var(--cue-style-segment-track,var(--cue-surfa
 /** The overflow chevrons' ground: the track's colour over an opaque `surface-1`. */
 const SEGMENTED_CHEVRON_GROUND = "bg-surface-1 bg-[image:linear-gradient(var(--cue-style-segment-track,transparent),var(--cue-style-segment-track,transparent))]";
 /** A segment's corners, nested inside the track's inset. */
-const SEGMENT_RADIUS = "rounded-[calc(var(--cue-radius-control)*var(--cue-radius-scale)-var(--cue-style-segment-inset,0px))]";
+const SEGMENT_RADIUS = "rounded-[calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)-var(--cue-style-segment-inset,0px))]";
 /** `SegmentedControl`'s pressed segment. */
 const SEGMENT_PRESSED = "data-[pressed]:bg-[color:var(--cue-style-segment-ground,var(--cue-accent-soft))] data-[pressed]:text-[color:var(--cue-style-segment-ink,var(--cue-accent))] [:where(&[data-pressed])]:font-[number:var(--cue-style-segment-weight,400)] [:where(&[data-pressed])]:shadow-[inset_0_0_0_var(--cue-border-width)_var(--cue-style-segment-edge,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)]";
 /**

package/dist/system/_style-skeleton.js

@@ -10,6 +10,6 @@
 *
 * @internal Not part of the public API.
 */
-const SKELETON_RADIUS = "rounded-[var(--cue-style-skeleton-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const SKELETON_RADIUS = "rounded-[var(--cue-style-skeleton-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 //#endregion
 export { SKELETON_RADIUS };

package/dist/system/_style-tab.js

@@ -60,7 +60,7 @@ const TAB_TRACK = "bg-[color:var(--cue-style-segment-track,transparent)] p-[var(
 * Porcelain's idle tabs are 500 too — falling back to 400. A caller's
 * `font-*` class on a tab replaces it through `tailwind-merge`.
 */
-const TAB_SHAPE = "rounded-t-[calc(var(--cue-style-tab-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)+var(--cue-style-segment-inset,0px)))-var(--cue-style-segment-inset,0px))] rounded-b-[calc(var(--cue-style-tab-radius,var(--cue-style-segment-inset,0px))-var(--cue-style-segment-inset,0px))] font-[number:var(--cue-style-segment-weight,400)]";
+const TAB_SHAPE = "rounded-t-[calc(var(--cue-style-tab-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)+var(--cue-style-segment-inset,0px)))-var(--cue-style-segment-inset,0px))] rounded-b-[calc(var(--cue-style-tab-radius,var(--cue-style-segment-inset,0px))-var(--cue-style-segment-inset,0px))] font-[number:var(--cue-style-segment-weight,400)]";
 /** The list's bottom rule, as a width. */
 const TAB_RULE = "border-b-[length:var(--cue-style-tab-rule,1px)]";
 /** The active tab's underline ink, on its `::after`. */

package/dist/system/font-scope.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { FontName } from "@cueplusplus/theme-base";
+//#region src/system/font-scope.d.ts
+interface FontScopeProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The pairing this subtree is set in. */
+  font: FontName;
+  /** What is set in it. Every overlay opened inside it is set in it too. */
+  children: React.ReactNode;
+}
+/**
+ * A subtree set in another type pairing — and everything it opens with it.
+ *
+ * `ThemeProvider`'s `font` is root-level only: the pairing has no island, and a
+ * nested provider forwards it to the root. `data-font` on a `<div>` is enough
+ * for the subtree's own tokens, and nothing more: a dialog or menu opened inside
+ * it mounts on `<body>`, stamped from the root's pairing, and unclassed text
+ * keeps the family `<body>` computed, because a computed family does not follow
+ * a token. `FontScope` does all three: it stamps `data-font`, asks for the
+ * family again on its own element, and republishes the pairing so every portal
+ * opened inside it is stamped with it and asks for the family too. It is what
+ * `Preview` does for a stage that names a pairing, as a component of its own.
+ *
+ * It never calls `setFont`, so the root's pairing — and the visitor's stored
+ * one — never moves. A gallery frame that draws a page in a Look of its own is
+ * the case it exists for (structural Looks, spec 2026-10-02 §6.2).
+ *
+ * The set and pack in force around it are restated beside `data-font`, once it
+ * may restate, because their names read the pairing and a custom property's
+ * `var()`s are substituted where it is declared.
+ *
+ * @example
+ * <FontScope font="inter-source">
+ *   <Dialog.Root>…</Dialog.Root>
+ * </FontScope>
+ */
+declare const FontScope: React.ForwardRefExoticComponent<FontScopeProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FontScope, FontScopeProps };

package/dist/system/font-scope.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRead } from "./published.js";
+import { DensityContext, PaintContext, StyleSetContext, useFollowedAxes, useRestateReady } from "./density.js";
+import { ThemeContext } from "./theme-provider.js";
+import { StageScope, stageAttributes } from "./_stage-scope.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/system/font-scope.tsx
+/**
+* A subtree set in another type pairing — and everything it opens with it.
+*
+* `ThemeProvider`'s `font` is root-level only: the pairing has no island, and a
+* nested provider forwards it to the root. `data-font` on a `<div>` is enough
+* for the subtree's own tokens, and nothing more: a dialog or menu opened inside
+* it mounts on `<body>`, stamped from the root's pairing, and unclassed text
+* keeps the family `<body>` computed, because a computed family does not follow
+* a token. `FontScope` does all three: it stamps `data-font`, asks for the
+* family again on its own element, and republishes the pairing so every portal
+* opened inside it is stamped with it and asks for the family too. It is what
+* `Preview` does for a stage that names a pairing, as a component of its own.
+*
+* It never calls `setFont`, so the root's pairing — and the visitor's stored
+* one — never moves. A gallery frame that draws a page in a Look of its own is
+* the case it exists for (structural Looks, spec 2026-10-02 §6.2).
+*
+* The set and pack in force around it are restated beside `data-font`, once it
+* may restate, because their names read the pairing and a custom property's
+* `var()`s are substituted where it is declared.
+*
+* @example
+* <FontScope font="inter-source">
+*   <Dialog.Root>…</Dialog.Root>
+* </FontScope>
+*/
+const FontScope = React.forwardRef(function FontScope({ font, className, children, ...elementProps }, ref) {
+	const outer = useRead(ThemeContext);
+	const aroundStyleSet = useRead(StyleSetContext);
+	const aroundPaint = useRead(PaintContext);
+	const aroundDensity = useRead(DensityContext);
+	const restateReady = useRestateReady(aroundStyleSet !== null || aroundPaint !== null);
+	const followed = useFollowedAxes({
+		theme: false,
+		mode: false,
+		density: false
+	});
+	const attributes = stageAttributes({ font }, outer, restateReady ? {
+		styleSet: aroundStyleSet,
+		paint: aroundPaint
+	} : null, aroundDensity, followed);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "font-scope",
+		...elementProps,
+		...attributes,
+		className: cn("font-sans", className),
+		children: /* @__PURE__ */ jsx(StageScope, {
+			theme: void 0,
+			mode: void 0,
+			density: void 0,
+			font,
+			styleSet: void 0,
+			paint: void 0,
+			children
+		})
+	});
+});
+//#endregion
+export { FontScope };

package/dist/system/frame-clock.d.ts

@@ -0,0 +1,33 @@
+//#region src/system/frame-clock.d.ts
+interface FrameClockOptions {
+  /** Frames per second. Defaults to `30`, cueplusplus.com's `VIDEO_FPS`. */
+  fps?: number;
+  /** How many frames the loop holds. */
+  durationInFrames: number;
+  /** Start again at frame 0 after the last. Defaults to `true`; `false` holds the last frame. */
+  loop?: boolean;
+  /**
+   * Whether the clock runs. Defaults to `true`. Pass `false` while the
+   * animation is off screen: a paused clock schedules nothing and, resumed,
+   * continues from the frame it stopped on.
+   */
+  playing?: boolean;
+  /** The frame shown while held still (a thumbnail, or reduced motion). Defaults to the middle of the loop. */
+  stillFrame?: number;
+}
+/**
+ * A frame counter for a loop illustration: what Remotion's `useCurrentFrame`
+ * gave cueplusplus.com's service animations, without Remotion (spec
+ * 2026-10-04-cue-site-verbatim §4.4). Frame maths written against
+ * `useCurrentFrame` ports unchanged.
+ *
+ * Driven by `requestAnimationFrame` against elapsed time, so a slow frame never
+ * slows the animation down. It never advances while paused or still, and held
+ * still it returns `stillFrame` and schedules nothing.
+ *
+ * @example
+ * const frame = useFrameClock({ durationInFrames: 300, playing: onScreen });
+ */
+declare function useFrameClock({ fps, durationInFrames, loop, playing, stillFrame }: FrameClockOptions): number;
+//#endregion
+export { FrameClockOptions, useFrameClock };

package/dist/system/frame-clock.js

@@ -0,0 +1,55 @@
+"use client";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "./still.js";
+import * as React from "react";
+//#region src/system/frame-clock.ts
+/**
+* A frame counter for a loop illustration: what Remotion's `useCurrentFrame`
+* gave cueplusplus.com's service animations, without Remotion (spec
+* 2026-10-04-cue-site-verbatim §4.4). Frame maths written against
+* `useCurrentFrame` ports unchanged.
+*
+* Driven by `requestAnimationFrame` against elapsed time, so a slow frame never
+* slows the animation down. It never advances while paused or still, and held
+* still it returns `stillFrame` and schedules nothing.
+*
+* @example
+* const frame = useFrameClock({ durationInFrames: 300, playing: onScreen });
+*/
+function useFrameClock({ fps = 30, durationInFrames, loop = true, playing = true, stillFrame }) {
+	const held = useStill();
+	const reduced = usePrefersReducedMotion();
+	const still = held || reduced;
+	const seat = stillFrame ?? Math.floor(durationInFrames / 2);
+	const [frame, setFrame] = React.useState(0);
+	const elapsed = React.useRef(0);
+	React.useEffect(() => {
+		if (still || !playing || durationInFrames <= 0) return;
+		let last = performance.now();
+		let handle = requestAnimationFrame(function step() {
+			const now = performance.now();
+			elapsed.current += now - last;
+			last = now;
+			const total = Math.floor(elapsed.current * fps / 1e3);
+			setFrame(loop ? total % durationInFrames : Math.min(total, durationInFrames - 1));
+			handle = requestAnimationFrame(step);
+		});
+		const onVisibility = () => {
+			if (!document.hidden) last = performance.now();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			cancelAnimationFrame(handle);
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, [
+		still,
+		playing,
+		fps,
+		durationInFrames,
+		loop
+	]);
+	return still ? seat : frame;
+}
+//#endregion
+export { useFrameClock };

package/dist/system/index.d.ts

@@ -7,6 +7,9 @@ import { ThemeRegistry } from "./vocabulary.js";
 import { useDensities, useFonts, useThemes } from "./theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./use-density.js";
 import { useTheme } from "./use-theme.js";
+import { StillProvider, StillProviderProps, useStill } from "./still.js";
+import { FrameClockOptions, useFrameClock } from "./frame-clock.js";
+import { FontScope, FontScopeProps } from "./font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, Paint, STYLE_SETS, StyleSet } from "@cueplusplus/tokens";
 import { Density as DensityLevel, DensityEntry, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
-export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, type DensityEntry, type DensityLevel, type DensityProps, type FontEntry, type FontFamilies, type FontName, type Mode, PAINTS, type Paint, type PersistedPreferences, type PrepaintDefaults, type PrepaintOptions, type ResolvedMode, STYLE_SETS, type StyleSet, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, type TokenOverrides, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };
+export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, type DensityEntry, type DensityLevel, type DensityProps, type FontEntry, type FontFamilies, type FontName, FontScope, type FontScopeProps, type FrameClockOptions, type Mode, PAINTS, type Paint, type PersistedPreferences, type PrepaintDefaults, type PrepaintOptions, type ResolvedMode, STYLE_SETS, StillProvider, type StillProviderProps, type StyleSet, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, type TokenOverrides, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useStill, useTheme, useThemes };

package/dist/system/index.js

@@ -1,3 +1,4 @@
+import { StillProvider, useStill } from "./still.js";
 import { Density } from "./density.js";
 import { isSafeTokenValue } from "./overrides.js";
 import { DEFAULT_STORAGE_KEY, prepaintScript } from "./prepaint.js";
@@ -6,5 +7,7 @@ import { ThemeProvider } from "./theme-provider.js";
 import { CuePortalFrame, useCuePortalProps } from "./portal.js";
 import { useControlHeight, useDensity } from "./use-density.js";
 import { useTheme } from "./use-theme.js";
+import { useFrameClock } from "./frame-clock.js";
+import { FontScope } from "./font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, STYLE_SETS } from "@cueplusplus/tokens";
-export { CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, PAINTS, STYLE_SETS, ThemeProvider, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useTheme, useThemes };
+export { CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, Density, FontScope, PAINTS, STYLE_SETS, StillProvider, ThemeProvider, isSafeTokenValue, prepaintScript, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useStill, useTheme, useThemes };