@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/watercolor-dot.js

@@ -1,5 +1,5 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { n as t, t as n } from "./prng-B-d9eYX8.js";
+import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { n as t, t as n } from "./prng-B5tIXTtj.js";
 import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toRef as g, useId as _, watch as v, withCtx as y } from "vue";
 //#region src/components/custom/watercolor-dot/prng.ts
 function b(e, t, n) {
@@ -87,14 +87,7 @@ var T = {
 	class: "watercolor-filter-host",
 	"aria-hidden": "true",
 	focusable: "false"
-}, E = ["seed"], D = {
-	key: 0,
-	class: "watercolor-ghost-overlay",
-	"aria-hidden": "true",
-	focusable: "false",
-	preserveAspectRatio: "none",
-	viewBox: "0 0 100 100"
-}, O = /* @__PURE__ */ e(/* @__PURE__ */ c({
+}, E = ["seed"], D = /* @__PURE__ */ e(/* @__PURE__ */ c({
 	__name: "WatercolorDot",
 	props: {
 		color: {},
@@ -118,17 +111,17 @@ var T = {
 		function C() {
 			x.value = !0, t.animate && S.nudge();
 		}
-		let O = r(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), k = r(() => t.animate ? S.transform.value : "none");
+		let D = r(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), O = r(() => t.animate ? S.transform.value : "none");
 		return (t, n) => (f(), i(h(e.tag), {
 			class: l(["watercolor-swatch", e.animate && "watercolor-animated"]),
 			"data-testid": "watercolor-swatch",
 			"data-variant": e.variant,
 			style: u({
 				backgroundColor: e.variant === "ghost" ? void 0 : e.color,
-				borderRadius: O.value,
+				borderRadius: D.value,
 				"--watercolor-color": e.color,
 				"--watercolor-filter": d.value,
-				"--watercolor-wobble": k.value
+				"--watercolor-wobble": O.value
 			}),
 			onMouseenter: C,
 			onMouseleave: n[0] ||= (e) => x.value = !1
@@ -155,18 +148,15 @@ var T = {
 					xChannelSelector: "R",
 					yChannelSelector: "G"
 				}, null, -1)])])])),
-				e.variant === "ghost" ? (f(), o("svg", D, [s("ellipse", {
+				e.variant === "ghost" ? (f(), o("div", {
+					key: 0,
 					class: "watercolor-ghost-stroke",
-					cx: "50",
-					cy: "50",
-					rx: "46",
-					ry: "46",
-					fill: "none",
-					stroke: "var(--watercolor-color)",
-					"stroke-width": "2",
-					"vector-effect": "non-scaling-stroke",
-					style: u({ filter: d.value })
-				}, null, 4)])) : a("", !0),
+					"aria-hidden": "true",
+					style: u({
+						borderRadius: D.value,
+						filter: d.value
+					})
+				}, null, 4)) : a("", !0),
 				m(t.$slots, "default", {}, void 0, !0)
 			]),
 			_: 3
@@ -176,6 +166,6 @@ var T = {
 			"style"
 		]));
 	}
-}), [["__scopeId", "data-v-76317add"]]);
+}), [["__scopeId", "data-v-a14ed6a5"]]);
 //#endregion
-export { O as WatercolorDot, n as hashString, t as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };
+export { D as WatercolorDot, n as hashString, t as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };

package/dist/writeVelocityWeight-Bh83xZfs.js

@@ -0,0 +1,19 @@
+//#region src/composables/motion/core/writeVelocityWeight.ts
+var e = .618;
+function t(t, n) {
+	if (!t) return;
+	let r = n < 0 ? 0 : n > 1 ? 1 : n, i = e + (1 - e) * r;
+	t.style.setProperty("--flex-vel", r.toFixed(4)), t.style.setProperty("--motion-weight", i.toFixed(4));
+}
+function n(t, n) {
+	if (n <= 1) return n < 1 ? 1 : n;
+	let r = e, i = 0;
+	if (t) {
+		let e = getComputedStyle(t), n = Number.parseFloat(e.getPropertyValue("--motion-weight")), a = Number.parseFloat(e.getPropertyValue("--flex-vel"));
+		Number.isFinite(n) && (r = n < 0 ? 0 : n), Number.isFinite(a) && (i = a < 0 ? 0 : a > 1 ? 1 : a);
+	}
+	let a = r + (1 - r) * i, o = 1 + (n - 1) * (a / e);
+	return o < 1 ? 1 : o;
+}
+//#endregion
+export { n, t as r, e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "4.1.0",
+    "version": "4.2.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -717,11 +717,17 @@
         "proof:dock-taxonomy": "node scripts/proof-dock-taxonomy.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: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",
@@ -756,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",
@@ -900,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",
@@ -975,8 +983,11 @@
         "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",
@@ -1042,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",
@@ -1080,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/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);
@@ -182,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;
     }
 }
 

