@mkbabb/glass-ui 3.13.0 → 4.0.1

package/src/styles/tokens/scheme-motion.css

@@ -51,9 +51,19 @@
     --type-leading-body: 1.5;
     --type-leading-prose: 1.618;
     --type-leading-heading: 1.2;
-    --type-leading-display: 1.1;
+    /* BB.W-DISPLAY-TRACKING — the display leading is tightened to the Apple
+       84/80 ≈ 1.05 signature (was 1.1). The DISPLAY ladder ONLY reads this rung;
+       --type-leading-heading (1.2) carries the heading/title register. */
+    --type-leading-display: 1.05;
 
     --type-tracking-tight: -0.025em;
+    /* BB.W-DISPLAY-TRACKING — the DISPLAY-ONLY proportional negative tracking
+       rung (the Apple −1.5%-of-size signature: 80px → −1.2px = −0.015em). It is
+       em-relative, so the single value is a constant −1.5% across the whole
+       clamp() ladder (φ² → φ^(11/2)). MINTED as its OWN rung so the display
+       calibration NEVER bleeds into the shared --type-tracking-tight (the
+       heading/title/configurator register's tracking, kept at -0.025em). */
+    --type-tracking-display: -0.015em;
     --type-tracking-snug: -0.01em;
     --type-tracking-normal: 0;
     --type-tracking-wide: 0.025em;
@@ -72,18 +82,24 @@
     --duration-xxl: 1.5s;
     --duration-shimmer-fast: 3s;
     --duration-shimmer: 5s;
-    /* Sparkle micro-event — primary-CTA disco-grain sparkle sweep, success
-       affirmations. R5 vocab.γ gap row 3 (single-site at dock.css:735 today,
-       reserved for J.W2.7 §17 audacious-CTA buildout). */
-    --duration-sparkle: 600ms;
+    /* BB.W-METAL-SHIMMER — the brand-metal family's OWN slow dignified one-pass
+       clock (slower than the 5s generic shimmer). The metal sweep (gold·silver·
+       bronze, text-clip + border/mask) reads as a calm slow patina catch, not a
+       fast band-pass — the §6 calm register. (`--duration-seal` was never landed;
+       this is net-new, NOT a retirement re-point.) */
+    --duration-metal: 6s;
+    /* BA.W-GLASS-CAL (H2a) — `--duration-sparkle` (600ms) DELETED with the disco
+       recipe retirement: the sparkle-sweep keyframe + its sole `btn-audacious`
+       consumer are gone. */
 
     /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
 
-       Six duration tokens + three delay tokens promoted from raw literals
-       at speedtest's celebratory-reveal SFCs (SpeedtestResults, ThankYou,
-       ResultStack, CompleteBadge). Unified under the `--motion-*`
-       namespace (parallel to `--motion-ease-*`) so all motion tokens
-       cluster at one canon — duration + easing arm together. */
+       Duration + delay tokens promoted from raw literals at speedtest's
+       celebratory-reveal SFCs (SpeedtestResults, ThankYou, ResultStack).
+       Unified under the `--motion-*` namespace (parallel to `--motion-ease-*`)
+       so all motion tokens cluster at one canon — duration + easing arm
+       together. (BB.W-DEAD-SWEEP retired the never-shipped CompleteBadge
+       staged-reveal cluster — no consumer existed.) */
 
     /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
        in the celebratory headline + result-row reveals. Partners with
@@ -100,17 +116,6 @@
        glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
        an imperceptible blow-through. */
 
