@mkbabb/glass-ui 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -19,6 +19,9 @@
             "tokens": [
                 "dist/tokens.d.ts"
             ],
+            "deck": [
+                "dist/deck.d.ts"
+            ],
             "dock": [
                 "dist/dock.d.ts"
             ],
@@ -67,6 +70,9 @@
             "canvas": [
                 "dist/canvas.d.ts"
             ],
+            "virtual": [
+                "dist/virtual.d.ts"
+            ],
             "color": [
                 "dist/color.d.ts"
             ],
@@ -88,6 +94,15 @@
             "dot-flow-field": [
                 "dist/dot-flow-field.d.ts"
             ],
+            "paper-grid": [
+                "dist/paper-grid.d.ts"
+            ],
+            "dot-matrix": [
+                "dist/dot-matrix.d.ts"
+            ],
+            "goo-dot-matrix": [
+                "dist/goo-dot-matrix.d.ts"
+            ],
             "goo-blob": [
                 "dist/goo-blob.d.ts"
             ],
@@ -118,6 +133,12 @@
             "toggle-chip": [
                 "dist/toggle-chip.d.ts"
             ],
+            "selectable-chip": [
+                "dist/selectable-chip.d.ts"
+            ],
+            "completion-seal": [
+                "dist/completion-seal.d.ts"
+            ],
             "spa-view": [
                 "dist/spa-view.d.ts"
             ],
@@ -283,6 +304,10 @@
         "./styles/fonts": "./dist/styles/fonts.css",
         "./styles.css": "./dist/glass-ui.css",
         "./fonts/*": "./dist/fonts/*",
+        "./deck": {
+            "types": "./dist/deck.d.ts",
+            "import": "./dist/deck.js"
+        },
         "./dock": {
             "types": "./dist/dock.d.ts",
             "import": "./dist/dock.js"
@@ -347,6 +372,10 @@
             "types": "./dist/canvas.d.ts",
             "import": "./dist/canvas.js"
         },
+        "./virtual": {
+            "types": "./dist/virtual.d.ts",
+            "import": "./dist/virtual.js"
+        },
         "./color": {
             "types": "./dist/color.d.ts",
             "import": "./dist/color.js"
@@ -375,6 +404,18 @@
             "types": "./dist/dot-flow-field.d.ts",
             "import": "./dist/dot-flow-field.js"
         },
+        "./paper-grid": {
+            "types": "./dist/paper-grid.d.ts",
+            "import": "./dist/paper-grid.js"
+        },
+        "./dot-matrix": {
+            "types": "./dist/dot-matrix.d.ts",
+            "import": "./dist/dot-matrix.js"
+        },
+        "./goo-dot-matrix": {
+            "types": "./dist/goo-dot-matrix.d.ts",
+            "import": "./dist/goo-dot-matrix.js"
+        },
         "./goo-blob": {
             "types": "./dist/goo-blob.d.ts",
             "import": "./dist/goo-blob.js"
@@ -427,6 +468,14 @@
             "types": "./dist/toggle-chip.d.ts",
             "import": "./dist/toggle-chip.js"
         },
