@mkbabb/glass-ui 3.5.0 → 3.5.1

package/dist/composables/motion/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "../constants";
 export * from "../useStaggerReveal";
+export * from "../useStagger";
 export * from "../useScrollProgress";
 export * from "../useRAFLoop";
 export * from "../useIntersectionPause";

package/dist/composables/motion/index.d.ts

@@ -4,4 +4,5 @@ export * from "./useSpringMount";
 export * from "./useSpringPress";
 export * from "./useNumericTransition";
 export * from "./useAnimatedNumber";
+export * from "./useAnimatedNumberMap";
 export * from "./useCountup";

package/dist/composables/motion/useAnimatedNumberMap.d.ts

@@ -0,0 +1,29 @@
+import { type ComputedRef } from "vue";
+import { type UseAnimatedNumberOptions } from "./useAnimatedNumber";
+export interface UseAnimatedNumberMapOptions extends UseAnimatedNumberOptions {
+}
+/**
+ * Fan out N independent `useAnimatedNumber` instances into a `Record<K, ...>`.
+ *
+ * Each key gets one rAF-smoothed `ComputedRef<number | null>`. The smoothing
+ * options apply identically across the set; consumers that need per-key
+ * options should call `useAnimatedNumber` per key directly.
+ *
+ * The `null` propagation is preserved: when `source(key)` resolves to `null`,
+ * the corresponding ref returns `null` rather than freezing on the last
+ * smoothed sample. This matches the per-metric `raw → smoothed` contract.
+ *
+ * @example
+ * const keys = ["ping", "jitter", "download", "upload"] as const;
+ * const smoothed = useAnimatedNumberMap({
+ *     keys,
+ *     source: (k) => computed(() => store.resultFor(k).value ?? null),
+ *     damping: DAMPING.domPill,
+ *     snapThreshold: SNAP_THRESHOLD.dom,
+ * });
+ * // smoothed.ping.value, smoothed.jitter.value, ...
+ */
+export declare function useAnimatedNumberMap<K extends string>(options: {
+    keys: readonly K[];
+    source: (key: K) => ComputedRef<number | null>;
+} & UseAnimatedNumberMapOptions): Record<K, ComputedRef<number | null>>;

package/dist/composables/motion/useStagger.d.ts

@@ -0,0 +1,50 @@
+import { type Ref } from "vue";
+export interface UseStaggerOptions {
+    /** Count of staggered slots. Each slot maps to one boolean in `revealed`. */
+    items: number;
+    /**
+     * Delay between consecutive reveals.
+     *
+     * Default 80ms — mirrors the `--motion-stagger-default` token in
+     * `tokens.css` (AJ-W4-κ canon). Consumers driving per-row CSS
+     * `animation-delay` cascades on the same surface should also read
+     * `--motion-stagger-default` so the JS-driven cascade (this composable)
+     * and the CSS-driven cascade stay in lockstep.
+     *
+     * The two adjacent canon tiers are:
+     *   - `--motion-stagger-tight: 40ms` — dense row cascades
+     *   - `--motion-stagger-relaxed: 120ms` — wide series cascades
+     */
+    delayMs?: number;
+    /** Delay before the first reveal fires. Default 0. */
+    initialDelayMs?: number;
+    /** Auto-start on creation. Default true. */
+    immediate?: boolean;
+    /**
+     * When true, honour `prefers-reduced-motion: reduce` by flipping every
+     * slot true synchronously instead of cascading the timeline. Mirrors
+     * the canonical opt-in on `useAnimatedNumber` and the global
+     * `transitions.css` / `utilities.css` reduced-motion brackets. SSR
+     * environments (no `window.matchMedia`) treat the option as a no-op.
+     * Default true.
+     */
+    respectReducedMotion?: boolean;
+}
+export interface UseStaggerControls {
+    /** Per-slot reveal state. `revealed.value[i]` flips true at `initialDelayMs + i * delayMs`. */
+    revealed: Ref<boolean[]>;
+    /** Re-arm the cascade. Resets `revealed` to all-false then fires the timeline. */
+    start: () => void;
+    /** Reset to all-false. Cancels any pending reveals. */
+    reset: () => void;
+    /** True once every slot has flipped. */
+    isComplete: Ref<boolean>;
+}
+/**
+ * Drive a fixed-count staggered reveal off a single timer cascade.
+ *
+ * @example
+ * const { revealed, start } = useStagger({ items: visible.value.length, delayMs: 80, initialDelayMs: 80, immediate: false });
+ * watch(allComplete, (done, prev) => { if (done && !prev) start(); });
+ */
+export declare function useStagger(options: UseStaggerOptions): UseStaggerControls;

package/dist/motion-core.js

@@ -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 { 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.5.0",
+    "version": "3.5.1",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {