@mkbabb/glass-ui 4.0.1 → 4.2.0

package/src/styles/completion-seal.css

@@ -0,0 +1,131 @@
+/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal.
+ *
+ * A determinate process completes and a HERO-SCALE gold mark DRAWS itself onto the
+ * surface: the stroke INKS (a `stroke-dashoffset` wipe on the registered `--seal-draw`
+ * <percentage>), settles with a small spring overshoot (the `--seal-scale` SPATIAL leg
+ * on the seal's own `--spring-snappy`/`--spring-bouncy` clock), and glints ONCE on
+ * settle (the `--seal-glint` + the W-AX-METAL-GLOW gold catch-light). It is GOLD because
+ * completion is EARNED — the ink reads the W-PHASE-PALETTE completion register
+ * (`--phase-complete-color`/`--color-gold`), so a consumer re-inking completion re-inks
+ * the seal in lockstep. The seal mints NO new gold token + does NOT re-author the metal
+ * glow — it COMPOSES both (the earned-gold register has ONE home).
+ *
+ * ONE-SHOT: the draw fires ONCE on `play` (the `.completion-seal[data-play]` arm), then
+ * holds the static fully-drawn seal — no looping shimmer (the §6 calm register; the disco
+ * family stays gone). PRM-gated: under `prefers-reduced-motion: reduce` the seal appears
+ * instantly fully-drawn (`--seal-draw: 100%` snap), no stroke animation, no glint sweep
+ * (the seal is correct, the motion off — the vestibular floor).
+ *
+ * COMPOSITOR-ONLY: the draw rides `stroke-dashoffset` (a paint prop) + `transform` (the
+ * scale) + `filter`/`opacity` (the glint) — NO layout property animates
+ * (`proof:no-layout-animation` holds). The registrations live in
+ * tokens/property-regs.css §18 (the specular/border-progress split: the @property reg
+ * there, the consumption here). */
+
+.completion-seal {
+    /* The seal stroke ink — the EARNED-gold completion register (Q2). The runtime
+       cascade default is the token form: a consumer (or any ancestor) re-inking
+       `--phase-complete-color` re-inks the seal. The @property `initial-value` literal
+       light-gold is only the non-supporting-engine fallback. */
+    --seal-ink: var(--phase-complete-color, var(--color-gold));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* The settle scale rides the SPATIAL leg — a small overshoot on the seal's own
+       spring clock (NOT a generic --duration-*). Compositor-only (transform). */
+    transform: scale(var(--seal-scale, 1));
+}
+
+/* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
+   stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
+   fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
+.completion-seal__mark {
+    fill: none;
+    stroke: var(--seal-ink);
+    stroke-width: var(--seal-stroke-width, 6);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* The stroke-reveal: the dash array is the full path length, the offset rides the
+       `--seal-draw` extent (100% = drawn → offset 0; 0% = undrawn → offset = full
+       length). pathLength="100" normalizes the glyph so the wipe is path-agnostic. */
+    stroke-dasharray: 100;
+    stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%);
+    /* The one-pass gold glint on settle — the W-AX-METAL-GLOW catch-light, scaled by
+       `--seal-glint` (0 at rest → 1 on settle-pass). A drop-shadow halo of the seal's
+       OWN gold ink at the metal-glow radius/strength — composed, never re-authored.
+       The seal is NOT a `.metal-*` element, so the bare `--metal-glow-blur`/`-opacity`
+       (declared scoped inside `.metal-{gold,silver,bronze}`) do not cascade here; the
+       seal CONSUMES THE REGISTER by chaining to the `:root` `-default` retune seam
+       (glass-fx.css), NOT a hardcoded magic-number copy — a consumer who retunes
+       `--metal-glow-blur-default` re-tunes the seal halo in lockstep. */
+    --metal-glow-blur: var(--metal-glow-blur-default, 0.5em);
+    --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35);
+    filter: drop-shadow(
+        0 0
+        calc(var(--metal-glow-blur) * var(--seal-glint, 0))
+        color-mix(
+            in oklab,
+            var(--seal-ink),
+            transparent
+                calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%)
+        )
+    );
+}
+
+/* THE ONE-SHOT DRAW — fires ONCE on `play`, then holds static. PRM-gated: the whole
+   motion sits inside the no-preference gate (under reduce the seal is the static
+   fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
+   pass each on the stroke-reveal + the settle + the glint. */
+@media (prefers-reduced-motion: no-preference) {
+    .completion-seal[data-play] {
+        animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
+            var(--spring-bouncy) both;
+    }
+    .completion-seal[data-play] .completion-seal__mark {
+        animation:
+            completion-seal-draw var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out) both,
+            completion-seal-glint var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out)
+                var(--spring-snappy-duration, 0.34s) both;
+    }
+}
+
+/* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
+   editorial draw-on). The registered `--seal-draw` interpolates; the offset reads it. */
+@keyframes completion-seal-draw {
+    from {
+        --seal-draw: 0%;
+    }
+    to {
+        --seal-draw: 100%;
+    }
+}
+
+/* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
+   transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
+   (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */
+@keyframes completion-seal-settle {
+    from {
+        --seal-scale: 0.92;
+    }
+    to {
+        --seal-scale: 1;
+    }
+}
+
+/* The glint: a ONE-PASS gold catch-light sweep on settle (0 → peak → 0). NOT a loop —
+   a single pass, then the seal holds static at glint 0 (the metal-glow whisper is the
+   resting register; the disco family stays gone). */
+@keyframes completion-seal-glint {
+    0% {
+        --seal-glint: 0;
+    }
+    45% {
+        --seal-glint: 1;
+    }
+    100% {
+        --seal-glint: 0;
+    }
+}

