@mkbabb/glass-ui 4.0.1 → 4.1.0

package/dist/styles/glass.css

@@ -46,8 +46,18 @@
    squircle + a11y @supports overrides, which must stay last): */
 @import "./glass/material.css";
 @import "./glass/ladder.css";
+/* BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register
+   (.accent-tone: one --tone → idle/active/edge/ink). AFTER ladder.css (reads the
+   warm-cream --card surface the ladder mints); the SOLE writer of the --accent-*
+   channels, so the placement is cascade-order-invariant. */
+@import "./glass/accent-tone.css";
 @import "./glass/rim.css";
 @import "./glass/surfaces.css";
+/* BC.W-CARVE6 — the .input-pill / .control-surface form-control REST register
+   carved out of surfaces.css to hold the 500-line bound, @import-ed IMMEDIATELY
+   AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
+   source order — the dist is byte-isomorphic). */
+@import "./glass/control-surfaces.css";
 @import "./glass/surface-axis.css";
 @import "./glass/reveal.css";
 @import "./glass/deep.css";

package/dist/styles/index.css

@@ -120,6 +120,12 @@
  *                              native .smooth-scroll opt-in) on the native
  *                              scroll()/view()/timeline-scope substrate; NO
  *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
+ *  10a''. scroll-chrome.css  — BC.W-SCROLL-CHROME the scroll-driven floating-
+ *                              CHROME collapse recipe (.scroll-chrome reads
+ *                              --chrome-collapse-t for the compositor shrink/
+ *                              quiet/shadow-lift; PERSISTENT-by-default, crisp
+ *                              blur, never-invisible quiet, PRM-discrete). The
+ *                              useScrollChrome JS machine owns the snap + ramp.
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
@@ -168,6 +174,7 @@
 @import "./animations.css";
 @import "./scroll-driven.css";
 @import "./scroll-choreography.css";
+@import "./scroll-chrome.css";
 @import "./view-transition.css";
 @import "./utilities.css";
 /* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
@@ -193,6 +200,14 @@
    masks + the PRM milestone-pulse bracket. */
 @import "./border-progress.css";
 
