@mkbabb/glass-ui 3.6.0 → 3.8.0

package/dist/dock.js

@@ -1,15 +1,15 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./createLucideIcon-DuDoe_ra.js";
-import { t as n } from "./chevron-down-pBY8sYfV.js";
-import { t as r } from "./useTouchGate-CS5Csc2h.js";
-import { n as i } from "./createContext-DBMGRlx4.js";
-import { i as a, n as o, r as s, t as c } from "./dockContext-spUj_-E5.js";
-import { i as l, n as u, r as d, t as f } from "./TabsIndicator-DA0x9gPr.js";
-import { t as p } from "./useViewTransition-DI0Rs2rV.js";
-import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, onMounted as O, onUnmounted as k, openBlock as A, readonly as j, ref as M, renderList as N, renderSlot as P, resolveDynamicComponent as F, toDisplayString as I, unref as L, useAttrs as R, useId as ee, useModel as z, useTemplateRef as B, watch as V, withCtx as H } from "vue";
-import { DropdownMenuTrigger as U, Primitive as W, SelectIcon as G, SelectTrigger as K, useForwardProps as q } from "reka-ui";
-import { SpringProgress as te } from "@mkbabb/keyframes.js";
-var ne = t("pause", [["rect", {
+import { t } from "./createLucideIcon-B6uNAU9G.js";
+import { t as n } from "./chevron-down-BSkTP2aL.js";
+import { t as r } from "./useSpecularTracking-BVRZsRHA.js";
+import { t as i } from "./useTouchGate-WFyJYsth.js";
+import { n as a, t as o } from "./createContext-B44Sah_H.js";
+import { i as s, n as c, r as l, t as u } from "./dockContext-BKeIMmNk.js";
+import { i as d, n as f, r as p, t as m } from "./TabsList-qyHZ2lKY.js";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onBeforeUnmount as O, onMounted as k, onUnmounted as A, openBlock as j, readonly as M, ref as N, renderList as P, renderSlot as F, resolveDynamicComponent as I, toDisplayString as L, unref as R, useAttrs as z, useId as ee, useModel as te, useTemplateRef as B, watch as V, withCtx as H } from "vue";
+import { DropdownMenuTrigger as U, Primitive as W, SelectIcon as G, SelectTrigger as ne, useForwardProps as K } from "reka-ui";
+import { SpringProgress as q } from "@mkbabb/keyframes.js";
+var J = t("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -23,7 +23,7 @@ var ne = t("pause", [["rect", {
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), J = t("play", [["path", {
+}]]), re = t("play", [["path", {
 	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
 	key: "10ikf1"
 }]]);
@@ -36,8 +36,8 @@ function Y(e, t) {
 }
 //#endregion
 //#region src/components/custom/dock/composables/useDockState.ts
-function re(e) {
-	let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, c = s(), l = M(c ? "pinned" : "collapsed"), u = M(c), d = M(c), f = null, p = M(0), m = h(() => p.value > 0), g = null, _ = null, v = !1, y = l.value;
+function ie(e) {
+	let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, c = s(), l = N(c ? "pinned" : "collapsed"), u = N(c), d = N(c), f = null, p = N(0), m = g(() => p.value > 0), h = null, _ = null, v = !1, y = l.value;
 	function b() {
 		s() && (l.value = "pinned"), u.value = l.value !== "collapsed", d.value = l.value === "pinned", o && y !== l.value && o(l.value, y), y = l.value;
 	}
@@ -48,7 +48,7 @@ function re(e) {
 		_ !== null && (cancelAnimationFrame(_), _ = null);
 	}
 	function C() {
-		S(), g?.();
+		S(), h?.();
 	}
 	function w() {
 		s() || p.value > 0 || (x(), f = setTimeout(() => {
@@ -78,7 +78,7 @@ function re(e) {
 	function O() {
 		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
-	function A(e) {
+	function k(e) {
 		if (!s() && l.value === "hover") {
 			if (p.value > 0) return;
 			if (e) {
@@ -91,7 +91,7 @@ function re(e) {
 	function j() {
 		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
-	function N(e) {
+	function M(e) {
 		if (s() || l.value !== "hover" || p.value > 0) return;
 		let t = e.currentTarget;
 		e.relatedTarget && t.contains(e.relatedTarget) || Y(e.relatedTarget, a) || w();
@@ -118,8 +118,8 @@ function re(e) {
 	}
 	return V(u, (e) => {
 		e ? (C(), _ = requestAnimationFrame(() => {
-			_ = null, u.value && (document.addEventListener("pointerdown", L, !0), g = () => {
-				document.removeEventListener("pointerdown", L, !0), g = null;
+			_ = null, u.value && (document.addEventListener("pointerdown", L, !0), h = () => {
+				document.removeEventListener("pointerdown", L, !0), h = null;
 			});
 		})) : C();
 	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : V(r, (e) => {
@@ -128,7 +128,7 @@ function re(e) {
 			return;
 		}
 		l.value = "collapsed", b();
-	}, { immediate: !0 }), k(() => {
+	}, { immediate: !0 }), A(() => {
 		x(), C();
 	}), {
 		state: l,
@@ -136,9 +136,9 @@ function re(e) {
 		isPinned: d,
 		isHeld: m,
 		onMouseEnter: O,
-		onMouseLeave: A,
+		onMouseLeave: k,
 		onFocusIn: j,
-		onFocusOut: N,
+		onFocusOut: M,
 		onClickCollapsed: P,
 		keepOpen: F,
 		release: I,
@@ -147,131 +147,165 @@ function re(e) {
 	};
 }
 //#endregion
-//#region src/components/custom/dock/composables/useLayerTransition.ts
+//#region src/components/custom/dock/composables/dockMorphContext.ts
 var X = {
 	response: .32,
 	dampingFraction: .7
-};
-function ie(e) {
-	let { containerEl: t, activeLayer: n, axis: r, directionTypes: i } = e, a = typeof document < "u" && "startViewTransition" in document, o = h(() => r?.value === "vertical" ? "height" : "width"), s = (e) => e.getBoundingClientRect()[o.value], c = M(n.value), l = M(null), u = 0, d = null, f = null, m = null;
-	function g() {
-		f &&= (f.dispose(), null), m = null;
-	}
-	function _(e) {
-		let t = e.trim();
-		return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
-	}
-	function v(e) {
-		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(_), i = t.transitionDelay.split(",").map(_), a = r.map((e, t) => {
-			let r = n[t] ?? n[0] ?? "all";
-			return r !== "all" && r !== o.value ? 0 : e + (i[t] ?? i[0] ?? 0);
-		});
-		return Math.max(0, ...a) + 50;
-	}
-	function y() {
-		d &&= (clearTimeout(d), null);
-	}
-	function b(e, t) {
-		e.style.setProperty(o.value, t);
-	}
-	function x(e) {
-		e.style.removeProperty(o.value);
+}, Z = o("glass-ui:dock-morph-context");
+Z.KEY;
+function ae(e) {
+	Z.provide(e);
+}
+var oe = Z.use;
+function se(e) {
+	let { rootEl: t, outerEl: n, outerActiveLayer: r, outerAxis: i } = e, a = null, o = /* @__PURE__ */ new Set();
+	function s() {
+		return t.value;
 	}
-	function S(e) {
-		e.style.willChange = o.value;
+	function c() {
+		a &&= (a.dispose(), null);
 	}
-	function C(e) {
-		e.style.willChange = "auto";
+	function l(e) {
+		return e === "vertical" ? "height" : "width";
 	}
-	function T(e) {
-		return e.closest(".glass-dock");
+	function u(e) {
+		return l(e) === "width" ? "inline-size" : "block-size";
 	}
-	function E(e) {
-		T(e)?.setAttribute("data-morphing", "");
+	function d(e, t) {
+		return e.getBoundingClientRect()[l(t)];
 	}
-	function D(e) {
-		T(e)?.removeAttribute("data-morphing");
+	function f(e) {
+		e.style.removeProperty("--dock-morph-from"), e.style.removeProperty("--dock-morph-to");
 	}
-	function O(e, t) {
-		let n = t < 0 ? 0 : t > 1 ? 1 : t;
-		e.style.setProperty("--dock-morph-progress", `${n}`);
+	function p() {
+		for (let e of o) {
+			let t = e.containerEl.value;
+			if (t && t.style.getPropertyValue("--dock-morph-to")) return !0;
+		}
+		return !1;
 	}
-	function A(e) {
-		e.setAttribute("data-revealing", ""), e.style.setProperty("--dock-morph-progress", "0");
+	function m(e) {
+		let t = e.containerEl.value;
+		t && f(t), e.leavingLayer.value = null;
 	}
-	function j(e) {
-		e.removeAttribute("data-revealing"), e.style.removeProperty("--dock-morph-progress");
+	function h() {
+		if (p()) return;
+		let e = s();
+		e && (e.style.removeProperty("--dock-morph-t"), e.removeAttribute("data-morphing")), c();
 	}
-	V(n, (e, n) => {
-		if (e === n) return;
-		let r = t.value;
-		if (!r) {
-			c.value = e, l.value = null;
-			return;
-		}
-		if (a) {
-			y();
-			let t = ++u;
-			E(r);
-			let a = i?.(n, e), { finished: o } = p(() => {
-				l.value = n, c.value = e;
-			}, a && a.length > 0 ? { types: a } : void 0);
-			o.finally(() => {
-				t === u && (l.value = null, D(r));
+	function g() {
+		if (!s()) return;
+		let e = a !== null && !a.settled ? a.velocity : 0;
+		if (!a || a.settled) {
+			c(), a = new q({
+				response: X.response,
+				dampingFraction: X.dampingFraction,
+				initial: 0,
+				respectReducedMotion: !0
 			});
-			return;
+			let t = a;
+			t.reset(0, e), t.target = 1, t.play((e) => {
+				let n = s();
+				if (n && n.style.setProperty("--dock-morph-t", `${e}`), t.settled) {
+					for (let e of o) {
+						let t = e.containerEl.value;
+						t && t.style.getPropertyValue("--dock-morph-to") && m(e);
+					}
+					h();
+				}
+			});
+		} else a.reset(0, e), a.target = 1;
+	}
+	function _(e, t, n, r) {
+		if (t !== e.txId) return;
+		let i = e.containerEl.value, a = s();
+		if (!(!i || !a)) {
+			if (Math.abs(r - n) < .5) {
+				m(e), h();
+				return;
+			}
+			i.style.setProperty("--dock-morph-from", `${n}px`), i.style.setProperty("--dock-morph-to", `${r}px`), a.setAttribute("data-morphing", ""), g();
 		}
-		if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-			y(), ++u, c.value = e, l.value = null;
+	}
+	function v(e, t, n) {
+		if (t === n) return;
+		let r = e.containerEl.value, i = s();
+		if (!r || !i) {
+			e.currentLayer.value = t, e.leavingLayer.value = null;
 			return;
 		}
-		y();
-		let o = ++u, h = f !== null && m === r && !f.settled ? f : null, _ = h ? h.value : s(r);
-		h || (g(), b(r, `${_}px`)), w(() => {
-			o === u && r && requestAnimationFrame(() => {
-				if (o !== u) return;
-				l.value = n, c.value = e, r.style.transition = "none", x(r);
-				let t = s(r);
-				if (b(r, `${_}px`), r.offsetWidth, !h && Math.abs(t - _) < .5) {
-					r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null;
-					return;
-				}
-				S(r), E(r), A(r);
-				let i = t - _;
-				h || (f = new te({
-					response: X.response,
-					dampingFraction: X.dampingFraction,
-					initial: _,
-					respectReducedMotion: !0
-				}), m = r);
-				let a = f;
-				a.target = t, a.play((e) => {
-					o === u && (b(r, `${e}px`), Math.abs(i) > .5 ? O(r, (e - _) / i) : O(r, 1), a.settled && (r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null, g()));
-				}), d = setTimeout(() => {
-					o === u && (r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null, g());
-				}, v(r));
-			});
+		let a = ++e.txId, c = e.axis.value, l = d(r, c);
+		e.leavingLayer.value = n, e.currentLayer.value = t;
+		for (let t of o) {
+			if (t === e) continue;
+			let n = t.containerEl.value;
+			if (n && n.style.getPropertyValue("--dock-morph-to")) {
+				let e = d(n, t.axis.value);
+				n.style.setProperty("--dock-morph-from", `${e}px`);
+			}
+		}
+		r.style.setProperty("--dock-morph-from", `${l}px`), r.style.setProperty("--dock-morph-to", `${l}px`), i.style.setProperty("--dock-morph-t", "0"), i.setAttribute("data-morphing", ""), requestAnimationFrame(() => {
+			if (a !== e.txId) return;
+			let t = e.containerEl.value, n = s();
+			if (!t || !n) return;
+			f(t);
+			let r = u(c);
+			t.style.setProperty(r, "max-content");
+			let i = d(t, c);
+			t.style.removeProperty(r), _(e, a, l, i);
 		});
-	});
-	function N(e) {
-		let n = t.value;
-		n && e.target === n && e.propertyName === o.value && (y(), g(), n.style.transition = "", x(n), C(n), D(n), j(n), l.value = null);
 	}
-	return k(() => {
-		y(), g();
+	function y(e) {
+		let t = {
+			containerEl: e.containerEl,
+			activeLayer: e.activeLayer,
+			axis: e.axis,
+			currentLayer: N(e.activeLayer.value),
+			leavingLayer: N(null),
+			txId: 0,
+			stop: () => {}
+		};
+		return t.stop = V(e.activeLayer, (e, n) => {
+			v(t, e, n);
+		}), o.add(t), t;
+	}
+	function b(e) {
+		e.stop(), o.delete(e), h();
+	}
+	let x = y({
+		containerEl: n,
+		activeLayer: r,
+		axis: i
+	}), S = { registerGroup(e) {
+		let t = y(e);
+		return {
+			currentLayer: M(t.currentLayer),
+			leavingLayer: M(t.leavingLayer),
+			release: () => b(t)
+		};
+	} };
+	function C(e) {
+		let t = n.value;
+		if (!t || e.target !== t) return;
+		let r = u(i.value);
+		e.propertyName !== r && e.propertyName !== l(i.value) || a && a.settled && (m(x), h());
+	}
+	return A(() => {
+		for (let e of o) e.stop();
+		o.clear(), c();
 	}), {
-		onTransitionEnd: N,
-		currentLayer: c,
-		leavingLayer: l
+		context: S,
+		outerCurrentLayer: M(x.currentLayer),
+		onOuterTransitionEnd: C
 	};
 }
 //#endregion
 //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
-var ae = [
+var ce = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], oe = ["inert"], se = ["inert"], ce = /* @__PURE__ */ x({
+], le = ["inert"], ue = ["inert"], Q = /* @__PURE__ */ S({
 	__name: "GlassDock",
 	props: {
 		collapseDelay: { default: 2e3 },
@@ -297,154 +331,220 @@ var ae = [
 		containerName: {}
 	},
 	setup(e, { expose: t }) {
-		let n = e, i = h(() => {
+		let n = e, r = g(() => {
 			if (n.containerName) return {
 				"container-type": "inline-size",
 				"container-name": n.containerName
 			};
-		}), a = B("dockEl"), s = B("layersEl"), c = h(() => n.variant), l = h(() => n.shape), u = h(() => n.layout), d = h(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), f = h(() => n.density), p = h(() => n.overflow === "scroll" ? d.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), m = h(() => n.alwaysExpanded || d.value === "vertical" || n.layout === "grid"), g = h(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), _ = M(!1), b = r(n.collapseDelay), x = `glass-dock-${ee()}`, S = null, C = 0, { expanded: w, isPinned: k, isHeld: j, onMouseEnter: N, onMouseLeave: F, onFocusIn: I, onFocusOut: R, onClickCollapsed: z, keepOpen: H, release: U, expand: W, collapse: G } = re({
+		}), a = B("dockEl"), o = B("layersEl"), s = g(() => n.variant), l = g(() => n.shape), u = g(() => n.layout), d = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), f = g(() => n.density), p = g(() => n.overflow === "scroll" ? d.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), m = g(() => n.alwaysExpanded || d.value === "vertical" || n.layout === "grid"), h = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), _ = N(!1), v = i(n.collapseDelay), x = `glass-dock-${ee()}`, S = null, C = 0, { expanded: w, isPinned: T, isHeld: A, onMouseEnter: M, onMouseLeave: P, onFocusIn: I, onFocusOut: L, onClickCollapsed: z, keepOpen: te, release: H, expand: U, collapse: W } = ie({
 			collapseDelay: n.collapseDelay,
 			rootEl: a,
 			alwaysExpanded: m,
 			isTransitioning: _,
 			dockId: x
 		});
-		o({
+		c({
 			id: x,
 			orientation: d,
-			keepOpen: H,
-			release: U,
-			held: j
+			keepOpen: te,
+			release: H,
+			held: A
 		});
-		let K = h(() => m.value || w.value), { onTransitionEnd: q } = ie({
-			containerEl: s,
-			activeLayer: h(() => K.value ? "full" : "summary"),
-			axis: h(() => "horizontal"),
-			directionTypes: (e, t) => [t === "full" ? "dock-expand" : "dock-collapse"]
-		}), te = typeof document < "u" && "startViewTransition" in document, ne = h(() => te ? {
-			"view-transition-name": x.replace(/[^a-zA-Z0-9_-]/g, "-"),
-			"view-transition-class": "gl-dock-layer"
-		} : void 0);
+		let G = g(() => m.value || w.value), { context: ne, onOuterTransitionEnd: K } = se({
+			rootEl: a,
+			outerEl: o,
+			outerActiveLayer: g(() => G.value ? "full" : "summary"),
+			outerAxis: g(() => "horizontal")
+		});
+		ae(ne);
+		let q = g(() => ({ "view-transition-name": x.replace(/[^a-zA-Z0-9_-]/g, "-") }));
 		function J(e) {
 			let t = e.trim();
 			return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
 		}
-		function Y(e) {
+		function re(e) {
 			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(J), r = t.transitionDelay.split(",").map(J);
 			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
 		}
+		function Y(e) {
+			let t = J(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
+			return Math.max(t > 0 ? t * 2 : 0, 600);
+		}
 		function X() {
 			S &&= (clearTimeout(S), null);
 		}
-		let ce = new Set([
+		let Z = new Set([
 			"width",
 			"height",
 			"padding",
 			"transform"
 		]);
-		function Z() {
+		function oe() {
 			let e = a.value;
 			if (!e) return;
 			let t = ++C;
 			X(), _.value = !0, S = setTimeout(() => {
 				t === C && (_.value = !1, S = null);
-			}, Y(e) + 50);
+			}, Math.max(re(e), Y(e)) + 50);
 		}
 		function Q(e) {
-			e.target === a.value && ce.has(e.propertyName) && (X(), C++, _.value = !1);
+			e.target === a.value && Z.has(e.propertyName) && (X(), C++, _.value = !1);
 		}
-		O(() => {
-			(n.alwaysExpanded || !n.startCollapsed) && W();
+		k(() => {
+			(n.alwaysExpanded || !n.startCollapsed) && U();
 		});
 		function $() {
 			return d.value === "horizontal" && !m.value;
 		}
-		function le(e) {
-			if (!$() || K.value) return;
+		function de(e) {
+			if (!$() || G.value) return;
 			let t = a.value, n = e.touches[0];
-			!t || !n || b.handleTouchStart(t, n.clientY);
+			!t || !n || v.handleTouchStart(t, n.clientY);
 		}
-		function ue(e) {
-			$() && b.handleScrollCheck(e);
+		function fe(e) {
+			$() && v.handleScrollCheck(e);
 		}
-		function de() {
+		function pe() {
 			if (!$()) return;
-			let e = b.isActive.value;
-			b.handleTouchEnd(), !e && b.isActive.value && !K.value && W();
+			let e = v.isActive.value;
+			v.handleTouchEnd(), !e && v.isActive.value && !G.value && U();
 		}
-		return V(b.isActive, (e) => {
-			!e && w.value && !k.value && !m.value && G();
-		}), V(K, (e) => {
-			Z(), e || b.deactivate();
-		}), D(X), t({
+		return V(v.isActive, (e) => {
+			!e && w.value && !T.value && !m.value && W();
+		}), V(G, (e) => {
+			oe(), e || v.deactivate();
+		}), O(X), t({
 			expanded: w,
-			isPinned: k,
-			isHeld: j,
+			isPinned: T,
+			isHeld: A,
 			isTransitioning: _,
-			expand: W,
-			collapse: G,
-			keepOpen: H,
-			release: U
-		}), (t, n) => (A(), v("div", {
+			expand: U,
+			collapse: W,
+			keepOpen: te,
+			release: H
+		}), (t, n) => (j(), y("div", {
 			ref_key: "dockEl",
 			ref: a,
-			class: T(["glass-dock", [
+			class: E(["glass-dock", [
 				d.value,
-				`variant-${c.value}`,
+				`variant-${s.value}`,
 				`shape-${l.value}`,
 				`layout-${u.value}`,
 				p.value,
 				{
-					expanded: K.value,
-					collapsed: !K.value,
-					pinned: L(k),
-					"fit-content": g.value,
+					expanded: G.value,
+					collapsed: !G.value,
+					pinned: R(T),
+					"fit-content": h.value,
 					"always-expanded": m.value,
-					"dock-overflow-wrap": e.overflow === "wrap"
+					"dock-overflow-wrap": e.overflow === "wrap" && d.value !== "vertical"
 				},
 				e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
 			]]),
 			"data-density": f.value,
-			"data-held": L(j) || void 0,
+			"data-held": R(A) || void 0,
 			"data-container-name": e.containerName || void 0,
-			style: E(i.value),
-			onMouseenter: n[2] ||= (...e) => L(N) && L(N)(...e),
-			onMouseleave: n[3] ||= (e) => L(F)(e),
-			onFocusin: n[4] ||= (...e) => L(I) && L(I)(...e),
-			onFocusout: n[5] ||= (...e) => L(R) && L(R)(...e),
-			onTouchstart: le,
-			onTouchmove: ue,
-			onTouchend: de,
+			style: D([r.value, q.value]),
+			onMouseenter: n[2] ||= (...e) => R(M) && R(M)(...e),
+			onMouseleave: n[3] ||= (e) => R(P)(e),
+			onFocusin: n[4] ||= (...e) => R(I) && R(I)(...e),
+			onFocusout: n[5] ||= (...e) => R(L) && R(L)(...e),
+			onTouchstart: de,
+			onTouchmove: fe,
+			onTouchend: pe,
 			onTransitionend: Q,
 			onTransitioncancel: Q
-		}, [d.value === "horizontal" ? (A(), v("div", {
+		}, [d.value === "horizontal" ? (j(), y("div", {
 			key: 0,
 			ref_key: "layersEl",
-			ref: s,
+			ref: o,
 			class: "dock-layers",
-			style: E(ne.value),
-			onTransitionend: n[1] ||= (...e) => L(q) && L(q)(...e)
-		}, [y("div", {
-			class: T(["dock-layer dock-layer--full", { "layer-active": K.value }]),
-			inert: !L(w) || void 0
-		}, [P(t.$slots, "default")], 10, oe), y("div", {
-			class: T(["dock-layer dock-layer--summary", { "layer-active": !K.value }]),
-			inert: L(w) || void 0,
-			onClick: n[0] ||= (...e) => L(z) && L(z)(...e)
-		}, [P(t.$slots, "collapsed")], 10, se)], 36)) : P(t.$slots, "default", { key: 1 })], 46, ae));
-	}
-}), Z = i("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
-Z.KEY;
-function Q(e) {
-	Z.provide(e);
+			onTransitionend: n[1] ||= (...e) => R(K) && R(K)(...e)
+		}, [b("div", {
+			class: E(["dock-layer dock-layer--full", { "is-active": G.value }]),
+			inert: !R(w) || void 0
+		}, [F(t.$slots, "default")], 10, le), b("div", {
+			class: E(["dock-layer dock-layer--summary", { "is-active": !G.value }]),
+			inert: R(w) || void 0,
+			onClick: n[0] ||= (...e) => R(z) && R(z)(...e)
+		}, [F(t.$slots, "collapsed")], 10, ue)], 544)) : F(t.$slots, "default", { key: 1 })], 46, ce));
+	}
+}), $ = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
+$.KEY;
+function de(e) {
+	$.provide(e);
+}
+var fe = $.use;
+$.useOptional;
+//#endregion
+//#region src/components/custom/dock/composables/useLayerTransition.ts
+var pe = {
+	response: .32,
+	dampingFraction: .7
+};
+function me(e) {
+	let { containerEl: t, activeLayer: n, axis: r } = e, i = g(() => r?.value === "vertical" ? "height" : "width"), a = g(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = N(n.value), c = N(null), l = 0, u = null, d = null;
+	function f() {
+		u &&= (u.dispose(), null), d = null;
+	}
+	function p(e) {
+		return e.closest(".glass-dock") ?? e;
+	}
+	function m(e) {
+		e.style.removeProperty("--dock-morph-from"), e.style.removeProperty("--dock-morph-to");
+	}
+	function h(e, t) {
+		m(e), t.style.removeProperty("--dock-morph-t"), t.removeAttribute("data-morphing"), c.value = null, f();
+	}
+	function _(e, t, n, r, i, a, o) {
+		if (Math.abs(i - r) < .5) {
+			h(e, t);
+			return;
+		}
+		e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new q({
+			response: pe.response,
+			dampingFraction: pe.dampingFraction,
+			initial: 0,
+			respectReducedMotion: !0
+		}), d = e);
+		let s = u;
+		s.reset(0, a), s.target = 1, s.play((r) => {
+			n === l && (t.style.setProperty("--dock-morph-t", `${r}`), s.settled && h(e, t));
+		});
+	}
+	V(n, (e, n) => {
+		if (e === n) return;
+		let r = t.value;
+		if (!r) {
+			s.value = e, c.value = null;
+			return;
+		}
+		let i = p(r), f = ++l, h = u !== null && d === r && !u.settled ? u : null, g = h ? h.velocity : 0, v = o(r);
+		c.value = n, s.value = e, r.style.setProperty("--dock-morph-from", `${v}px`), r.style.setProperty("--dock-morph-to", `${v}px`), i.style.setProperty("--dock-morph-t", "0"), i.setAttribute("data-morphing", ""), requestAnimationFrame(() => {
+			if (f !== l) return;
+			let e = t.value;
+			if (!e) return;
+			let n = p(e);
+			m(e), n.style.removeProperty("--dock-morph-t"), e.style.setProperty(a.value, "max-content");
+			let r = o(e);
+			e.style.removeProperty(a.value), _(e, n, f, v, r, g, h);
+		});
+	});
+	function v(e) {
+		let n = t.value;
+		n && e.target === n && (e.propertyName !== a.value && e.propertyName !== i.value || u && u.settled && h(n, p(n)));
+	}
+	return A(f), {
+		onTransitionEnd: v,
+		currentLayer: s,
+		leavingLayer: c
+	};
 }
-var $ = Z.use;
-Z.useOptional;
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
+var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 	__name: "DockLayerGroup",
-	props: /* @__PURE__ */ S({
+	props: /* @__PURE__ */ C({
 		orientation: {},
 		showRail: {
 			type: Boolean,
@@ -457,87 +557,99 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, n = z(e, "active"), r = a(), i = M([]), o = B("containerEl");
-		function s(e) {
+		let t = e, n = te(e, "active"), r = s(), i = N([]), a = B("containerEl");
+		function o(e) {
 			i.value.find((t) => t.id === e.id) || i.value.push(e);
 		}
 		function c(e) {
 			i.value = i.value.filter((t) => t.id !== e);
 		}
-		let p = h(() => t.orientation ?? r?.orientation.value ?? "horizontal"), { onTransitionEnd: x, currentLayer: S, leavingLayer: C } = ie({
-			containerEl: o,
-			activeLayer: n,
-			axis: p,
-			directionTypes: (e, t) => {
-				let n = i.value.findIndex((t) => t.id === e);
-				return [i.value.findIndex((e) => e.id === t) < n ? "layer-back" : "layer-forward"];
-			}
-		}), w = typeof document < "u" && "startViewTransition" in document, D = ee(), O = h(() => w ? {
-			"view-transition-name": `gl-dock-stack-${D.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+		let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = oe(), S, C, w;
+		if (u) {
+			let e = u.registerGroup({
+				containerEl: a,
+				activeLayer: n,
+				axis: l
+			});
+			S = e.currentLayer, C = e.leavingLayer, w = () => {}, O(() => e.release());
+		} else {
+			let e = me({
+				containerEl: a,
+				activeLayer: n,
+				axis: l,
+				directionTypes: (e, t) => {
+					let n = i.value.findIndex((t) => t.id === e);
+					return [i.value.findIndex((e) => e.id === t) < n ? "layer-back" : "layer-forward"];
+				}
+			});
+			S = M(e.currentLayer), C = M(e.leavingLayer), w = e.onTransitionEnd;
+		}
+		let T = typeof document < "u" && "startViewTransition" in document, k = ee(), A = g(() => T ? {
+			"view-transition-name": `gl-dock-stack-${k.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		Q({
-			register: s,
+		de({
+			register: o,
 			unregister: c,
-			currentLayerId: j(S),
-			leavingLayerId: j(C)
+			currentLayerId: S,
+			leavingLayerId: C
 		});
-		function k(e) {
+		function z(e) {
 			return typeof e == "object" && !!e;
 		}
-		let R = M(!1);
-		function V() {
-			R.value || (R.value = !0, r?.keepOpen());
+		let V = N(!1);
+		function U() {
+			V.value || (V.value = !0, r?.keepOpen());
 		}
-		function U(e) {
+		function W(e) {
 			let t = e.relatedTarget, n = e.currentTarget;
-			t && n?.contains(t) || R.value && (R.value = !1, r?.release());
+			t && n?.contains(t) || V.value && (V.value = !1, r?.release());
 		}
-		return (t, r) => (A(), v("div", { class: T(["dock-layer-group", [p.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (A(), g(L(l), {
+		return (t, r) => (j(), y("div", { class: E(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (j(), _(R(d), {
 			key: 0,
 			modelValue: n.value,
 			"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
 			orientation: "horizontal",
 			"as-child": !0
 		}, {
-			default: H(() => [b(L(u), {
-				class: T(["dock-layer-rail", e.railPosition]),
-				onFocusin: V,
-				onFocusout: U
+			default: H(() => [x(R(m), {
+				class: E(["dock-layer-rail", e.railPosition]),
+				onFocusin: U,
+				onFocusout: W
 			}, {
-				default: H(() => [(A(!0), v(m, null, N(i.value, (e) => (A(), g(L(d), {
+				default: H(() => [(j(!0), y(h, null, P(i.value, (e) => (j(), _(R(p), {
 					key: e.id,
 					value: e.id,
 					class: "dock-layer-tab",
 					title: e.label,
 					"aria-label": e.label ?? e.id
 				}, {
-					default: H(() => [k(e.icon) ? (A(), g(F(e.icon), {
+					default: H(() => [z(e.icon) ? (j(), _(I(e.icon), {
 						key: 0,
 						class: "size-4"
-					})) : typeof e.icon == "string" ? (A(), v("span", le, I(e.icon), 1)) : (A(), v("span", ue, I((e.label ?? e.id).charAt(0)), 1))]),
+					})) : typeof e.icon == "string" ? (j(), y("span", he, L(e.icon), 1)) : (j(), y("span", ge, L((e.label ?? e.id).charAt(0)), 1))]),
 					_: 2
 				}, 1032, [
 					"value",
 					"title",
 					"aria-label"
-				]))), 128)), b(L(f), { class: "dock-layer-tab-indicator" })]),
+				]))), 128)), x(R(f), { class: "dock-layer-tab-indicator" })]),
 				_: 1
 			}, 8, ["class"])]),
 			_: 1
-		}, 8, ["modelValue"])) : _("", !0), y("div", {
+		}, 8, ["modelValue"])) : v("", !0), b("div", {
 			ref_key: "containerEl",
-			ref: o,
+			ref: a,
 			class: "dock-layer-stack",
-			style: E(O.value),
-			onTransitionend: r[1] ||= (...e) => L(x) && L(x)(...e)
-		}, [P(t.$slots, "default")], 36)], 2));
+			style: D(A.value),
+			onTransitionend: r[1] ||= (...e) => R(w) && R(w)(...e)
+		}, [F(t.$slots, "default")], 36)], 2));
 	}
-}), fe = [
+}), ve = [
 	"inert",
 	"aria-hidden",
 	"tabindex"
-], pe = /* @__PURE__ */ x({
+], ye = /* @__PURE__ */ S({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -545,35 +657,35 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = $();
-		O(() => {
+		let t = e, n = fe();
+		k(() => {
 			n.register({
 				id: t.id,
 				label: t.label,
 				icon: t.icon
 			});
-		}), D(() => {
+		}), O(() => {
 			n.unregister(t.id);
 		});
-		let r = h(() => n.currentLayerId.value === t.id), i = h(() => n.leavingLayerId.value === t.id), a = B("hostEl");
+		let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = B("hostEl");
 		return V(r, async (e, t) => {
 			!e || t || typeof document < "u" && (() => {
 				let e = document.activeElement;
 				return !e || e === document.body ? !0 : !!e.closest("[inert]");
-			})() && (await w(), a.value?.focus());
-		}), (e, t) => (A(), v("div", {
+			})() && (await T(), a.value?.focus());
+		}), (e, t) => (j(), y("div", {
 			ref_key: "hostEl",
 			ref: a,
-			class: T(["dock-layer-item-host", {
+			class: E(["dock-layer-item-host", {
 				"is-active": r.value,
 				"is-leaving": i.value
 			}]),
 			inert: r.value ? void 0 : !0,
 			"aria-hidden": r.value ? void 0 : !0,
 			tabindex: r.value ? -1 : void 0
-		}, [P(e.$slots, "default")], 10, fe));
+		}, [F(e.$slots, "default")], 10, ve));
 	}
-}), me = /* @__PURE__ */ x({
+}), be = /* @__PURE__ */ S({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -595,37 +707,26 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let n = t, r = h(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), i = M({});
-		function a(e) {
-			let t = e.currentTarget;
-			if (!t) return;
-			let n = t.getBoundingClientRect();
-			if (n.width === 0 || n.height === 0) return;
-			let r = (e.clientX - n.left) / n.width * 100, a = (e.clientY - n.top) / n.height * 100;
-			i.value = {
-				"--mouse-x": `${r.toFixed(2)}%`,
-				"--mouse-y": `${a.toFixed(2)}%`
-			};
-		}
-		let o = h(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
-		return (e, n) => (A(), g(L(W), C({
+		let n = t, i = g(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), { specularStyle: a, onPointerMove: o } = r(), s = g(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
+		return (e, n) => (j(), _(R(W), w({
 			as: t.as,
 			"as-child": t.asChild
-		}, o.value, {
-			class: r.value,
-			style: i.value,
-			onPointermove: a
+		}, s.value, {
+			class: i.value,
+			style: R(a),
+			onPointermove: R(o)
 		}), {
-			default: H(() => [P(e.$slots, "default")]),
+			default: H(() => [F(e.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"as",
 			"as-child",
 			"class",
-			"style"
+			"style",
+			"onPointermove"
 		]));
 	}
-}), he = /* @__PURE__ */ x({
+}), xe = /* @__PURE__ */ S({
 	__name: "DockBackgroundToggle",
 	props: {
 		paused: {
@@ -637,22 +738,22 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	},
 	emits: ["update:paused"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = h(() => n.paused ? n.playLabel : n.pauseLabel);
+		let n = e, r = t, i = g(() => n.paused ? n.playLabel : n.pauseLabel);
 		function a() {
 			r("update:paused", !n.paused);
 		}
-		return (t, n) => (A(), g(me, {
+		return (t, n) => (j(), _(be, {
 			type: "button",
 			"aria-pressed": e.paused,
 			"aria-label": i.value,
 			title: i.value,
 			onClick: a
 		}, {
-			default: H(() => [e.paused ? (A(), g(L(J), {
+			default: H(() => [e.paused ? (j(), _(R(re), {
 				key: 0,
 				size: 18,
 				"aria-hidden": "true"
-			})) : (A(), g(L(ne), {
+			})) : (j(), _(R(J), {
 				key: 1,
 				size: 18,
 				"aria-hidden": "true"
@@ -664,7 +765,7 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			"title"
 		]));
 	}
-}), ge = /* @__PURE__ */ x({
+}), Se = /* @__PURE__ */ S({
 	__name: "DockTabButton",
 	props: {
 		as: { default: "button" },
@@ -681,13 +782,13 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let n = t, r = R(), i = h(() => r["data-tier"] === "primary"), a = h(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (A(), g(L(W), {
+		let n = t, r = z(), i = g(() => r["data-tier"] === "primary"), a = g(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
+		return (e, n) => (j(), _(R(W), {
 			as: t.as,
 			"as-child": t.asChild,
-			class: T(a.value)
+			class: E(a.value)
 		}, {
-			default: H(() => [P(e.$slots, "default")]),
+			default: H(() => [F(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -695,7 +796,7 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			"class"
 		]));
 	}
-}), _e = /* @__PURE__ */ x({
+}), Ce = /* @__PURE__ */ S({
 	__name: "DockSelectTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -711,19 +812,19 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let r = t, i = q(h(() => {
+		let r = t, i = K(g(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (t, a) => (A(), g(L(K), C(L(i), { class: L(e)("dock-select-trigger", r.class) }), {
-			default: H(() => [P(t.$slots, "default"), b(L(G), { "as-child": "" }, {
-				default: H(() => [P(t.$slots, "icon", {}, () => [b(L(n), { class: "dock-select-trigger__chevron" })])]),
+		return (t, a) => (j(), _(R(ne), w(R(i), { class: R(e)("dock-select-trigger", r.class) }), {
+			default: H(() => [F(t.$slots, "default"), x(R(G), { "as-child": "" }, {
+				default: H(() => [F(t.$slots, "icon", {}, () => [x(R(n), { class: "dock-select-trigger__chevron" })])]),
 				_: 3
 			})]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), ve = /* @__PURE__ */ x({
+}), we = /* @__PURE__ */ S({
 	__name: "DockDropdownTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -739,15 +840,15 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let n = t, r = q(h(() => {
+		let n = t, r = K(g(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (A(), g(L(U), C(L(r), { class: L(e)("dock-dropdown-trigger", n.class) }), {
-			default: H(() => [P(t.$slots, "default")]),
+		return (t, i) => (j(), _(R(U), w(R(r), { class: R(e)("dock-dropdown-trigger", n.class) }), {
+			default: H(() => [F(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { c as DOCK_CONTEXT_KEY, he as DockBackgroundToggle, ve as DockDropdownTrigger, me as DockIconButton, pe as DockLayer, de as DockLayerGroup, _e as DockSelectTrigger, ge as DockTabButton, ce as GlassDock, o as provideDockContext, s as useDockContext, a as useOptionalDockContext };
+export { u as DOCK_CONTEXT_KEY, xe as DockBackgroundToggle, we as DockDropdownTrigger, be as DockIconButton, ye as DockLayer, _e as DockLayerGroup, Ce as DockSelectTrigger, Se as DockTabButton, Q as GlassDock, c as provideDockContext, l as useDockContext, me as useLayerTransition, s as useOptionalDockContext };