@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/{useAnimatedNumber-CLrxicG9.js → useAnimatedNumber-BntskVdQ.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./constants--C2DkLW8.js";
+import { n as e, t } from "./constants-BWj7DkMn.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/{useConfiguratorState-4xblKfwd.js → useConfiguratorState-22BcULzF.js}

@@ -1,22 +1,23 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./FadingScroll-DLRbH5Xr.js";
-import { i as n } from "./ConfiguratorRow-CaP7U3ZA.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, reactive as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRaw as y, unref as b, withCtx as x } from "vue";
+import { t } from "./FadingScroll-P8B30rAD.js";
+import { i as n } from "./ConfiguratorRow-YMXdINHx.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, reactive as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRaw as y, unref as b, withCtx as x, withModifiers as S } from "vue";
 //#region src/components/custom/configurator/Configurator.vue?vue&type=script&setup=true&lang.ts
-var S = ["data-aside-side"], C = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }, w = {
+var C = ["data-aside-side", "data-gallery"], w = {
 	key: 0,
-	class: "configurator-presets shrink-0 border-b px-3 py-2"
+	"data-gallery-dock": "",
+	class: "configurator-presets shrink-0 px-3 py-2"
 }, T = [
-	"aria-selected",
 	"data-active",
+	"aria-pressed",
 	"onClick"
-], E = { class: "flex flex-col" }, D = {
-	key: 2,
+], E = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }, D = { class: "flex flex-col" }, O = {
+	key: 1,
 	class: "configurator-controls flex-1 min-h-0 overflow-visible"
-}, O = { class: "flex flex-col" }, k = {
-	key: 3,
+}, k = { class: "flex flex-col" }, A = {
+	key: 2,
 	class: "configurator-footer shrink-0 border-t px-3 py-2"
-}, A = /* @__PURE__ */ u({
+}, j = /* @__PURE__ */ u({
 	__name: "Configurator",
 	props: {
 		presets: {},
@@ -26,6 +27,7 @@ var S = ["data-aside-side"], C = { class: "configurator-stage relative min-h-0 m
 		scrollMode: { default: "auto" },
 		density: { default: "comfortable" },
 		asideSide: { default: "right" },
+		galleryPlacement: { default: "aside" },
 		asideWidth: {},
 		class: { type: [
 			Boolean,
@@ -43,43 +45,44 @@ var S = ["data-aside-side"], C = { class: "configurator-stage relative min-h-0 m
 	setup(u, { emit: m }) {
 		let h = u;
 		n(i(() => h.density));
-		let y = m, A = i(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1", "grid-rows-[minmax(var(--configurator-stage-min,18rem),auto)_minmax(0,1fr)]", "min-h-0", h.class)), j = i(() => {
+		let y = m, j = i(() => e("configurator glass-floating rounded-panel border border-border/60 overflow-hidden", "grid grid-cols-1", "grid-rows-[auto_minmax(var(--configurator-stage-min,18rem),auto)_minmax(0,1fr)]", "min-h-0", h.class)), M = i(() => {
 			if (h.asideWidth == null) return;
 			let [e, t] = Array.isArray(h.asideWidth) ? h.asideWidth : [h.asideWidth, h.asideWidth];
 			return {
 				"--configurator-aside-min": e,
 				"--configurator-aside-max": t
 			};
-		}), M = i(() => h.asideSide === "left" ? "lg:border-r lg:border-l-0" : "lg:border-l"), N = i(() => h.scrollMode !== "never");
+		}), N = i(() => h.asideSide === "left" ? "lg:border-r lg:border-l-0" : "lg:border-l"), P = i(() => h.scrollMode !== "never");
 		return (n, i) => (p(), s("section", {
 			"data-slot": "configurator",
 			"data-aside-side": u.asideSide,
-			class: d(A.value),
-			style: f(j.value)
-		}, [c("div", C, [_(n.$slots, "stage")]), c("aside", { class: d(b(e)("configurator-aside flex min-h-0 min-w-0 flex-col border-t lg:border-t-0", M.value)) }, [
+			"data-gallery": u.galleryPlacement,
+			class: d(j.value),
+			style: f(M.value)
+		}, [
 			n.$slots.presets || u.presets && u.presets.length > 0 ? (p(), s("div", w, [_(n.$slots, "presets", {
 				presets: u.presets,
 				activePreset: u.activePreset
 			}, () => [l(b(t), {
 				axis: "x",
-				class: "flex gap-2 scrollbar-hidden",
-				role: "tablist",
+				class: "configurator-gallery-track flex gap-2 scrollbar-hidden",
+				role: "group",
 				"aria-label": "Presets"
 			}, {
 				default: x(() => [(p(!0), s(r, null, g(u.presets, (t) => (p(), s("button", {
 					key: t.key,
 					type: "button",
-					role: "tab",
-					"data-slot": "configurator-preset",
-					"aria-selected": t.key === u.activePreset,
+					"data-preset-tile": "",
 					"data-active": t.key === u.activePreset || void 0,
-					class: d(b(e)("tap-squish focus-ring transition-control shrink-0 rounded-pill border px-3 py-1 text-xs font-medium", t.key === u.activePreset ? "glass-quiet border-border/50 text-foreground" : "border-border/40 bg-card/40 text-foreground hover:bg-card/70")),
-					onClick: (e) => y("select-preset", t.key)
+					"aria-pressed": t.key === u.activePreset,
+					class: d(b(e)("configurator-preset-chip glass-capsule glass-capsule-hover shadow-cartoon focus-ring shrink-0 px-3 py-1 text-xs font-medium text-foreground", t.key === u.activePreset && "is-active")),
+					onClick: S((e) => y("select-preset", t.key), ["stop"])
 				}, v(t.label), 11, T))), 128))]),
 				_: 1
 			})])])) : o("", !0),
-			N.value ? (p(), a(b(t), {
-				key: 1,
+			c("div", E, [_(n.$slots, "stage")]),
+			c("aside", { class: d(b(e)("configurator-aside flex min-h-0 min-w-0 flex-col border-t lg:border-t-0", N.value)) }, [P.value ? (p(), a(b(t), {
+				key: 0,
 				axis: "y",
 				class: "configurator-controls flex-1 min-h-0 scrollbar-thin"
 			}, {
@@ -87,20 +90,19 @@ var S = ["data-aside-side"], C = { class: "configurator-stage relative min-h-0 m
 					layers: u.layers,
 					activeLayer: u.activeLayer,
 					selectLayer: (e) => y("select-layer", e)
-				}, () => [c("div", E, [_(n.$slots, "default")])])]),
+				}, () => [c("div", D, [_(n.$slots, "default")])])]),
 				_: 3
-			})) : (p(), s("div", D, [_(n.$slots, "controls", {
+			})) : (p(), s("div", O, [_(n.$slots, "controls", {
 				layers: u.layers,
 				activeLayer: u.activeLayer,
 				selectLayer: (e) => y("select-layer", e)
-			}, () => [c("div", O, [_(n.$slots, "default")])])])),
-			n.$slots.footer ? (p(), s("div", k, [_(n.$slots, "footer", { reset: () => y("reset") })])) : o("", !0)
-		], 2)], 14, S));
+			}, () => [c("div", k, [_(n.$slots, "default")])])])), n.$slots.footer ? (p(), s("div", A, [_(n.$slots, "footer", { reset: () => y("reset") })])) : o("", !0)], 2)
+		], 14, C));
 	}
 });
 //#endregion
 //#region src/components/custom/configurator/useConfiguratorState.ts