-    /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
-       fires at three asymmetric durations + delays per the A4-AF staged-
-       variety design intent. Promoting the magic numbers makes the
-       staged-variety visible at the canon. */
-    --motion-duration-badge-disc: 420ms;
-    --motion-duration-badge-ring: 560ms;
-    --motion-duration-badge-check: 380ms;
-    --motion-delay-badge-disc: 80ms;
-    --motion-delay-badge-ring: 220ms;
-    --motion-delay-badge-check: 460ms;
-
     /* Staggered-reveal increment canon — three perceptually-distinct tiers for
        per-row/per-cell/per-bar cascades:
          • tight (40ms) — dense row cascades, sub-perceptual gap
@@ -154,21 +159,53 @@
        ── EASING DOCTRINE (AX.W52 §6 — which easing fits which job) ──
        ONE recorded rule so the animation easing stops forking live. This
        FORMALIZES the already-correct `transitions.css` idiom (enter=spring,
-       exit=bezier) as the house rule every recipe reaches for:
-
-         | Transition kind                                  | Easing                              |
-         |--------------------------------------------------|-------------------------------------|
-         | Surface props (bg, border, color, box-shadow,    | `--ease-standard` (bezier — a       |
-         |   opacity)                                       |   colour cross-fade reads as a      |
-         |                                                  |   wobble on a spring)               |
-         | Transform — hover/press/active (scale, translate,| `--spring-smooth` (the ONE button/  |
-         |   rotate)                                         |   interactive scale register) or    |
-         |                                                  |   `--spring-snappy` (crisp press)   |
-         | Enter (mount, popover open, dialog in)           | `--spring-bouncy` / `--spring-snappy`|
-         | Exit (unmount, close)                            | `--ease-out` / `--ease-standard`    |
-         |                                                  |   (bezier, NO overshoot — an exit   |
-         |                                                  |   must never overshoot past gone)   |
-         | Position-tracked (specular pointer follow)       | `--ease-standard`                   |
+       exit=bezier) as the house rule every recipe reaches for.
+
+       BB.W-MOTION-CANON — the table embodies ONE principle (Material 3's
+       spatial-vs-effects split, codified in `docs/precepts/motion-canon.md`
+       as P1): a SPATIAL channel (the box MOVES/RESHAPES — position, SIZE,
+       rotation, corners) rides a `--spring-<name>` (overshoot = physicality);
+       an EFFECTS channel (the surface RE-TINTS — color, opacity, box-shadow)
+       rides a bezier `--ease-*` (a colour cross-fade reads as a wobble on a
+       spring). Each row below is tagged [SPATIAL] (spring) or [EFFECTS]
+       (bezier) so the rule is legible, not implicit. The canon doc is the
+       canonical home; this table is the SOURCE it re-states:
+
+         | Transition kind                                  | Tier      | Easing                   |
+         |--------------------------------------------------|-----------|--------------------------|
+         | Surface props (bg, border, color, box-shadow,    | [EFFECTS] | `--ease-standard` (bezier|
+         |   opacity)                                       |           |   — a colour cross-fade  |
+         |                                                  |           |   reads as a wobble on a |
+         |                                                  |           |   spring)                |
+         | Transform — hover/press/active (scale, translate,| [SPATIAL] | `--spring-smooth` (the   |
+         |   rotate)                                         |           |   ONE button/interactive |
+         |                                                  |           |   scale register) or     |
+         |                                                  |           |   `--spring-snappy`      |
+         | Size / morph (dock V↔H, indicator size-          | [SPATIAL] | `--spring-dock` /        |
+         |   correction, reveal source-rect bloom)          |           |   `--spring-snappy`,     |
+         |                                                  |           |   expressed as a         |
+         |                                                  |           |   COMPOSITOR transform   |
+         |                                                  |           |   (P5) — NEVER an        |
+         |                                                  |           |   animated width/height  |
+         | Enter (mount, popover open, dialog in, reveal)   | [SPATIAL] | `--spring-bouncy` /      |
+         |                                                  |           |   `--spring-snappy`      |
+         | Bold decelerating arrival (the SOTA arrival —    | [SPATIAL] | `--ease-out-expo`        |
+         |   reveal draw-on, big-distance settle)           |           |   (cubic-bezier(.16,1,   |
+         |                                                  |           |   .3,1); the house expo) |
+         | Exit (unmount, close)                            | [EFFECTS] | `--ease-out` /           |
+         |                                                  |           |   `--ease-standard`      |
+         |                                                  |           |   (bezier, NO overshoot —|
+         |                                                  |           |   an exit must never     |
+         |                                                  |           |   overshoot past gone)   |
+         | Position-tracked (specular pointer follow)       | [EFFECTS] | `--ease-standard`        |
+
+       The SOTA arrival ease is the EXISTING `--ease-out-expo` (alias →
+       `--motion-ease-out-expo` = `cubic-bezier(0.16, 1, 0.3, 1)`, the house
+       expo with the value.js `easeOutExpo` JS twin in the MOTION_CURVES table)
+       — NOT a net-new token. The motion canon NAMES it as the arrival register;
+       it is not re-minted (a duplicate alias would fail proof:animation-
+       coherence's EASING-TABLE-BOUND arm — the curve already has its canonical
+       + alias row in `curves.ts`).
 
        The BUTTON family (`.btn-pill` / `.tap-squish` / `.glass-btn` /
        `btn-interactive`) UNIFIES its `scale` transform leg onto ONE register —
@@ -186,6 +223,28 @@
     --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
     --spring-dock: linear(0, 0.10282 2.041%, 0.31773 4.082%, 0.54783 6.122%, 0.74309 8.163%, 0.88550 10.204%, 0.97598 12.245%, 1.02452 14.286%, 1.04368 16.327%, 1.04501 18.367%, 1.03739 20.408%, 1.02681 22.449%, 1.01672 24.490%, 1.00873 26.531%, 1.00323 28.571%, 0.99996 30.612%, 0.99837 32.653%, 0.99789 34.694%, 0.99805 36.735%, 0.99848 38.776%, 0.99897 40.816%, 0.99940 42.857%, 0.99972 44.898%, 0.99993 46.939%, 1.00004 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
 
+    /* ── PER-SPRING DURATION CLOCK (BA.W-GLASS-CAL Unit 3) ──
+       Generated from `scripts/regen-spring-tokens.mjs` — DO NOT hand-edit.
+       Each `--spring-<name>-duration` is the spring's OWN 2%-band envelope-settle
+       time `t_s = -ln(0.02) / (ζ·ωₙ)` (ωₙ = 2π/response), derived from the SAME
+       (response, ζ) PRESETS table the `--spring-*` `linear()` curves above
+       derive from — never a hand value.
+
+       WHY: the `--spring-<name>` curve is NORMALIZED to 0..1 and discards the
+       spring's settle time. Pairing it with a generic `--duration-*` clock
+       (0.2/0.3/0.45s) re-timed EVERY spring to the same wall clock — snappy
+       (response 0.35s) and smooth (0.5s) both ran 300ms, so the crisp snappy
+       register dragged a dead sub-pixel tail (the R10-2 read: within-1px at
+       ~109ms but the transition ran 300ms). These clocks re-time UNDER each
+       register to its own settle WITHOUT touching the §6 register canon (which
+       spring fits which job): a `transition` pairs `--spring-<name>` with the
+       matching `--spring-<name>-duration`. */
+    --spring-smooth-duration: 0.36s;
+    --spring-snappy-duration: 0.34s;
+    --spring-bouncy-duration: 0.69s;
+    --spring-gentle-duration: 0.44s;
+    --spring-dock-duration: 0.28s;
+
     /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
     --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
     --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -269,15 +328,13 @@
     /* ═══════════════════════════════════════════════
        §2.C ANIMATION EXPRESSIVENESS
 
-       Three idiom families:
+       Two idiom families (the audacious press-ripple RETIRED at BA.W-GLASS-CAL):
        • Progress lifecycle — the progress bar rides an intake pulse on
          rising-edge, a crescendo brightening at ≥85%, and a one-shot discharge
          flash at 100% (the crescendo is the typed `@property --progress-crescendo`).
        • Chassis phase-tint companion — `@property --phase-tint-amount` so the
          chassis backdrop warms toward the active phase, interpolating with
          `--phase-color` across the consumer's phase-handoff window (600ms default).
-       • Audacious button press-ripple — `btn-audacious` gains a typed
-         `@property --ripple-radius` ramping 0 → max over the ripple duration.
        ═══════════════════════════════════════════════ */
 
     /* Progress lifecycle — typed crescendo + segment-local durations */