+        "./selectable-chip": {
+            "types": "./dist/selectable-chip.d.ts",
+            "import": "./dist/selectable-chip.js"
+        },
+        "./completion-seal": {
+            "types": "./dist/completion-seal.d.ts",
+            "import": "./dist/completion-seal.js"
+        },
         "./spa-view": {
             "types": "./dist/spa-view.d.ts",
             "import": "./dist/spa-view.js"
@@ -646,6 +695,7 @@
         "proof:perf-producer": "node scripts/proof-perf-producer.mjs",
         "proof:phantom-classes": "node scripts/proof-phantom-classes.mjs",
         "proof:vt-names": "node scripts/proof-vt-names.mjs",
+        "proof:deck": "node scripts/proof-deck.mjs",
         "proof:dock-animation-live": "node scripts/proof-dock-animation-live.mjs",
         "proof:dock-rail-cohesion": "node scripts/proof-dock-rail-cohesion.mjs",
         "proof:dock-lockstep-bornred": "node scripts/proof-dock-lockstep-bornred.mjs",
@@ -665,14 +715,12 @@
         "proof:dock-no-scale-pop": "node scripts/proof-dock-no-scale-pop.mjs",
         "proof:dock-tap-integrity": "node scripts/proof-dock-tap-integrity.mjs",
         "proof:dock-taxonomy": "node scripts/proof-dock-taxonomy.mjs",
-        "proof:rail-extend": "node scripts/proof-rail-extend.mjs",
         "proof:dock-contextual-layers": "node scripts/proof-dock-contextual-layers.mjs",
         "proof:morph-showcase": "node scripts/proof-morph-showcase.mjs",
         "proof:blob-page": "node scripts/proof-blob-page.mjs",
         "proof:blob-page-fence": "node scripts/proof-blob-page-fence.mjs",
         "proof:motion-demo": "node scripts/proof-motion-demo.mjs",
         "proof:motion2": "node scripts/proof-motion2.mjs",
-        "proof:rail3": "node scripts/proof-rail3.mjs",
         "proof:dock-sections": "node scripts/proof-dock-sections.mjs",
         "proof:dock-morph-insitu": "node scripts/proof-dock-morph-insitu.mjs",
         "proof:shell-hold": "node scripts/proof-shell-hold.mjs",
@@ -817,9 +865,6 @@
         "proof:constellation-tokens": "node scripts/proof-constellation-tokens.mjs",
         "proof:constellation-warp-live": "node scripts/proof-constellation-warp-live.mjs",
         "proof:constellation-egg-live": "node scripts/proof-constellation-egg-live.mjs",
-        "proof:constellation-freeze-live": "node scripts/proof-constellation-freeze-live.mjs",
-        "proof:fourier-field-intensity": "node scripts/proof-fourier-field-intensity.mjs",
-        "proof:fourier-field-visibility-live": "node scripts/proof-fourier-field-visibility-live.mjs",
         "proof:constellation-refit-live": "node scripts/proof-constellation-refit-live.mjs",
         "proof:canvas2d-substrate": "vitest run tests/composables/glass/canvas2d/useCanvas2D.test.ts",
         "proof:resolve-canvas-color": "vitest run tests/composables/glass/canvas2d/resolveCanvasColor.test.ts",
@@ -871,7 +916,6 @@
         "proof:config-chassis": "node scripts/proof-config-chassis.mjs",
         "proof:progress-gradient": "node scripts/proof-progress-gradient.mjs",
         "proof:demo-affordances": "node scripts/proof-demo-affordances.mjs",
-        "proof:fourier-studio": "node scripts/proof-fourier-studio.mjs",
         "proof:dark-semantic-contrast": "node scripts/proof-dark-semantic-contrast.mjs",
         "proof:glass-material-demo": "node scripts/proof-glass-material-demo.mjs",
         "proof:blob-live-truth": "node scripts/proof-blob-live-truth.mjs",
@@ -906,6 +950,82 @@
         "proof:gen-ci-fresh": "node scripts/proof-gen-ci-fresh.mjs",
         "proof:gate-manifest-sound": "node scripts/proof-gate-manifest-sound.mjs",
         "proof:ba-gestalt": "node scripts/proof-ba-gestalt.mjs",
+        "proof:bc-fold-ledger": "node scripts/proof-bc-fold-ledger.mjs",
+        "proof:observer-loop": "node scripts/proof-observer-loop.mjs",
+        "proof:black-bar": "node scripts/proof-black-bar.mjs",
+        "proof:glass-identity": "node scripts/proof-glass-identity.mjs",
+        "proof:adaptive-reconcile": "node scripts/proof-adaptive-reconcile.mjs",
+        "proof:glass-legibility": "node scripts/proof-glass-legibility.mjs",
+        "proof:no-shadcn-default": "node scripts/proof-no-shadcn-default.mjs",
+        "proof:glass-prune": "node scripts/proof-glass-prune.mjs",
+        "proof:selection-card": "node scripts/proof-selection-card.mjs",
+        "proof:dialog-glass": "node scripts/proof-dialog-glass.mjs",
+        "proof:glass-glow-fix": "node scripts/proof-glass-glow-fix.mjs",
+        "proof:accent-tone": "node scripts/proof-accent-tone.mjs",
+        "proof:motion-one-clock": "node scripts/proof-motion-one-clock.mjs",
+        "proof:spring-ease": "node scripts/proof-spring-ease.mjs",
+        "proof:affordance-map": "node scripts/proof-affordance-map.mjs",
+        "proof:tunable-anim": "node scripts/proof-tunable-anim.mjs",
+        "proof:split-chars": "node scripts/proof-split-chars.mjs",
+        "proof:motion-presets": "node scripts/proof-motion-presets.mjs",
+        "proof:dock-engine": "node scripts/proof-dock-engine.mjs",
+        "proof:dock-arbitrary": "node scripts/proof-dock-arbitrary.mjs",
+        "proof:dock-shrink-blur": "node scripts/proof-dock-shrink-blur.mjs",
+        "proof:liquid-morph": "node scripts/proof-liquid-morph.mjs",
+        "proof:dock-vertical-clickable": "node scripts/proof-dock-vertical-clickable.mjs",
+        "proof:dock-collapsed-both": "node scripts/proof-dock-collapsed-both.mjs",
+        "proof:dock-stack-rail": "node scripts/proof-dock-stack-rail.mjs",
+        "proof:dock-cockpit": "node scripts/proof-dock-cockpit.mjs",
+        "proof:tabs-ios": "node scripts/proof-tabs-ios.mjs",
+        "proof:liquid-tab": "node scripts/proof-liquid-tab.mjs",
+        "proof:underline-tune": "node scripts/proof-underline-tune.mjs",
+        "proof:virtual-window": "node scripts/proof-virtual-window.mjs",
+        "proof:toc-reconcile": "node scripts/proof-toc-reconcile.mjs",
+        "proof:fuzzy-harden": "node scripts/proof-fuzzy-harden.mjs",
+        "proof:customizability-census": "node scripts/proof-customizability-census.mjs",
+        "proof:search-custom": "node scripts/proof-search-custom.mjs",
+        "proof:metric-hover": "node scripts/proof-metric-hover.mjs",
+        "proof:fourier-decides": "node scripts/proof-fourier-decides.mjs",
+        "proof:tier-class-staleness": "node scripts/proof-tier-class-staleness.mjs",
+        "proof:radio-fix": "node scripts/proof-radio-fix.mjs",
+        "proof:dropdown-fix": "node scripts/proof-dropdown-fix.mjs",
+        "proof:control-smooth": "node scripts/proof-control-smooth.mjs",
+        "proof:config-right": "node scripts/proof-config-right.mjs",
+        "proof:completion-seal": "node scripts/proof-completion-seal.mjs",
+        "proof:webgpu-everywhere": "node scripts/proof-webgpu-everywhere.mjs",
+        "proof:safari-webgl": "node scripts/proof-safari-webgl.mjs",
+        "proof:viz-interaction": "node scripts/proof-viz-interaction.mjs",
+        "proof:viz-choreography": "node scripts/proof-viz-choreography.mjs",
+        "proof:visual-reconcile": "node scripts/proof-visual-reconcile.mjs",
+        "proof:viz-aurora": "node scripts/proof-viz-aurora.mjs",
+        "proof:gooblob-plain": "node scripts/proof-gooblob-plain.mjs",
+        "proof:gooblob-plain:source": "node scripts/proof-gooblob-plain.mjs --source",
+        "proof:gooblob-meatball": "node scripts/proof-gooblob-meatball.mjs",
+        "proof:gooblob-meatball:source": "node scripts/proof-gooblob-meatball.mjs --source",
+        "proof:viz-hybrid": "node scripts/proof-viz-hybrid.mjs",
+        "proof:page-prune": "node scripts/proof-page-prune.mjs",
+        "proof:demo-copy-prune": "node scripts/proof-demo-copy-prune.mjs",
+        "proof:page-chassis": "node scripts/proof-page-chassis.mjs",
+        "proof:fourier-field": "node scripts/proof-fourier-field.mjs",
+        "proof:viz-constellation": "node scripts/proof-viz-constellation.mjs",
+        "proof:viz-dotflow": "node scripts/proof-viz-dotflow.mjs",
+        "proof:viz-papergrid": "node scripts/proof-viz-papergrid.mjs",
+        "proof:dot-matrix": "node scripts/proof-dot-matrix.mjs",
+        "proof:teal-navy-purge": "node scripts/proof-teal-navy-purge.mjs",
+        "proof:page-hierarchy": "node scripts/proof-page-hierarchy.mjs",
+        "proof:grid-simple": "node scripts/proof-grid-simple.mjs",
+        "proof:ghost-dashed": "node scripts/proof-ghost-dashed.mjs",
+        "proof:hero-audacious": "node scripts/proof-hero-audacious.mjs",
+        "proof:code-blocks": "node scripts/proof-code-blocks.mjs",
+        "proof:separator-fix": "node scripts/proof-separator-fix.mjs",
+        "proof:compositions-hero": "node scripts/proof-compositions-hero.mjs",
+        "proof:expandable-part": "node scripts/proof-expandable-part.mjs",
+        "proof:scroll-trigger": "node scripts/proof-scroll-trigger.mjs",
+        "proof:scroll-chrome": "node scripts/proof-scroll-chrome.mjs",
+        "proof:dock-search": "node scripts/proof-dock-search.mjs",
+        "proof:viz-configurator-suite": "node scripts/proof-viz-configurator-suite.mjs",
+        "proof:storybook-meta": "node scripts/proof-storybook-meta.mjs",
+        "proof:bp-lazy": "node scripts/proof-bp-lazy.mjs",
         "proof:visual-runner": "node scripts/proof-visual-runner.mjs",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
         "gates:emit-ci": "node scripts/gates.mjs --emit-ci",

package/src/styles/animations.css

@@ -207,14 +207,24 @@
     /* AX.W57 (P6) — the aura breath reads its OWN element-opacity range
        (`--pulse-aura-breath-{min,max}`, 0.28↔0.42), decoupled from the
        shared `--pulse-aura-opacity-*` skeleton-shimmer stops so the halo
-       breathes as an ambient wash, never up to the 0.95 shimmer peak. */
+       breathes as an ambient wash, never up to the 0.95 shimmer peak.
+
+       BC.W-GLASS-GLOW-FIX (Atlas A-8 root) — the breath SCALE is driven via the
+       `--pulse-aura-breath-scale` registered custom property (a `<number>`, typed
+       in property-regs.css so it INTERPOLATES per-frame), NOT a `transform: scale()`
+       on `.pulse-aura` itself. The `.pulse-aura::before` child reads the scale; the
+       `.pulse-aura` element stays UNSCALED at `inset:0` as the `overflow: clip`
+       boundary. Scaling the CHILD (clipped by the unscaled parent) is what makes the
+       1.15× peak STAY inside the host box — scaling the clip element itself scaled the
+       clip rect too, so the radial escaped (the prior incomplete fix). The element-
+       opacity breath stays HERE (it does not change geometry). */
     0%,
     100% {
-        transform: scale(var(--animate-ambient-pulse-scale-min, 1));
+        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-min, 1);
         opacity: var(--pulse-aura-breath-min, 0.28);
     }
     50% {
-        transform: scale(var(--animate-ambient-pulse-scale-max, 1.15));
+        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-max, 1.15);
         opacity: var(--pulse-aura-breath-max, 0.42);
     }
 }

package/src/styles/cards.css

@@ -28,6 +28,18 @@
        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-
@@ -95,6 +107,63 @@
     }
 }
 
+/* ── 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 ───────────────────────────────────
    The Memphis-sticker register. Composes ON TOP of a glass tier — it is
    NOT itself a tier. The former `.glass-cartoon` recipe declared

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

@@ -27,13 +27,18 @@
  * 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 `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
  * utilities pair with glass for paper-on-glass compositions that mount with the
@@ -65,6 +70,7 @@ export const DEFERRED_PARTIALS = Object.freeze([
     "animations.css",
     "scroll-driven.css",
     "scroll-choreography.css",
+    "scroll-chrome.css",
     "view-transition.css",
     "utilities.css",
     "menu.css",
@@ -76,6 +82,7 @@ export const DEFERRED_PARTIALS = Object.freeze([
     "select.css",
     "icon-chip.css",
     "border-progress.css",
+    "completion-seal.css",
 ]);
 
 /**
@@ -133,8 +140,23 @@ 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.
  */
-export const CRITICAL_GZIP_CEILING = 137000;
+export const CRITICAL_GZIP_CEILING = 156000;