-function j(e) {
+function M(e) {
 	let t = y(e);
 	if (typeof structuredClone != "function") throw Error("[glass-ui:configurator] structuredClone is unavailable in this runtime. Pass a custom clone via ConfiguratorStateOptions.clone for environments without structured-clone support.");
 	try {
@@ -109,11 +111,11 @@ function j(e) {
 		throw Error("[glass-ui:configurator] structuredClone failed: " + (e instanceof Error ? e.message : String(e)) + ". Preset values must be structured-cloneable (no functions, symbols, DOM nodes, or class instances). Pass a custom clone via ConfiguratorStateOptions.clone if the data shape requires it.");
 	}
 }
-function M(e, t) {
+function N(e, t) {
 	return JSON.stringify(e) === JSON.stringify(t);
 }
-function N(e) {
-	let t = e.clone ?? j, n = e.equals ?? M, r = e.presets, a = e.cloneMode ?? "commit-on-write", o = e.initialPreset ?? (r.length > 0 ? r[0].key : void 0), s = o ? r.find((e) => e.key === o) : void 0, c = m(s ? t(s.config) : {}), l = h(o), u = a === "per-preset" ? Object.fromEntries(r.map((e) => [e.key, t(e.config)])) : null, d = i(() => l.value), f = i(() => {
+function P(e) {
+	let t = e.clone ?? M, n = e.equals ?? N, r = e.presets, a = e.cloneMode ?? "commit-on-write", o = e.initialPreset ?? (r.length > 0 ? r[0].key : void 0), s = o ? r.find((e) => e.key === o) : void 0, c = m(s ? t(s.config) : {}), l = h(o), u = a === "per-preset" ? Object.fromEntries(r.map((e) => [e.key, t(e.config)])) : null, d = i(() => l.value), f = i(() => {
 		let e = l.value;
 		if (!e) return !1;
 		let t = r.find((t) => t.key === e);
@@ -159,4 +161,4 @@ function N(e) {
 	};
 }
 //#endregion
-export { A as n, N as t };
+export { j as n, P as t };

package/dist/useDockCtaReceive-DX7RDb6_.js

@@ -0,0 +1,88 @@
+import { n as e } from "./springPresets-DfoQ6XRY.js";
+import { onScopeDispose as t, readonly as n, ref as r } from "vue";
+import { ElementMorph as i, springTimingFunction as a } from "@mkbabb/keyframes.js";
+//#region src/composables/motion/useDockCtaReceive.ts
+function o() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function s(e) {
+	if (!e) return null;
+	if (e instanceof HTMLElement) return e;
+	let t = e.$el;
+	return t instanceof HTMLElement ? t : null;
+}
+function c(c, l) {
+	let u = l.respectReducedMotion !== !1, d = l.blur ?? 4, { response: f, dampingFraction: p } = e(l.preset ?? "snappy"), m = a({
+		response: f,
+		dampingFraction: p
+	}), h = f * 4 * 1e3, g = null, _ = 0, v = 0, y = r(!1);
+	function b() {
+		let e = s(l.dockControl.value);
+		e && (e.setAttribute("data-cta-pending", ""), y.value = !0);
+	}
+	function x() {
+		y.value = !1;
+		let e = s(l.dockControl.value);
+		e && e.removeAttribute("data-cta-pending");
+	}
+	function S(e) {
+		e.style.transform = "", e.style.transformOrigin = "", e.style.opacity = "", e.style.filter = "";
+	}
+	function C() {
+		_ && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(_), _ = 0;
+	}
+	function w() {
+		x(), l.onReceived?.();
+	}
+	function T() {
+		let e = s(c.value);
+		if (!e) return;
+		C();
+		let t = e.getBoundingClientRect(), n = s(l.dockControl.value);
+		if (!n) {
+			e.style.opacity = "0", w();
+			return;
+		}
+		let r = n.getBoundingClientRect();
+		if (u && o()) {
+			S(e), e.style.opacity = "0", w();
+			return;
+		}
+		g = new i({
+			x: t.x,
+			y: t.y,
+			width: t.width,
+			height: t.height
+		}, {
+			x: r.x,
+			y: r.y,
+			width: r.width,
+			height: r.height
+		}, { transformOrigin: "center center" }), v = 0;
+		let a = (t) => {
+			if (!g || !c.value) return;
+			v === 0 && (v = t);
+			let n = Math.min(1, (t - v) / h), r = m.fn(n);
+			g.apply(e, r), e.style.opacity = String(Math.min(1, Math.max(0, 1 - r)));
+			let i = d * Math.min(1, Math.max(0, r));
+			e.style.filter = `blur(${i.toFixed(2)}px)`, n < 1 && typeof requestAnimationFrame == "function" ? _ = requestAnimationFrame(a) : (e.style.opacity = "0", g = null, _ = 0, w());
+		};
+		typeof requestAnimationFrame == "function" ? _ = requestAnimationFrame(a) : (S(e), e.style.opacity = "0", w());
+	}
+	function E() {
+		C(), g = null;
+		let e = s(c.value);
+		e && S(e);
+	}
+	return t(() => {
+		C(), g = null;
+	}), {
+		receive: T,
+		reset: E,
+		setPending: b,
+		clearPending: x,
+		pending: n(y)
+	};
+}
+//#endregion
+export { c as t };

package/dist/{useDragMorph-BUgAC-zK.js → useDragMorph-DGLSewwB.js}

@@ -1,5 +1,5 @@
-import { n as e } from "./springPresets-Ce7OYCm9.js";
-import { t } from "./useLiquidFlex-UmA6LMZu.js";
+import { n as e } from "./springPresets-DfoQ6XRY.js";
+import { t } from "./useLiquidFlex-Cc6PjVJD.js";
 import { computed as n, onScopeDispose as r, readonly as i, ref as a } from "vue";
 import { Draggable as o, SpringProgress as s, decayRest as c } from "@mkbabb/keyframes.js";
 //#region src/composables/motion/useDragMorph.ts

package/dist/useDragVelocity-CjcfX3dA.js

@@ -0,0 +1,57 @@
+import { onMounted as e, onScopeDispose as t, readonly as n, ref as r } from "vue";
+//#region src/composables/dom/useDragVelocity.ts
+function i() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function a(a) {
+	let o = () => typeof a.axis == "function" ? a.axis() : a.axis ?? "x", s = a.gain ?? .06, c = a.clamp ?? .7, l = a.respectReducedMotion !== !1, u = r(!1), d = 0, f = 0, p = 0, m = 0, h = !1, g = 0;
+	function _(e) {
+		let t = a.host();
+		t && t.style.setProperty("--atom-drag-v", `${e}`);
+	}
+	function v(e) {
+		let t = Math.tanh(s * Math.abs(e));
+		return t > c ? c : t;
+	}
+	function y(e) {
+		if (!h) {
+			d = 0;
+			return;
+		}
+		let t = p ? e - p : 16.7;
+		p = e;
+		let n = v(g / t * 16.7);
+		m = m * .65 + n * .35, g *= .6, _(Number(m.toFixed(4))), d = requestAnimationFrame(y);
+	}
+	function b(e) {
+		if (!h) return;
+		let t = o() === "y" ? e.clientY : e.clientX;
+		g += t - f, f = t;
+	}
+	function x(e) {
+		if (h = !0, u.value = !0, f = o() === "y" ? e.clientY : e.clientX, p = 0, g = 0, m = 0, l && i()) {
+			_(0);
+			return;
+		}
+		typeof window < "u" && window.addEventListener("pointermove", b, { passive: !0 }), d ||= requestAnimationFrame(y);
+	}
+	function S() {
+		h = !1, u.value = !1, d &&= (cancelAnimationFrame(d), 0), typeof window < "u" && window.removeEventListener("pointermove", b), m = 0, g = 0, _(0);
+	}
+	function C() {
+		h && S();
+	}
+	let w = null;
+	e(() => {
+		w = a.host(), w && w.addEventListener("pointerdown", x);
+	}), typeof window < "u" && (window.addEventListener("pointerup", C), window.addEventListener("pointercancel", C));
+	function T() {
+		S(), w?.removeEventListener("pointerdown", x), w = null, typeof window < "u" && (window.removeEventListener("pointerup", C), window.removeEventListener("pointercancel", C));
+	}
+	return t(T), {
+		dragging: n(u),
+		detach: T
+	};
+}
+//#endregion
+export { a as t };

package/dist/useGooMorph-Cs13NgYL.js

@@ -0,0 +1,104 @@
+import { t as e } from "./useLiquidFlex-Cc6PjVJD.js";
+import { t } from "./useMorphField-ogBM7ubT.js";
+import { onScopeDispose as n } from "vue";
+//#region src/composables/motion/useGooMorph.ts
+var r = t.lateralNeck, i = 1.618033988749895, a = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function o(e, t, n) {
+	let r = getComputedStyle(e).getPropertyValue(t).trim();
+	return r ? r.endsWith("ms") ? Number.parseFloat(r) || n : r.endsWith("s") ? (Number.parseFloat(r) || n / 1e3) * 1e3 : Number.parseFloat(r) || n : n;
+}
+function s(e, t) {
+	return Math.sin(Math.PI * Math.min(1, Math.max(0, e))) ** +t;
+}
+function c(t) {
+	let { barbellRefs: c, hostRef: l, vertical: u, centerOf: d, restSize: f, tokenPrefix: p = "pager-worm", neckGap: m = r.kPeak } = t, { bodyARef: h, bodyBRef: g, neckRef: _ } = c, v = `--${p}-flow`, y = `--${p}-duration`, b = `--${p}-max-stretch`, x = e({
+		from: 0,
+		to: 0,
+		axis: "width",
+		squishLaw: "linear",
+		maxStretch: () => {
+			let e = l.value;
+			if (!e) return 1.4;
+			let t = getComputedStyle(e).getPropertyValue(b).trim();
+			return Number(t) || 1.4;
+		}
+	}), S = 0, C = null;
+	function w() {
+		S &&= (cancelAnimationFrame(S), 0), C &&= (clearTimeout(C), null);
+	}
+	function T(e) {
+		let t = getComputedStyle(e).getPropertyValue("--goo-t").trim();
+		return Number.parseFloat(t) || 0;
+	}
+	function E(e) {
+		let t = getComputedStyle(e).getPropertyValue(`--${p}-neck-gap`).trim(), n = Number.parseFloat(t);
+		return Number.isFinite(n) && n > 0 ? n : m;
+	}
+	function D(e, t, n, r, i) {
+		u.value ? e.style.transform = `translateY(${t.toFixed(2)}px) translateX(${n.toFixed(2)}px) translateY(-50%) translateX(-50%) scaleY(${r.toFixed(4)}) scaleX(${i.toFixed(4)})` : e.style.transform = `translateX(${t.toFixed(2)}px) translateY(${n.toFixed(2)}px) translateX(-50%) translateY(-50%) scaleX(${r.toFixed(4)}) scaleY(${i.toFixed(4)})`;
+	}
+	function O(e, t, n, r, a) {
+		let o = h.value, c = g.value, d = _.value, p = l.value;
+		if (!o || !c || !d || !p) return;
+		let m = Math.max(1, f()) / i, v = t - e, y = r - n, b = y === 0 ? 1 : Math.min(1, Math.max(0, (a - n) / y)), x = E(p), S = 1 - s(b, 1) * (1 - x), C = (e + t) / 2, w = v / 2 * S, T = C - w, O = C + w, k = s(b, 1.5), A = Math.abs(O - T), j = getComputedStyle(p).getPropertyValue("--goo-weight").trim(), M = Math.min(1, Math.max(0, Number.parseFloat(j) || 0)), N = 1 + s(b, 1) * .12 * M, P = 1 / N, F = -m * .06 * s(b, 1) * M;
+		D(o, T, F, N, P), D(c, O, F, N, P);
+		let I = m > 0 ? A / m : 1;
+		u.value ? d.style.transform = `translateY(${C.toFixed(2)}px) translateY(-50%) scaleY(${I.toFixed(4)}) scaleX(${k.toFixed(4)})` : d.style.transform = `translateX(${C.toFixed(2)}px) translateX(-50%) scaleX(${I.toFixed(4)}) scaleY(${k.toFixed(4)})`, d.style.opacity = k.toFixed(4), p.style.setProperty("--goo-neck-girth", k.toFixed(4));
+	}
+	function k(e) {
+		let t = h.value, n = g.value, r = _.value, i = l.value, a = d(e);
+		!t || !n || !r || a == null || (D(t, a, 0, 1, 1), D(n, a, 0, 1, 1), r.style.opacity = "0", u.value ? r.style.transform = `translateY(${a.toFixed(2)}px) translateY(-50%) scaleY(0.0001) scaleX(0)` : r.style.transform = `translateX(${a.toFixed(2)}px) translateX(-50%) scaleX(0.0001) scaleY(0)`, i && (i.style.setProperty("--goo-neck-girth", "0"), i.style.setProperty("--stretch", "1")));
+	}
+	function A(e) {
+		w();
+		let t = l.value;
+		if (t) {
+			let n = t.style.transition;
+			t.style.transition = "none", t.style.setProperty("--goo-t", String(e)), t.offsetWidth, t.style.transition = n;
+		}
+		k(e);
+	}
+	function j(e) {
+		let t = l.value;
+		if (!t || !h.value || a()) return;
+		w();
+		let n = t.style.transition;
+		t.style.transition = "none", t.style.setProperty("--goo-t", String(e)), t.offsetWidth, t.style.transition = n;
+		let r = Math.floor(e), i = Math.ceil(e), o = d(r), s = d(i);
+		o == null || s == null || O(o, s, r, i, e);
+	}
+	function M(e, t) {
+		let n = l.value;
+		if (!h.value || !n || e === t) {
+			n && A(t);
+			return;
+		}
+		if (a()) {
+			A(t);
+			return;
+		}
+		let r = d(e), i = d(t);
+		if (r == null || i == null) {
+			A(t);
+			return;
+		}
+		w();
+		let s = u.value ? n.offsetHeight || 1 : n.offsetWidth || 1, c = Math.min(Math.abs(i - r) / Math.max(1, s), 1), f = Math.max(.5, c);
+		x.squish(f), n.style.setProperty("--stretch", String(x.stretch.value));
+		let p = o(n, y, 1800), m = getComputedStyle(n).getPropertyValue(v).trim() || "ease-in-out";
+		n.style.transition = "none", n.style.setProperty("--goo-t", String(e)), n.offsetWidth, n.style.transition = `--goo-t ${p}ms ${m}`, n.style.setProperty("--goo-t", String(t)), C = setTimeout(() => {
+			x.squish(0), n.style.setProperty("--stretch", String(x.stretch.value)), C = null;
+		}, p * .82);
+		let g = performance.now(), _ = () => {
+			O(r, i, e, t, T(n)), performance.now() - g < p + 80 ? S = requestAnimationFrame(_) : (S = 0, k(t));
+		};
+		S = requestAnimationFrame(_);
+	}
+	return n(w), {
+		travel: M,
+		snap: A,
+		drive: j
+	};
+}
+//#endregion
+export { c as t };