@mkbabb/glass-ui 3.5.0 → 3.6.0

package/dist/styles/tokens.css

@@ -700,6 +700,32 @@
     --glass-edge-light:      inset 0 0 0 0.75px hsl(0 0% 100% / 0.18);
     --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.10);
 
+    /* AW.W23 — content-aware adaptive tint (the Baseline-2025 "tint informed by
+       surrounding content" axis, WWDC25 sess. 219). A surface can tint toward a
+       consumer-provided dominant backdrop color via a `color-mix(in oklab, …)`
+       recipe (oklab is the mwg-preferred space for tint generation; NEVER a
+       lightness-shift in `oklch(from …)` — browsers don't gamut-map yet).
+
+       DEFAULT is zero delta: `--glass-tint-source` is the warm-white card itself
+       and `--glass-tint-strength` is 0%, so the rung background mixes 0% toward
+       the source = byte-identical to today. A consumer sets `--glass-tint-source`
+       to a sampled aurora hue + a strength ≤30% to bias the surface. Alpha-safe:
+       the mix is bounded ≤30% and never re-points the card's own alpha. */
+    --glass-tint-source:   var(--card);
+    --glass-tint-strength: 0%;
+
+    /* AW.W23 — chromatic edge dispersion (the "polished glass" rim fringe Apple
+       shows). A warm fringe on one edge + a cool fringe on the other, low-alpha,
+       biased warm-cream/NCSU-red (NOT iOS-blue). Composed OVER the W22 uniform
+       rim under `prefers-reduced-transparency: no-preference`; dropped under
+       `reduce` (it is a transparency garnish). The two directional inset rings
+       read as light refracting through the glass edge. */
+    --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22);
+    --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16);
+    --glass-edge-dispersion:
+        inset 0.75px 0 0 0 var(--glass-fringe-warm),
+        inset -0.75px 0 0 0 var(--glass-fringe-cool);
+
     /* Chassis curvature illusion — a subtle radial gradient at the chassis
        top centre that lifts the surface without committing to literal 3D.
        Composed into <InstrumentChassis>'s background stack. */
@@ -1586,6 +1612,13 @@
        `.dark` (mirroring the `--glass-specular` remap above). The lit token
        resolves to the `-dark` alpha on the deeper canvas. */
     --glass-edge-light: var(--glass-edge-light-dark);