+/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal: a one-shot
+   gold-draw mark (a `stroke-dashoffset` wipe on the 4 `@property` motion tokens
+   `--seal-draw`/`--seal-scale`/`--seal-glint`/`--seal-ink`, registered in
+   tokens/property-regs.css §18). The ink reads the W-PHASE-PALETTE earned-gold
+   register; the glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
+   compositor-only — the feedback-surface partial. */
+@import "./completion-seal.css";
+
 /* Ensure Tailwind scans glass-ui's compiled component templates for the utility
    classes they emit (CVA variant classes like text-destructive-foreground,
    layout utilities like h-full/shrink-0).

package/dist/styles/scroll-chrome.css

@@ -0,0 +1,123 @@
+/*
+ * scroll-chrome.css — the scroll-driven floating-CHROME collapse recipe
+ * (BC.W-SCROLL-CHROME).
+ *
+ * Cascade rung AFTER scroll-choreography.css. Where scroll-choreography.css is the
+ * ENTRANCE register (the page-build / section-cascade / scroll-pinned reveals), this is
+ * the COLLAPSE-STATE recipe a floating chrome bar (a dock, a header) composes: scroll
+ * down and it SHRINKS smoothly into a compact form; scroll up and it EXPANDS back; on
+ * scroll-stop it SNAPS to the nearest state (the `useScrollChrome` JS machine owns the
+ * snap + the ramp value — this recipe is the compositor paint of `--chrome-collapse-t`).
+ *
+ *   .scroll-chrome — the chrome surface (a dock/header) reads `--chrome-collapse-t`
+ *                    (0 expanded → 1 collapsed; the @property reg in property-regs.css)
+ *                    for the COMPOSITOR shrink/quiet/shadow-lift ramp.
+ *
+ * COMPOSITOR-ONLY (the proof:no-layout-animation floor — motion-canon P5). The shrink is
+ * `transform: scale()/translateY()` — NEVER an animated `height`/`padding`/`width` (the
+ * box never reflows per scroll frame; the CDP Layout track stays flat). The quiet is
+ * `opacity` BOUNDED above a never-invisible floor (the NN/g pale-fade-into-content trap
+ * is the FORBIDDEN direction — the bar reads at EVERY collapse fraction). The
+ * SEPARATION/shadow LIFTS as content scrolls under (Apple "as text scrolls underneath,
+ * shadows become more prominent") — `box-shadow` is a paint prop, compositor-safe.
+ *
+ * THE BLUR STAYS CRISP (the W-DOCK-SHRINK-BLUR fence). The chrome's resting
+ * `backdrop-filter` blur is NOT animated by `--chrome-collapse-t` — a shrunken bar is
+ * crisp glass, not a blurry mess. The recipe touches ONLY transform/opacity/box-shadow;
+ * the surface's own `glass-*` tier owns the (untouched) backdrop blur.
+ *
+ * PERSISTENT BY DEFAULT (the iOS-27 lesson). `--chrome-collapse-t` rests at 0 (the
+ * @property initial-value), so a bare `.scroll-chrome` is byte-identical to the expanded
+ * chrome — it does NOT collapse until the `useScrollChrome` machine (opted in with
+ * `collapseOnScroll: true`) ramps the custom.
+ *
+ * PRM (the discrete-state-survives model, the useFadingScroll precedent). The transform/
+ * opacity RAMP sits inside the `@media (prefers-reduced-motion: no-preference)` outer
+ * gate (the scroll-choreography.css discipline) — under reduce the continuous ramp drops;
+ * the `useScrollChrome` machine snaps `--chrome-collapse-t` to a discrete 0/1 endpoint, so
+ * the DISCRETE collapsed/expanded state stays correct, instant, never half. The shadow
+ * lift sits OUTSIDE the gate (a paint cue, not a vestibular motion) so the lifted
+ * separation reads even under reduce.
+ */
+
+/* The tunable depth knobs — a consumer retunes the shrink/fade depth per chrome. */
+:root {
+    /* The shrink depth: at fully collapsed the chrome scales to (1 − this). 0.12 → a
+       compact 88% bar (a real shrink that still reads as the same bar). */
+    --chrome-shrink-depth: 0.12;
+    /* The rise (px) the chrome translates toward its anchor edge as it collapses. */
+    --chrome-rise-px: 6px;
+    /* The fade depth — BOUNDED LOW: at fully collapsed opacity floors at (1 − this).
+       0.28 → a 0.72 floor (the bar quiets but is NEVER invisible — the NN/g pale-fade
+       trap forbidden). A consumer that wants no quiet sets it 0. */
+    --chrome-fade-depth: 0.28;
+    /* The shadow-lift strength — the separation shadow grows from rest → this as content
+       scrolls under (Apple shadow-on-scroll). A paint prop, compositor-safe. */
+    --chrome-shadow-lift: 18%;
+}
+
+/* The shrink/quiet RAMP — the SPATIAL (transform) + the EFFECTS (opacity) channels. It
+   rides `--chrome-collapse-t` directly (no CSS transition — the JS scalar already glides
+   on the reader's tick; on a native-timeline engine the same custom rides
+   `animation-timeline: scroll(self)`, the native-ramp path). Inside the PRM no-preference
+   gate: under reduce the ramp drops and the chrome reads its discrete snapped endpoint. */
+@media (prefers-reduced-motion: no-preference) {
+    .scroll-chrome {
+        /* SPATIAL leg — scale toward the compact size + a small rise toward the anchor
+           edge. transform-origin at the top (a header anchors its top; a consumer dock
+           re-points the origin to its natural seat). Compositor-only — never height/pad. */
+        transform: scale(calc(1 - var(--chrome-collapse-t) * var(--chrome-shrink-depth)))
+            translateY(calc(var(--chrome-collapse-t) * var(--chrome-rise-px) * -1));
+        transform-origin: top center;
+        /* EFFECTS leg — the quiet, BOUNDED above the never-invisible floor (the bar reads
+           at every fraction; the `* fade-depth` caps the drop, opacity never reaches 0). */
+        opacity: calc(1 - var(--chrome-collapse-t) * var(--chrome-fade-depth));
+        /* will-change the compositor channels (NEVER a layout property). */
+        will-change: transform, opacity;
+    }
+}
+
+/* The shadow LIFT — OUTSIDE the PRM gate (a paint cue, not a vestibular motion): the
+   separation shadow strengthens as content scrolls under the chrome. `box-shadow` is a
+   paint prop (compositor-safe, in the proof:no-layout-animation paint set, NOT the reflow
+   set). The lift composes the house `--shadow-color: var(--foreground)` so it re-tints
+   light↔dark for free; the strength grows from a whisper at rest → `--chrome-shadow-lift`
+   at fully collapsed. */
+.scroll-chrome {
+    box-shadow: 0 calc(2px + var(--chrome-collapse-t) * 6px)
+        calc(8px + var(--chrome-collapse-t) * 12px)
+        color-mix(
+            in srgb,
+            var(--shadow-color)
+                calc(6% + var(--chrome-collapse-t) * var(--chrome-shadow-lift)),
+            transparent
+        );
+}
+
+/* The native-ramp path — on a `scroll()`-supporting engine the consumer can drive
+   `--chrome-collapse-t` off `animation-timeline: scroll(self)` directly (the
+   `useScrollProgress`/`--scroll-t` native precedent: the JS writer is inert, the CSS owns
+   the compositor ramp). The keyframe is the linear 0→1 map over the collapse range; the
+   consumer binds it on the chrome with its own `animation-range` (the collapse-px span).
+   The SNAP-to-state stays the JS leg (a snap is a discrete commit, not a continuous ramp —
+   it rides the `useScrollChrome` scroll-stop tick on every engine). PRM-gated + supports-
+   gated (a non-supporting engine reads the JS `collapseT` write, never this keyframe). */
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: scroll()) {
+        @keyframes gl-chrome-collapse {
+            from {
+                --chrome-collapse-t: 0;
+            }
+            to {
+                --chrome-collapse-t: 1;
+            }
+        }
+        /* OPT-IN: a consumer adds `.scroll-chrome--native` to ride the compositor ramp
+           (it must set `animation-range` for its own collapse-px span; the
+           `useScrollChrome` machine's JS write is the cross-engine floor + the snap). */
+        .scroll-chrome--native {
+            animation: gl-chrome-collapse auto linear both;
+            animation-timeline: scroll(self block);
+        }
+    }
+}

