@mkbabb/glass-ui 4.0.0 → 4.1.0

package/src/styles/border-progress.css

@@ -0,0 +1,109 @@
+/* BB.W-BORDER-PROGRESS — progress IS the element's border.
+ *
+ * The masked-conic ring consumption (the registration lives in
+ * tokens/property-regs.css §18, mirroring the specular split: the @property reg
+ * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
+ * into the border band so ONLY the band paints AND it FOLLOWS the host
+ * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
+ * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
+ * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
+ * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
+ * not an opaque overlay).
+ *
+ * Compositor-only: the sweep rides the registered `--border-progress-fill`
+ * <percentage>; no layout property animates (`proof:no-layout-animation`). The
+ * unregistered fallback is safe (the `initial-value` paints the resting ring; the
+ * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
+ * 16.4+, within the deployment floor). */
+
+.border-progress {
+    position: relative;
+    display: block;
+    border-radius: var(--border-progress-radius, 16px);
+    /* The host reserves the border band the ring paints into (allocation-free —
+       the content box is untouched, no reflow). */
+    padding: 0;
+}
+
+/* The ring layer — inset over the host, the border band the conic paints into.
+   The `border` width IS the band thickness; the conic is mask-composited so the
+   padding-box (interior) is EXCLUDED from the border-box (the radius-following
+   cut-out). */
+.border-progress__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--border-progress-width, 12px) solid transparent;
+    pointer-events: none;
+    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
+       from the top (12 o'clock) clockwise to the fill fraction; past it is
+       transparent so the resting band shows ONLY the filled spectrum. */
+    background:
+        conic-gradient(
+            from 0deg,
+            var(--border-progress-spectrum, var(--section-color-7)),
+            transparent var(--border-progress-fill, 0%),
+            transparent 100%
+        );
+    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
+       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
+       which follows `border-radius` exactly (a border-image cannot). */
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
+}
+
+/* THE COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
+   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
+   bottom edge only; it composes WITH the border-band cut-out above (the mask
+   stack intersects), so the bottom register reuses the exact conic + radius
+   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
+.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    -webkit-mask-composite: xor, source-in;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    mask-composite: exclude, intersect;
+}
+
+/* The content box — the host's own surface (a glass card, a chassis). It is
+   untouched by the ring (backdrop-intact); the ring sits over the border band
+   only. */
+.border-progress__content {
+    position: relative;
+    z-index: 1;
+    border-radius: inherit;
+    height: 100%;
+}
+
+/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
+   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
+   new value). Compositor-only (filter brightness, never a layout property). */
+@media (prefers-reduced-motion: no-preference) {
+    .border-progress[data-milestone] .border-progress__ring {
+        animation: border-progress-milestone-pulse
+            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
+    }
+}
+
+@keyframes border-progress-milestone-pulse {
+    0% {
+        filter: brightness(1);
+    }
+    40% {
+        filter: brightness(1.35);
+    }
+    100% {
+        filter: brightness(1);
+    }
+}

package/src/styles/cards.css

@@ -17,6 +17,151 @@
     :where(.dark) .paper-texture {
         background-blend-mode: screen;
     }
