@mkbabb/glass-ui 4.0.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "4.0.1",
+    "version": "4.2.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,15 +715,19 @@
         "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:dock-fission": "node scripts/proof-dock-fission.mjs",
+        "proof:dock-gallery": "node scripts/proof-dock-gallery.mjs",
+        "proof:metaball-bridge2": "node scripts/proof-metaball-bridge2.mjs",
+        "proof:haptic-couple": "node scripts/proof-haptic.mjs",
+        "proof:celebration-burst": "node scripts/proof-celebration-burst.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-context": "node scripts/proof-dock-context.mjs",
         "proof:dock-morph-insitu": "node scripts/proof-dock-morph-insitu.mjs",
         "proof:shell-hold": "node scripts/proof-shell-hold.mjs",
         "proof:az-reflect": "node scripts/proof-az-reflect.mjs",
@@ -708,6 +762,7 @@
         "proof:spa-view": "node scripts/proof-spa-view.mjs",
         "proof:card-tier-alpha": "node scripts/proof-card-tier-alpha.mjs",
         "proof:dockmorph-cta": "node scripts/proof-dockmorph-cta.mjs",
+        "proof:bloom-up": "node scripts/proof-bloom-up.mjs",
         "proof:gpu-substrate-single": "node scripts/proof-gpu-substrate-single.mjs",
         "proof:desktop-reserve": "node scripts/proof-desktop-reserve.mjs",
         "proof:pointer-velocity": "node scripts/proof-pointer-velocity.mjs",
@@ -817,9 +872,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",
@@ -855,6 +907,7 @@
         "proof:dark-material": "node scripts/proof-dark-material.mjs",
         "proof:no-gray": "node scripts/proof-no-gray.mjs",
         "proof:surface-axis": "node scripts/proof-surface-axis.mjs",
+        "proof:glass-foundation": "node scripts/proof-glass-foundation.mjs",
         "proof:menu-glass": "node scripts/proof-menu-glass.mjs",
         "proof:pager-ring": "node scripts/proof-pager-ring.mjs",
         "proof:icon-chip": "node scripts/proof-icon-chip.mjs",
@@ -871,7 +924,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 +958,85 @@
         "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-rail-realize": "node scripts/proof-dock-rail-realize.mjs",
+        "proof:dock-cockpit": "node scripts/proof-dock-cockpit.mjs",
+        "proof:tabs-ios": "node scripts/proof-tabs-ios.mjs",
+        "proof:aria-orientation": "node scripts/proof-aria-orientation.mjs",
+        "proof:dock-a11y": "node scripts/proof-dock-a11y.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",
@@ -922,7 +1053,7 @@
     },
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^4.0.0",
+        "@mkbabb/keyframes.js": "^5.0.0",
         "@mkbabb/pencil-boil": "^0.4.1",
         "@mkbabb/value.js": "^0.13.0 || ^1.0.0",
         "@vueuse/core": "^14.0",