package/dist/styles/scroll-driven.css

@@ -70,3 +70,41 @@
         }
     }
 }
+
+/* ── ONCE latch (the virtualized/teleporting opt-in) — BC.W-MOTION-PRESETS.
+ * The continuous `[data-scroll-reveal]` recipe above re-fires its entrance EVERY
+ * time a child re-enters the entry range — correct for a calm cascade, WRONG for
+ * a virtualized/teleporting list where a row scrolls out + back (it re-plays the
+ * fade-lift). A native `view()` timeline cannot latch "play once" (the CSS limit),
+ * so `[data-scroll-reveal-once]` swaps the live-range animation for a one-shot
+ * `@keyframes` keyed off a `data-revealed` attr a tiny JS-assist IntersectionObserver
+ * sets on FIRST cross + then `unobserve`s — the SHIPPED `useStaggerReveal` `once`
+ * machinery (its `if (once) observer?.unobserve(el)` leg), reused, not re-authored.
+ *
+ * SINGLE WRITER — an element is `[data-scroll-reveal]` XOR `[data-scroll-reveal-once]`
+ * (never both): the continuous path rides the `view()` timeline, the once path rides
+ * the `[data-revealed]` attr. They never both drive the same child.
+ *
+ * The keyframe is the SAME fade-lift values as `gl-reveal-in` but runs FORWARD
+ * (`from` hidden → `to` shown) so the terminal state holds without a timeline; the
+ * `--spring-gentle` partial-sum settle is the convergence-reveal register a consumer
+ * pairs with `useStagger` for the N-term build-up. Same PRM outer gate as the
+ * continuous recipe (a flourish — under reduce the row paints in-place, no entrance). */
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes gl-reveal-once {
+        from {
+            opacity: 0;
+            transform: translateY(var(--scroll-reveal-rise, 6px));
+        }
+        to {
+            opacity: 1;
+            transform: none;
+        }
+    }
+    [data-scroll-reveal-once] > * {
+        opacity: 0;
+    }
+    [data-scroll-reveal-once] > *[data-revealed] {
+        animation: gl-reveal-once var(--spring-gentle-duration) linear both;
+    }
+}

package/dist/styles/segmented-tabs.css

@@ -36,8 +36,15 @@
 /* ── The PILL track (the glass material — DEFAULT) ── */
 .segmented-tabs {
     --bouncy-track-trim: 0.1875rem;
-    --bouncy-track-radius: 0.4375rem;
-    --bouncy-slider-radius: 0.3125rem;
+    /* BC.W-TABS-IOS — the iOS-27 stadium register. The pill reads the role-bearing
+       `--radius-tab` (= --radius-pill = 9999px) — on a short pill box this clamps to
+       half-height → a TRUE stadium end-cap (not the squared `0.3125rem` rounded-rect
+       the HEAD shipped). The TRACK corner is CONCENTRIC with the pill (Apple's
+       `.containerConcentric`): the pill radius + the trim inset, so a stadium pill
+       sits inside a near-stadium track. No breakpoint radius bump — a stadium does
+       not change radius across viewports (clean break, the 640px radius lines gone). */
+    --bouncy-slider-radius: var(--radius-tab);
+    --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));
     /* The travel-squish axis — 1 at rest; useTabIndicator writes it transiently
        on selection, the indicator pairs it volume-preserving. */
     --stretch: 1;
@@ -55,7 +62,13 @@
 
     backdrop-filter: var(--glass-blur-quiet);
     -webkit-backdrop-filter: var(--glass-blur-quiet);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 24%, transparent);
+    /* BC.W-TABS-IOS — the track hairline re-points off the `--border` ring (which read
+       dark over the cream plate — the D2 "black bar" on the strip top edge) onto the
+       BC.W-BLACK-BAR directional rim register: a bright top catch-light + a faint warm
+       under-shadow. The track is a thin warm-glass quiet capsule with a lit top edge,
+       never a dark hairline. The pill (above) carries the SAME rim plus the lift shadow
+       so it reads FORWARD; the track carries only the rim. */
+    box-shadow: var(--glass-rim-top), var(--glass-rim-bottom);
 }
 
 /* ── The vertical orientation axis (the block stack) ── */