package/src/styles/configurator.css

@@ -37,7 +37,12 @@
 .configurator-presets {
     padding-block: var(--configurator-preset-row-weight);
 }
-.configurator-presets [role="tablist"] {
+/* The gallery track gap — the toggle-button group (BD.W-CONFIG-GALLERY-DOCK
+ * retired the `role="tablist"`/`role="tab"` ARIA-contradiction for the
+ * toggle-button `role="group"` + `aria-pressed` pattern). The token drives the
+ * inter-tile rhythm. */
+.configurator-presets .configurator-gallery-track,
+.configurator-presets [role="group"] {
     gap: var(--configurator-preset-row-gap);
 }
 
@@ -75,3 +80,218 @@
 .configurator-footer {
     border-color: var(--configurator-divider);
 }
+
+/* 4. The DESKTOP TWO-COLUMN LAYOUT — controls on the RIGHT (BC.W-CONFIG-RIGHT).
+ *
+ * The configurator's own desktop grid was the next victim of the BA.W-EMISSION
+ * self-emission class (CLAUDE.md): the SFC carried the structural layout as a
+ * `lg:grid-cols-[minmax(0,1fr)_minmax(var(--configurator-aside-min,280px),var(--configurator-aside-max,360px))]`
+ * arbitrary utility — a `lg:` arbitrary bracket with NESTED `var()` + commas +
+ * `minmax()` that dies in a consumer's content-scan (the same failure that killed
+ * the Select collision-bound). So every studio rendered SINGLE-column (controls
+ * stacked BELOW the stage) on desktop: `getComputedStyle(cfg).gridTemplateColumns`
+ * read ONE `1131px` track at 1280px width, the aside below the stage, never right.
+ *
+ * The fix is the BA.W-EMISSION discipline: the structural layout lives in SHIPPED
+ * CSS as a precompiled rule scoped to `[data-slot="configurator"]`, NEVER
+ * load-bearing on a content-scan reach (the SAME mechanism the Select bound got in
+ * select.css). Below `lg` the base `grid grid-cols-1` + the mobile row template
+ * (emitted fine — a plain utility) keeps the single-column stack: stage above,
+ * controls below (a narrow viewport has no room for side-by-side). At `lg`+ this
+ * rule sets the two-column geometry off the SAME `--configurator-aside-{min,max}`
+ * token band (default 280px/360px, retunable via the `asideWidth` prop) the dead
+ * utility read — the token contract is byte-identical, only the MECHANISM moves
+ * onto shipped CSS. The explicit mobile rows reset to `none` so one auto row
+ * stretches to the taller column. */
+/* The MOBILE / base placement of the three section-level children (the gallery
+ * moved OUT of the aside to a grid sibling — BD.W-CONFIG-GALLERY-DOCK). Single
+ * column, three rows: gallery → stage → aside. The base `grid-template-rows`
+ * (`auto minmax(stage-min,auto) 1fr`) ships from the SFC; these rules pin each
+ * child to its row so the source order (gallery, stage, aside) reads correctly.
+ * When no gallery renders the `auto` row collapses to 0 (an empty track). */
+[data-slot="configurator"] > [data-gallery-dock] {
+    grid-row: 1;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-stage {
+    grid-row: 2;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-aside {
+    grid-row: 3;
+    grid-column: 1;
+}
+
+@media (min-width: 1024px) {
+    /* The DESKTOP TWO-COLUMN geometry. Two columns (stage 1fr | aside band) and
+     * two rows: the gallery row (auto) over the body row (1fr). The placement of
+     * the gallery dock is the ONLY thing the `data-gallery` axis swaps. */
+    [data-slot="configurator"] {
+        grid-template-columns: minmax(0, 1fr)
+            minmax(
+                var(--configurator-aside-min, 280px),
+                var(--configurator-aside-max, 360px)
+            );
+        grid-template-rows: auto minmax(0, 1fr);
+    }
+
+    /* data-gallery="aside" (the default, inspector idiom) — the gallery sits in
+     * the ASIDE column, row 1, above the controls; the stage spans BOTH rows on
+     * the left. Byte-equivalent to the legacy "preset row inside the aside top". */
+    [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-stage {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+
+    /* data-gallery="top" (the §2.1 reflow) — the gallery is a LARGE full-width
+     * dock spanning BOTH columns up-top; the stage (col 1) + controls (col 2)
+     * reclaim the full height in row 2. The gallery is now ~studio-width, not the
+     * 360px gutter — ~5 φ-tall tiles visible, horizontally scrollable. */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 1 / span 2;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-stage {
+        grid-row: 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+}
+
+/* The gallery-dock chrome divider — the hairline under the up-top dock / the
+ * left edge of the aside-placed dock. A dark-adaptive border off the same token
+ * the rest of the instrument reads, so it survives both glass plates. */
+[data-slot="configurator"] > [data-gallery-dock] {
+    border-color: var(--configurator-divider);
+}
+[data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+    border-bottom-width: 1px;
+}
+@media (min-width: 1024px) {
+    /* The up-top dock carries a bottom hairline; the aside-placed dock carries it
+     * too (above the controls). */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        border-bottom-width: 1px;
+    }
+}
+
+/* ── The WARM-GLASS gallery tiles + the device-free field-well ────────────────
+ * BD.W-CONFIG-GALLERY-DOCK §5/§B1. The tile is a `.glass-capsule` warm-glass cel
+ * (composed in the SFC class list) — the §3 colourful field reads THROUGH, never
+ * a flat opaque bg-card scrim. These rules add the GEOMETRY the capsule register
+ * doesn't carry: the φ-tall card shape, the rounded field-well, the active ring,
+ * the loading shimmer. No new material is minted — the transmissive composite is
+ * the shared `.glass-capsule`; the cartoon cast is the shared `.cartoon-cast`. */
+
+/* The big field-well tile (the PresetPickerRow / baked-thumbnail form). A φ-tall
+ * card: a 16:10 field-well crowned by a label band. The capsule register paints
+ * the warm-glass body; this rule sets the card radius + the column flex so the
+ * well meets the rounded crown with zero bg leak. */
+.configurator-preset-tile {
+    inline-size: clamp(160px, 22vw, 232px);
+    border-radius: var(--radius-card);
+    /* The capsule fill is a warm-glass PILL by default (--radius-pill); a TILE is
+     * a card, so re-point the geometry to the card radius here. The transmissive
+     * fill + rim + cast all carry from .glass-capsule. */
+}
+
+/* The §3 field-well — the device-free `auroraFallbackGround` background-image is
+ * set inline per tile; this rule sets the cover sizing + the rounded inner crown.
+ * The well is the COLOURFUL field; the warm-glass capsule frames it. */
+.configurator-preset-well {
+    background-size: cover;
+    background-position: center;
+    /* a smooth bilinear upscale of the tiny raster (the per-quadrant mean
+     * luminance is preserved — the certify band reads true). */
+    image-rendering: auto;
+}
+
+/* The loading state — a warm shimmer until the field build lands (the field
+ * build is synchronous + cheap, so this is a sub-frame flicker at most). */
+.configurator-preset-well.is-loading {
+    background-image: linear-gradient(
+        100deg,
+        color-mix(in oklab, var(--card) 84%, transparent) 30%,
+        color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%,
+        color-mix(in oklab, var(--card) 84%, transparent) 70%
+    );
+    background-size: 200% 100%;
+    animation: configurator-preset-shimmer 1.2s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+    .configurator-preset-well.is-loading {
+        animation: none;
+    }
+}
+@keyframes configurator-preset-shimmer {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
+}
+
+/* The active tile ring — a 2px foreground-keyed inset crown over the warm-glass
+ * cel (an inset ring never clips on the scroll axis, the PresetPickerRow note).
+ * Composes with the capsule's own rim; the cast deepens to `-lg` in the SFC. */
+.configurator-preset-tile.is-active {
+    box-shadow:
+        inset 0 0 0 2px var(--ring),
+        var(--shadow-cartoon-lg);
+}
+
+/* The compact CHIP form (the default fallback gallery — text-only preset pills).
+ * The capsule register paints the warm-glass body; this rule restores the pill
+ * radius the capsule already ships, and the active chip reads a selected fill via
+ * the `--glass-capsule-fill` override hook (no fork). */
+.configurator-preset-chip {
+    border-radius: var(--radius-pill);
+}
+.configurator-preset-chip.is-active {
+    /* the selected rung — re-point the capsule fill toward the quiet glass-tint
+     * selected register via the documented override hook (NO new composite). */
+    --glass-capsule-fill: var(--glass-bg-quiet);
+}
+
+/* 5. The SIDE FLIP — a data-attr, default RIGHT (BC.W-CONFIG-RIGHT).
+ *
+ * The aside side moves off the dead `lg:col-start-*` arbitrary utility (gated
+ * behind the same silent-JIT-failure class) onto a `data-aside-side` attr the SFC
+ * binds. `right` (the default) is the NATURAL source order — stage in column 1,
+ * aside in column 2 — so it needs NO override (the bare desktop rule above already
+ * places them left→right). `left` is the reversible taste-level flip: it swaps the
+ * grid-COLUMN targets so the aside paints on the LEFT, while the DOM/tab order
+ * stays stage→aside (the side is grid-cell PLACEMENT + border-side only, never an
+ * `order:`/`row-reverse` that would desync the visual order from the DOM reading
+ * order — WCAG 1.3.2/2.4.3 inviolate, the AM.W0 contract). Below `lg` (single
+ * column) neither side has meaning. */
+@media (min-width: 1024px) {
+    /* The flip swaps the two BODY columns (stage ↔ aside) while DOM/tab order stays
+     * gallery→stage→aside. The selectors carry `>`-child specificity to match the
+     * `data-gallery` placement rules above (which also use `>`); a bare descendant
+     * selector would lose the cascade to those and the flip would no-op. The aside
+     * keeps its body row (row 2); only the column target moves. The aside-placed
+     * gallery dock follows the aside to column 1. */
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-stage {
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-aside {
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"]
+        > [data-gallery-dock] {
+        grid-column: 1;
+    }
+}

package/src/styles/critical-partition.mjs

@@ -27,13 +27,22 @@
  * component recipes) — under the recorded gzip ceiling (W3).
  *
  * DEFERRED (./styles/deferred) — the below-the-fold + late-mount tail: every
- * component recipe + the transitions/animations/scroll-driven/view-transition
- * grammar + utilities + the menu/configurator/instrument-chassis/hover-popover/
- * drawer/segmented-tabs/select/icon-chip component partials, PLUS the folded SFC
- * `<style scoped>` payload (`../glass-ui.css`) and the emitted Tailwind
- * component-utility surface (`components.css`). These decorate components that
- * mount after first paint or sit below the fold; their late arrival shifts no
- * above-the-fold pixel (the FOUC-safe floor, W5).
+ * component recipe + the transitions/animations/scroll-driven/scroll-chrome/
+ * view-transition grammar + utilities + the menu/configurator/instrument-chassis/
+ * hover-popover/drawer/segmented-tabs/select/icon-chip/border-progress/
+ * completion-seal component partials, PLUS the folded SFC `<style scoped>`
+ * payload (`../glass-ui.css`) and the emitted Tailwind component-utility surface
+ * (`components.css`). These decorate components that mount after first paint or
+ * sit below the fold; their late arrival shifts no above-the-fold pixel (the
+ * FOUC-safe floor, W5). The BC-added `scroll-chrome.css` (the scroll-driven
+ * floating-CHROME collapse recipe — a late-mount surface decoration) and
+ * `completion-seal.css` (the one-shot earned-gold feedback seal — a focal opt-in
+ * surface that mounts on a completion event) are BOTH deferred: neither paints
+ * an above-the-fold first-paint chrome pixel. The BD-added `motion/morph-field.css`
+ * (the ONE `useMorphField` goo recipe — the body/neck/waist silhouette + the
+ * dedicated squish channel) is likewise DEFERRED: it is gated to `[data-morphing]`
+ * and paints only while a morph drive is live (a late-mount compositor decoration),
+ * never a steady-state first-paint chrome pixel.
  *
  * The `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
  * utilities pair with glass for paper-on-glass compositions that mount with the
@@ -63,8 +72,11 @@ export const DEFERRED_PARTIALS = Object.freeze([
     "floating-panel.css",
     "transitions.css",
     "animations.css",
+    "motion/morph-field.css",
+    "jubilance.css",
     "scroll-driven.css",
     "scroll-choreography.css",
+    "scroll-chrome.css",
     "view-transition.css",
     "utilities.css",
     "menu.css",
@@ -76,6 +88,7 @@ export const DEFERRED_PARTIALS = Object.freeze([
     "select.css",
     "icon-chip.css",
     "border-progress.css",
+    "completion-seal.css",
 ]);
 
 /**
@@ -133,8 +146,50 @@ export const DEFERRED_SOURCE_DIRECTIVE = '@source "../*.js";';
  * dark-arm + the on-glass-fg / surface-axis registers — all of which live in the
  * critical tokens/* + glass/* sub-partials by construction. Ceiling lifted
  * 110000 → 137000 (~4.2% headroom over the measured 131469, the profile-bundle
- * re-base convention) to carry the BB glass-band critical surface. The
- * render-block FLOOR stays W-LIGHTHOUSE's W3-arm-1 mobile-ms gate (the binding
- * perf truth); this ceiling guards against a recipe revert-toward-monolith.
+ * re-base convention) to carry the BB glass-band critical surface.
+ *
+ * RE-BASE (BC.W-CSS-CRITICAL — re-measured over the SETTLED BC cascade): the
+ * critical subset grew to raw 482228 / gzip 149748 — AGAIN not a component-recipe
+ * leak (the critical bucket is STILL the 6 documented token+glass+type partials;
+ * the BC visual bands 1-7 + 9 re-authored the critical tokens/* + glass/* sub-
+ * partials — the warm-cream page chassis tokens, the on-glass-fg/surface-axis
+ * registers, the calm/deep glass ladder, the scroll/motion token additions in
+ * scale-paper.css — all of which live in the critical token cascade by
+ * construction; the two BC-added PARTIALS scroll-chrome.css + completion-seal.css
+ * are bucketed DEFERRED, NOT critical). The critical subset is 47.3% of the
+ * settled monolith's resolved gzip (316614) — the spec's ~46% small-above-the-
+ * fold-subset bar HELD over the settled cascade. Ceiling re-pinned 137000 →
+ * 156000 (~4.2% headroom over the measured 149748, the profile-bundle re-base
+ * convention — the reviewed write, NEVER a silent component-recipe swallow to
+ * stay under the old number). The render-block FLOOR stays W-LIGHTHOUSE's
+ * W3-arm-1 mobile-ms gate (the binding perf truth); this ceiling guards against a
+ * recipe revert-toward-monolith.
+ *
+ * RE-BASE (BD greenfield band — re-measured over the SETTLED BD cascade): the
+ * critical subset grew to raw 561233 / gzip 174231 — AGAIN not a component-recipe
+ * leak into the critical BUCKET (the critical bucket is STILL the SAME 6 documented
+ * token+glass+type partials; w2 partials-disjoint + w4 hold, and the two recipe-shaped
+ * BD additions that COULD have leaked do NOT: `motion/morph-field.css` is bucketed
+ * DEFERRED, `glass-atom.css`/`glass-chip.css` are @import-ed by the DEFERRED
+ * `icon-chip.css` (not by `glass.css`), and `liquid-morph.css` is demo-only — it is
+ * @import-ed by NO src partial). The growth is the legitimate BD GREENFIELD enrichment
+ * of the critical TOKEN CASCADE + glass ladder, which lives in the critical tokens/* +
+ * glass/* sub-partials by construction: the NEW `tokens/property-regs.css` (the
+ * @property registrations a bare var() interpolates over), the `tokens/scheme-motion.css`
+ * --motion-weight × --ease-cartoon-punch motion grammar, the `tokens/shadow.css` cartoon
+ * cast rungs, the `tokens/dark-arm.css` dark-mode arms, the `tokens/glass.css` squish/tint
+ * axes, and the `tokens/glass-fx.css` / `tokens/scale-paper.css` page-chassis registers —
+ * all custom-property registers the chrome reads at first paint. The ONE borderline
+ * residual is `glass/liquid-enter.css` (a late-mount entrance @keyframes recipe, ~3.7KiB
+ * gzip) which rides `glass.css` over its `reveal.css` `--lq-enter-*` substrate; carving it
+ * to a deferred top-level partial is a structural cascade-order change reserved for the
+ * named BB.W-CSS-CRITICAL-INLINE successor (a triumvirate trigger, NOT a token-edit here),
+ * and it recovers only ~3.7KiB — the bucket would still sit ~170KiB, well over the old
+ * 156000. The critical subset is 49.5% of the settled monolith's resolved gzip — the
+ * spec's ~46% small-above-the-fold-subset bar HELD over the settled cascade. Ceiling
+ * re-pinned 156000 → 182000 (~4.5% headroom over the measured 174231, the profile-bundle
+ * re-base convention — the reviewed write, NEVER a silent component-recipe swallow). The
+ * render-block FLOOR stays W-LIGHTHOUSE's W3-arm-1 mobile-ms gate (the binding perf truth);
+ * this ceiling guards against a recipe revert-toward-monolith.
  */
-export const CRITICAL_GZIP_CEILING = 137000;
+export const CRITICAL_GZIP_CEILING = 182000;

package/src/styles/dock/adaptive-legibility.css

@@ -0,0 +1,119 @@
+/* dock/adaptive-legibility.css — the dock's ADAPTIVE-LEGIBILITY self-engage (carved
+ * from dock/morph.css to hold both partials under the 500-line no-god-module bound).
+ *
+ * This partial owns the darken-over-light legibility concern, distinct from the morph
+ * chrome: the unconditional `:where(.glass-dock)` self-engage (AZ.W-ADAPTIVE-AUTO), the
+ * continuous backdrop-luma tint clamp (BC.W-ADAPTIVE-RECONCILE), the BD.W-DOCK-CORE D2
+ * warm-chromatic dock ink, the ancestor `@container style(--glass-backdrop: light)`
+ * descendant bucket, the AX.W55 contrast-color() progressive refinement, and the
+ * BB.W-LIQUID-REVEAL / BC.W-DOCK-SHRINK-BLUR PRM reveal-blur carve.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components` as morph.css
+ * (the carve is isomorphic — same layer, source order preserved → ZERO visual delta). */
+
+@layer components {
+    /* ── Adaptive legibility: SELF-ENGAGE the dock over a light backdrop by default
+       (AZ.W-ADAPTIVE-AUTO Arm 1 — the literal G2 surface; "Glass dock over VERY
+       LIGHT materials is unreadable, darken DYNAMICALLY like iOS 27") ─────────────
+       The dock floats over WHATEVER the consumer painted — frequently a light/near-
+       white app surface (the canonical G2 case the user reported). AY.W-A11Y-PERF
+       O-1 set `--glass-backdrop: light` on the dock's OWN root (shell.css) intending
+       a self-darken, but CSS style queries NEVER self-match (the `@container
+       style()` block below reads an ANCESTOR — verified on Chrome 148), so the
+       self-declaration was a NO-OP. This `:where(.glass-dock)` rule is the genuine
+       UNCONDITIONAL self-engage — mirroring the overlay band's `ladder.css:169` —
+       re-pointing the INHERITING tint tokens DIRECTLY on the dock root so the
+       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers (which compose
+       the oklab tint AT THE ELEMENT — the substitution-vs-inheritance-safe targets)
+       darken toward warm-ink in lockstep. `--dock-fg-on-aurora` re-points to the
+       warm-ink here too — ONE reconciled path, the foreground twin folded in (it
+       reaches the dock CONTROLS' glyph/label color). Over a DARK page the darken is
+       sub-perceptual; a dark-substrate consumer opts out via `--glass-tint-strength:
+       0%` on the dock root. The morph-root interp (`.glass-dock:not(.vertical)`
+       above) stays `color-mix(in srgb …)` for the transition — the adaptive darken
+       rides its RESTING endpoint (`--glass-bg-dock`), the in-flight morph frames are
+       sub-perceptual (the ratified resting-endpoint-only default). The muted body
+       register lifts to the full warm-ink under the engaged plate (the muted L40
+       tier cannot clear 4.5:1 on a translucent darkened plate — darkening moves the
+       plate TOWARD muted's own luminance; the low-contrast muted register is
+       inappropriate over a busy glass plate, so it resolves to the legible dark
+       ink, which clears ~10:1). */
+    :where(.glass-dock) {
+        /* BD.W-DOCK-CORE (D2) — the dock self-engage reads the warm-CHROMATIC dock ink
+           (glass-fx.css), NOT the frozen global `--glass-tint-ink` (W-DARK-MATERIAL's
+           whole-system register). So the darken-over-light RAISES chroma toward a warm
+           material (H ≈ 62°, C ≈ 0.016 at AA) rather than dropping L with chroma flat (the
+           gray dock). ONE dock tint source, ONE global ink — file-line-disjoint. */
+        --glass-tint-source: var(--glass-tint-ink-dock);
+        /* BC.W-ADAPTIVE-RECONCILE — the dock JOINS the continuous observer driver (the
+           literal G2 surface: "darken DYNAMICALLY like iOS 27"). The dock's own
+           `useGlassBackdropLuminance` observer samples the threaded `:background-canvas`
+           (aurora/blob) and WRITES `--glass-backdrop-luma`; this clamp READS it and lerps
+           the plate from the warm-cream floor toward the ≤24% AA ceiling as the field
+           brightens past the knee — deepening over a bright bleed, lifting translucent over
+           a dark trough (the SAME clamp the content/overlay tiers get — ONE axis/driver/
+           signal; the discrete `@container` bucket RETIRED). Calm (luma ≤ knee) → floor. */
+        --glass-tint-strength: clamp(
+            var(--glass-tint-strength-floor),
+            calc(
+                var(--glass-tint-strength-floor) +
+                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+            ),
+            var(--glass-tint-strength-aa)
+        );
+        --dock-fg-on-aurora: var(--glass-tint-ink);
+        --muted-foreground: var(--foreground);
+    }
+
+    /* The ancestor-querying `@container` block KEPT — it reaches the DESCENDANT
+       nested-glass surfaces inside a dock when a consumer marks `--glass-backdrop:
+       light` on the dock's ancestor (the self-engage above re-points only the dock
+       root's own inheriting tokens; a consumer's explicit ancestor bucket still
+       cascades to nested glass through this block). */
+    @container style(--glass-backdrop: light) {
+        .glass-dock {
+            --glass-tint-source: var(--glass-tint-ink);
+            --glass-tint-strength: var(--glass-tint-strength-aa);
+            --dock-fg-on-aurora: var(--glass-tint-ink);
+        }
+    }
+
+    /* AX.W55 — the `contrast-color()` flip for the dock control foreground (Chrome
+       147+/Safari 26+; progressive enhancement, NEVER the load-bearing floor). The
+       declarative bucket above already carries AA on all engines (it darkens the dock
+       plate so the warm-dark `--dock-fg-on-aurora` clears ~17:1 over white at the 18%
+       floor). On a supporting engine `contrast-color()` REFINES the control ink,
+       anchored on the LIGHT BACKDROP signal (`--card`, the warm-white surface base the
+       bright bucket implies) — `contrast-color(var(--card))` resolves to the legible
+       DARK ink. Anchoring on the dark ink instead inverts to white (illegible on the
+       still-light dock plate), so the anchor is the light surface, matching the rung
+       refinement in glass.css. The bucket is the floor; this is the native pick. */
+    @supports (color: contrast-color(white)) {
+        /* The SELF-ENGAGED dock refinement (the unconditional self-engage above);
+           progressive enhancement only — the declarative darken is the AA floor. */
+        :where(.glass-dock) {
+            --dock-fg-on-aurora: contrast-color(var(--card));
+            --muted-foreground: contrast-color(var(--card));
+        }
+        @container style(--glass-backdrop: light) {
+            .glass-dock {
+                --dock-fg-on-aurora: contrast-color(var(--card));
+            }
+        }
+    }
+}
+
+/* BB.W-LIQUID-REVEAL — the dock-expand bloom beat's blur-settle is OFF under
+   `prefers-reduced-motion: reduce` (the vestibular floor): a reduced-motion dock reads
+   crisp at every state, no in-between blur frames.
+   BC.W-DOCK-SHRINK-BLUR — the self-blur is now gated to `[data-morphing]`, so the PRM
+   carve zeroes it on the ARMED scope too (specificity 0,2,0) — a PRM dock that briefly
+   arms `[data-morphing]` carries no 3px bloom; the resting `.glass-dock` is already
+   crisp by the re-gate. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-dock,
+    .glass-dock[data-morphing] {
+        --dock-reveal-blur: 0px;
+    }
+}