@@ -960,7 +1091,7 @@
     },
     "devDependencies": {
         "@lucide/vue": "^1.20.0",
-        "@mkbabb/keyframes.js": "^4.3.0",
+        "@mkbabb/keyframes.js": "^5.1.0",
         "@mkbabb/pencil-boil": "^0.4.1",
         "@mkbabb/value.js": "^0.13.0 || ^1.0.0",
         "@tailwindcss/postcss": "^4.3.1",

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

@@ -6,6 +6,122 @@
  * only the 5-rung glass ladder. */
 
 @layer components {
+    /* ── BD.W-CARD-MATERIAL-FLOOR — the card-surface warm tint-seam enrollment ──
+       The §4 leg-(a) material floor, reconciled to the SHIPPED `--glass-tint-*`
+       seam (NOT a fork, NOT a global re-tint). The card's glass/cartoon surfaces
+       ride the `.glass-${tier}` ladder rung, whose fill is already
+       `color-mix(in oklab, --glass-bg-${tier}, --glass-tint-source --glass-tint-
+       strength)` (ladder.css) — so the card reaches the warm floor by setting a
+       CARD-LOCAL non-zero `--glass-tint-strength` (the global default at
+       surface-axis.css:83 stays `0%`, so the 6 other seam-readers — drawer / menu /
+       veil / jubilance / .btn-glass / .segmented-indicator — are byte-unchanged:
+       the blast-radius bite). `--glass-tint-source` defaults to `var(--card)` (a
+       warm cream, glass-fx.css:158), so the floor is warm by construction in BOTH
+       modes. The card clears the warm-chroma floor (C ≥ 0.02 warm) in the MATERIAL
+       itself — before the field even lands, and on a dead ground (print / reduced-
+       transparency), the "far too gray" verdict closes at the material layer.
+
+       SCOPE — `[data-surface]` is `glass` or `cartoon` (NOT `veil`: veil owns its
+       own `--veil-bg` tint seam below; NOT `opaque`: the solid `--card` plate is
+       already warm-cream). The strength is set on the host so it inherits into the
+       rung's `color-mix`. This is a card-local re-point of the SHIPPED seam — DRY,
+       no second compositing axis, the ladder rung does the mix. */
+    [data-slot="card"]:where(
+        [data-surface="glass"],
+        [data-surface="cartoon"]
+    ) {
+        --glass-tint-strength: 8%;
+        /* BD.W-CARD-CEL-MOTION (§3.1) — the defined-edge border-ink floor. The
+           ladder rung's `--glass-border-resting`/`-quiet` ink is 4% warm
+           (glass.css:331-332) — it vanishes cream-on-cream (K3 RED). Floor the
+           card's own border-ink UP to ≥8% warm-ink so the cel reads as a defined
+           SHAPE (WCAG 1.4.11 non-text). `--glass-border-rung` is the per-rung ink
+           the accent-composed `--glass-border-accent` reads (ladder.css /
+           surfaces.css); re-pointing it card-locally floors the border WITHOUT
+           forking the rim (the keyed two-stop rim from `--glass-material-rim` is
+           CONSUMED unchanged — the card does NOT re-mint a rim). Warm (the
+           `--foreground` mix is warm-cream in both modes); the `.dark` ink lifts
+           off the near-black field through the same `--foreground` flip. */
+        --glass-border-rung: color-mix(in srgb, var(--foreground) 9%, transparent);
+    }
+
+    /* BD.W-CARD-CEL-MOTION (§3.2) — the inner catch-light over the field. A faint
+       `screen`-blended warm catch sits where the upper-right `--glass-key` sun
+       hits, lifting the cel off the field (the §3 layer-4 catch, coherent with the
+       rim + cast — ONE key). It rides the host `background-image` stack ALONGSIDE
+       the field underlayer (both are static gradients in the same longhand; the
+       catch is the FIRST layer so it sits over the warm underlayer), so it adds NO
+       pseudo (`::before` = moving specular, `::after` = grain — both occupied).
+       `screen` lifts only where there is light, never darkening — and it is below
+       content + clipped to the host radius, so it never washes the text column
+       (the K-AA carve). Under `prefers-contrast: more` the screen blend is dropped
+       (the catch is decoration, the edge is the legibility asset). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-blend-mode: screen, normal;
+    }
+    @media (prefers-contrast: more) {
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+            background-blend-mode: normal;
+        }
+    }
+
+    /* ── BD.W-CARD-FIELD-FLOOR — the orphan-card static warm field underlayer ──
+       The §2 leg-(b) structural contract, card-local fallback. The COMMON case is
+       ancestor-supplied: the page mounts ONE global `[data-paper-field]` plane
+       (AppShell) behind every route, and the card composites over it. The ORPHAN
+       case is a card in an OCCLUDING context an ancestor field cannot reach (a
+       dialog / drawer / portal that paints its own opaque ground over the page
+       field) — there the card mounts its OWN cheap static warm underlayer so it is
+       NEVER gray-over-nothing wherever it is dropped.
+
+       MECHANISM — ONE static `radial-gradient` on the host `background-image`
+       longhand (the proven `.paper-grid` coexistence seam: a later
+       `background-image` COEXISTS with the glass tier's `background:` shorthand
+       fill — paints OVER the translucent color, UNDER content + UNDER both
+       pseudos, clipped to the host `border-radius` by construction). Zero JS, one
+       compositor-cached paint, PRM-static. The warm 0-alpha stops are explicit
+       `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit black-premultiply
+       hole, build-trap-(d)).
+
+       THE NO-DOUBLE-PAINT GATE (the presence-BEHIND check, NOT `closest()`): the
+       fallback paints ONLY when NO `[data-paper-field]` ancestor is present — `:where(
+       [data-paper-field]) &` switches it OFF under the global field, so a card over
+       the page field reads the page field (no local underlayer), and a 50-card grid
+       under ONE ancestor field is ONE field paint, not N. A `cartoon`/`opaque`
+       card already carries a defined edge + warm fill, so the orphan field is the
+       glass-surface case; `surface="glass"` only (the orphan glass card is the one
+       that reads gray-over-nothing). The `.paper-grid` document register is EXCLUDED
+       by selector (it sets its own grid `background-image` underlayer — a grid card
+       opts out of the warm-field fallback, not a `background-image: none` race). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        /* TWO static layers in ONE longhand (blended by the `background-blend-mode`
+           above — `screen, normal`): (1) the upper-right KEYED catch-light (warm,
+           `screen`-blended so it only LIFTS — the §3 catch), then (2) the warm cel
+           UNDERLAYER (one radial, amber-key toward the upper-right `--glass-key`,
+           the field fallback). Both fade to a warm 0-alpha — NEVER bare
+           `transparent` (the WebKit black-premultiply hole, build-trap-(d)). */
+        background-image:
+            radial-gradient(
+                60% 55% at 80% 16%,
+                oklch(0.96 0.04 78 / 0.5),
+                oklch(0.96 0.04 78 / 0) 72%
+            ),
+            radial-gradient(
+                120% 110% at 78% 22%,
+                oklch(0.9 0.075 72 / 0.5),
+                oklch(0.9 0.075 72 / 0) 70%
+            );
+    }
+
+    /* The presence-behind gate — under an ancestor field, the card reads the REAL
+       field (the page plane transmits through the translucent fill), so the local
+       fallback is switched OFF (no double paint). A 50-card grid under ONE ancestor
+       field is ONE field paint, not N local underlayers. */
+    :where([data-paper-field])
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-image: none;
+    }
+
     /* Paper texture overlay */
     .paper-texture {
         background-image: var(--paper-clean-texture);
@@ -28,6 +144,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 +223,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
@@ -113,13 +298,97 @@
        a card surface that often hosts portaled content; `translate: 0` at rest
        mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
     translate: 0;
+    position: relative;
+    /* BD.W-CARTOON-CASTER — the LOUD register carries `--motion-weight: 1` in the
+       SAME recipe (the loud-register coupling: so the punch is never accidentally
+       muted to ~+13.6% by inheriting the rest 0.618 — the BD.W-CARTOON-PUNCH
+       loud-register guard's concrete pass-subject). The press ramp ALIASES the
+       existing `--card-press-t` (the host's `useLiquidPress` already drives it for
+       every `pressable` card) — NO second press var, NO Card press-driver rewrite. */
+    --motion-weight: 1;
+    --cartoon-press-t: var(--card-press-t, 0);
     transition:
-        translate var(--duration-normal) var(--spring-smooth),
+        translate var(--duration-normal) var(--ease-cartoon-punch),
+        scale var(--duration-normal) var(--ease-cartoon-punch),
         box-shadow var(--duration-normal) var(--ease-standard);
 
-    &:hover:not(:disabled) {
+    /* BD.W-CARTOON-CASTER — the hover RE-POINTS the existing rule onto the punch
+       curve (was --spring-smooth) and guards `:not(:active)` so the press squash wins;
+       the object lifts a hair UP-RIGHT (toward the upper-right `--glass-key`) and the
+       cast deepens to the lg rung (the gap opens). ONE hover rule, no double-declare. */
+    &:hover:not(:active):not(:disabled) {
         translate: var(--lift-sm) var(--lift-sm);
+        /* BD.W-CARD-CEL-MOTION (§5) — the cel lifts toward the light with a
+           sub-perceptual VOL-PRESERVING scale (X·Y ≈ 1: 1.015 × 0.985 ≈ 1.0): the
+           cel rising toward its sun reads as PEELING off the field, not a flat
+           sticker slide. Composes the existing `scale` transition (declared above)
+           on the punch curve. The press squash (`scale: 1.04 0.94`) wins via
+           `:not(:active)`. */
+        scale: 1.015 0.985;
         box-shadow: var(--shadow-cartoon-lg);
+        & .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-lg);
+        }
+    }
+
+    /* BD.W-CARTOON-CASTER — the press is a NON-uniform SQUASH (H5): widen X, compress
+       Y — real squash & stretch, NOT a uniform shrink. The CSS `:active` is the no-JS
+       floor; `useLiquidPress` drives `--card-press-t` 0→1 for the continuous
+       interruptible press the inert caster rides. */
+    &:active:not(:disabled) {
+        scale: 1.04 0.94;
+    }
+}
+
+/* ── BD.W-CARTOON-CASTER — the inert-child moving cel cast ───────────────────────
+   The cast rides an INERT `<span class="cartoon-cast" aria-hidden>` child the Card
+   emits when `surface="cartoon"` — NOT a `::before`/`::after` pseudo (both are
+   OCCUPIED on the real glass carrier: `::before` is the moving-specular catch-light,
+   `::after` is the grain overlay; the H2 hardening). The child is a self-contained
+   ink-plate the body floats above: it carries the SAME shipped `--shadow-cartoon-md`
+   box-shadow (set ONCE per state-flip — NEVER animated, the §L7 paint-fence) and
+   MOVES on the compositor via `translate`/`scale` only.
+
+   The cast travels DOWN-LEFT (opposite the upper-right `--glass-key`, coherent with
+   the shadow.css cel-ink geometry) as the body lifts, and SPREADS as the gap opens.
+   ONE scalar drive: `--cartoon-press-t × --motion-weight` (the `:root` PRM carve
+   zeroes `--motion-weight` → travel/spread collapse to rest). It LAGS the body
+   (~1.15× slower transition) → the ink recoils LATE on release (follow-through /
+   overlapping action). The `--cartoon-cast-dx/dy` drag-track deltas are 0 at rest
+   (the opt-in `useCartoonCast` DOM bridge is future — labeled honestly). */
+.cartoon-cast {
+    position: absolute;
+    inset: 0;
+    z-index: -1; /* behind the cel face, in front of the page */
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: var(--shadow-cartoon-md);
+    /* the derived offset + spread — read `--motion-weight × --cartoon-press-t`. The
+       sign is DOWN-LEFT (negative X, positive Y) to match the upper-right key. */
+    --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t));
+    --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t));
+    translate:
+        calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx))
+        calc(var(--cast-travel) + var(--cartoon-cast-dy));
+    scale: var(--cast-spread);
+    /* the caster LAGS the body (~1.15×) → the late ink recoil on release. */
+    transition:
+        translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        --cartoon-cast-dx var(--duration-normal) var(--ease-cartoon-punch),
+        --cartoon-cast-dy var(--duration-normal) var(--ease-cartoon-punch);
+    will-change: translate, scale;
+}
+
+/* BD.W-CARTOON-CASTER — PRM/PRT carve. Under reduced-motion `--motion-weight: 0`
+   zeroes travel/spread/squash/lag in ONE assignment (every `calc(… * --motion-weight)`
+   collapses to rest); the transition is killed. The static bold cel STAMP persists
+   (identity/legibility — only the TRAVEL/PUNCH is removed). */
+@media (prefers-reduced-motion: reduce) {
+    .cartoon-surface,
+    .cartoon-cast {
+        --motion-weight: 0;
+        transition: none;
     }
 }