@@ -69,20 +82,24 @@
 
 @media (min-width: 640px) {
     .segmented-tabs {
+        /* BC.W-TABS-IOS — only the trim (pad) axis bumps at the wider breakpoint; the
+           radius is the viewport-invariant stadium (--radius-tab), so the corner
+           track-radius re-resolves concentric off the bigger trim by construction. */
         --bouncy-track-trim: 0.25rem;
-        --bouncy-track-radius: 0.5rem;
-        --bouncy-slider-radius: 0.375rem;
     }
 }
 
 /* ── The shared indicator body (the PILL plate) ── */
 .segmented-indicator {
     position: absolute;
-    /* BA.W-TABS — the active pill indicator rides the glass FLOATING tier (the
-       W-REGISTER-IOS "selected reads as glass" register), reading FORWARD of the
-       quiet-tier track. A glass tint, NEVER a saturated `--foreground` fill or an
-       opaque `bg-card`. */
-    background: var(--glass-bg-floating);
+    /* BC.W-TABS-IOS — the active pill is the iOS-27 / value.js DISTINCT LIFTED PLATE,
+       not a +30%-α same-hue brightness step. The fill reads the SHARED element-level
+       oklab-tinted floating pair (surfaces.css `:where(.btn-glass, .segmented-indicator)`)
+       — over a bright field it darkens-to-legible, over a calm field it stays
+       warm-cream/near-white (the W55 adaptive register reaching the pill, the "raised
+       near-white plate" the user pinned). The FORWARD-ness comes from the rim + lift
+       below, NOT from cranking the same-hue alpha. */
+    background: var(--glass-bg-floating-tinted);
     -webkit-backdrop-filter: var(--glass-blur-floating);
 
     backdrop-filter: var(--glass-blur-floating);
@@ -90,9 +107,17 @@
     z-index: 0;
     inset-block: var(--bouncy-track-trim);
     border-radius: var(--bouncy-slider-radius);
+    /* BC.W-TABS-IOS — the lifted-plate composite: the BC.W-BLACK-BAR directional rim
+       (bright top catch-light `--glass-rim-top` + warm bottom under-shadow
+       `--glass-rim-bottom` — the iOS-27 top-light/bottom-shadow thickness the track does
+       NOT carry, the FORWARD-ness device, NEVER the dark D2 hairline) PLUS a real layered
+       glass under-shadow (`--glass-shadow-floating`) lifting the plate ~2-3px off the
+       quiet track. Replaces the HEAD weak `0 1px 3px rgba(0,0,0,0.08)` + the 30%-border
+       dark ring (the same-hue low-contrast plate that read "not glassy"). */
     box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.08),
-        0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+        var(--glass-rim-top),
+        var(--glass-rim-bottom),
+        var(--glass-shadow-floating);
     /* The volume-preserving travel-squish: stretch along X, compress Y in
        inverse proportion. `transform-origin: center` → a symmetric width-flex
        as it travels (the indicator grows wider mid-travel, settles to fit). */