@@ -291,13 +348,12 @@
        overwhelming the chassis chrome's resting register. */
     --phase-tint-peak: 6%;
 
-    /* Audacious button press-ripple — geometry + duration. The ripple
-       radius caps at 12rem so an oversized button doesn't paint a
-       transparent halo beyond its bounds (the parent's `overflow:
-       hidden` clips the visible region; the cap keeps the gradient
-       falloff well-defined). */
-    --ripple-radius-max: 12rem;
-    --motion-duration-ripple: 340ms;
+    /* BA.W-GLASS-CAL (H2a) — the `btn-audacious` press-ripple knobs
+       (`--ripple-radius-max` 12rem, `--motion-duration-ripple` 340ms) DELETED
+       with the disco recipe retirement: the ripple was btn-audacious-private and
+       has no surviving consumer (the calm CTA register's press is the §6
+       `--scale-press-btn` scale beat). The `@property --ripple-radius`
+       registration retires with it (property-regs.css). */
 
     /* Skeleton breath variant — the M.3 "known-imminent" loading
        register. 6s cycle (the canon ambient rate) so a known-imminent

package/src/styles/tokens/scroll-tokens.css

@@ -0,0 +1,123 @@
+/* tokens/scroll-tokens.css
+   §20 PLATFORM MOTION (AQ.W5) — the native-platform motion substrate knobs.
+   Carved WHOLE from tokens/scale-paper.css at BB.W-CARVE4 to hold the no-god-module
+   bound (the paper/control/display/metal/timeline/metric/table families §11–§19 stay
+   in scale-paper.css; §20 is the file's last section, so this is a contiguous tail
+   carve at the §19/§20 seam). @import-ed by tokens.css in cascade order IMMEDIATELY
+   AFTER scale-paper.css — an adjacent same-selector :root{} block carrying the SAME
+   declarations in the SAME relative order, so the dist is byte-isomorphic.
+
+   The motion families, each read by a `@supports`-gated CSS recipe:
+   scroll-driven.css / scroll-choreography.css, animations.css (§TOP-LAYER),
+   view-transition.css — every visual knob a token so a consumer retunes without
+   editing library source. */
+:root {
+    /* SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback composable
+       defaults (`useScrollProgress` / `useStaggerReveal`) so the native CSS path and
+       the fallback path read identically — no visual seam at the `@supports` boundary. */
+    --scroll-progress-scroller: root;
+    --scroll-reveal-rise: 6px;
+    --scroll-reveal-range-end: 60%;
+
+    /* BB.W-SCROLL-MOTION — the scroll-CHOREOGRAPHY register knobs (the page-build /
+       section-cascade / scroll-pinned recipes in scroll-choreography.css). These
+       EXTEND the --scroll-reveal-* substrate above; the existing three are READ-ONLY
+       (the cascade COMPOSES them, it never re-tunes them). All distances are
+       compositor (transform) channels; the clocks are the per-spring settle clocks
+       (scheme-motion.css), threaded, never re-tuned. */
+    /* .scroll-build — the route-enter page-build (the chrome -> hero -> body
+       coordinated entrance). The rise is a touch deeper than the section cascade
+       (the page ASSEMBLES — a more pronounced settle), the step is the per-beat
+       coordinated stagger between the chrome, hero, and first-section beats. */
+    --scroll-build-rise: 1.5rem;
+    --scroll-build-step: 90ms;
+    /* .scroll-cascade — the orchestrated section cascade (the per-child view()
+       timeline, the spring-clocked coupled build). The rise lifts the bare
+       --scroll-reveal-rise 6px to a perceptible SOTA build; the range-end is the
+       reveal window (a touch tighter than the bare reveal so each section lands
+       crisply rather than dragging a long fade tail). The column-stagger delay is
+       the opt-in .scroll-cascade--columns grid-variant knob. */
+    --scroll-cascade-rise: 1.25rem;
+    --scroll-cascade-range-end: 45%;
+    --scroll-cascade-column-stagger: 60ms;
+    /* .scroll-pin — the fixed-stage-advances-time scroll-pinned register. The stage
+       height is the Nvh temporal space the sticky stage advances its phases across;
+       the phase windows are the scroll-progress fractions the stage's internal
+       phases key off (grid-reveal 0..45%, expand 45..90%, settle 90..100% — the
+       Codrops phased-sequence shape). */
+    --scroll-pin-stage-height: 320vh;
+    --scroll-pin-phase-reveal-end: 45%;
+    --scroll-pin-phase-expand-end: 90%;
+    --scroll-pin-lift: 2.5rem;
+
+    /* TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
+       grammar for native `<dialog>` / `[popover]` glass surfaces. The backdrop dim
+       uses the house alpha-derivative `color-mix(in srgb, var(--background) Npct,
+       transparent)` (AZ.W-ADAPTIVE-AUTO A5-1). It is NOT the `hsl(var(--background)
+       / α)` channel form: `--background` is a COMPLETE `hsl()` color
+       (`= hsl(48 12% 98%)`), so `hsl(var(--background) / α)` double-wraps to
+       `hsl(hsl(…) / α)` — invalid, never paints (the modal dim was silently dead).
+       The genuine channel form would require `--background` declared as a bare
+       `H S% L%` triple, which it never is — hence the alpha-derivative mix. */
+    --top-layer-enter-scale: 0.96;
+    --top-layer-backdrop-blur: 8px;
+    --top-layer-backdrop-dim: 0.5;
+
+    /* VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group recipe
+       + the `--vt-*` axes the `useViewTransition` substrate consumers (dock layer
+       swap, muster J's verdict re-rank) tune their swap against. */
+    --vt-duration: var(--duration-normal);
+    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
+       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
+       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
+       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
+       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
+       default + the cards/top-layer transitions share one spring primitive
+       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
+       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
+    --vt-ease: var(--spring-bouncy);
+    --vt-rise: 8px;
+
+    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
+       both engine paths are timing-IDENTICAL: the FLIP fallback (via
+       `--dock-motion-resize`), the native View-Transition group (its
+       `animation-timing-function`), AND the runtime SpringProgress driver
+       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
+       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
+       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
+       other VT recipes (`.gl-list-item`).
+
+       AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
+       mechanical: a stiff plateau at ~48% with too little overshoot to feel
+       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
+       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
+       with a restrained overshoot — the felt iOS dock morph, off the prior
+       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
+       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
+       bit-identical. */
+    --dock-resize-spring: var(--spring-dock);
+
+    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
+       spring (`scale`/`rotate`) the dock controls apply to their hover/press
+       activation so the squish reads with a touch of spring-back rather than a
+       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
+       `[data-held]` fades (background/border/box-shadow), which stay on
+       `--duration-fast var(--ease-standard)`. The duration pairs with
+       `--duration-fast`; consumers retune the whole feel via this one token.
+
+       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
+       transform-press register (tokens.css §2: transform hover/press/active →
+       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
+       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
+       ROOT default was off-doctrine, shadowed for the four named controls by a
+       per-surface re-point in dock-controls.css — the exact per-surface fork the
+       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
+       DELETED; the ROOT token IS the doctrine register, so any other consumer of
+       `--dock-press-spring` inherits the correct smooth register.
+
+       BA.W-GLASS-CAL Unit 3 — the duration leg re-times off the generic
+       `--duration-fast` (0.2s) onto `--spring-smooth-duration` (0.36s, the
+       smooth spring's OWN 2%-band envelope settle), so the press transform plays
+       at its physical settle rather than a generic clock. */
+    --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth);
+}

package/src/styles/tokens/{offsets-sizing.css → sizing.css}

@@ -1,90 +1,16 @@
-/* tokens/offsets-sizing.css
-   §9 animation offsets · §10 sizing (control heights, dropdown, carousel, stack-overlap, touch-target floor).
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
+/* tokens/sizing.css
+   §10 sizing — the --ui-scale doctrine, control-height/font/glyph cohorts,
+   dropdown/carousel/stack-overlap, the dock geometry cascade (--dock-scale +
+   collapsed-pill + rail hairline + active-state ladder + iOS register + touch
+   floor), MetricBadge stacked geometry, the Configurator density + HIERARCHY
+   vocabulary, the single-column stage floor, the section tonal step, the
+   component-font override.
+   Carved (BB.W-CARVE3) from the former tokens/offsets-sizing.css §9/§10 split;
+   @import-ed by tokens.css immediately AFTER offsets.css at offsets-sizing's old
+   cascade slot — adjacent same-selector :root blocks resolve identically, so the
+   dist is byte-isomorphic. See docs/precepts/design-idioms.md
+   §cohesion-aware partials. */
 :root {
-    /* ═══════════════════════════════════════════════
-       §9  ANIMATION OFFSETS
-       ═══════════════════════════════════════════════ */
-    /* Hover lift offsets */
-    --lift-sm: -1px;
-    --lift-md: -2px;
-    --lift-lg: -4px;
-
-    /* Layout tokens */
-    --mask-fade-width: 1rem;
-    /* J.W3.C — dock content overflow caps. When dock content exceeds
-       these dimensions, the inner `.dock-layers` (horizontal) /
-       `.glass-dock.vertical` (rail) container scrolls with a
-       `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
-       than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
-       desktop widths; consumers override per-dock by setting either
-       token directly on a `.glass-dock` instance. User findings 1 + 5a. */
-    /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
-       strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
-       wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
-       `max-inline-size` caps that intrinsic width at this token). The prior
-       `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
-       snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
-       there is no breakpoint threshold to name. */
-    --dock-max-inline-size: min(80vw, 64rem);
-    --dock-max-block-size: min(80vh, 48rem);
-
-    /* AB.W1.T1 — chassis max-block-size guardrail.
-       Maximum block size a centred consumer-app card may consume while
-       preserving the inline dock footprint. The recipe subtracts the
-       consumer-owned `--dock-footer-space` (dock height + dock inset +
-       card-edge inset) and `--page-padding-top` from the dynamic viewport,
-       then takes one further rem of breathing room so the card never
-       butts the dock — the user mandate is `≥ 1rem visible gap above
-       dock`. Both consumer tokens carry safe fallbacks for callers that
-       have not declared them.
-
-       Consumers should shrink internal regions (meter, readout, timeline)
-       before falling back to scroll. This token is a guardrail against
-       chassis overflow, NOT a license to make the card scroll as the
-       default solution; clamp-first / no-scroll-first is the canon.
-       See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
-    --chassis-max-block-size: calc(
-        100dvh
-        - var(--dock-footer-space, 5.75rem)
-        - var(--page-padding-top, 0rem)
-        - 1rem
-    );
-    /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
-       chassis.css's mobile breakpoint reserves the dial's final box from
-       frame 0 via these vars (with the same values as inline fallbacks, the
-       safety net). Token-first home so the vars resolve canonically. */
-    --instrument-dial-min-height-mobile: 24rem;
-    --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
-
-    --max-width-input: 24rem;
-    --input-min-width-sm: 5rem;
-    --min-width-input-sm: var(--input-min-width-sm);
-    /* AU.W8b.4 — canonical popover width (Combobox list + anchor). Lifts the
-       `w-[200px]` arbitrary-value wrap to the `w-popover` @theme utility. */
-    --popover-width: 200px;
-    /* AZ.R5-4 — the ONE panel inner-padding rung (the consumer-verified "the
-       popover/dropdown content reads TIGHT" finding). The floating-panel +
-       DropdownMenuContent recipes read THIS token for their inner pad instead of
-       the prior hand-set `p-1`/literal, so a consumer retunes every teleported
-       menu/panel surface from one override. The comfortable default is `0.375rem`
-       (a half-rung over the prior 0.25rem tight floor — comfortable both modes
-       without over-padding a dense menu list). PopoverContent keeps its own
-       `--panel-padding-roomy` (1rem) for the prose-popover register. */
-    --panel-padding:       0.375rem;
-    --panel-padding-roomy: 1rem;
-    --chart-height-compact: 15rem;
-    --chart-height-default: 22.5rem;
-    --chart-height-large: 25rem;
-    --chart-margin: 1.25rem;
-    --paper-texture-size: 200px 200px;
-
-    /* Border opacity scale */
-    --border-opacity-light:  0.15;
-    --border-opacity-medium: 0.25;
-    --border-opacity-strong: 0.6;
-
     /* ═══════════════════════════════════════════════
        §10 SIZING
        ═══════════════════════════════════════════════ */
@@ -272,8 +198,31 @@
     /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
        icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
        A consumer-passed explicit lucide size class still WINS (utility layer >
-       component layer); this is a DEFAULT, not a ceiling. */
-    --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+       component layer); this is a DEFAULT, not a ceiling.
+
+       BB.W-PERF-PRODUCER A′-6 — the glyph rides the per-DENSITY box, not a flat rem.
+       The value.js D5-1 companion trace: `density="spacious"` grew the shelf + pad +
+       gap but the glyph stayed 1.25rem (it rode `--dock-scale` only, NOT the
+       per-density `--dock-layer-height` axis density.css scales). Now the glyph is a
+       RATIO of `--dock-layer-height` (`--dock-icon-glyph-ratio`, default 0.5 → a
+       2rem control → a 1rem glyph at compact, a 2.5rem control → 1.25rem at
+       comfortable, lockstep up the rungs). The `--dock-scale` coarse thread is
+       PRESERVED transitively — `--dock-layer-height` already rides it (density.css).
+       The WCAG glyph-floor holds via `max(…, --dock-icon-glyph-floor)` (a 16px floor
+       so a sub-1 density/coarse register can never drop the glyph below the legible
+       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-density]`
+       (density.css) — at `:root` it is the inline fallback below, so this `:root`
+       declaration resolves the fallback ladder; density.css RE-RESOLVES `--dock-icon-glyph`
+       inside each `[data-density]` scope so the density-painted height flows in (the
+       substitution-vs-inheritance trap the overflow.css R5-1 sweep documents). The
+       toggle mirror `.dark-mode-toggle-button > svg` reads the SAME `--dock-icon-glyph`
+       so both glyphs move onto the density axis together. */
+    --dock-icon-glyph-ratio: 0.5;
+    --dock-icon-glyph-floor: 1rem;
+    --dock-icon-glyph: max(
+        calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+        var(--dock-icon-glyph-floor)
+    );
 
     /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
        used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
@@ -362,6 +311,18 @@
        Consumers retune the rail-tab size via this one handle. */
     --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
 
+    /* BA.W-DOCK-SECTIONS — the divider-seam rail knobs.
+       `--dock-rail-extend-length` (declared in rail-extend.css) was RE-SEMANTICIZED:
+       it is no longer a one-way connector length but the SYMMETRIC per-side overrun of
+       the seam line (the line's cross-extent = dock extent + 2× the knob, centered on
+       the seam). `--dock-rail-retract-stub` is the residual protrusion FRACTION the
+       chips leave past the dock edge on collapse (the macOS fan-out "retract INTO the
+       rail leaving a slight protrusion"; 0 = fully retracted, 1 = no retract). The
+       `--dock-section-zone-gap` is the inter-control rhythm inside a <DockSection> zone
+       (defaults to the dock's own `--dock-gap`, so the section grouping adds no box). */
+    --dock-rail-retract-stub: 0.35;
+    --dock-section-zone-gap: var(--dock-gap, 0.25rem);
+
     /* Dock active-state ladder (O.W6 Lane B)
        Token-overridable active paint for `.dock-icon-button`. Promoted
        from hardcoded `background: var(--muted); color: var(--foreground)`
@@ -494,7 +455,45 @@
     --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
     --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
 
+    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
+       The section + inter-row dividers used to be inline `border-border/40` and
+       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
+       `glass-floating` plate (a luminous transmissive material, --card L16) those
+       near-equal-luminance hairlines effectively VANISHED — "the sections run
+       together". This ONE token is consumed by every divider rule (the
+       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
+       Configurator.vue's aside/preset/footer borders, configurator.css) so the
+       divider weight is retuned from a single override.
+
+       The dark-LIFTING arm is the load-bearing half: the divider must read on
+       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
+       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
+       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
+       visible luminance step survives the dark glass. `light-dark()` carries the
+       arm in ONE declaration (the same :root cascade context as the surface-tint
+       family; an engine without `light-dark()` falls back to the dark-arm.css
+       `.dark` floor minted in lockstep). The SECTION divider runs a touch
+       heavier than the inter-row hairline (a section reads as a section without
+       a second heading rung). */
+    --configurator-divider: light-dark(
+        color-mix(in srgb, var(--border) 55%, transparent),
+        color-mix(in srgb, var(--foreground) 22%, transparent)
+    );
+    --configurator-divider-section: light-dark(
+        color-mix(in srgb, var(--border) 70%, transparent),
+        color-mix(in srgb, var(--foreground) 30%, transparent)
+    );
+    /* The optional faint section-header tonal step — a whisper-light warm wash
+       behind a <ConfiguratorLayer> section so it reads as a grouped section
+       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
+       (transparent) on light where the hairline carries it; a faint
+       foreground-over-transparent lift on dark where the divider alone is
+       subtle. */
+    --configurator-section-tint: light-dark(
+        transparent,
+        color-mix(in srgb, var(--foreground) 3%, transparent)
+    );
+
     /* Component font override (consumers override locally) */
     --select-font: inherit;
-
 }

