@cueplusplus/ui 0.18.1 → 0.19.0

package/dist/system/_style-body-weight.js

@@ -15,7 +15,7 @@
 *
 * **Optional** (spec §3.0): declared on no `:root` and left at the shared
 * `[data-style]` reset by every shipped set. `_style-page-title.ts` says why a
-* weight reader is `font-[number:…]`.
+* weight reader is `font-[number: …]`.
 *
 * @internal Not part of the public API.
 */

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-control.js

@@ -15,11 +15,11 @@
 * no set and under every set that declines a name the reader is a no-op:
 *
 * - `CONTROL_WEIGHT` is `font-medium`'s 500. It is spelt
-*   `font-[number:…]`: a bare `font-[…]` is read as a family, and the
+*   `font-[number: …]`: a bare `font-[ … ]` is read as a family, and the
 *   `number` label makes it a weight to Tailwind (which emits exactly what
 *   `font-medium` emitted, `--tw-font-weight` included) and to `twMerge`, so a
 *   caller's `className="font-semibold"` still replaces it. Spelt as an
-*   arbitrary `[font-weight:…]` property instead, it would survive the merge
+*   arbitrary `[font-weight: …]` property instead, it would survive the merge
 *   and win the cascade: Tailwind emits it after `font-semibold`.
 * - `CONTROL_TRACKING`, `CONTROL_TRIM` and `CONTROL_CASE` fall back to
 *   `normal`, `normal` and `none`, the spec's fallbacks: the chassis set none

package/dist/system/_style-eyebrow.js

@@ -19,7 +19,7 @@
 * - size: `var(--cue-style-label-size, var(--cue-text-label))`, the label size's chain;
 * - ink: `var(--cue-accent)`, what `text-accent` compiled to;
 * - weight: `inherit` — the eyebrow declared none (see `_style-label-weight.ts`
-*   on why a literal `400` would not be a no-op, and on the `font-[number:…]`
+*   on why a literal `400` would not be a no-op, and on the `font-[number: …]`
 *   spelling);
 * - glyph: `inline`, the slashes' own display. A flex item is blockified either
 *   way, so under no set it computes what it computed before; `none` removes it.

package/dist/system/_style-footer-rule.js

@@ -16,13 +16,13 @@
 * **The line style fills Tailwind's own slot** (`style-footer-rule-style`,
 * round 5 of plan V.2: `tender` dashes both rules, T120 and T121). Both of
 * the footer's rules are written by width utilities — the band rule by
-* `border-t-[length:…]` above, the fine print's by `border-t` — and each
+* `border-t-[length: …]` above, the fine print's by `border-t` — and each
 * writes `border-top-style: var(--tw-border-style)`, a slot Tailwind
 * registers as `@property` with `inherits: false` and `initial-value: solid`,
 * which is the solid rule the footer always drew. So `Footer` spends
 * {@link FOOTER_RULE_STYLE} on both elements, as `_style-app-bar.ts` fills the
 * same slot for the bar's rule: one declaration each, rather than a raw
-* `[border-top-style:…]` that Tailwind would emit after `border-dotted` and
+* `[border-top-style: …]` that Tailwind would emit after `border-dotted` and
 * that would beat a caller's own style class. Through the slot, a caller's
 * `className="border-dotted"` still wins on the landmark, because a style
 * utility writes `border-style` itself and is emitted after the width

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-case.js

@@ -19,10 +19,10 @@
 * every shipped set but a sans-voiced one restates `uppercase`, which
 * `@cueplusplus/tokens` refuses to build otherwise for `console`.
 *
-* Written as a bare arbitrary property (`[text-transform:…]`) rather than a
+* Written as a bare arbitrary property (`[text-transform: …]`) rather than a
 * named Tailwind utility because none of Tailwind's `uppercase` / `lowercase`
 * / `capitalize` / `normal-case` utilities take a dynamic value — the same
-* reason `_paint-*` readers reach for `[mask-image:…]` and `[background-*:…]`
+* reason `_paint-*` readers reach for `[mask-image: …]` and `[background-*: …]`
 * instead of a utility that does not exist for a `var()`-driven keyword.
 *
 * **Its own module**, for the reason `_style-control-face.ts` gives: one

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-label-weight.js