package/src/styles/configurator.css

@@ -37,7 +37,12 @@
 .configurator-presets {
     padding-block: var(--configurator-preset-row-weight);
 }
-.configurator-presets [role="tablist"] {
+/* The gallery track gap — the toggle-button group (BD.W-CONFIG-GALLERY-DOCK
+ * retired the `role="tablist"`/`role="tab"` ARIA-contradiction for the
+ * toggle-button `role="group"` + `aria-pressed` pattern). The token drives the
+ * inter-tile rhythm. */
+.configurator-presets .configurator-gallery-track,
+.configurator-presets [role="group"] {
     gap: var(--configurator-preset-row-gap);
 }
 
@@ -98,17 +103,168 @@
  * utility read — the token contract is byte-identical, only the MECHANISM moves
  * onto shipped CSS. The explicit mobile rows reset to `none` so one auto row
  * stretches to the taller column. */
+/* The MOBILE / base placement of the three section-level children (the gallery
+ * moved OUT of the aside to a grid sibling — BD.W-CONFIG-GALLERY-DOCK). Single
+ * column, three rows: gallery → stage → aside. The base `grid-template-rows`
+ * (`auto minmax(stage-min,auto) 1fr`) ships from the SFC; these rules pin each
+ * child to its row so the source order (gallery, stage, aside) reads correctly.
+ * When no gallery renders the `auto` row collapses to 0 (an empty track). */
+[data-slot="configurator"] > [data-gallery-dock] {
+    grid-row: 1;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-stage {
+    grid-row: 2;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-aside {
+    grid-row: 3;
+    grid-column: 1;
+}
+
 @media (min-width: 1024px) {
+    /* The DESKTOP TWO-COLUMN geometry. Two columns (stage 1fr | aside band) and
+     * two rows: the gallery row (auto) over the body row (1fr). The placement of
+     * the gallery dock is the ONLY thing the `data-gallery` axis swaps. */
     [data-slot="configurator"] {
         grid-template-columns: minmax(0, 1fr)
             minmax(
                 var(--configurator-aside-min, 280px),
                 var(--configurator-aside-max, 360px)
             );
-        grid-template-rows: none;
+        grid-template-rows: auto minmax(0, 1fr);
+    }
+
+    /* data-gallery="aside" (the default, inspector idiom) — the gallery sits in
+     * the ASIDE column, row 1, above the controls; the stage spans BOTH rows on
+     * the left. Byte-equivalent to the legacy "preset row inside the aside top". */
+    [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-stage {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+
+    /* data-gallery="top" (the §2.1 reflow) — the gallery is a LARGE full-width
+     * dock spanning BOTH columns up-top; the stage (col 1) + controls (col 2)
+     * reclaim the full height in row 2. The gallery is now ~studio-width, not the
+     * 360px gutter — ~5 φ-tall tiles visible, horizontally scrollable. */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 1 / span 2;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-stage {
+        grid-row: 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+}
+
+/* The gallery-dock chrome divider — the hairline under the up-top dock / the
+ * left edge of the aside-placed dock. A dark-adaptive border off the same token
+ * the rest of the instrument reads, so it survives both glass plates. */
+[data-slot="configurator"] > [data-gallery-dock] {
+    border-color: var(--configurator-divider);
+}
+[data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+    border-bottom-width: 1px;
+}
+@media (min-width: 1024px) {
+    /* The up-top dock carries a bottom hairline; the aside-placed dock carries it
+     * too (above the controls). */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        border-bottom-width: 1px;
     }
 }
 
+/* ── The WARM-GLASS gallery tiles + the device-free field-well ────────────────
+ * BD.W-CONFIG-GALLERY-DOCK §5/§B1. The tile is a `.glass-capsule` warm-glass cel
+ * (composed in the SFC class list) — the §3 colourful field reads THROUGH, never
+ * a flat opaque bg-card scrim. These rules add the GEOMETRY the capsule register
+ * doesn't carry: the φ-tall card shape, the rounded field-well, the active ring,
+ * the loading shimmer. No new material is minted — the transmissive composite is
+ * the shared `.glass-capsule`; the cartoon cast is the shared `.cartoon-cast`. */
+
+/* The big field-well tile (the PresetPickerRow / baked-thumbnail form). A φ-tall
+ * card: a 16:10 field-well crowned by a label band. The capsule register paints
+ * the warm-glass body; this rule sets the card radius + the column flex so the
+ * well meets the rounded crown with zero bg leak. */
+.configurator-preset-tile {
+    inline-size: clamp(160px, 22vw, 232px);
+    border-radius: var(--radius-card);
+    /* The capsule fill is a warm-glass PILL by default (--radius-pill); a TILE is
+     * a card, so re-point the geometry to the card radius here. The transmissive
+     * fill + rim + cast all carry from .glass-capsule. */
+}
+
+/* The §3 field-well — the device-free `auroraFallbackGround` background-image is
+ * set inline per tile; this rule sets the cover sizing + the rounded inner crown.
+ * The well is the COLOURFUL field; the warm-glass capsule frames it. */
+.configurator-preset-well {
+    background-size: cover;
+    background-position: center;
+    /* a smooth bilinear upscale of the tiny raster (the per-quadrant mean
+     * luminance is preserved — the certify band reads true). */
+    image-rendering: auto;
+}
+
+/* The loading state — a warm shimmer until the field build lands (the field
+ * build is synchronous + cheap, so this is a sub-frame flicker at most). */
+.configurator-preset-well.is-loading {
+    background-image: linear-gradient(
+        100deg,
+        color-mix(in oklab, var(--card) 84%, transparent) 30%,
+        color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%,
+        color-mix(in oklab, var(--card) 84%, transparent) 70%
+    );
+    background-size: 200% 100%;
+    animation: configurator-preset-shimmer 1.2s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+    .configurator-preset-well.is-loading {
+        animation: none;
+    }
+}
+@keyframes configurator-preset-shimmer {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
+}
+
+/* The active tile ring — a 2px foreground-keyed inset crown over the warm-glass
+ * cel (an inset ring never clips on the scroll axis, the PresetPickerRow note).
+ * Composes with the capsule's own rim; the cast deepens to `-lg` in the SFC. */
+.configurator-preset-tile.is-active {
+    box-shadow:
+        inset 0 0 0 2px var(--ring),
+        var(--shadow-cartoon-lg);
+}
+
+/* The compact CHIP form (the default fallback gallery — text-only preset pills).
+ * The capsule register paints the warm-glass body; this rule restores the pill
+ * radius the capsule already ships, and the active chip reads a selected fill via
+ * the `--glass-capsule-fill` override hook (no fork). */
+.configurator-preset-chip {
+    border-radius: var(--radius-pill);
+}
+.configurator-preset-chip.is-active {
+    /* the selected rung — re-point the capsule fill toward the quiet glass-tint
+     * selected register via the documented override hook (NO new composite). */
+    --glass-capsule-fill: var(--glass-bg-quiet);
+}
+
 /* 5. The SIDE FLIP — a data-attr, default RIGHT (BC.W-CONFIG-RIGHT).
  *
  * The aside side moves off the dead `lg:col-start-*` arbitrary utility (gated
@@ -122,11 +278,20 @@
  * 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;
+    /* The flip swaps the two BODY columns (stage ↔ aside) while DOM/tab order stays
+     * gallery→stage→aside. The selectors carry `>`-child specificity to match the
+     * `data-gallery` placement rules above (which also use `>`); a bare descendant
+     * selector would lose the cascade to those and the flip would no-op. The aside
+     * keeps its body row (row 2); only the column target moves. The aside-placed
+     * gallery dock follows the aside to column 1. */
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-stage {
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-aside {
+        grid-column: 1;
     }
-    [data-slot="configurator"][data-aside-side="left"] .configurator-aside {
-        grid-column-start: 1;
-        grid-row-start: 1;
+    [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"]
+        > [data-gallery-dock] {
+        grid-column: 1;
     }
 }

package/src/styles/critical-partition.mjs

@@ -38,7 +38,11 @@
  * 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.
+ * an above-the-fold first-paint chrome pixel. The BD-added `motion/morph-field.css`
+ * (the ONE `useMorphField` goo recipe — the body/neck/waist silhouette + the
+ * dedicated squish channel) is likewise DEFERRED: it is gated to `[data-morphing]`
+ * and paints only while a morph drive is live (a late-mount compositor decoration),
+ * never a steady-state first-paint chrome pixel.
  *
  * The `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
  * utilities pair with glass for paper-on-glass compositions that mount with the
@@ -68,6 +72,8 @@ export const DEFERRED_PARTIALS = Object.freeze([
     "floating-panel.css",
     "transitions.css",
     "animations.css",
+    "motion/morph-field.css",
+    "jubilance.css",
     "scroll-driven.css",
     "scroll-choreography.css",
     "scroll-chrome.css",
@@ -158,5 +164,32 @@ export const DEFERRED_SOURCE_DIRECTIVE = '@source "../*.js";';
  * stay under the old number). The render-block FLOOR stays W-LIGHTHOUSE's
  * W3-arm-1 mobile-ms gate (the binding perf truth); this ceiling guards against a
  * recipe revert-toward-monolith.
+ *
+ * RE-BASE (BD greenfield band — re-measured over the SETTLED BD cascade): the
+ * critical subset grew to raw 561233 / gzip 174231 — AGAIN not a component-recipe
+ * leak into the critical BUCKET (the critical bucket is STILL the SAME 6 documented
+ * token+glass+type partials; w2 partials-disjoint + w4 hold, and the two recipe-shaped
+ * BD additions that COULD have leaked do NOT: `motion/morph-field.css` is bucketed
+ * DEFERRED, `glass-atom.css`/`glass-chip.css` are @import-ed by the DEFERRED
+ * `icon-chip.css` (not by `glass.css`), and `liquid-morph.css` is demo-only — it is
+ * @import-ed by NO src partial). The growth is the legitimate BD GREENFIELD enrichment
+ * of the critical TOKEN CASCADE + glass ladder, which lives in the critical tokens/* +
+ * glass/* sub-partials by construction: the NEW `tokens/property-regs.css` (the
+ * @property registrations a bare var() interpolates over), the `tokens/scheme-motion.css`
+ * --motion-weight × --ease-cartoon-punch motion grammar, the `tokens/shadow.css` cartoon
+ * cast rungs, the `tokens/dark-arm.css` dark-mode arms, the `tokens/glass.css` squish/tint
+ * axes, and the `tokens/glass-fx.css` / `tokens/scale-paper.css` page-chassis registers —
+ * all custom-property registers the chrome reads at first paint. The ONE borderline
+ * residual is `glass/liquid-enter.css` (a late-mount entrance @keyframes recipe, ~3.7KiB
+ * gzip) which rides `glass.css` over its `reveal.css` `--lq-enter-*` substrate; carving it
+ * to a deferred top-level partial is a structural cascade-order change reserved for the
+ * named BB.W-CSS-CRITICAL-INLINE successor (a triumvirate trigger, NOT a token-edit here),
+ * and it recovers only ~3.7KiB — the bucket would still sit ~170KiB, well over the old
+ * 156000. The critical subset is 49.5% of the settled monolith's resolved gzip — the
+ * spec's ~46% small-above-the-fold-subset bar HELD over the settled cascade. Ceiling
+ * re-pinned 156000 → 182000 (~4.5% headroom over the measured 174231, the profile-bundle
+ * re-base convention — the reviewed write, NEVER a silent component-recipe swallow). The
+ * render-block FLOOR stays W-LIGHTHOUSE's W3-arm-1 mobile-ms gate (the binding perf truth);
+ * this ceiling guards against a recipe revert-toward-monolith.
  */
-export const CRITICAL_GZIP_CEILING = 156000;
+export const CRITICAL_GZIP_CEILING = 182000;