@@ -169,8 +194,10 @@
 
 @media (min-width: 640px) {
     .segmented-indicator {
+        /* BC.W-TABS-IOS — only the inset (trim) axis bumps; the radius stays the
+           viewport-invariant stadium (`--bouncy-slider-radius` = --radius-tab). The
+           HEAD `border-radius: 0.375rem` px-literal that squared the pill is GONE. */
         inset-block: 0.25rem;
-        border-radius: 0.375rem;
     }
     .segmented-tabs--vertical .segmented-indicator {
         inset-block: auto;
@@ -328,7 +355,16 @@
 
 .segmented-tabs--underline .segmented-tab {
     padding: 0.375rem 0.75rem;
-    font-size: inherit;
+    /* BC.W-UNDERLINE-TUNE — the audacious editorial label voice. The underline is
+       the PAPER/editorial material (BA.W-TABS), so its labels carry the √φ display
+       register, NOT the small 0.8125rem control size the PILL labels keep (the
+       two-voice fence — the pill is a compact control, the underline is an editorial
+       nav head). `--type-subheading` (1.272rem / 20.4px, the √φ rung) + the Apple
+       display tracking `--type-tracking-display` (−1.5%) are the BB.W-DISPLAY-TRACKING
+       ladder rungs CONSUMED here (never re-minted), the same pairing the semantic
+       display rungs ride. A confident editorial strip, not a default Tailwind row. */
+    font-size: var(--type-subheading);
+    letter-spacing: var(--type-tracking-display);
     border-radius: 0.25rem;
     /* The tab-text colour cross-fade rides the fast generic clock (the §6 doctrine
        — a colour shift is a bezier ease, never a spring), matching the pill tab

package/dist/styles/theme/bridges.css

@@ -315,6 +315,14 @@
     --shadow-cartoon-md: var(--cartoon-shadow-md);
     --shadow-cartoon-lg: var(--cartoon-shadow-lg);
 
+    /* BC.W-CONTROL-SMOOTH — the warm focus-ring box-shadow bridged to the
+       `shadow-focus-ring` utility (AW.W26 --focus-ring-shadow register). The
+       `.focus-ring` utility auto-arms on :focus-visible; this bridge lets a
+       surface compose the SAME warm ring on a NON-:focus-visible state (the
+       TagsInputItem reka roving-tabindex `data-[state=active]` selection) via the
+       @theme utility, not a `shadow-[var(--focus-ring-shadow)]` arbitrary wrap. */
+    --shadow-focus-ring: var(--focus-ring-shadow);
+
     /* ═══════════════════════════════════════════════
        Blur → blur-* and backdrop-blur-* utilities
        ═══════════════════════════════════════════════ */
@@ -332,6 +340,15 @@
     --ease-spring-snappy: var(--spring-snappy);
     --ease-spring-bouncy: var(--spring-bouncy);
     --ease-spring-gentle: var(--spring-gentle);
+    /* BC.W-SPRING-EASE — the minted iOS interactive press register's @theme alias
+       (the documented public register the consumers reach by name; the JS path
+       reads it via useSpringPress + --glass-btn-press-t). */
+    --ease-spring-press: var(--spring-press);
+    /* BC.W-DECK — the deck slide-transition spring's @theme alias (the documented
+       public register a consumer's slide `transition-timing-function` reaches by
+       name: `ease-spring-deck`). --spring-deck aliases --spring-smooth; the headless
+       library mints the register, the deck consumer reads it (presets-in-consumers). */
+    --ease-spring-deck: var(--spring-deck);
 
     --ease-standard: var(--motion-ease-standard);
     --ease-out: var(--motion-ease-out);
@@ -352,6 +369,11 @@
     --transition-duration-panel: var(--duration-panel);
     --transition-duration-xl: var(--duration-xl);
     --transition-duration-xxl: var(--duration-xxl);
+    /* BC.W-CONTROL-SMOOTH — the named iOS control-press surface beat (0.12s, the
+       calm bg/color/box-shadow cross-fade clock the `.control-surface`/Toggle
+       family rides). Bridged to the `duration-control` utility so a control
+       composes the named clock, not a `duration-[var(--duration-control)]` wrap. */
+    --transition-duration-control: var(--duration-control);
     /* BA.W-GLASS-CAL — `--transition-duration-sparkle` bridge DELETED with the
        `--duration-sparkle` token (the disco retirement); no `duration-sparkle`
        utility consumer. */

package/dist/styles/theme/radius.css

@@ -42,9 +42,26 @@
        on Checkbox + base Tabs onto a softer, named radius. One geometry language
        across the form family — token + class only, no new primitive. */
     --radius-field:   var(--radius-2xl);
-    --radius-control: var(--radius-md);
+    /* BC.W-CONTROL-SMOOTH — the small-inline-control corner rung is a STADIUM, not a
+       fixed small px. The prior `--radius-md` (6px) read SQUARE on a 16-24px control
+       (6px on a 16px box = 0.38-of-height — a rounded-rect, not a pill); the iOS-27
+       small-control silhouette is a near-stadium pill where the radius SCALES with the
+       control (clamped to half-height by `--radius-pill`'s 9999px geometry, so a 16px
+       control reads an 8px-radius pill — soft at every size). This retires the raw
+       `rounded-sm` (4px) on Checkbox + base Tabs AND the small-control square class in
+       ONE rung. The `card` toggle TILE keeps `--radius-card` (the large glass surface
+       keeps its 1rem squircle — only the small inline controls re-round). The corner-
+       SHAPE squircle axis reads at LARGE radius only (ROUND set = card+pill for small),
+       so the small pills stay ROUND (no regression). */
+    --radius-control: var(--radius-pill);
     --radius-badge:   var(--radius-pill);
     --radius-dock:    var(--radius-pill);
+    /* BC.W-TABS-IOS — the iOS-27 segmented-control stadium register. The pill is a
+       stadium by construction (--radius-pill clamps to half-height on a short box →
+       a true end-cap), so the tab strip stops being a squared rounded-rect. The
+       value.js DESIGN.md idiom: the role-bearing pill token, NOT a hand-rolled
+       `rounded-full`. A consumer retunes the tab geometry via `:root { --radius-tab }`. */
+    --radius-tab:     var(--radius-pill);
     /* AW.W3b — the big-dock card shell's default (comfortable-density) radius.
        The density-scaled --dock-card-radius (dock.css) resolves through this. */
     --radius-dock-card: var(--radius-3xl);

package/dist/styles/tokens/color-radius.css

@@ -121,6 +121,16 @@
        `--border` (which is `var(--neutral-4)`, light-dark()-resolved). */
     --border-soft: color-mix(in srgb, var(--border) 45%, transparent);
 
+    /* BC.W-SEPARATOR-FIX — the warm separator hairline ink. A rule reads as
+       WARM material, not a grey `--border` line (BA.W-NO-GRAY floor): the
+       split-rule segments + un-labelled hairline both paint `--separator-ink`.
+       It is a `color-mix` off `--foreground` (`light-dark()`-resolved, so it
+       auto-darks warm in both modes — the warm-ink hairline, not `--neutral-4`
+       grey). 22% is a visible-but-whisper rule (crisper than `--border-soft`'s
+       45%-of-grey; this one is foreground-derived so it carries the warm hue
+       directly). A consumer retints every separator from this single rung. */
+    --separator-ink: color-mix(in srgb, var(--foreground) 22%, transparent);
+
     /* AQ.W3 §W3.4 — tokenized scrollbar thumb + track. Minted in the color
        block so the `scrollbar-color` / `::-webkit-scrollbar-thumb` rungs read a
        single source. Auto-dark via `--muted-foreground` (light-dark()-resolved,
@@ -224,9 +234,9 @@
        keyframes.js ω₀ = 2π/response convention, mints no second ω). */
     --constellation-warp-response:    0.55;   /* s — keyframes.js angular period (NOT a settle) */
     --constellation-warp-zeta:        1.0;    /* critically damped — a focal mark must NOT ring */
-    --constellation-well-gain:        14000;  /* inverse-square force scale (the held-pull gain) */
+    --constellation-well-gain:        19000;  /* inverse-square force scale (the held-pull gain). Lifted 14000→19000 (BC.W-VIZ-CONSTELLATION): the GPU substrate's high-refresh frame loop ramps the held strength to only ~0.70 within the egg-live π perturb window, so the weaker effective force (fought by the |v|→speed ease-back) fell under the gate's ≥20% perturb floor — a stronger pull restores the heat. Held-physics only; rest is byte-untouched. Mirrors DEFAULT_WELL_CONFIG.gain. */
     --constellation-well-reach:       340;    /* base-width px — the well's reach (k-scaled at step) */
-    --constellation-well-ramp:        4.0;    /* 1/s — the ARM rate (≈0.25s bloom; release is the fixed brisk WELL_RELEASE_RAMP — the field-cools invariant, not consumer-tunable) */
+    --constellation-well-ramp:        8.0;    /* 1/s — the ARM rate. Doubled 4→8 (BC.W-VIZ-CONSTELLATION) so the strength reaches near-full power within the gate's 40-frame perturb window at the GPU substrate's high refresh (~0.12s bloom); release is the fixed brisk WELL_RELEASE_RAMP — the field-cools invariant, not consumer-tunable. Mirrors DEFAULT_WELL_CONFIG.ramp. */
     --constellation-well-max-speed:   4.0;    /* base-width px/frame cap — the no-slingshot clamp */
     --constellation-well-hold-ms:     140;    /* ms hold before the well arms */
     --constellation-wander-idle:      8000;   /* ms — min idle between auto re-targets (the W-CON1 drift cadence) */
@@ -243,7 +253,7 @@
     --section-color-2:  oklch(0.484 0.163 265.5);  /* indigo     */
     --section-color-3:  oklch(0.542 0.089 222.8);  /* teal-cyan  */
     --section-color-4:  oklch(0.551 0.088 171.1);  /* forest     */
-    --section-color-5:  oklch(0.623 0.124 69.6);   /* amber      */
+    --section-color-5:  oklch(0.530 0.124 69.6);   /* amber — BC.W-ACCENT-TONE #13: the safeAccentColor-derived rebaseline (HEAD 0.623 → 0.530, 3.49:1 → 5.11:1 vs the warm-cream card; the dark arm already clears 8.07:1 so it stays). --viz-amber auto-tracks; fourier's :root override deletes on adopt. */
     --section-color-6:  oklch(0.579 0.201 30.4);   /* tomato-red */
     --section-color-7:  oklch(0.532 0.180 317.5);  /* violet     */
     --section-color-8:  oklch(0.520 0.176 8.4);    /* ruby       */

package/dist/styles/tokens/dark-arm.css

@@ -214,6 +214,13 @@
     --glass-opacity-floating: 0.88;
     --glass-opacity-overlay:  0.96;
     --glass-opacity-chassis:  0.36;
+    /* BC.W-DIALOG-GLASS — the dialog dark register lifts ~0.08 over the light arm
+       (0.68 → 0.76) for read-weight over the deep canvas, mirroring the dark opacity
+       ladder (it sits between dark `resting` 0.72 and `floating` 0.88 — see-through
+       but legible over the deep page). The SAME named token as the light arm, per-
+       mode; the composed `--glass-bg-dialog` (glass.css :root) re-resolves from it
+       automatically per mode. */
+    --glass-opacity-dialog:   0.76;
     --glass-grain-opacity: 0.045;
     --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08);
 
@@ -225,12 +232,29 @@
        aurora/page behind reads with chroma + a glow. The blur() RADIUS is the
        light-arm primitive UNTOUCHED (W-GLASS-CAL owns the radius dial-back) — only the
        saturate/brightness COMPANIONS lift here. The lower rungs lift more (they're
-       thinner, the backdrop carries the read); the heavy overlay lifts least. */
-    --glass-blur-wash:     blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(1.35) brightness(1.18);
-    --glass-blur-quiet:    blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(1.35) brightness(1.16);
-    --glass-blur-resting:  blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.30) brightness(1.14);
-    --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(1.28) brightness(1.10);
-    --glass-blur-overlay:  blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(1.22) brightness(1.06);
+       thinner, the backdrop carries the read); the heavy overlay lifts least.
+
+       BC.W-GLASS-LEGIBILITY-MEASURED — the per-rung `--glass-saturate-{tier}` knob
+       (the speedtest-AX BC-W10 fold) is the SAME named register as the light arm
+       (tokens/glass.css), per-mode — the dark identity. The dark values ARE this
+       scope's luminosity lift (wash/quiet 1.35, resting 1.30, floating 1.28, overlay
+       1.22) become the dark token defaults, and each `--glass-blur-{tier}` reads
+       `saturate(var(--glass-saturate-{tier}))` THROUGH — so a `.dark` override re-
+       resolves the rung saturation with ZERO recipe edit, AND the composed dark blur
+       is BYTE-IDENTICAL to the old baked literal. The `brightness()` companions stay
+       baked (this fold mints ONLY the saturate knob). The dark dock/deep saturate stay
+       baked (off-ladder footprint rungs, not part of the {wash..overlay} ladder).
+       Machine-locked by `proof:glass-legibility` L7. */
+    --glass-saturate-wash:     1.35;
+    --glass-saturate-quiet:    1.35;
+    --glass-saturate-resting:  1.30;
+    --glass-saturate-floating: 1.28;
+    --glass-saturate-overlay:  1.22;
+    --glass-blur-wash:     blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)) brightness(1.18);
+    --glass-blur-quiet:    blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.16);
+    --glass-blur-resting:  blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)) brightness(1.14);
+    --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)) brightness(1.10);
+    --glass-blur-overlay:  blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)) brightness(1.06);
     --glass-blur-dock:     blur(calc(var(--glass-blur-dock-radius) * var(--glass-level))) saturate(1.30) brightness(1.12);
 
     /* BB.W-DEEP-GLASS — the DARK arm of the OPT-IN deep tier (the luminous-dark
@@ -338,6 +362,15 @@
        resolves to the `-dark` alpha on the deeper canvas. */
     --glass-edge-light: var(--glass-edge-light-dark);
 