@@ -17,11 +17,11 @@
 * inherits from a heavier parent today, which a fallback may not do (the R
 * lanes' rule: the fallback is the site's current value).
 *
-* **Written `font-[number:…]`, not as a bare `[font-weight:…]` property.** The
+* **Written `font-[number: …]`, not as a bare `[font-weight: …]` property.** The
 * `number:` hint is what makes Tailwind emit `font-weight` (and not a family)
 * for a `var()`, and it is also what `tailwind-merge` reads as a font weight: a
 * caller's `className="font-medium"` replaces this class, as it replaced
-* `font-normal`. A bare `[font-weight:…]` would not merge, and Tailwind sorts
+* `font-normal`. A bare `[font-weight: …]` would not merge, and Tailwind sorts
 * it AFTER every named `font-*` utility (measured: a named weight declares
 * `--tw-font-weight` too, and a rule with more declarations sorts first), so
 * the caller's weight would silently lose — against every `className` prop's

package/dist/system/_style-link.js

@@ -35,7 +35,7 @@ const LINK_RULE = "decoration-[color:var(--cue-style-link-rule,var(--cue-border)
 const LINK_OFFSET = "underline-offset-[var(--cue-style-link-offset,4px)]";
 /**
 * Every link's weight: its parent's, or the set's `style-link-weight`.
-* `font-[number:…]` rather than an arbitrary `[font-weight:…]`, so a caller's
+* `font-[number: …]` rather than an arbitrary `[font-weight: …]`, so a caller's
 * `font-*` weight still replaces it through `twMerge` — `_style-control.ts`'s
 * `CONTROL_WEIGHT` says why.
 */

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-nav-voice.js

@@ -19,11 +19,11 @@
 * weight were inherited, and computed `none`, `normal` and `400` at both
 * readers under every shipped set — spec §3.8's three fallbacks.
 *
-* **Weight is written `font-[number:…]`.** A bare `font-[var(…)]` is read as a
+* **Weight is written `font-[number: …]`.** A bare `font-[ var(…) ]` is read as a
 * family (plan §R1), and the `number` label makes it a weight to Tailwind —
 * which emits exactly what `font-medium` emits, `--tw-font-weight` included —
 * and to `tailwind-merge`, so a caller's `className="font-medium"` replaces it
-* through `cn()`. Spelt as an arbitrary `[font-weight:…]` property it survived
+* through `cn()`. Spelt as an arbitrary `[font-weight: …]` property it survived
 * the merge beside the caller's class and won the cascade, because Tailwind
 * emits it after `font-medium`: `<AppBar.Link className="font-medium">` drew
 * 400. Case is an arbitrary property for the reason `_style-label-case.ts`

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

@@ -27,9 +27,9 @@
 * the h1 itself — the value the old class computed there, under every set and in
 * every density island.
 *
-* **Weight is `font-[number:…]`**, the typed form: a bare `font-[var(…)]` is
+* **Weight is `font-[number: …]`**, the typed form: a bare `font-[ var(…) ]` is
 * read as a family by `tailwind-merge`, and the arbitrary property
-* `[font-weight:…]` is in no `tailwind-merge` group at all, so a caller's
+* `[font-weight: …]` is in no `tailwind-merge` group at all, so a caller's
 * `font-bold` would no longer replace it — and it sorts after `font-bold` in the
 * built stylesheet, so it would win. `number:` keeps both Tailwind and
 * `tailwind-merge` reading a weight.
@@ -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

@@ -35,7 +35,7 @@
 *   glaze;
 * - the corners: `rounded-control`'s own value (below).
 *
-* **The edge and the rest shade are one `shadow-[…]` list**, and it is written
+* **The edge and the rest shade are one `shadow-[ … ]` list**, and it is written
 * out in full rather than built from `REST_SHADE`: Tailwind finds a class by
 * scanning source text, so a class assembled at runtime is a class it never
 * generates (`_focus-ring.ts` records the failure). `test/system/style-navigation.test.tsx`
