@mkbabb/glass-ui 3.5.0 → 3.6.0

package/dist/motion-core.js

@@ -1,7 +1,7 @@
 import { i as e, n as t, r as n, t as r } from "./vReveal-u2wSG2El.js";
-import { n as i, t as a } from "./useViewTransition-CJnqg6wl.js";
-import { n as o, t as s } from "./useIntersectionPause-DAdVPVp4.js";
-import { n as c, t as l } from "./constants-DsCdlK9I.js";
+import { n as i, t as a } from "./useViewTransition-DI0Rs2rV.js";
+import { n as o, t as s } from "./useIntersectionPause-DsQYGc8V.js";
+import { n as c, t as l } from "./constants-C8NMonuo.js";
 import { computed as u, getCurrentScope as d, onBeforeUnmount as f, onMounted as p, onScopeDispose as m, reactive as h, readonly as g, ref as _, unref as v, watch as y } from "vue";
 //#region src/composables/motion/useStaggerReveal.ts
 var b = e();
@@ -36,9 +36,50 @@ function x(e = {}) {
 	};
 }
 //#endregion
-//#region src/composables/motion/useScrollProgress.ts
-var S = n();
+//#region src/composables/motion/useStagger.ts
+function S() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function C(e) {
+	let t = Math.max(0, Math.floor(e.items)), n = e.delayMs ?? 80, r = e.initialDelayMs ?? 0, i = e.immediate !== !1, a = e.respectReducedMotion !== !1, o = _(Array(t).fill(!1)), s = _(t === 0), c = /* @__PURE__ */ new Set();
+	function l() {
+		for (let e of c) clearTimeout(e);
+		c.clear();
+	}
+	function u() {
+		l(), o.value = Array(t).fill(!1), s.value = t === 0;
+	}
+	function d() {
+		o.value = Array(t).fill(!0), s.value = !0;
+	}
+	function f() {
+		if (u(), t === 0) {
+			s.value = !0;
+			return;
+		}
+		if (a && S()) {
+			d();
+			return;
+		}
+		for (let e = 0; e < t; e++) {
+			let i = e, a = setTimeout(() => {
+				let e = o.value.slice();
+				e[i] = !0, o.value = e, c.delete(a), i === t - 1 && (s.value = !0);
+			}, r + i * n);
+			c.add(a);
+		}
+	}
+	return i && f(), m(l), {
+		revealed: o,
+		start: f,
+		reset: u,
+		isComplete: s
+	};
+}
+//#endregion
+//#region src/composables/motion/useScrollProgress.ts
+var w = n();
+function T(e) {
 	let { offset: t = 0, trackExit: n = !1 } = e, r = _(0), i = 0, a = null;
 	function o() {
 		let i = v(e.target);
@@ -57,11 +98,11 @@ function C(e) {
 		});
 	}
 	return p(() => {
-		if (o(), S) return;
+		if (o(), w) return;
 		window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s, { passive: !0 });
 		let t = v(e.target);
 		t && typeof ResizeObserver < "u" && (a = new ResizeObserver(s), a.observe(t));
-	}), S || y(() => v(e.target), (e, t) => {
+	}), w || y(() => v(e.target), (e, t) => {
 		t && a && a.unobserve(t), e && a && a.observe(e), s();
 	}), f(() => {
 		window.removeEventListener("scroll", s), window.removeEventListener("resize", s), i && cancelAnimationFrame(i), a?.disconnect(), a = null;
@@ -69,12 +110,12 @@ function C(e) {
 }
 //#endregion
 //#region src/composables/motion/useYieldToMain.ts
-function w() {
+function E() {
 	let e = globalThis.scheduler;
 	return typeof e?.yield == "function" ? e.yield.bind(e) : null;
 }
-function T() {
-	let e = w();
+function D() {
+	let e = E();
 	return e ? e() : typeof MessageChannel == "function" ? new Promise((e) => {
 		let t = new MessageChannel();
 		t.port1.onmessage = () => {
@@ -82,38 +123,38 @@ function T() {
 		}, t.port2.postMessage(void 0);
 	}) : new Promise((e) => setTimeout(e, 0));
 }
-function E() {
+function O() {
 	return {
-		hasNativeYield: w() !== null,
-		yield: T
+		hasNativeYield: E() !== null,
+		yield: D
 	};
 }
 //#endregion
 //#region src/composables/motion/useRAFLoop.ts
-var D = "(prefers-reduced-motion: reduce)";
-function O() {
+var k = "(prefers-reduced-motion: reduce)";
+function A() {
 	return typeof globalThis.requestAnimationFrame == "function" ? globalThis.requestAnimationFrame.bind(globalThis) : null;
 }
-function k() {
+function j() {
 	return typeof globalThis.cancelAnimationFrame == "function" ? globalThis.cancelAnimationFrame.bind(globalThis) : null;
 }
-function A() {
+function M() {
 	return typeof window > "u" ? null : window;
 }
-function j(e, t = {}) {
-	let { immediate: n = !0, pauseWhenHidden: r = !0, respectReducedMotion: i = !0 } = t, a = _(!1), s = _(!1), c = _(!1), l = _(!1), f = _(!1), p = u(() => l.value && !a.value && (f.value || c.value || i && s.value || !O())), h = null, v = null, b = 0, x = 0, S = !1, C = null;
+function N(e, t = {}) {
+	let { immediate: n = !0, pauseWhenHidden: r = !0, respectReducedMotion: i = !0 } = t, a = _(!1), s = _(!1), c = _(!1), l = _(!1), f = _(!1), p = u(() => l.value && !a.value && (f.value || c.value || i && s.value || !A())), h = null, v = null, b = 0, x = 0, S = !1, C = null;
 	function w() {
-		return !S && l.value && !f.value && !c.value && !(i && s.value) && !!O();
+		return !S && l.value && !f.value && !c.value && !(i && s.value) && !!A();
 	}
-	function E() {
-		h !== null && (k()?.(h), h = null), a.value = !1, v = null;
+	function T() {
+		h !== null && (j()?.(h), h = null), a.value = !1, v = null;
 	}
-	function j() {
+	function E() {
 		if (h !== null || !w()) return;
-		let t = O();
+		let t = A();
 		t && (a.value = !0, h = t((t) => {
 			if (h = null, !w()) {
-				E();
+				T();
 				return;
 			}
 			let n = v === null ? 0 : Math.max(0, t - v);
@@ -122,38 +163,38 @@ function j(e, t = {}) {
 				delta: n,
 				elapsed: b,
 				frame: x++
-			}), w() ? j() : E();
+			}), w() ? E() : T();
 		}));
 	}
-	function M() {
-		w() ? j() : E();
+	function O() {
+		w() ? E() : T();
 	}
 	function N() {
 		v = null, b = 0, x = 0;
 	}
 	function P() {
-		S || (N(), l.value = !0, f.value = !1, M());
+		S || (N(), l.value = !0, f.value = !1, O());
 	}
 	function F() {
-		l.value = !1, f.value = !1, N(), E();
+		l.value = !1, f.value = !1, N(), T();
 	}
 	function I() {
-		l.value && (f.value = !0, M());
+		l.value && (f.value = !0, O());
 	}
 	function L() {
-		S || (f.value = !1, M());
+		S || (f.value = !1, O());
 	}
 	if (r) {
 		let { hidden: e } = o();
 		c.value = e.value, y(e, (e) => {
-			c.value = e, M();
+			c.value = e, O();
 		}, { flush: "sync" });
 	}
 	if (i) {
-		let e = A(), t = typeof e?.matchMedia == "function" ? e.matchMedia(D) : null;
+		let e = M(), t = typeof e?.matchMedia == "function" ? e.matchMedia(k) : null;
 		if (t) {
 			let e = (e) => {
-				s.value = e.matches, M();
+				s.value = e.matches, O();
 			};
 			s.value = t.matches, typeof t.addEventListener == "function" ? (t.addEventListener("change", e), C = () => t.removeEventListener("change", e)) : typeof t.addListener == "function" && (t.addListener(e), C = () => t.removeListener?.(e));
 		}
@@ -170,21 +211,21 @@ function j(e, t = {}) {
 		pause: I,
 		resume: L,
 		dispose: R,
-		yieldToMain: T
+		yieldToMain: D
 	};
 }
 //#endregion
 //#region src/composables/motion/usePrioritizedTask.ts
-function M() {
+function P() {
 	if (!t()) return null;
 	let e = globalThis.scheduler;
 	return e?.postTask?.bind(e) ?? null;
 }
-function N() {
+function F() {
 	let e = /* @__PURE__ */ Error("The task was aborted.");
 	return e.name = "AbortError", e;
 }
-function P(e) {
+function I(e) {
 	let t = e.filter((e) => e != null);
 	if (t.length === 0) return;
 	if (t.length === 1) return t[0];
@@ -199,20 +240,20 @@ function P(e) {
 	}
 	return n.signal;
 }
-function F(e, t = {}) {
-	let { priority: n, signal: r, delay: i } = t, a = M();
+function L(e, t = {}) {
+	let { priority: n, signal: r, delay: i } = t, a = P();
 	return a ? a(e, {
 		priority: n,
 		signal: r,
 		delay: i
 	}) : new Promise((t, n) => {
 		if (r?.aborted) {
-			n(N());
+			n(F());
 			return;
 		}
 		let a = () => {
 			if (r?.aborted) {
-				n(N());
+				n(F());
 				return;
 			}
 			try {
@@ -229,20 +270,20 @@ function F(e, t = {}) {
 		i && i > 0 ? setTimeout(o, i) : o();
 	});
 }
-function I(e) {
+function R(e) {
 	let t = globalThis.TaskController;
 	return typeof t == "function" ? new t(e ? { priority: e } : void 0) : null;
 }
-function L(e) {
-	let t = I(e);
+function z(e) {
+	let t = R(e);
 	return {
-		postTask: (n, r = {}) => F(n, {
+		postTask: (n, r = {}) => L(n, {
 			priority: e,
 			...r,
-			signal: P([t?.signal, r.signal])
+			signal: I([t?.signal, r.signal])
 		}),
 		abort: (e) => t?.abort(e)
 	};
 }
 //#endregion
-export { l as DAMPING, c as SNAP_THRESHOLD, F as postTaskSafe, a as startViewTransition, i as supportsViewTransitions, s as useIntersectionPause, L as usePrioritizedTask, j as useRAFLoop, C as useScrollProgress, x as useStaggerReveal, E as useYieldToMain, r as vReveal, T as yieldToMain };
+export { l as DAMPING, c as SNAP_THRESHOLD, L as postTaskSafe, a as startViewTransition, i as supportsViewTransitions, s as useIntersectionPause, z as usePrioritizedTask, N as useRAFLoop, T as useScrollProgress, C as useStagger, x as useStaggerReveal, O as useYieldToMain, r as vReveal, D as yieldToMain };

package/dist/motion.js

@@ -1,11 +1,11 @@
 import { n as e, t } from "./useSpringMount-CnizvZGm.js";
-import { n, t as r } from "./constants-DsCdlK9I.js";
-import { t as i } from "./useAnimatedNumber-BF6r64lA.js";
-import { onBeforeUnmount as a, onScopeDispose as o, ref as s, shallowRef as c } from "vue";
-import { NumericAnimation as l } from "@mkbabb/keyframes.js";
+import { n, t as r } from "./constants-C8NMonuo.js";
+import { t as i } from "./useAnimatedNumber-DfVgP4te.js";
+import { computed as a, onBeforeUnmount as o, onScopeDispose as s, ref as c, shallowRef as l } from "vue";
+import { NumericAnimation as u } from "@mkbabb/keyframes.js";
 //#region src/composables/motion/useSpringPress.ts
-function u(t = {}) {
-	let n = s(0), r = e(n, {
+function d(t = {}) {
+	let n = c(0), r = e(n, {
 		response: t.response ?? .25,
 		dampingFraction: t.dampingFraction ?? .7,
 		initial: t.initial ?? 0,
@@ -35,10 +35,10 @@ function u(t = {}) {
 }
 //#endregion
 //#region src/composables/motion/useNumericTransition.ts
-function d(e) {
-	let t = s(0), n = s(!1), { from: r, to: i, duration: o, timingFunction: u, onFrame: d } = e, f = c(new l([r, i], {
-		duration: o,
-		timingFunction: u
+function f(e) {
+	let t = c(0), n = c(!1), { from: r, to: i, duration: a, timingFunction: s, onFrame: d } = e, f = l(new u([r, i], {
+		duration: a,
+		timingFunction: s
 	}));
 	async function p() {
 		n.value && f.value.stop(), n.value = !0, t.value = 0;
@@ -61,7 +61,7 @@ function d(e) {
 	function m() {
 		f.value.stop(), n.value = !1;
 	}
-	return a(() => {
+	return o(() => {
 		m();
 	}), {
 		start: p,
@@ -71,25 +71,35 @@ function d(e) {
 	};
 }
 //#endregion
+//#region src/composables/motion/useAnimatedNumberMap.ts
+function p(e) {
+	let { keys: t, source: n, ...r } = e, o = {};
+	for (let e of t) {
+		let t = n(e), { current: s } = i(() => t.value, r);
+		o[e] = a(() => t.value === null ? null : s.value);
+	}
+	return o;
+}
+//#endregion
 //#region src/composables/motion/useCountup.ts
-function f() {
+function m() {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function p(e, t) {
+function h(e, t) {
 	let { easeFn: n, skip: r } = t, i = /* @__PURE__ */ new Map();
 	function a(e) {
 		let t = i.get(e);
 		t && (t.stop(), i.delete(e));
 	}
-	function s(e) {
+	function o(e) {
 		e.querySelectorAll("[data-countup]").forEach((e) => {
 			let t = parseFloat(e.getAttribute("data-countup") ?? "0") || 0, r = parseFloat(e.getAttribute("data-countup-dur") ?? "1200"), o = parseFloat(e.getAttribute("data-countup-delay") ?? "0");
-			if (a(e), f()) {
+			if (a(e), m()) {
 				e.textContent = String(t);
 				return;
 			}
 			e.textContent = "0";
-			let s = new l([{ v: 0 }, { v: t }], {
+			let s = new u([{ v: 0 }, { v: t }], {
 				duration: r,
 				timingFunction: n
 			});
@@ -112,9 +122,9 @@ function p(e, t) {
 	function c() {
 		if (r?.()) return;
 		let t = e.value?.querySelector("[data-state=\"active\"]");
-		t && s(t);
+		t && o(t);
 	}
-	function u() {
+	function l() {
 		document.querySelectorAll("[data-countup]").forEach((e) => {
 			a(e), e.textContent = e.getAttribute("data-countup") ?? e.textContent;
 		});
@@ -122,11 +132,11 @@ function p(e, t) {
 	function d() {
 		for (let e of [...i.keys()]) a(e);
 	}
-	return o(d), {
+	return s(d), {
 		runActive: c,
-		settle: u,
+		settle: l,
 		cancel: d
 	};
 }
 //#endregion
-export { r as DAMPING, n as SNAP_THRESHOLD, i as useAnimatedNumber, p as useCountup, d as useNumericTransition, e as useSpring, t as useSpringMount, u as useSpringPress };
+export { r as DAMPING, n as SNAP_THRESHOLD, i as useAnimatedNumber, p as useAnimatedNumberMap, h as useCountup, f as useNumericTransition, e as useSpring, t as useSpringMount, d as useSpringPress };

package/dist/number-field.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./NumberFieldContent-jO-zGOHf.js";
+import { a as e, i as t, n, r, t as i } from "./NumberFieldContent-Bhhmk95p.js";
 export { e as NumberField, i as NumberFieldContent, n as NumberFieldDecrement, r as NumberFieldIncrement, t as NumberFieldInput };

package/dist/responsive-tabs.js

@@ -1,6 +1,6 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { a as t, i as n, o as r, r as i, s as a } from "./SelectScrollDownButton-BGn3rjs9.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, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
 //#endregion
 //#region src/components/custom/responsive-tabs/ResponsiveTabs.vue

package/dist/search.js

@@ -3,7 +3,7 @@ import { n as t, t as n } from "./minimize-2-BP27-qBY.js";
 import { t as r } from "./search-DBG8qaRs.js";
 import { t as i } from "./x-C4pz9nbD.js";
 import { n as a } from "./badge-Cl6JZ1B7.js";
-import { n as o } from "./button-i8Ek5vvg.js";
+import { n as o } from "./button-BcMzVrqs.js";
 import { n as s, t as c } from "./DialogContent-IQ8_BRrC.js";
 import { t as l } from "./useTextHighlight-Dmtofpk2.js";
 import { n as u, r as d, t as f } from "./PopoverContent-B8WtJECb.js";

package/dist/sortable-list.js

@@ -1,6 +1,6 @@
 import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
 import { n as t } from "./createContext-DBMGRlx4.js";
-import { t as n } from "./useSortable-DnyGXKKY.js";
+import { t as n } from "./useSortable-muI29agz.js";
 import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toRef as u, unref as d, withCtx as f } from "vue";
 //#region src/components/custom/sortable-list/context.ts
 var p = t("glass-ui:sortable", "[glass-ui:sortable] <SortableItem> must be used inside <SortableList>"), m = p.KEY;

package/dist/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 {