package/src/styles/tokens.css

@@ -21,14 +21,20 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The nine partials @import in
-   cascade order: */
+/* CSS @import rules must precede every other rule. The ten partials @import in
+   cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
+   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";
-@import "./tokens/offsets-sizing.css";
+@import "./tokens/glass-fx.css";
+@import "./tokens/glass-deep.css";
+@import "./tokens/on-glass-fg.css";
+@import "./tokens/offsets.css";
+@import "./tokens/sizing.css";
 @import "./tokens/scale-paper.css";
+@import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";
 @import "./tokens/dark-arm.css";
 @import "./tokens/property-regs.css";

package/src/styles/transitions.css

@@ -23,7 +23,7 @@
     .fade-slide-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .fade-slide-leave-active {
         transition:
@@ -43,7 +43,7 @@
     .dialog-scale-enter-active {
         transition:
             opacity var(--duration-slow) var(--ease-out),
-            transform var(--duration-slow) var(--spring-bouncy);
+            transform var(--spring-bouncy-duration) var(--spring-bouncy);
     }
     .dialog-scale-leave-active {
         transition:
@@ -63,7 +63,7 @@
     .pop-enter-active {
         transition:
             opacity var(--duration-fast) var(--ease-out),
-            transform var(--duration-slow) var(--spring-bouncy);
+            transform var(--spring-bouncy-duration) var(--spring-bouncy);
     }
     .pop-leave-active {
         transition:
@@ -83,7 +83,7 @@
     .dropdown-enter-active {
         transition:
             opacity var(--duration-instant) var(--ease-out),
-            transform var(--duration-normal) var(--spring-snappy);
+            transform var(--spring-snappy-duration) var(--spring-snappy);
     }
     .dropdown-leave-active {
         transition:
@@ -110,7 +110,7 @@
     .pane-swap-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .pane-swap-leave-active {
         transition:
@@ -130,7 +130,7 @@
     .metric-swap-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .metric-swap-leave-active {
         transition:
@@ -145,7 +145,7 @@
 
     /* ── Dock entrance utility ── */
     .dock-in {
-        animation: dock-in var(--duration-panel) var(--spring-snappy) both;
+        animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both;
         transform-origin: center bottom;
     }