@@ -51,7 +51,7 @@
 * the others. A `data-[pressed]:` utility is `(0,2,0)` and would beat such a
 * class on the pressed segment alone, so these are written
 * `[:where(&[data-pressed])]:` — the same state at zero specificity — and a
-* caller's class wins in every state again. The weight is `font-[number:…]`
+* caller's class wins in every state again. The weight is `font-[number: …]`
 * for `_style-nav-voice.ts`'s reason.
 *
 * **The segment's radius nests in the track's inset**:
@@ -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/_style-title.js

@@ -28,7 +28,7 @@
 * not the size, the tracking or the leading, so it is `_style-overlay-title.ts`
 * and not an import of this: docgen would publish every name in this file as a
 * token of every overlay. `_style-page-title.ts` says why the weight is
-* `font-[number:…]` and why the size comes before the leading.
+* `font-[number: …]` and why the size comes before the leading.
 *
 * @internal Not part of the public API.
 */

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/index.d.ts

@@ -7,6 +7,8 @@ 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 { 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 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, 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,6 @@ 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 { 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, useStill, useTheme, useThemes };

package/dist/system/portal.js

@@ -4,6 +4,7 @@ import { AgentSkinContext } from "./agent-skin.js";
 import { useRead } from "./published.js";
 import { DensityContext, PaintContext, StyleSetContext } from "./density.js";
 import { OverridesContext } from "./overrides.js";
+import { ScopedPairingContext } from "./_scoped-pairing.js";
 import { FontFamiliesContext, FontScaleContext, PairingSeedContext, ThemeContext } from "./theme-provider.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -33,6 +34,7 @@ function usePortalStamp() {
 	const skin = React.useContext(AgentSkinContext);
 	const styleSet = useRead(StyleSetContext);
 	const paint = useRead(PaintContext);
+	const scopedPairing = React.useContext(ScopedPairingContext);
 	return {
 		theme: theme?.theme ?? DEFAULT_THEME,
 		density: island ?? theme?.density ?? "compact",
@@ -44,7 +46,8 @@ function usePortalStamp() {
 		skin: skin?.skin ?? null,
 		fidelity: skin?.fidelity ?? null,
 		styleSet,
-		paint
+		paint,
+		scopedPairing
 	};
 }
 /**
@@ -155,6 +158,8 @@ function applyStamp(element, stamp) {
 	else element.setAttribute("data-cue-fidelity", stamp.fidelity);
 	const overrides = stamp.overrides ?? {};
 	for (const property of stampedOverrides.get(element) ?? []) if (!(property in overrides)) element.style.removeProperty(property);
+	if (stamp.scopedPairing) element.style.setProperty("font-family", "var(--cue-font-sans)");
+	else element.style.removeProperty("font-family");
 	if (stamp.fontScale === null) element.style.removeProperty(FONT_SCALE_PROPERTY);
 	else element.style.setProperty(FONT_SCALE_PROPERTY, String(stamp.fontScale));
 	setOptionalProperty(element, FONT_SANS_PROPERTY, stamp.fontFamilies?.sans);
@@ -186,6 +191,7 @@ function CuePortalFrame({ children, className, style }) {
 	const stamp = usePortalStamp();
 	const frameStyle = {
 		display: "contents",
+		...stamp.scopedPairing ? { fontFamily: "var(--cue-font-sans)" } : null,
 		...stamp.fontScale === null ? null : { [FONT_SCALE_PROPERTY]: stamp.fontScale },
 		...stamp.fontFamilies?.sans === void 0 ? null : { [FONT_SANS_PROPERTY]: stamp.fontFamilies.sans },
 		...stamp.fontFamilies?.mono === void 0 ? null : { [FONT_MONO_PROPERTY]: stamp.fontFamilies.mono },

package/dist/system/still.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/system/still.d.ts
+interface StillProviderProps {
+  /** `true` holds everything under it still. Nested providers can only add stillness, never remove it. */
+  still: boolean;
+  /** What it holds still. Optional, as `ThemeProvider`'s is: an empty provider renders nothing. */
+  children?: React.ReactNode;
+}
+/**
+ * Hold a subtree still (see {@link useStill}). A gallery frame mounts one with
+ * `still` when it is a thumbnail.
+ *
+ * @example
+ * <StillProvider still><Page /></StillProvider>
+ */
+declare function StillProvider({ still, children }: StillProviderProps): React.JSX.Element;
+/**
+ * `true` under a still {@link StillProvider}, or while the reader prefers reduced
+ * motion. Live: it changes when the preference does. `false` on the server, where
+ * nothing animates anyway.
+ *
+ * @example
+ * const still = useStill();
+ * React.useEffect(() => {
+ *   if (still) return;
+ *   const frame = requestAnimationFrame(step);
+ *   return () => cancelAnimationFrame(frame);
+ * }, [still]);
+ */
+declare function useStill(): boolean;
+//#endregion
+export { StillProvider, StillProviderProps, useStill };