+
+    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC sibling of `.paper-texture`.
+       Paints the two-frequency `--paper-grid-texture` engineering-grid as a
+       card's INTERIOR ground, clipped to the plate's own `border-radius`
+       automatically (a host `background-image`), so the math/grid brand pillar
+       reads THROUGH a document-register card at the ambient `--paper-grid-
+       opacity` — not only in the page margin an opaque plate occludes. A
+       decoration-only register (NOT a tier): it composes ON TOP of any glass/
+       paper tier, exactly like `.paper-texture` / `cartoon-surface` /
+       `veil-surface`.
+
+       BC.W-GRID-SIMPLE — the card-interior pitch UNIFIES onto the ONE
+       `--grid-*` rhythm source: `--paper-grid-texture-size` now reads
+       `var(--grid-pitch)` (scale-paper.css), retiring the prior 32px literal so
+       the demo page grid + this card interior share ONE pitch (the
+       two-parallel-28px/32px-systems fix). This card-interior register keeps its
+       OWN quieter ambient strength (`--paper-grid-opacity`), DISTINCT from the
+       full-bleed page-bg 3%/11% tier — a card interior reads softer than a page
+       wash. It is a host `background-image` only — NO `backdrop-filter`/`filter`
+       on this element, so the grid lines are NEVER convolved into the "blurry
+       mess" the page grid suffered (the de-blur discipline: the grid is the
+       card's own underlay, not a crisp grid read THROUGH a blurred glass plate).
+
+       THE SEAM (the two-pseudo-budget reveal, recorded — the Triumvirate's
+       through-glass-read locate-the-seam, NOT a token-α loop): a glass tier
+       already claims BOTH pseudos — `::before` is the moving-specular catch-
+       light (glass/material.css) and `::after` is the grain overlay
+       (glass/ladder.css). A `.paper-grid::after` would CLOBBER the grain's
+       `background-image` on the SAME single pseudo — so the grid + grain could
+       not compose (the orthogonality the spec requires). The grid therefore
+       rides the HOST element's `background-image` longhand: the glass tier's
+       `background:` SHORTHAND sets the translucent fill `background-color`, and
+       a later `background-image` longhand COEXISTS with that color (the image
+       paints OVER the color, UNDER the content + UNDER both pseudos), so the
+       grid is the card's own underlay felt THROUGH the glass tint with ZERO
+       pseudo contention — grain (`::after`) + specular (`::before`) + grid
+       (host bg-image) all paint at once. The host bg-image is clipped by the
+       host `border-radius` by construction (no `border-radius: inherit` pseudo
+       needed). A STATIC raster — gradient-stack `background-image`, one
+       compositor-cached paint, no per-frame repaint (the W6 paint-path
+       discipline). The ambient strength lives in the line-ink alpha (the
+       `--paper-grid-opacity`-scaled `--foreground` mix, scale-paper.css) since
+       a host bg-image has no independent layer-opacity — so ONE knob
+       (`--paper-grid-opacity`) still tunes the through-card strength. */
+    .paper-grid {
+        background-image: var(--paper-grid-texture);
+        background-repeat: repeat;
+        background-size:
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    /* The scheme-aware dark arm — PLAIN-ancestor `.dark` (NOT a scoped
+       `:global()`; the recurring scoped-global-drop trap, recorded; this is a
+       library CSS partial, but the discipline holds). The line ink is
+       `--foreground`-derived, so the warm-cream foreground flips dark→light in
+       the `.dark` block and the grid ink auto-lifts off the near-black `--card`
+       interior with NO parallel `--paper-grid-*-dark` family — only the BLEND
+       flips (light `multiply` → dark `screen`, the legible-on-dark equivalent
+       the `.paper-texture` dark arm uses). */
+    :where(.dark) .paper-grid,
+    .dark .paper-grid {
+        background-blend-mode: screen;
+    }
+}
+
+/* ═══════════════════════════════════════════════
+   A11y — the geometric grid honors the SAME transparency idiom the organic
+   paper register establishes (paper.css). A reduced-transparency user gets a
+   clean card interior, no texture; the static grid needs no motion gate (the
+   PRM block guards a future drift only). One a11y idiom, not a grid-local fork.
+   ═══════════════════════════════════════════════ */
+@media (prefers-reduced-transparency: reduce) {
+    .paper-grid {
+        background-image: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .paper-grid {
+        /* Static raster at rest; guard a future `@property` transform drift. */
+        animation: none !important;
+    }
+}
+
+/* ── Selection-card decoration (BC.W-SELECTION-CARD — the I5 selection card) ──────
+   The ONE new Atlas component, realized as a `<Card variant="selection">`
+   DECORATION (NOT a new SFC, NOT a new tier, NOT a new compositing seam). It
+   COMPOSES the two BUILT seams — the A-2 `--glass-accent` rim (glass/rim.css +
+   glass/material.css) + the A-3 `.metal-*-border` swept rim (utilities/metal.css)
+   — and authors ZERO competing rim/background recipe of its own. The rule is a
+   TOKEN-SUBSTITUTION on the base tier (the `.glass-opaque`/`.glass-deep` precedent):
+   it re-points the EXISTING `--glass-accent-strength` (+ an OPTIONAL sub-perceptual
+   floating-tier lift) locally; it does NOT declare a `background`/`border`.
+
+   THE RIM-NOT-FILL DISCIPLINE (the no-saturated-slab structural bar): selection is
+   read by (a) the metal rim (the `.metal-*-border` class Card composes when
+   `:selected`), (b) a BOUNDED accent-strength LIFT (unselected → selected, both ≤
+   the W-GLASS-ACCENT rim ceiling), and OPTIONALLY (c) a sub-perceptual
+   `--glass-bg-floating`-tier lift (the "selected reads as glass" register). The
+   plate STAYS warm-cream translucent — the BC.W-GLASS-IDENTITY floor is inviolate.
+   This rule NEVER writes `--glass-tint-source`/`--glass-tint-strength` (the A-2
+   distinct-axis fence — the accent is rim+glint DECORATION, not whole-plate
+   legibility) and NEVER paints a `--foreground`/`--primary`/`--surface-tint` opaque
+   plate FILL (the "selected = loud fill" anti-pattern is the disease-root the gate's
+   S3 bite reds).
+
+   THE ACCENT-STRENGTH LADDER (the bounded lift, two tokens a consumer retunes):
+     unselected → --selection-accent-strength            (~16% — a calm rim glow)
+     selected   → --selection-accent-strength-selected   (~28% — brighter at the rim,
+                  still ≤ the W-GLASS-ACCENT ceiling; the data hue reads stronger at
+                  the rim/glint, NOT a flooded plate)
+   The host (Card.vue) writes `--glass-accent` (the HUE) per-instance off `data-hue`;
+   this rule supplies the STRENGTH so the calm/selected lift is ONE source. An UNSET
+   `data-hue` leaves `--glass-accent: transparent` (the @property default), so even
+   with the strength engaged the `color-mix(in oklab, X, transparent N%)` === X — the
+   A-2 no-op floor: a `variant="selection"` card with no `data-hue` is byte-identical
+   to a bare Card. A consumer may override `--glass-accent-strength` per-instance
+   (Card.vue's `data-hue-strength`); this rule is the default. */
+[data-variant="selection"] {
+    /* The bounded accent-strength ladder — both ≤ the W-GLASS-ACCENT rim ceiling.
+       A consumer retunes the calm/selected pair from these two knobs. */
+    --selection-accent-strength: 16%;
+    --selection-accent-strength-selected: 28%;
+    /* Re-point the EXISTING accent-strength seam to the calm rung (the rim glow at
+       rest). At an unset `--glass-accent: transparent` this is a provable no-op. */
+    --glass-accent-strength: var(--selection-accent-strength);
+}
+
+[data-variant="selection"][data-selected="true"] {
+    /* SELECTED — lift the accent-strength to the brighter (still-bounded) rung. The
+       brighter rim + the `.metal-*-border` Card composes are the selection read; the
+       plate is UNTOUCHED (no background/fill here — rim-not-fill). */
+    --glass-accent-strength: var(--selection-accent-strength-selected);
+    /* OPTIONAL sub-perceptual "selected reads as glass" lift — re-point the base
+       tier's resting fill toward the floating rung (the W-REGISTER-IOS tier), a
+       TOKEN re-point, NOT a `--surface-tint` gray plate, NEVER a `--foreground`
+       brand fill. The plate stays warm-cream translucent (the floating rung is the
+       SAME warm-cream material at a heavier rung, the BC.W-GLASS-IDENTITY ladder). */
+    --glass-bg-resting: var(--glass-bg-floating, var(--glass-bg-resting));
 }
 
 /* ── Cartoon surface decoration ───────────────────────────────────

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

@@ -75,3 +75,58 @@
 .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. */
+@media (min-width: 1024px) {
+    [data-slot="configurator"] {
+        grid-template-columns: minmax(0, 1fr)
+            minmax(
+                var(--configurator-aside-min, 280px),
+                var(--configurator-aside-max, 360px)
+            );
+        grid-template-rows: none;
+    }
+}
+
+/* 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) {
+    [data-slot="configurator"][data-aside-side="left"] .configurator-stage {
+        grid-column-start: 2;
+    }
+    [data-slot="configurator"][data-aside-side="left"] .configurator-aside {
+        grid-column-start: 1;
+        grid-row-start: 1;
+    }
+}

package/src/styles/critical-partition.mjs

@@ -0,0 +1,162 @@
+/*
+ * critical-partition.mjs — the CRITICAL_PARTITION boundary manifest
+ * (BB.W-CSS-CRITICAL — the render-blocking `/styles` split).
+ *
+ * The SINGLE source of the critical/deferred partition of the resolved
+ * `@mkbabb/glass-ui/styles` draw. The build (vite.style-assets.ts
+ * publishStyleAssets) reads it to emit `dist/styles/critical.css` +
+ * `dist/styles/deferred.css`; the gate (scripts/proof-css-critical.mjs) reads
+ * it to assert the partition is byte-complete + manifest-driven. There is NO
+ * second hand-extracted critical block (W4 — the manifest is the sole source).
+ *
+ * The partition is drawn at the EXISTING thin-root-over-partials cascade
+ * boundary (AY.W-CSS1) — whole `src/styles/index.css` @import partials are
+ * bucketed, never a partial-content re-author (the partial CONTENTS are
+ * untouched; a cross-partial rule move is a triumvirate trigger, see the wave
+ * spec §Triumvirate). The two emitted files each @import their bucket's
+ * partials in the SAME cascade order the monolith index.css declares (load
+ * order is load-bearing), and CRITICAL loads BEFORE DEFERRED in the consumer
+ * so the deferred component recipes still cascade-correctly over the critical
+ * glass ladder.
+ *
+ * CRITICAL (./styles/critical) — the above-the-fold paint surface a consumer's
+ * FIRST PAINT requires: the whole token cascade (every visual axis is a custom
+ * property the chrome reads), the √φ typography scale + semantic type classes,
+ * the @theme aliases + the `.dark` variant selector, and the 5-rung glass
+ * ladder + specular/refract. Small (the token + ladder + type surface, not the
+ * 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/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 `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
+ * utilities pair with glass for paper-on-glass compositions that mount with the
+ * content surfaces (below-the-fold), not the chrome's first paint.
+ */
+
+/**
+ * The two non-fold buckets — each entry is a `src/styles/*.css` partial that the
+ * monolith `src/styles/index.css` @imports at the top level (lines 149-182).
+ * The order within each list mirrors the monolith's declared cascade order.
+ */
+export const CRITICAL_PARTIALS = Object.freeze([
+    "tokens.css",
+    "typography.css",
+    "theme.css",
+    "glass.css",
+    "glass-specular-track.css",
+    "glass-refract.css",
+]);
+
+export const DEFERRED_PARTIALS = Object.freeze([
+    "paper.css",
+    "dock.css",
+    "dock-controls.css",
+    "cards.css",
+    "feedback-tone.css",
+    "floating-panel.css",
+    "transitions.css",
+    "animations.css",
+    "scroll-driven.css",
+    "scroll-choreography.css",
+    "scroll-chrome.css",
+    "view-transition.css",
+    "utilities.css",
+    "menu.css",
+    "configurator.css",
+    "instrument-chassis.css",
+    "hover-popover.css",
+    "drawer.css",
+    "segmented-tabs.css",
+    "select.css",
+    "icon-chip.css",
+    "border-progress.css",
+    "completion-seal.css",
+]);
+
+/**
+ * The build-time folds that land in DEFERRED (NOT a `src/styles/*.css` partial;
+ * the publishStyleAssets folds appended to the dist copy of index.css). The SFC
+ * scoped payload (`../glass-ui.css`) + the Tailwind component-utility surface
+ * (`./components.css`) are below-the-fold component decoration — they MUST NOT
+ * leak into critical (the W2 byte-complete-in-one-bucket + W3 ceiling bite).
+ * Relative to `dist/styles/` (where critical.css/deferred.css are emitted).
+ */
+export const DEFERRED_FOLDS = Object.freeze([
+    "../glass-ui.css",
+    "./components.css",
+]);
+
+/**
+ * The `@source` build-scan backstop directive (the consumer-JIT content-scan
+ * reach for glass-ui's own component utilities — a backstop for the
+ * components.css self-emit). It backstops the DEFERRED component utilities, so
+ * it rides DEFERRED. The value is the exact directive the monolith index.css
+ * carries (re-grounded at HEAD: `@source "../*.js";`).
+ */
+export const DEFERRED_SOURCE_DIRECTIVE = '@source "../*.js";';
+
+/**
+ * The recorded critical-subset gzip ceiling (bytes), measured on the FULLY
+ * RESOLVED consumer draw (the critical partials' @import roots resolved
+ * RECURSIVELY through their nested tokens/* + glass/* sub-partials — the real
+ * first-paint byte a consumer's bundler emits, NOT the one-level approximation
+ * profile-bundle uses for the monolith budget). The committed, reviewed
+ * baseline (the profile-bundle read-baseline discipline): a regression that
+ * folds a component recipe back into critical climbs the emitted critical.css
+ * resolved gzip over this → RED (W3). Re-base via the gate's `--rebaseline`
+ * flag with a recorded rationale, never silently.
+ *
+ * Measured at this authoring (HEAD bdbcd479, post-build): the critical subset
+ * resolved to raw 347266 / gzip 105460 — the token cascade (tokens.css gzip
+ * ~62KiB) + the 5-rung glass ladder (glass.css gzip ~27KiB) + typography +
+ * theme + specular/refract. It is roughly half the monolith's fully-resolved
+ * gzip (~230KiB), so the deferred tail (component recipes + SFC scoped payload
+ * + components.css utility surface, ~125KiB gzip) loads NON-blocking after
+ * first paint — the render-block win. The ceiling carries ~4% headroom over
+ * the measured baseline (the profile-bundle re-base convention). If the
+ * re-measured render-block under W-LIGHTHOUSE shows this critical subset is
+ * STILL over the mobile-ms floor, the inline-critical-head-block path routes to
+ * the named BB.W-CSS-CRITICAL-INLINE successor (a triumvirate trigger, NOT a
+ * token-value edit here).
+ *
+ * RE-BASE (BB liquid-glass band): the critical subset grew to raw 427015 / gzip
+ * 131469 — NOT a component-recipe leak (the critical bucket is still the 6
+ * documented token+glass+type partials; w2 partials-disjoint + w4 hold), but the
+ * legitimate GROWTH of the critical token cascade + glass ladder by the BB
+ * liquid-glass band: the deep-glass token family (tokens/glass-deep.css), the
+ * --glass-accent rim axis, the W-LENSING refract evolution, the W-DARK-MATERIAL
+ * 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.
+ *
+ * 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.
+ */
+export const CRITICAL_GZIP_CEILING = 156000;