+
+    /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
+       to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
+       source` auto-flips with `--card` (no override needed — the default already
+       resolves the dark card). */
+    --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
+    --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
     --glass-curvature-overlay: radial-gradient(
         ellipse at 50% -20%,
         hsl(0 0% 100% / 0.06),

package/dist/tabs.js

@@ -1,7 +1,7 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
 import { i as n, n as r, r as i, t as a } from "./TooltipProvider-D-JrSqDu.js";
-import { t as o } from "./UnderlineTabs-Cq_AD03t.js";
+import { t as o } from "./UnderlineTabs-CuIK16JI.js";
 import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
 //#region src/components/custom/tabs/composables/useBouncySlider.ts
 function j(e) {
@@ -208,7 +208,7 @@ var M = [
 			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
 		], 2));
 	}
-}), [["__scopeId", "data-v-ba2dfb91"]]), F = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-45c0ed13"]]), F = /* @__PURE__ */ h({
 	__name: "BouncyTabs",
 	props: /* @__PURE__ */ g({
 		options: {},

package/dist/{useAnimatedNumber-BF6r64lA.js → useAnimatedNumber-DfVgP4te.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./constants-DsCdlK9I.js";
+import { n as e, t } from "./constants-C8NMonuo.js";
 import { getCurrentScope as n, onScopeDispose as r, readonly as i, ref as a, shallowRef as o, toValue as s, watch as c } from "vue";
 import { SmoothProgress as l } from "@mkbabb/keyframes.js";
 //#region src/composables/motion/useAnimatedNumber.ts

package/dist/useCanvas2D-BeNJqqIS.js

@@ -0,0 +1,95 @@
+import { getCurrentScope as e, onScopeDispose as t, toValue as n } from "vue";
+//#region src/composables/glass/canvas2d/useCanvas2D.ts
+var r = "200px";
+function i(i) {
+	let { setup: a, autoStart: o = !0, contextAttrs: s, rootMargin: c = r } = i, l = i.respectReducedMotion ?? !0, u = () => n(i.canvas), d = /* @__PURE__ */ new Set(), f = () => d.size === 0, p = 0, m = null, h = null, g = !1, _ = !1, v = typeof window < "u", y = typeof document < "u", b = l && v && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, x = b?.matches ?? !1;
+	function S() {
+		if (!f() || !h || !m) {
+			p = 0;
+			return;
+		}
+		h.render(m, v ? performance.now() : 0), p = x ? 0 : requestAnimationFrame(S);
+	}
+	function C() {
+		g && f() && !p && h && m && (p = requestAnimationFrame(S));
+	}
+	function w() {
+		g && h && m && h.render(m, v ? performance.now() : 0);
+	}
+	function T() {
+		let e = b?.matches ?? !1;
+		e !== x && (x = e, C());
+	}
+	b?.addEventListener("change", T);
+	function E(e = "manual") {
+		let t = f();
+		d.add(e), t && !f() && (cancelAnimationFrame(p), p = 0);
+	}
+	function D(e = "manual") {
+		let t = !f();
+		d.delete(e), t && f() && g && h && (x ? w() : C());
+	}
+	function O() {
+		document.hidden ? E("tab-hidden") : D("tab-hidden");
+	}
+	y && document.addEventListener("visibilitychange", O), y && document.hidden && d.add("tab-hidden");
+	let k = null;
+	function A(e) {
+		e.skipped ? E("off-screen") : D("off-screen");
+	}
+	function j(e) {
+		if (k) return;
+		let t = e.parentElement;
+		t && (k = t, t.addEventListener("contentvisibilityautostatechange", A));
+	}
+	function M() {
+		k?.removeEventListener("contentvisibilityautostatechange", A), k = null;
+	}
+	let N = null;
+	function P(e) {
+		N || typeof IntersectionObserver > "u" || (N = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting || t.intersectionRatio > 0 ? D("off-screen") : E("off-screen");
+		}, { rootMargin: c }), N.observe(e));
+	}
+	let F = null, I = !1;
+	function L(e) {
+		if (!m) return;
+		let t = e.clientWidth || e.offsetWidth || 0, n = e.clientHeight || e.offsetHeight || 0;
+		if (!t || !n) return;
+		let r = Math.min(v && window.devicePixelRatio || 1, 2);
+		e.width = Math.round(t * r), e.height = Math.round(n * r), m.setTransform(r, 0, 0, r, 0, 0), !I && !p && w();
+	}
+	function R(e) {
+		F || typeof ResizeObserver > "u" || (F = new ResizeObserver(() => {
+			let e = u();
+			e && L(e);
+		}), F.observe(e));
+	}
+	function z() {
+		if (g || _) return;
+		let e = u();
+		if (!e) return;
+		let t = e.getContext("2d", s);
+		if (!t) throw Error("[useCanvas2D] 2D context unavailable");
+		m = t, h = a(m), g = !0, R(e), j(e), P(e), I = !0, L(e), I = !1, x ? w() : f() && (p = requestAnimationFrame(S));
+	}
+	function B() {
+		_ || (_ = !0, cancelAnimationFrame(p), p = 0, y && document.removeEventListener("visibilitychange", O), b?.removeEventListener("change", T), M(), N?.disconnect(), N = null, F?.disconnect(), F = null, h?.teardown?.(), h = null, m = null, d.clear());
+	}
+	return o && z(), e() && t(B), {
+		arm: z,
+		suspend: E,
+		resume: D,
+		wake: C,
+		dispose: B,
+		isRunning: f,
+		get ctx() {
+			return m;
+		},
+		get reducedMotion() {
+			return x;
+		}
+	};
+}
+//#endregion
+export { i as t };

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-Bz_1Tydc.js";
+import { n as t, t as n } from "./prng-CjVgzjQT.js";
 import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onUnmounted as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toRef as m, useId as h, watch as g, withCtx as _ } from "vue";
 //#region src/components/custom/watercolor-dot/prng.ts
 function v(e, t, n) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.5.0",
+    "version": "3.6.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -118,6 +118,9 @@
             "header-ribbon": [
                 "dist/header-ribbon.d.ts"
             ],
+            "constellation": [
+                "dist/constellation.d.ts"
+            ],
             "scrolling-text": [
                 "dist/scrolling-text.d.ts"
             ],
@@ -306,6 +309,10 @@
             "types": "./dist/header-ribbon.d.ts",
             "import": "./dist/header-ribbon.js"
         },
+        "./constellation": {
+            "types": "./dist/constellation.d.ts",
+            "import": "./dist/constellation.js"
+        },
         "./metric-badge": {
             "types": "./dist/metric-badge.d.ts",
             "import": "./dist/metric-badge.js"
@@ -551,6 +558,7 @@
         "proof:vt-names": "node scripts/proof-vt-names.mjs",
         "proof:dock-animation-live": "node scripts/proof-dock-animation-live.mjs",
         "proof:dock-clip-reveal": "node scripts/proof-dock-clip-reveal.mjs",
+        "proof:dock-layering-polish": "node scripts/proof-dock-layering-polish.mjs",
         "proof:dock-motion-parity": "node scripts/proof-dock-motion-parity.mjs",
         "proof:dock-motion-single-source": "node scripts/proof-dock-motion-single-source.mjs",
         "proof:dock-opacity-lockstep": "node scripts/proof-dock-opacity-lockstep.mjs",
@@ -585,6 +593,8 @@
         "proof:no-value-default": "node scripts/proof-no-value-default.mjs",
         "proof:blob-space-gamma": "node scripts/proof-blob-space-gamma.mjs",
         "proof:aurora-space-gamma": "node scripts/proof-aurora-space-gamma.mjs",
+        "proof:aurora-oklch-interp": "node scripts/proof-aurora-oklch-interp.mjs",
+        "proof:aurora-derive-gamut": "vitest run tests/components/custom/aurora/derive-color.test.ts",
         "proof:shader-shared-source": "node scripts/proof-shader-shared-source.mjs",
         "proof:blob-color-equivalence": "vitest run tests/components/custom/goo-blob/blob-color-equivalence.test.ts",
         "proof:fail-explicit": "node scripts/proof-fail-explicit.mjs",
@@ -597,9 +607,19 @@
         "proof:no-test-in-src": "node scripts/proof-no-test-in-src.mjs",
         "proof:spring-tokens-synced": "node scripts/proof-spring-tokens-synced.mjs",
         "proof:offscreen-pause": "node scripts/proof-offscreen-pause.mjs",
+        "proof:constellation-substrate-single": "node scripts/proof-constellation-substrate-single.mjs",
+        "proof:canvas2d-substrate": "vitest run tests/composables/glass/canvas2d/useCanvas2D.test.ts",
+        "proof:constellation-field": "vitest run tests/components/custom/constellation/constellationField.test.ts",
+        "proof:input-invalid-aria": "node scripts/proof-input-invalid-aria.mjs",
+        "proof:styling-hygiene": "node scripts/proof-styling-hygiene.mjs",
         "proof:subpath-enumeration": "node scripts/proof-subpath-enumeration.mjs",
         "proof:no-orphan-composable": "node scripts/proof-no-orphan-composable.mjs",
         "proof:speedtest-boundary": "node scripts/proof-speedtest-boundary.mjs",
+        "proof:glass-material-unified": "node scripts/proof-glass-material-unified.mjs",
+        "proof:glass-material-sota": "node scripts/proof-glass-material-sota.mjs",
+        "proof:glass-card-tiers": "node scripts/proof-glass-card-tiers.mjs",
+        "proof:primitive-affordance": "node scripts/proof-primitive-affordance.mjs",
+        "proof:reka-binding-idiom": "node scripts/proof-reka-binding-idiom.mjs",
         "proof:all": "node scripts/gates.mjs --run local",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
         "profile:bundle": "node scripts/profile-bundle.mjs",

package/src/styles/dock.css

@@ -60,6 +60,19 @@
         --dock-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
+           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
+           is the px the child rises from as it fades in. Consumers retune the
+           cascade feel per instance. */
+        --dock-stagger-window-size: 0.55;
+        --dock-stagger-rise: 4px;
+        /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
+           radius (default --radius-dock-card = --radius-3xl, density-scaled
+           below); `--dock-tile-min` is the grid tile minimum (auto-fill track
+           floor). Both are density-scaled (compact tighter, spacious looser) — the
+           card radius + tile size ride the density cascade, never magic numbers. */
+        --dock-card-radius: var(--radius-dock-card);
+        --dock-tile-min: 4.5rem;
         /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
            mints the stacking context once so a portaled popover over `--z-dock`
            stays above the dock during a hover scale (the load-bearing
@@ -300,12 +313,28 @@
        only. Width is driven by the inner `.dock-layers` FLIP via
        `useLayerTransition`; pinning it here would race the FLIP and
        reintroduce the `width: auto` non-interpolation diagnosed in
-       R1+R6. */
+       R1+R6.
+
+       AW.W3 — the collapsed-hover `scale` (the `.collapsed:hover` rule below) +
+       the press squish (`--scale-press-dock` on the dock controls) ride the
+       INDIVIDUAL `scale` property, NOT `transform`. Adding `scale
+       var(--dock-motion-resize)` here unifies the hover scale onto the SAME dock
+       spring vocabulary as the morph, so a collapsed→hover→expand gesture reads as
+       ONE continuous spring rather than a `scale`-ease handed off to the
+       width-spring. Under PRM the global gate strips `scale` from the
+       transition-property → the hover scale snaps (0 morph frames). */
     .glass-dock:not(.vertical) {
         transition:
             padding var(--dock-motion-resize),
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
+            scale var(--dock-motion-resize),
+            /* AW.W3b — the pill↔card corner radius morphs on the SAME spring the
+               aperture rides (ONE free interpolation). Without this the
+               shape-card collapsed↔expanded radius snaps discretely. The list is
+               shared by ALL horizontal docks — the radius transition also glides
+               the wrap collapsed↔expanded radius swap (desirable). */
+            border-radius var(--dock-motion-resize),
             background var(--dock-motion-standard),
             border-color var(--dock-motion-standard);
     }
@@ -339,6 +368,7 @@
             padding var(--dock-motion-resize),
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
+            scale var(--dock-motion-resize),
             background var(--dock-motion-standard),
             border-color var(--dock-motion-standard);
     }
@@ -357,6 +387,38 @@
         border-radius: var(--radius-xl);
     }
 
+    /* AW.W3b — horizontal-root shape rules. The `shape-*` class previously bound
+       ONLY under `.variant-rail`; on a horizontal `variant-dock` the prop silently
+       no-op'd (the root hardwired `--radius-dock` = `--radius-pill`). These rules
+       close that documented-but-dead prop — `shape="rounded"` / `shape="card"` now
+       paint on a horizontal dock. Scoped to `variant-dock:not(.vertical)` so the
+       rail + instrument-strip variants (which own their own radius) are untouched. */
+    .glass-dock.variant-dock:not(.vertical).shape-rounded {
+        border-radius: var(--radius-xl);
+    }
+
+    /* The big-dock CARD shell — a FINITE concentric radius above 2xl, below pill.
+       It does NOT collapse to a stadium. Collapsed it returns to a pill (the morph
+       target); the pill↔card swap glides on the `--dock-motion-resize` spring
+       (`border-radius` is in the `:not(.vertical)` transition list). */
+    .glass-dock.variant-dock:not(.vertical).shape-card {
+        border-radius: var(--dock-card-radius);
+    }
+
+    .glass-dock.variant-dock:not(.vertical).shape-card.collapsed {
+        border-radius: var(--radius-pill);
+    }
+
+    /* The squircle reads markedly better at the large card radius — an
+       `@supports`-gated ENHANCEMENT only (Chrome 139+, no FF/Safari 2026). The
+       border-radius arc is the CONTRACT; the squircle is the better tier (the
+       baseline arc is the acceptable contract, NOT a degraded fallback). */
+    @supports (corner-shape: squircle) {
+        .glass-dock.variant-dock:not(.vertical).shape-card {
+            corner-shape: squircle;
+        }
+    }
+
     /* AJ-W1-δ — `instrument-strip` variant (per G-AJ-D7 Path 1).
      *
      * The speedtest survey cockpit's vertical rail needs chassis-strip
@@ -438,6 +500,13 @@
         justify-content: center;
     }
 
+    /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
+       The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
+       root transition above, so this hover scale settles on the SAME spring curve
+       the expand morph uses — a collapsed→hover→expand gesture is one continuous
+       spring, not a `scale`-ease handed off to the width-spring. The hover scale
+       and the press squish (`--scale-press-dock`) are now one register on the dock
+       surface. */
     .glass-dock.collapsed:hover {
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
@@ -659,6 +728,72 @@
         inset: 0;
     }
 
+    /* AW.W3 — the spring-keyed child stagger. While the size spring drives the
+       morph, the driver arms the container (`.dock-layers` / `.dock-layer-stack`)
+       with `data-revealing` and writes the morph's normalized progress to
+       `--dock-morph-progress` (0 → 1) every frame. Each direct child of the
+       ACTIVE pane reveals when that progress crosses a per-child onset, so the
+       controls cascade IN ON the physical morph — a fast flick and a slow
+       hover-open both choreograph correctly, and an interrupted morph carries the
+       cascade with it (no orphaned timers). This is a per-CHILD opacity onset; the
+       active PANE itself stays statically opacity:1 (revealed by the aperture —
+       the W2 clip-reveal contract is NOT regressed).
+
+       The reveal is a pure `calc` ramp: `opacity = clamp(0, (progress − onset) /
+       window, 1)`. `--dock-stagger-onset` steps per child (nth-child); the window
+       is `--dock-stagger-window`. The children also rise a few px on a `translate`
+       that resolves on the same ramp. ONLY children inside the `[data-revealing]`
+       active pane are armed — at rest the children carry no opacity authority (the
+       default cascade leaves them at 1).
+
+       PRM: the driver never arms `data-revealing` on the synchronous PRM swap (the
+       FLIP fast-path returns before the spring; the spring's `respectReducedMotion`
+       settles instantly), so the children paint at full opacity at once. The
+       global PRM gate also strips `translate` from the transition-property — the
+       rise snaps. The cascade collapses to 0 stagger frames under PRM. */
+    .dock-layers[data-revealing] .dock-layer--full > *,
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > * {
+        --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
+        --dock-stagger-onset: 0;
+        opacity: clamp(
+            0,
+            calc(
+                (var(--dock-morph-progress, 1) - var(--dock-stagger-onset)) /
+                    var(--dock-stagger-window)
+            ),
+            1
+        );
+        translate: 0
+            calc(
+                (1 - clamp(0, calc((var(--dock-morph-progress, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
+                    var(--dock-stagger-rise, 4px)
+            );
+    }
+
+    /* Per-child onsets — each successive control starts a beat later, so the row
+       fills outer→in on expand. The onsets are fractions of the morph progress;
+       capped so even a long row finishes within the morph window. */
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(2),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(2) {
+        --dock-stagger-onset: 0.08;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(3),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(3) {
+        --dock-stagger-onset: 0.16;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(4),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(4) {
+        --dock-stagger-onset: 0.24;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(5),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(5) {
+        --dock-stagger-onset: 0.32;
+    }
+    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(n + 6),
+    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
+        --dock-stagger-onset: 0.4;
+    }
+
     /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
        `.always-expanded:not([data-morphing])` (the clip-shell block at the top).
        A plain `overflow: visible` here would lift the clip DURING the morph (the
@@ -676,6 +811,46 @@
         cursor: default;
     }
 
+    /* ── AW.W3b — `layout="grid"` the 2D auto-grid big dock ──────────────
+       The active layer becomes a self-wrapping tile grid (Launchpad / Stage-Manager
+       track symmetry — `auto-fill` columns floored at `--dock-tile-min`, explicit
+       `grid-auto-rows` so the concentric look holds). DISTINCT from
+       `overflow="wrap"`'s content-ordered flex-wrap. A `layout="grid"` dock is
+       `alwaysExpanded` by contract (GlassDock.vue), so there is NO width morph and
+       hence NO per-frame grid-column reflow. `white-space: normal` releases the
+       single-row nowrap so the tiles wrap. */
+    .glass-dock.layout-grid {
+        white-space: normal;
+    }
+
+    .glass-dock.layout-grid .dock-layer--full {
+        display: grid;
+        grid-template-columns: repeat(
+            auto-fill,
+            minmax(var(--dock-tile-min, 4.5rem), 1fr)
+        );
+        grid-auto-rows: var(--dock-tile-min, 4.5rem);
+        gap: var(--dock-layer-gap, 0.375rem);
+        width: 100%;
+        height: auto;
+        white-space: normal;
+    }
+
+    /* A grid dock fills the inline cap; the active layer is the panel body, not a
+       shrink-to-fit row. The cap is the `--dock-max-inline-size` clamp (KEPT). */
+    .glass-dock.layout-grid .dock-layers {
+        width: 100%;
+    }
+
+    /* CONCENTRIC inner tiles — inner radius = outer card radius − padding (the
+       universal macOS / visionOS / Raycast rule). NEVER nest two pills
+       (stadium-in-stadium); a finite outer + a stepped-down inner. */
+    .glass-dock.layout-grid.shape-card .dock-layer--full > * {
+        border-radius: calc(
+            var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem)
+        );
+    }
+
     /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
        The default contract grows-to-fit then overflows visibly past the
        axis cap. `overflow="scroll"` instead makes the dock the scroll port
@@ -748,6 +923,15 @@
         min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
         gap: var(--dock-wrap-row-gap, 0.25rem)
             var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem));
+        /* AW.W3b — the graceful wrap-morph. The wrap/unwrap row-reflow flips
+           `flex-wrap` at the `--dock-overflow-bp` `@media` boundary; without a
+           transition the rows JUMP-CUT. Sequencing the layer's `min-height`
+           through the `--dock-motion-resize` spring MORPHS the reflow. The global
+           PRM gate strips `min-height` from the transition-property under reduce →
+           the morph snaps (0 morph frames) while the reflow still completes. The
+           wrap radius swap (`.collapsed` / `@media`) glides too — `border-radius`
+           is in the shared `:not(.vertical)` transition list (AW.W3b scope 2). */
+        transition: min-height var(--dock-motion-resize);
     }
 
     .glass-dock.dock-overflow-wrap .dock-layer--summary {

package/src/styles/glass-refract.css

@@ -0,0 +1,60 @@
+/* AW.W23 — the #glass-refract convex-lens SVG filter, shipped as a library
+ * asset so `.glass-refract` works OUT OF THE BOX (no consumer hand-mounts a
+ * filter node).
+ *
+ * The refraction recipe is the canonical 3-primitive graph (kube.io /
+ * LogRocket, 2025):
+ *
+ *   feImage          — a pre-baked displacement map computed from the convex-
+ *                      squircle surface profile  y = ⁴√(1 − (1 − x)⁴)  (Apple's
+ *                      preferred corner curve) via Snell's law (n₁ = 1 air,
+ *                      n₂ = 1.5 glass). The map is authored as an embedded SVG
+ *                      whose R channel carries the x-shift and G channel the
+ *                      y-shift (neutral 128 = no shift; bright edges bend light
+ *                      inward like a lens), expressed as two crossed linear
+ *                      gradients over the squircle silhouette.
+ *   feDisplacementMap— displaces the backdrop by the baked map (R = x-shift,
+ *                      G = y-shift, `scale` = max px, neutral 128).
+ *   feImage specular — a soft top-left specular highlight…
+ *   feBlend screen   — …blended `screen` over the displaced backdrop for the
+ *                      polished-glass catch.
+ *
+ * The filter ships INLINE as a data-URI in the `backdrop-filter` declaration, so
+ * the consumer gets it with zero markup. `backdrop-filter: url(#…)` is
+ * Chromium-only (WebKit bug 245510 open, Firefox not shipping), so the whole
+ * decl sits behind `@supports (backdrop-filter: url(#…))`; a non-supporting
+ * engine paints the un-gated blur base alone (no broken `url()` reference).
+ *
+ * RE-HOME (AW.W23 — decouple from the W22-folded compound). At HEAD the
+ * refraction rule was bound to `.glass-specular-track.glass-refract`. W22 folds
+ * `glass-specular-track` into `.glass-material`, retiring the compound's left
+ * operand, so the rule is re-homed onto `.glass-material.glass-refract` — the
+ * refraction garnish opts in on ANY `.glass-material` surface, no dependency on
+ * the now-aliased `glass-specular-track` class. The garnish stays PE-only over
+ * the blur base; it is NEVER promoted to the card/primitive substrate
+ * (feDisplacementMap is resize-expensive — only the `scale` attr animates
+ * without rebuilding the map).
+ */
+
+@layer components {
+    /* The shipped filter graph as a data-URI SVG. A `0×0` host SVG mounted via
+       the CSS asset keeps the `#glass-refract` id resolvable in-document. */
+    .glass-refract {
+        /* The named convex-lens displacement filter, baked from the squircle
+           surface profile. Composed as a custom property so the @supports arm
+           below references one source. */
+        --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='glass-refract' x='0' y='0' width='100%25' height='100%25'%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522m%2522 cx=%252250%2525%2522 cy=%252250%2525%2522 r=%252250%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%252270%2525%2522 stop-color=%2522rgb(128,128,128)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(255,255,128)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523m)%2522/%253E%253C/svg%253E' result='map'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='map' scale='28' xChannelSelector='R' yChannelSelector='G' result='disp'/%3E%3CfeImage href='data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E' result='spec'/%3E%3CfeBlend in='disp' in2='spec' mode='screen'/%3E%3C/filter%3E%3C/svg%3E#glass-refract");
+    }
+
+    /* The gated consuming selector — RE-HOMED onto `.glass-material.glass-refract`
+       (decoupled from the W22-folded `.glass-specular-track` compound). The
+       refraction composes the shipped `#glass-refract` filter OVER the host's
+       existing blur; it is additive (the blur already painted, this sharpens the
+       refraction edge where the engine supports it). */
+    @supports (backdrop-filter: url("#glass-refract")) {
+        .glass-material.glass-refract,
+        .glass-refract {
+            backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter);
+        }
+    }
+}