package/dist/system/still.js

@@ -0,0 +1,47 @@
+"use client";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/system/still.tsx
+/**
+* Whether this subtree must hold still: no motif animates, no replay plays, no
+* live readout loops. A gallery thumbnail is the case it exists for (spec
+* 2026-10-02 §6.2) — a scrolled gallery of twenty live pages must cost nothing at
+* rest — and a reader's `prefers-reduced-motion` is folded in, so a consumer asks
+* one question.
+*/
+const StillContext = React.createContext(false);
+/**
+* Hold a subtree still (see {@link useStill}). A gallery frame mounts one with
+* `still` when it is a thumbnail.
+*
+* @example
+* <StillProvider still><Page /></StillProvider>
+*/
+function StillProvider({ still, children }) {
+	const outer = React.useContext(StillContext);
+	return /* @__PURE__ */ jsx(StillContext.Provider, {
+		value: outer || still,
+		children
+	});
+}
+/**
+* `true` under a still {@link StillProvider}, or while the reader prefers reduced
+* motion. Live: it changes when the preference does. `false` on the server, where
+* nothing animates anyway.
+*
+* @example
+* const still = useStill();
+* React.useEffect(() => {
+*   if (still) return;
+*   const frame = requestAnimationFrame(step);
+*   return () => cancelAnimationFrame(frame);
+* }, [still]);
+*/
+function useStill() {
+	const still = React.useContext(StillContext);
+	const reduced = usePrefersReducedMotion();
+	return still || reduced;
+}
+//#endregion
+export { StillProvider, useStill };

package/dist/system/theme-provider.js

@@ -5,6 +5,7 @@ import { published, usePublish, useRead } from "./published.js";
 import { AmbientThemeContext, DeferRestateContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes, useFollowedAxes, useMountedWhen, useRestateReady } from "./density.js";
 import { buildRegistry, isPaint, isStyleSet, vocabulary, warnOnce } from "./vocabulary.js";
 import { OverridesContext, followerColorsCss, inlineOverrides, overridesCss, reportOverrides } from "./overrides.js";
+import { localStore } from "./_storage.js";
 import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
 import { ThemeRegistryContext } from "./theme-registry.js";
 import * as React from "react";
@@ -99,9 +100,10 @@ function isOneOf(allowed, value) {
 	return typeof value === "string" && allowed.includes(value);
 }
 function readPreferences(storageKey) {
-	if (typeof localStorage === "undefined") return {};
+	const store = localStore();
+	if (store === null) return {};
 	try {
-		const raw = localStorage.getItem(storageKey);
+		const raw = store.getItem(storageKey);
 		if (raw === null) return {};
 		const parsed = JSON.parse(raw);
 		if (parsed === null || typeof parsed !== "object") return {};
@@ -157,7 +159,8 @@ function acceptedPreferences(vocab, stored, fallback) {
 	};
 }
 function writePreferences(storageKey, preferences) {
-	if (typeof localStorage === "undefined") return;
+	const store = localStore();
+	if (store === null) return;
 	const { styleSet, paint, ...axes } = preferences;
 	const withStyle = styleSet === null ? axes : {
 		...axes,
@@ -168,7 +171,7 @@ function writePreferences(storageKey, preferences) {
 		paint
 	};
 	try {
-		localStorage.setItem(storageKey, JSON.stringify(payload));
+		store.setItem(storageKey, JSON.stringify(payload));
 	} catch {}
 }
 /**