+    /* BC.W-BLACK-BAR D2 — the DIRECTIONAL rim dark arm (plain per-mode pair, NEVER
+       light-dark() round an inset — MEMORY: the inset-shadow trap). The top
+       catch-light lifts to 0.40 (the dark plate's fill barely separates from the deep
+       page, so the rim is the PRIMARY silhouette device — dark glass glows where light
+       passes; mirrors the --glass-edge-light-dark 0.18→0.22 lift). The bottom warm
+       under-shadow holds at 6% — the shadow grounds the plate in BOTH modes. */
+    --glass-rim-top: inset 0 1px 0 hsl(0 0% 100% / 0.40);
+    --glass-rim-bottom: inset 0 -1px 0 color-mix(in srgb, var(--foreground) 6%, transparent);
+
     /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
        to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
        source` auto-flips with `--card` (no override needed — the default already

package/dist/styles/tokens/glass-deep.css

@@ -18,7 +18,7 @@
  * dark companions).
  *
  * ── The Apple-range derivation (DELTA cross-ref) ───────────────────────────
- * Apple home nav:       saturate(1.8) blur(20px)  (the canonical measure)
+ * Apple home nav:       saturate(1.8) blur(20px)  (the canonical measure; the CEILING)
  * Apple product tiers:  blur(14-20px)             (the band)
  * glass-ui calm ceiling: floating 13px / saturate 1.18  (W-GLASS-CAL dial-back)
  * glass-ui DEEP:        16px / saturate 1.5        (STRICTLY deeper on BOTH axes,
@@ -29,14 +29,39 @@
  * and the warm-cream light-concentration ceiling (AX.W52 D19 — a saturate that
  * over-juices a colored substrate reads as a garish smear) keeps it just-rich.
  * The deepest BLUR carries the "more glass" read; the saturate stays restrained.
+ *
+ * ── The deep-tier BUDGET CALL (BC.W-GLASS-LEGIBILITY-MEASURED L4) ───────────
+ * The deep blur radius is the most expensive idiom glass-ui ships (`backdrop-
+ * filter` cost is super-linear in the radius past ~16px). The wave's call:
+ * STAY at the budget-clearing 16px and BOOK the 18-20px push (toward the live-
+ * measured apple.com nav `blur(20px)` ceiling, research/apple-glass.md §1.1)
+ * behind a recorded `profile:budget` clearance — the full 20px is the BOOKED
+ * successor (apple-ios27.md §1.4 "the full 20px booked"), NOT a silent over-
+ * spend. `--glass-saturate-deep-ceiling` BAKES the apple.com nav saturate 1.8 as
+ * the deep-tier CEILING (the load-bearing term — research/apple-glass.md §4
+ * "saturate 1.5 shipped, bake 1.8 as the deep ceiling"); the shipped
+ * `--glass-saturate-deep` 1.5 sits at the low end (≤ ceiling), warm-aurora-safe.
+ * `proof:glass-legibility` L4 reads BOTH: the 16px-stay is honest IFF the budget
+ * booking is recorded here, and the shipped deep saturate never crosses the 1.8
+ * ceiling. When a `profile:budget` run clears the 18-20px push, the radius
+ * lifts toward 20px on the SAME LERP (the booked successor lands, no recipe edit).
  */
 :root {
     /* The Apple-range deep ENDPOINTS — the radius + saturate the deep tier reaches
        at full depth (`--glass-depth: 1`). The calm `floating` rung (13px / 1.18)
        is the depth-0 floor; the deep recipe LERPs between the two on `--glass-depth`
        so the axis is a genuine driver, not a literal. */
-    --glass-blur-deep-radius:    16px; /* in [14,20], STRICTLY > calm floating 13px */
-    --glass-saturate-deep:       1.5;  /* >= 1.5 (toward Apple 1.8), > calm floating 1.18 */
+    --glass-blur-deep-radius:    16px; /* in [14,20], STRICTLY > calm floating 13px;
+                                          BUDGET CALL (L4): stays 16px, the 18-20px push
+                                          toward the apple.com nav ceiling is BOOKED
+                                          behind a recorded profile:budget clearance. */
+    --glass-saturate-deep:       1.5;  /* >= 1.5 (toward Apple 1.8), > calm floating 1.18;
+                                          ≤ --glass-saturate-deep-ceiling (the apple.com
+                                          nav 1.8 bound — never over-shot, L4). */
+    --glass-saturate-deep-ceiling: 1.8; /* the apple.com-nav saturate CEILING, BAKED as
+                                           the deep-tier load-bearing term (research/
+                                           apple-glass.md §4); the deep saturate never
+                                           exceeds it (the warm-cream identity bound). */
 
     /* The deep blur RADIUS — LERPed from the calm floating radius (depth 0) to the
        Apple-deep radius (depth 1) on `--glass-depth`, THEN scaled by the ONE

package/dist/styles/tokens/glass-fx.css

@@ -33,6 +33,20 @@
     --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04);
     --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow);
 
+    /* BC.W-AX-METAL-GLOW — the brand-metal catch-light DEFAULTS (the consumer
+       retune seam). The metal-shimmer family (`.metal-{gold,silver,bronze}`,
+       metal.css) halos the text-clip with a `drop-shadow` of the metal's OWN base
+       hue at this radius + strength — the gold reads as LIT metal, not a flat fill.
+       Shared by the loop sweep AND the one-shot headline (the W-AX-COMPLETION-SEAL
+       seal glint reads `--metal-glow-blur`/`--metal-glow-opacity` — the ≥2-consumer
+       register). The defaults are a soft warm WHISPER bounded by the warm-cream
+       identity — a halo radius proportional to the text (0.5em) at a low strength
+       (0.35), NOT a neon bloom (the §6 calm register; the disco family stays gone).
+       A garish high-opacity glow is the consumer's preset choice, never the default;
+       a consumer who wants NO glow sets `--metal-glow-opacity: 0`. */
+    --metal-glow-blur-default: 0.5em;
+    --metal-glow-opacity-default: 0.35;
+
     /* Specular catch-light — 1.5px-tall top-edge highlight that swaps in for
        --glass-highlight on interactive moments (e.g. primary-action hover).
        Reads as a real catch-light on a curved surface. The `-dark` companion
@@ -54,6 +68,25 @@
        on text. The `-dark` companion is overridden inside `.dark` mirroring
        the `--glass-specular-dark` precedent. */
     --glass-edge-light:      inset 0 0 0 0.75px hsl(0 0% 100% / 0.18);
+
+    /* BC.W-BLACK-BAR D2 — the DIRECTIONAL rim register (the iOS-27 glass-thickness
+       physics: light catch-light rims the TOP, a faint warm shadow grounds the
+       BOTTOM, so the plate reads as a physical pane lifted off the page — NEVER a
+       dark full-perimeter ink hairline). This RETIRES the load-bearing dark-rim role
+       of the per-rung `--glass-border-*` (now ≤5% α, glass.css): the silhouette is
+       carved by these two stops, not by the perimeter ink.
+         --glass-rim-top: the BRIGHT catch-light on the top edge (the kevinbism
+           `inset 0 1px white` motif; 0.30 α = apple-ios27.md §1.3 community value
+           rgba(255,255,255,0.3)). Subsumes the old omnidirectional white rim RING.
+         --glass-rim-bottom: the FAINT warm under-shadow grounding the plate (the
+           warm-ink that used to ring the whole perimeter, now only the bottom, at a
+           whisper 6% — riding --foreground so it stays warm-not-grey, BA.W-NO-GRAY).
+       Plain per-mode arms — NEVER an inset fragment inside light-dark() (the dark arm
+       re-declares both in dark-arm.css; light-dark() round an inset computes the WHOLE
+       box-shadow to none). The dark arm lifts the top to 0.40 (dark glass glows where
+       light passes) + keeps the bottom under-shadow at 6%. */
+    --glass-rim-top:         inset 0 1px 0 hsl(0 0% 100% / 0.30);
+    --glass-rim-bottom:      inset 0 -1px 0 color-mix(in srgb, var(--foreground) 6%, transparent);
     /* BA.W-DARK-MATERIAL scope 2 — the dark edge/rim is the PRIMARY silhouette device in
        dark. The light register's fill+shadow carry the plate; in dark the fill barely
        separates (the deep page is near-black), so the EDGE + the transmitted glow carry the
@@ -120,8 +153,18 @@
        bucket blocks drive to; the live 4.5:1 readback (proof:adaptive-glass π arm)
        ratifies the exact value. */
     --glass-backdrop:           dark;
-    --glass-backdrop-luma:      ;
     --glass-tint-ink:           var(--foreground);
+
+    /* BC.W-ADAPTIVE-RECONCILE — the ONE retune knob for the continuous observer
+       driver. `--glass-backdrop-luma` (the measured sampled relative-luminance the
+       useGlassBackdropLuminance observer WRITES, registered typed in property-regs.css)
+       is now READ on the RHS of the `--glass-tint-strength` clamp (glass/ladder.css +
+       dock/morph.css): below this knee the plate holds the calm warm-cream floor; above
+       it the strength ramps CONTINUOUSLY toward the ≤24% AA ceiling (the iOS-27 dynamic-
+       range shift, apple-ios27.md §1.5 ~0.6 light threshold). The dead-knob is closed —
+       the loop READS. A consumer raising the knee darkens LATER (a brighter backdrop is
+       tolerated before the lift); the ONE override point for the whole adaptive axis. */
+    --glass-backdrop-luma-knee: 0.6;
     /* AZ.W-ADAPTIVE-AUTO Arm 1 — recalibrated 18% → 20%. The bump strengthens the
        G2 surface-SILHOUETTE darken (ΔL ≈ 0.40 over synthetic white, the plate is
        distinguishable from a bright page behind) while staying bounded ≤ 24% (the