@mkbabb/glass-ui 3.11.2 → 3.13.0

package/dist/dock.js

@@ -1,15 +1,21 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-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-B8CVOQPC.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, getCurrentInstance as C, mergeModels as w, mergeProps as T, nextTick as E, normalizeClass as D, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, onUnmounted as O, openBlock as k, readonly as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, useAttrs as L, useId as re, useModel as R, useTemplateRef as z, watch as B, withCtx as V } from "vue";
-import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as ie, SelectTrigger as ae, useForwardProps as W } from "reka-ui";
-import { SpringProgress as G } from "@mkbabb/keyframes.js";
-var K = t("pause", [["rect", {
+import { t } from "./createLucideIcon-DydS2qgk.js";
+import { t as n } from "./chevron-down-DKkxb4VV.js";
+import { t as r } from "./chevron-right-CPXbqQQz.js";
+import { t as i } from "./useSpecularTracking-Bo5su68i.js";
+import { t as a } from "./useResizeObserver-BhgdhOIj.js";
+import { t as o } from "./useTouchGate-Dg7MQI1G.js";
+import { n as s } from "./useResolveTokenColor-Dvn2RZJW.js";
+import { n as c, t as l } from "./createContext-BM46COQ-.js";
+import { a as u, c as d, i as f, n as p, o as m, r as h, s as g, t as _ } from "./dockContext-BegmJVmx.js";
+import { i as v, n as y, r as b, t as x } from "./TabsList-Dttss653.js";
+import { t as S } from "./useLiquidFlex-BL0lLLN2.js";
+import { t as C } from "./useIntersectionPause-Cc-H9ees.js";
+import { t as w } from "./useRAFLoop-Bxv0o6L5.js";
+import { Fragment as T, computed as E, createBlock as D, createCommentVNode as O, createElementBlock as k, createElementVNode as A, createVNode as j, defineComponent as M, mergeModels as N, mergeProps as P, nextTick as F, normalizeClass as I, normalizeStyle as L, onBeforeUnmount as R, onMounted as ee, onScopeDispose as z, onUnmounted as B, openBlock as V, readonly as H, ref as U, renderList as te, renderSlot as W, resolveDynamicComponent as G, toDisplayString as ne, unref as K, useAttrs as re, useId as ie, useModel as q, useSlots as ae, useTemplateRef as J, watch as Y, withCtx as X } from "vue";
+import { DropdownMenuTrigger as oe, Primitive as se, SelectIcon as Z, SelectTrigger as ce, useForwardProps as le } from "reka-ui";
+import { SpringProgress as Q } from "@mkbabb/keyframes.js";
+var ue = t("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -23,152 +29,276 @@ var K = t("pause", [["rect", {
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), oe = t("play", [["path", {
+}]]), de = 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"
-}]]), se = ["data-orientation", "aria-orientation"], ce = /* @__PURE__ */ S({
-	__name: "DockSeparator",
-	setup(e) {
-		let t = s(), n = g(() => t?.orientation.value ?? "horizontal"), r = g(() => n.value), i = g(() => n.value === "vertical" ? "horizontal" : "vertical");
-		return (e, t) => (k(), y("div", {
-			class: "dock-separator",
-			role: "separator",
-			"data-orientation": r.value,
-			"aria-orientation": i.value
-		}, null, 8, se));
+}]]), fe = "(prefers-reduced-motion: reduce)", $ = 32;
+function pe(e) {
+	return typeof HTMLCanvasElement < "u" && e instanceof HTMLCanvasElement;
+}
+function me(e) {
+	let t = e / 255;
+	return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+}
+function he(e, t, n) {
+	return .2126 * me(e) + .7152 * me(t) + .0722 * me(n);
+}
+function ge(e) {
+	let t = e.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+))?/i);
+	return t ? [
+		Number(t[1]),
+		Number(t[2]),
+		Number(t[3]),
+		t[4] === void 0 ? 1 : Number(t[4])
+	] : null;
+}
+function _e(e) {
+	if (!e) return null;
+	if (pe(e)) return e;
+	if (typeof e == "function") {
+		let t = e();
+		return pe(t) ? t : null;
 	}
-});
+	if (typeof e == "string" && typeof document < "u") {
+		let t = document.querySelector(e);
+		return pe(t) ? t : null;
+	}
+	return null;
+}
+function ve(e, t = {}) {
+	let { lightThreshold: n = .6, minSampleIntervalMs: r = 250, writeBucket: i = !0 } = t, o = Math.max(250, r), c = U(null), l = U(null);
+	if (typeof window > "u") return {
+		luma: H(c),
+		bucket: H(l),
+		sampleNow: () => {},
+		dispose: () => {}
+	};
+	let u = window.matchMedia(fe), d = u.matches, f = null, p = null;
+	function m() {
+		return f || (f = document.createElement("canvas"), f.width = $, f.height = $), p ||= f.getContext("2d", { willReadFrequently: !0 }), p;
+	}
+	function h() {
+		return t.live === void 0 ? e.value?.dataset.glassSample === "live" : t.live;
+	}
+	function g(e) {
+		let n = _e(t.backgroundCanvas);
+		if (!n || n.width === 0 || n.height === 0) return null;
+		let r = m();
+		if (!r) return null;
+		let i = e.getBoundingClientRect(), a = n.getBoundingClientRect();
+		if (a.width === 0 || a.height === 0) return null;
+		let o = n.width / a.width, s = n.height / a.height, c = Math.max(0, (i.left - a.left) * o), l = Math.max(0, (i.top - a.top) * s), u = Math.min(n.width - c, Math.max(1, i.width * o)), d = Math.min(n.height - l, Math.max(1, i.height * s));
+		if (u <= 0 || d <= 0) return null;
+		try {
+			r.clearRect(0, 0, $, $), r.drawImage(n, c, l, u, d, 0, 0, $, $);
+			let e = r.getImageData(0, 0, $, $).data, t = 0, i = 0;
+			for (let n = 0; n < e.length; n += 4) {
+				let r = e[n + 3] / 255, a = e[n] * r + 255 * (1 - r), o = e[n + 1] * r + 255 * (1 - r), s = e[n + 2] * r + 255 * (1 - r);
+				t += he(a, o, s), i++;
+			}
+			return i > 0 ? t / i : null;
+		} catch {
+			return null;
+		}
+	}
+	function _(e) {
+		let t = e.getBoundingClientRect(), n = t.left + t.width / 2, r = t.top + t.height / 2, i = document.elementsFromPoint(n, r);
+		for (let t of i) {
+			if (!(t instanceof HTMLElement) || t === e || e.contains(t)) continue;
+			let n = getComputedStyle(t).backgroundColor, r = ge(s(n, e));
+			if (r && !(r[3] < .5)) return he(r[0], r[1], r[2]);
+		}
+		let a = ge(s(getComputedStyle(document.body).backgroundColor, e));
+		return a ? he(a[0], a[1], a[2]) : null;
+	}
+	function v(t) {
+		c.value = t;
+		let r = e.value;
+		if (r && (r.style.setProperty("--glass-backdrop-luma", t.toFixed(3)), i)) {
+			let e = t >= n ? "light" : "dark";
+			l.value = e, r.style.setProperty("--glass-backdrop", e);
+		}
+	}
+	let y = 0;
+	function b() {
+		let t = e.value;
+		if (!t) return;
+		let n = h() ? g(t) ?? _(t) : _(t);
+		n !== null && v(n), y = typeof performance < "u" ? performance.now() : Date.now();
+	}
+	let x = w(({ now: e }) => {
+		d || e - y < o || b();
+	}, {
+		immediate: !1,
+		pauseWhenHidden: !0,
+		respectReducedMotion: !0
+	}), S = C(() => e.value, {
+		pause: () => x.pause(),
+		resume: () => {
+			h() && !d && x.resume();
+		}
+	}, { rootMargin: "200px" }), T = a(e, () => b());
+	function E() {
+		d = u.matches, d ? (x.stop(), b()) : h() && x.start();
+	}
+	let D = () => E();
+	typeof u.addEventListener == "function" && u.addEventListener("change", D);
+	let O = Y(() => e.value, (e) => {
+		e && (b(), E());
+	}, {
+		immediate: !0,
+		flush: "post"
+	});
+	function k() {
+		O(), x.dispose(), S.dispose(), T.stop(), typeof u.removeEventListener == "function" && u.removeEventListener("change", D), f = null, p = null;
+	}
+	return z(k), {
+		luma: H(c),
+		bucket: H(l),
+		sampleNow: b,
+		dispose: k
+	};
+}
 //#endregion
 //#region src/components/custom/dock/composables/isTeleportedTarget.ts
-function q(e, t) {
+function ye(e, t) {
 	if (!(e instanceof Element)) return !1;
 	let n = e.closest("[data-glass-dock-portal]");
 	return n ? t ? n.getAttribute("data-glass-dock-owner") === t : !0 : !1;
 }
 //#endregion
 //#region src/components/custom/dock/composables/useDockState.ts
-function le(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 = j(c ? "pinned" : "collapsed"), u = j(c), d = j(c), f = null, p = j(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;
+function be(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 = U(c ? "pinned" : "collapsed"), u = U(c), d = U(c), f = null, p = U(0), m = E(() => p.value > 0), h = null, g = null, _ = !1, v = null;
+	function y() {
+		v &&= (clearTimeout(v), null);
 	}
-	function x() {
-		f &&= (clearTimeout(f), null);
+	function b(e) {
+		if (!e) return !1;
+		let t = n.value;
+		if (!t || typeof t.getBoundingClientRect != "function" || !t.hasAttribute("data-morphing")) return !1;
+		let r = t.getBoundingClientRect();
+		return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom ? e.clientX - r.left <= 24 || r.right - e.clientX <= 24 || e.clientY - r.top <= 24 || r.bottom - e.clientY <= 24 : !1;
 	}
+	let x = l.value;
 	function S() {
-		_ !== null && (cancelAnimationFrame(_), _ = null);
+		s() && (l.value = "pinned"), u.value = l.value !== "collapsed", d.value = l.value === "pinned", o && x !== l.value && o(l.value, x), x = l.value;
 	}
 	function C() {
-		S(), h?.();
+		f &&= (clearTimeout(f), null);
 	}
 	function w() {
-		s() || p.value > 0 || (x(), f = setTimeout(() => {
-			T(), l.value = "collapsed", b();
-		}, t));
+		g !== null && (cancelAnimationFrame(g), g = null);
 	}
 	function T() {
+		w(), h?.();
+	}
+	function D() {
+		s() || p.value > 0 || (C(), f = setTimeout(() => {
+			O(), l.value = "collapsed", S();
+		}, t));
+	}
+	function O() {
 		typeof document > "u" || typeof PointerEvent > "u" || document.body.dispatchEvent(new PointerEvent("pointerdown", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	function E() {
+	function k() {
 		if (s()) {
-			l.value = "pinned", b();
+			l.value = "pinned", S();
 			return;
 		}
-		v ||= (v = !0, x(), T(), l.value = "collapsed", b(), !1);
+		_ ||= (_ = !0, C(), y(), O(), l.value = "collapsed", S(), !1);
 	}
-	function D() {
+	function A() {
 		if (s()) {
-			l.value = "pinned", b();
+			l.value = "pinned", S();
 			return;
 		}
-		x(), l.value = "hover", b();
+		C(), y(), l.value = "hover", S();
 	}
-	function ee() {
-		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
+	function j() {
+		s() || (C(), l.value === "collapsed" && (y(), v = setTimeout(() => {
+			v = null, !s() && l.value === "collapsed" && (l.value = "hover", S());
+		}, 60)));
 	}
-	function te(e) {
-		if (!s() && l.value === "hover") {
+	function M(e) {
+		if (!s() && (y(), l.value === "hover")) {
 			if (p.value > 0) return;
 			if (e) {
 				let t = n.value;
-				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || q(e.relatedTarget, a)) return;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || ye(e.relatedTarget, a) || b(e)) return;
 			}
-			w();
+			D();
 		}
 	}
-	function ne() {
-		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
+	function N() {
+		s() || (C(), l.value === "collapsed" && (l.value = "hover", S()));
 	}
-	function k(e) {
+	function P(e) {
 		if (s() || l.value !== "hover" || p.value > 0) return;
 		let t = e.currentTarget;
-		e.relatedTarget && t.contains(e.relatedTarget) || q(e.relatedTarget, a) || w();
+		e.relatedTarget && t.contains(e.relatedTarget) || ye(e.relatedTarget, a) || D();
 	}
-	function A() {
+	function F() {
 		if (s()) {
-			l.value = "pinned", b();
+			l.value = "pinned", S();
 			return;
 		}
-		x(), l.value = "pinned", b();
+		C(), y(), l.value = "pinned", S();
 	}
-	function M() {
-		p.value++, x();
+	function I() {
+		p.value++, C();
 	}
-	function N() {
-		p.value = Math.max(0, p.value - 1), p.value === 0 && l.value === "hover" && (x(), f = setTimeout(() => {
-			p.value === 0 && l.value === "hover" && w();
+	function L() {
+		p.value = Math.max(0, p.value - 1), p.value === 0 && l.value === "hover" && (C(), f = setTimeout(() => {
+			p.value === 0 && l.value === "hover" && D();
 		}, Math.min(t, 800)));
 	}
-	function P(e) {
+	function R(e) {
 		if (s() || i?.value) return;
 		let t = n.value;
-		!t || t.contains(e.target) || q(e.target, a) || E();
+		!t || t.contains(e.target) || ye(e.target, a) || k();
 	}
-	return B(u, (e) => {
-		e ? (C(), _ = requestAnimationFrame(() => {
-			_ = null, u.value && (document.addEventListener("pointerdown", P, !0), h = () => {
-				document.removeEventListener("pointerdown", P, !0), h = null;
+	return Y(u, (e) => {
+		e ? (T(), g = requestAnimationFrame(() => {
+			g = null, u.value && (document.addEventListener("pointerdown", R, !0), h = () => {
+				document.removeEventListener("pointerdown", R, !0), h = null;
 			});
-		})) : C();
-	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : B(r, (e) => {
+		})) : T();
+	}), typeof r == "boolean" ? r && (l.value = "pinned", S()) : Y(r, (e) => {
 		if (e) {
-			x(), l.value = "pinned", b();
+			C(), l.value = "pinned", S();
 			return;
 		}
-		l.value = "collapsed", b();
-	}, { immediate: !0 }), O(() => {
-		x(), C();
+		l.value = "collapsed", S();
+	}, { immediate: !0 }), B(() => {
+		C(), y(), T();
 	}), {
 		state: l,
 		expanded: u,
 		isPinned: d,
 		isHeld: m,
-		onMouseEnter: ee,
-		onMouseLeave: te,
-		onFocusIn: ne,
-		onFocusOut: k,
-		onClickCollapsed: A,
-		keepOpen: M,
-		release: N,
-		expand: D,
-		collapse: E
+		onMouseEnter: j,
+		onMouseLeave: M,
+		onFocusIn: N,
+		onFocusOut: P,
+		onClickCollapsed: F,
+		keepOpen: I,
+		release: L,
+		expand: A,
+		collapse: k
 	};
 }
 //#endregion
 //#region src/components/custom/dock/composables/dockMorphContext.ts
-var J = {
-	response: .32,
-	dampingFraction: .7
-}, Y = o("glass-ui:dock-morph-context");
-Y.KEY;
-function ue(e) {
-	Y.provide(e);
+var xe = l(m), { KEY: Se } = xe;
+function Ce(e) {
+	xe.provide(e);
 }
-var de = Y.use;
-function fe(e) {
+var we = xe.use;
+function Te(e) {
 	let { rootEl: t, outerEl: n, outerActiveLayer: r, outerAxis: i } = e, a = null, o = /* @__PURE__ */ new Set();
 	function s() {
 		return t.value;
@@ -204,13 +334,13 @@ function fe(e) {
 		let e = s();
 		e && (e.style.removeProperty("--dock-morph-t"), e.removeAttribute("data-morphing")), c();
 	}
-	function g() {
+	function _() {
 		if (!s()) return;
 		let e = a !== null && !a.settled ? a.velocity : 0;
 		if (!a || a.settled) {
-			c(), a = new G({
-				response: J.response,
-				dampingFraction: J.dampingFraction,
+			c(), a = new Q({
+				response: g.response,
+				dampingFraction: g.dampingFraction,
 				initial: 0,
 				respectReducedMotion: !0
 			});
@@ -227,7 +357,7 @@ function fe(e) {
 			});
 		} else a.reset(0, e), a.target = 1;
 	}
-	function _(e, t, n, r) {
+	function v(e, t, n, r) {
 		if (t !== e.txId) return;
 		let i = e.containerEl.value, a = s();
 		if (!(!i || !a)) {
@@ -235,10 +365,10 @@ function fe(e) {
 				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();
+			i.style.setProperty("--dock-morph-from", `${n}px`), i.style.setProperty("--dock-morph-to", `${r}px`), a.setAttribute("data-morphing", ""), _();
 		}
 	}
-	function v(e, t, n) {
+	function y(e, t, n) {
 		if (t === n) return;
 		let r = e.containerEl.value, i = s();
 		if (!r || !i) {
@@ -263,75 +393,176 @@ function fe(e) {
 			let r = u(c);
 			t.style.setProperty(r, "max-content");
 			let i = d(t, c);
-			t.style.removeProperty(r), _(e, a, l, i);
+			t.style.removeProperty(r), v(e, a, l, i);
 		});
 	}
-	function y(e) {
+	function b(e) {
 		let t = {
 			containerEl: e.containerEl,
 			activeLayer: e.activeLayer,
 			axis: e.axis,
-			currentLayer: j(e.activeLayer.value),
-			leavingLayer: j(null),
+			currentLayer: U(e.activeLayer.value),
+			leavingLayer: U(null),
 			txId: 0,
 			stop: () => {}
 		};
-		return t.stop = B(e.activeLayer, (e, n) => {
-			v(t, e, n);
+		return t.stop = Y(e.activeLayer, (e, n) => {
+			y(t, e, n);
 		}), o.add(t), t;
 	}
-	function b(e) {
+	function x(e) {
 		e.stop(), o.delete(e), h();
 	}
-	let x = y({
+	let S = b({
 		containerEl: n,
 		activeLayer: r,
 		axis: i
-	}), S = { registerGroup(e) {
-		let t = y(e);
+	}), C = { registerGroup(e) {
+		let t = b(e);
 		return {
-			currentLayer: A(t.currentLayer),
-			leavingLayer: A(t.leavingLayer),
-			release: () => b(t)
+			currentLayer: H(t.currentLayer),
+			leavingLayer: H(t.leavingLayer),
+			release: () => x(t)
 		};
 	} };
-	function C(e) {
+	function w(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());
+		e.propertyName !== r && e.propertyName !== l(i.value) || a && a.settled && (m(S), h());
 	}
-	return O(() => {
+	return B(() => {
 		for (let e of o) e.stop();
 		o.clear(), c();
 	}), {
-		context: S,
-		outerCurrentLayer: A(x.currentLayer),
-		onOuterTransitionEnd: C
+		context: C,
+		outerCurrentLayer: H(S.currentLayer),
+		onOuterTransitionEnd: w
+	};
+}
+//#endregion
+//#region src/components/custom/dock/composables/useDockShellProps.ts
+function Ee(e) {
+	let t = E(() => {
+		if (e.containerName) return {
+			"container-type": "inline-size",
+			"container-name": e.containerName
+		};
+	}), n = E(() => e.collapseDelay ?? 2e3), r = E(() => e.layout ?? "linear"), i = E(() => e.shape ?? "pill"), a = E(() => e.orientation ?? "horizontal"), o = E(() => e.density ?? "comfortable"), s = E(() => e.overflow === "scroll" ? a.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), c = E(() => e.alwaysExpanded || r.value === "grid");
+	return {
+		containerStyle: t,
+		collapseDelay: n,
+		startCollapsed: E(() => c.value ? !1 : e.startCollapsed ?? !0),
+		layoutValue: r,
+		shape: i,
+		orientation: a,
+		density: o,
+		scrollClass: s,
+		alwaysExpanded: c,
+		fitContent: E(() => e.fitContent ?? !1)
+	};
+}
+//#endregion
+//#region src/components/custom/dock/composables/useDockMorphWindow.ts
+function De(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 Oe(e) {
+	let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(De), r = t.transitionDelay.split(",").map(De);
+	return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
+}
+function ke(e) {
+	let t = De(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
+	return Math.max(t > 0 ? t * 2 : 0, 600);
+}
+function Ae(e, t) {
+	let n = null, r = 0;
+	function i() {
+		n &&= (clearTimeout(n), null);
+	}
+	function a() {
+		let a = e.value;
+		if (!a) return;
+		let o = ++r;
+		i(), t.value = !0, n = setTimeout(() => {
+			o === r && (t.value = !1, n = null);
+		}, Math.max(Oe(a), ke(a)) + 50);
+	}
+	function o(n) {
+		n.target === e.value && d.has(n.propertyName) && (i(), r++, t.value = !1);
+	}
+	return R(i), {
+		markTransitioning: a,
+		onDockTransitionDone: o,
+		clearTransitionTimer: i
+	};
+}
+//#endregion
+//#region src/components/custom/dock/composables/useDockClickIntegrity.ts
+function je(e) {
+	let { rootEl: t, visualExpanded: n } = e, r = null, i = !1, a = 0, o = null;
+	function s() {
+		o !== null && (clearTimeout(o), o = null);
+	}
+	function c() {
+		a = l() + 320, s(), o = setTimeout(() => {
+			o = null;
+		}, 320);
+	}
+	function l() {
+		return typeof performance < "u" && typeof performance.now == "function" ? performance.now() : Date.now();
+	}
+	function u() {
+		let e = t.value;
+		return e && e.hasAttribute("data-morphing") ? !0 : l() < a;
+	}
+	function d() {
+		let e = t.value;
+		return !!e && e.hasAttribute("data-morphing");
+	}
+	function f(e) {
+		r = e.target, n.value, i = d();
+	}
+	function p(e) {
+		if (!r || !e) return !1;
+		if (e === r) return !0;
+		let t = r instanceof Node ? r : null, n = e instanceof Node ? e : null;
+		return !t || !n ? !1 : t.contains(n) || n.contains(t);
+	}
+	function m(e) {
+		let t = i;
+		if (i = !1, !u()) {
+			r = null;
+			return;
+		}
+		if (!(!r && !t)) {
+			if (!t && p(e.target)) {
+				r = null;
+				return;
+			}
+			e.stopPropagation(), e.preventDefault(), r = null;
+		}
+	}
+	return R(s), {
+		onPointerDownCapture: f,
+		onClickCapture: m,
+		markExpandFlip: c
 	};
 }
 //#endregion
 //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
-var pe = [
+var Me = ["data-has-rail"], Ne = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], me = {
+], Pe = {
 	key: 0,
 	class: "dock-persistent"
-}, he = ["inert"], ge = ["inert"], _e = {
-	key: 0,
-	class: "dock-layers dock-layer--vertical-body"
-}, ve = { class: "dock-layer--vertical-section" }, ye = {
-	key: 1,
-	class: "dock-layers dock-layer--vertical-body"
-}, be = ["inert"], xe = ["inert"], Se = /* @__PURE__ */ S({
+}, Fe = ["inert"], Ie = ["inert"], Le = /* @__PURE__ */ M({
+	inheritAttrs: !1,
 	__name: "GlassDock",
 	props: {
-		variant: {},
-		collapseDelay: {},
-		startCollapsed: { type: Boolean },
-		layout: {},
 		fitContent: { type: Boolean },
 		position: {},
 		alwaysExpanded: { type: Boolean },
@@ -339,181 +570,142 @@ var pe = [
 		orientation: {},
 		density: {},
 		overflow: {},
-		containerName: {}
+		containerName: {},
+		collapseDelay: {},
+		startCollapsed: { type: Boolean },
+		layout: {},
+		autoLuminance: { type: Boolean },
+		backgroundCanvas: { type: [
+			Function,
+			String,
+			null
+		] }
 	},
 	setup(e, { expose: t }) {
-		let n = e, r = g(() => {
-			if (n.containerName) return {
-				"container-type": "inline-size",
-				"container-name": n.containerName
-			};
+		let n = e, { containerStyle: r, collapseDelay: i, startCollapsed: a, layoutValue: s, shape: c, orientation: l, density: u, scrollClass: d, alwaysExpanded: f, fitContent: m } = Ee(n), h = s, g = J("dockEl"), _ = J("layersEl");
+		n.autoLuminance !== !1 && ve(g, { backgroundCanvas: n.backgroundCanvas ?? null });
+		let v = U(!1), y = o(i.value), b = `glass-dock-${ie()}`, { expanded: x, isPinned: S, isHeld: C, onMouseEnter: w, onMouseLeave: T, onFocusIn: D, onFocusOut: j, onClickCollapsed: M, keepOpen: N, release: F, expand: L, collapse: R } = be({
+			collapseDelay: i.value,
+			rootEl: g,
+			alwaysExpanded: f,
+			isTransitioning: v,
+			dockId: b
 		});
-		function a(e) {
-			return e.variant !== "rail" && e.variant !== "instrument-strip";
-		}
-		let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"), w = g(() => n.overflow === "scroll" ? _.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), T = C(), E = g(() => {
-			let e = T?.vnode.props;
-			if (e && !(!("alwaysExpanded" in e) && !("always-expanded" in e))) return n.alwaysExpanded;
-		}), O = g(() => (E.value ?? _.value === "vertical") || l.value === "grid"), A = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), M = j(!1), P = i(o.value), F = `glass-dock-${re()}`, L = null, R = 0, { expanded: V, isPinned: H, isHeld: U, onMouseEnter: ie, onMouseLeave: ae, onFocusIn: W, onFocusOut: G, onClickCollapsed: K, keepOpen: oe, release: se, expand: q, collapse: J } = le({
-			collapseDelay: o.value,
-			rootEl: u,
-			alwaysExpanded: O,
-			isTransitioning: M,
-			dockId: F
+		p({
+			id: b,
+			orientation: l,
+			layout: h,
+			keepOpen: N,
+			release: F,
+			held: C
 		});
-		c({
-			id: F,
-			orientation: _,
-			layout: m,
-			keepOpen: oe,
-			release: se,
-			held: U
+		let z = E(() => f.value || x.value), B = ae(), H = E(() => !!B.rail), { context: te, onOuterTransitionEnd: G } = Te({
+			rootEl: g,
+			outerEl: _,
+			outerActiveLayer: E(() => z.value ? "full" : "summary"),
+			outerAxis: E(() => l.value)
 		});
-		let Y = g(() => O.value || V.value), { context: de, onOuterTransitionEnd: Se } = fe({
-			rootEl: u,
-			outerEl: d,
-			outerActiveLayer: g(() => Y.value ? "full" : "summary"),
-			outerAxis: g(() => "horizontal")
+		Ce(te);
+		let ne = E(() => ({ "view-transition-name": b.replace(/[^a-zA-Z0-9_-]/g, "-") })), { markTransitioning: re, onDockTransitionDone: q } = Ae(g, v), { onPointerDownCapture: X, onClickCapture: oe, markExpandFlip: se } = je({
+			rootEl: g,
+			visualExpanded: z
 		});
-		ue(de);
-		let X = g(() => ({ "view-transition-name": F.replace(/[^a-zA-Z0-9_-]/g, "-") }));
-		function Z(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 Ce(e) {
-			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(Z), r = t.transitionDelay.split(",").map(Z);
-			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
-		}
-		function we(e) {
-			let t = Z(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
-			return Math.max(t > 0 ? t * 2 : 0, 600);
-		}
-		function Q() {
-			L &&= (clearTimeout(L), null);
-		}
-		let Te = new Set([
-			"width",
-			"height",
-			"padding",
-			"transform"
-		]);
-		function Ee() {
-			let e = u.value;
-			if (!e) return;
-			let t = ++R;
-			Q(), M.value = !0, L = setTimeout(() => {
-				t === R && (M.value = !1, L = null);
-			}, Math.max(Ce(e), we(e)) + 50);
-		}
-		function De(e) {
-			e.target === u.value && Te.has(e.propertyName) && (Q(), R++, M.value = !1);
-		}
-		ne(() => {
-			if (O.value) {
-				q();
-				return;
-			}
-			_.value === "horizontal" && !s.value && q();
+		ee(() => {
+			(n.alwaysExpanded || !a.value) && L();
 		});
-		function $() {
-			return _.value === "horizontal" && !O.value;
+		function Z() {
+			return !f.value;
 		}
-		function Oe(e) {
-			if (!$() || Y.value) return;
-			let t = u.value, n = e.touches[0];
-			!t || !n || P.handleTouchStart(t, n.clientY);
+		function ce(e) {
+			if (!Z() || z.value) return;
+			let t = g.value, n = e.touches[0];
+			!t || !n || y.handleTouchStart(t, n.clientY);
 		}
-		function ke(e) {
-			$() && P.handleScrollCheck(e);
+		function le(e) {
+			Z() && y.handleScrollCheck(e);
 		}
-		function Ae() {
-			if (!$()) return;
-			let e = P.isActive.value;
-			P.handleTouchEnd(), !e && P.isActive.value && !Y.value && q();
+		function Q() {
+			if (!Z()) return;
+			let e = y.isActive.value;
+			y.handleTouchEnd(), !e && y.isActive.value && !z.value && L();
 		}
-		return B(P.isActive, (e) => {
-			!e && V.value && !H.value && !O.value && J();
-		}), B(Y, (e) => {
-			Ee(), e || P.deactivate();
-		}), te(Q), t({
-			expanded: V,
-			isPinned: H,
-			isHeld: U,
-			isTransitioning: M,
-			expand: q,
-			collapse: J,
-			keepOpen: oe,
-			release: se
-		}), (t, n) => (k(), y("div", {
+		return Y(y.isActive, (e) => {
+			!e && x.value && !S.value && !f.value && R();
+		}), Y(z, (e) => {
+			re(), e ? se() : y.deactivate();
+		}), t({
+			expanded: x,
+			isPinned: S,
+			isHeld: C,
+			isTransitioning: v,
+			expand: L,
+			collapse: R,
+			keepOpen: N,
+			release: F
+		}), (t, n) => (V(), k("div", {
+			class: I(["glass-dock-frame", K(l)]),
+			"data-has-rail": H.value || void 0
+		}, [A("div", P({
 			ref_key: "dockEl",
-			ref: u,
-			class: D(["glass-dock", [
-				_.value,
-				`variant-${f.value}`,
-				`shape-${p.value}`,
-				`layout-${I(m)}`,
-				w.value,
+			ref: g
+		}, t.$attrs, {
+			class: ["glass-dock", [
+				K(l),
+				`shape-${K(c)}`,
+				`layout-${K(h)}`,
+				K(d),
 				{
-					expanded: Y.value,
-					collapsed: !Y.value,
-					pinned: I(H),
-					"fit-content": A.value,
-					"always-expanded": O.value,
-					"dock-overflow-wrap": e.overflow === "wrap" && _.value !== "vertical"
+					expanded: z.value,
+					collapsed: !z.value,
+					pinned: K(S),
+					"fit-content": K(m),
+					"always-expanded": K(f),
+					"dock-overflow-wrap": e.overflow === "wrap" && K(l) !== "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": S.value,
-			"data-held": I(U) || void 0,
+				e.position === "fixed" ? "fixed bottom-(--dock-pos) left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
+			]],
+			"data-density": K(u),
+			"data-held": K(C) || void 0,
 			"data-container-name": e.containerName || void 0,
-			style: ee([r.value, X.value]),
-			onMouseenter: n[3] ||= (...e) => I(ie) && I(ie)(...e),
-			onMouseleave: n[4] ||= (e) => I(ae)(e),
-			onFocusin: n[5] ||= (...e) => I(W) && I(W)(...e),
-			onFocusout: n[6] ||= (...e) => I(G) && I(G)(...e),
-			onTouchstart: Oe,
-			onTouchmove: ke,
-			onTouchend: Ae,
-			onTransitionend: De,
-			onTransitioncancel: De
-		}, [t.$slots.persistent ? (k(), y("div", me, [N(t.$slots, "persistent")])) : v("", !0), _.value === "horizontal" ? (k(), y("div", {
-			key: 1,
+			style: [K(r), ne.value],
+			onMouseenter: n[2] ||= (...e) => K(w) && K(w)(...e),
+			onMouseleave: n[3] ||= (e) => K(T)(e),
+			onFocusin: n[4] ||= (...e) => K(D) && K(D)(...e),
+			onFocusout: n[5] ||= (...e) => K(j) && K(j)(...e),
+			onTouchstart: ce,
+			onTouchmove: le,
+			onTouchend: Q,
+			onPointerdownCapture: n[6] ||= (...e) => K(X) && K(X)(...e),
+			onClickCapture: n[7] ||= (...e) => K(oe) && K(oe)(...e),
+			onTransitionend: n[8] ||= (...e) => K(q) && K(q)(...e),
+			onTransitioncancel: n[9] ||= (...e) => K(q) && K(q)(...e)
+		}), [t.$slots.persistent ? (V(), k("div", Pe, [W(t.$slots, "persistent")])) : O("", !0), A("div", {
 			ref_key: "layersEl",
-			ref: d,
+			ref: _,
 			class: "dock-layers",
-			onTransitionend: n[1] ||= (...e) => I(Se) && I(Se)(...e)
-		}, [b("div", {
-			class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
-			inert: !I(V) || void 0
-		}, [N(t.$slots, "default")], 10, he), b("div", {
-			class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
-			inert: I(V) || void 0,
-			onClick: n[0] ||= (...e) => I(K) && I(K)(...e)
-		}, [N(t.$slots, "collapsed")], 10, ge)], 544)) : (k(), y(h, { key: 2 }, [O.value ? (k(), y("div", _e, [N(t.$slots, "default"), t.$slots.collapsed ? (k(), y(h, { key: 0 }, [x(ce), b("div", ve, [N(t.$slots, "collapsed")])], 64)) : v("", !0)])) : (k(), y("div", ye, [b("div", {
-			class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
-			inert: !I(V) || void 0
-		}, [N(t.$slots, "default")], 10, be), b("div", {
-			class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
-			inert: I(V) || void 0,
-			onClick: n[2] ||= (...e) => I(K) && I(K)(...e)
-		}, [N(t.$slots, "collapsed")], 10, xe)]))], 64))], 46, pe));
-	}
-}), X = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
-X.KEY;
-function Z(e) {
-	X.provide(e);
+			onTransitionend: n[1] ||= (...e) => K(G) && K(G)(...e)
+		}, [A("div", {
+			class: I(["dock-layer dock-layer--full", { "is-active": z.value }]),
+			inert: !K(x) || void 0
+		}, [W(t.$slots, "default")], 10, Fe), A("div", {
+			class: I(["dock-layer dock-layer--summary", { "is-active": !z.value }]),
+			inert: K(x) || void 0,
+			onClick: n[0] ||= (...e) => K(M) && K(M)(...e)
+		}, [W(t.$slots, "collapsed")], 10, Ie)], 544)], 16, Ne), H.value ? (V(), k("div", {
+			key: 0,
+			class: I(["dock-hairline-slot", K(l)])
+		}, [W(t.$slots, "rail")], 2)) : O("", !0)], 10, Me));
+	}
+}), Re = c(u, "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>"), { KEY: ze } = Re;
+function Be(e) {
+	Re.provide(e);
 }
-var Ce = X.use;
-X.useOptional;
+var Ve = Re.use;
+Re.useOptional;
 //#endregion
 //#region src/components/custom/dock/composables/useLayerTransition.ts
-var we = {
-	response: .32,
-	dampingFraction: .7
-};
-function Q(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 = j(n.value), c = j(null), l = 0, u = null, d = null;
+function He(e) {
+	let { containerEl: t, activeLayer: n, axis: r } = e, i = E(() => r?.value === "vertical" ? "height" : "width"), a = E(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = U(n.value), c = U(null), l = 0, u = null, d = null;
 	function f() {
 		u &&= (u.dispose(), null), d = null;
 	}
@@ -531,9 +723,9 @@ function Q(e) {
 			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 G({
-			response: we.response,
-			dampingFraction: we.dampingFraction,
+		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: g.response,
+			dampingFraction: g.dampingFraction,
 			initial: 0,
 			respectReducedMotion: !0
 		}), d = e);
@@ -542,7 +734,7 @@ function Q(e) {
 			n === l && (t.style.setProperty("--dock-morph-t", `${r}`), s.settled && h(e, t));
 		});
 	}
-	B(n, (e, n) => {
+	Y(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
 		if (!r) {
@@ -564,7 +756,7 @@ function Q(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 O(f), {
+	return B(f), {
 		onTransitionEnd: v,
 		currentLayer: s,
 		leavingLayer: c
@@ -572,9 +764,9 @@ function Q(e) {
 }
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
+var Ue = { key: 1 }, We = { key: 2 }, Ge = /* @__PURE__ */ M({
 	__name: "DockLayerGroup",
-	props: /* @__PURE__ */ w({
+	props: /* @__PURE__ */ N({
 		orientation: {},
 		showRail: {
 			type: Boolean,
@@ -587,100 +779,103 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, n = R(e, "active"), r = s(), i = j([]), a = z("containerEl");
+		let t = e, n = q(e, "active"), r = f(), i = U([]), a = J("containerEl");
 		function o(e) {
 			i.value.find((t) => t.id === e.id) || i.value.push(e);
 		}
-		function c(e) {
+		function s(e) {
 			i.value = i.value.filter((t) => t.id !== e);
 		}
-		let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S = de(), C, w, T;
-		if (S) {
-			let e = S.registerGroup({
+		let c = E(() => t.orientation ?? r?.orientation.value ?? "horizontal"), l = E(() => c.value === "vertical" ? "horizontal" : "vertical"), u = we(), d, p, m;
+		if (u) {
+			let e = u.registerGroup({
 				containerEl: a,
 				activeLayer: n,
-				axis: l
+				axis: c
 			});
-			C = e.currentLayer, w = e.leavingLayer, T = () => {}, te(() => e.release());
+			d = e.currentLayer, p = e.leavingLayer, m = () => {}, R(() => e.release());
 		} else {
-			let e = Q({
+			let e = He({
 				containerEl: a,
 				activeLayer: n,
-				axis: l,
+				axis: c,
 				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"];
 				}
 			});
-			C = A(e.currentLayer), w = A(e.leavingLayer), T = e.onTransitionEnd;
+			d = H(e.currentLayer), p = H(e.leavingLayer), m = e.onTransitionEnd;
 		}
-		let E = typeof document < "u" && "startViewTransition" in document, ne = re(), O = g(() => E ? {
-			"view-transition-name": `gl-dock-stack-${ne.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+		let h = typeof document < "u" && "startViewTransition" in document, g = ie(), _ = E(() => h ? {
+			"view-transition-name": `gl-dock-stack-${g.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		Z({
+		Be({
 			register: o,
-			unregister: c,
-			currentLayerId: C,
-			leavingLayerId: w
+			unregister: s,
+			currentLayerId: d,
+			leavingLayerId: p
 		});
-		function L(e) {
-			return typeof e == "object" && !!e;
+		function S(e) {
+			return typeof e == "object" && !!e || typeof e == "function";
 		}
-		let B = j(!1);
-		function H() {
-			B.value || (B.value = !0, r?.keepOpen());
+		let C = U(!1);
+		function w() {
+			C.value || (C.value = !0, r?.keepOpen());
 		}
-		function U(e) {
+		function M(e) {
 			let t = e.relatedTarget, n = e.currentTarget;
-			t && n?.contains(t) || B.value && (B.value = !1, r?.release());
+			t && n?.contains(t) || C.value && (C.value = !1, r?.release());
 		}
-		return (t, r) => (k(), y("div", { class: D(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (k(), _(I(d), {
+		return (t, r) => (V(), k("div", { class: I(["dock-layer-group", [c.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (V(), D(K(v), {
 			key: 0,
 			modelValue: n.value,
 			"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
-			orientation: u.value,
+			orientation: l.value,
 			"as-child": !0
 		}, {
-			default: V(() => [x(I(m), {
-				class: D(["dock-layer-rail", e.railPosition]),
+			default: X(() => [j(K(x), {
+				class: I(["dock-layer-rail", e.railPosition]),
 				indicator: !1,
-				onFocusin: H,
-				onFocusout: U
+				onFocusin: w,
+				onFocusout: M
 			}, {
-				default: V(() => [(k(!0), y(h, null, M(i.value, (e) => (k(), _(I(p), {
+				default: X(() => [(V(!0), k(T, null, te(i.value, (e) => (V(), D(K(b), {
 					key: e.id,
 					value: e.id,
 					class: "dock-layer-tab",
 					title: e.label,
 					"aria-label": e.label ?? e.id
 				}, {
-					default: V(() => [L(e.icon) ? (k(), _(P(e.icon), {
+					default: X(() => [S(e.icon) ? (V(), D(G(e.icon), {
 						key: 0,
 						class: "size-4"
-					})) : typeof e.icon == "string" ? (k(), y("span", Te, F(e.icon), 1)) : (k(), y("span", Ee, F((e.label ?? e.id).charAt(0)), 1))]),
+					})) : typeof e.icon == "string" ? (V(), k("span", Ue, ne(e.icon), 1)) : (V(), k("span", We, ne((e.label ?? e.id).charAt(0)), 1))]),
 					_: 2
 				}, 1032, [
 					"value",
 					"title",
 					"aria-label"
-				]))), 128)), x(I(f), { class: "dock-layer-tab-indicator" })]),
+				]))), 128)), j(K(y), {
+					class: "dock-layer-tab-indicator",
+					surface: !1
+				})]),
 				_: 1
 			}, 8, ["class"])]),
 			_: 1
-		}, 8, ["modelValue", "orientation"])) : v("", !0), b("div", {
+		}, 8, ["modelValue", "orientation"])) : O("", !0), A("div", {
 			ref_key: "containerEl",
 			ref: a,
 			class: "dock-layer-stack",
-			style: ee(O.value),
-			onTransitionend: r[1] ||= (...e) => I(T) && I(T)(...e)
-		}, [N(t.$slots, "default")], 36)], 2));
+			style: L(_.value),
+			onTransitionend: r[1] ||= (...e) => K(m) && K(m)(...e)
+		}, [W(t.$slots, "default")], 36)], 2));
 	}
-}), $ = [
+}), Ke = [
 	"inert",
 	"aria-hidden",
 	"tabindex"
-], Oe = /* @__PURE__ */ S({
+], qe = /* @__PURE__ */ M({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -688,35 +883,35 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = Ce();
-		ne(() => {
+		let t = e, n = Ve();
+		ee(() => {
 			n.register({
 				id: t.id,
 				label: t.label,
 				icon: t.icon
 			});
-		}), te(() => {
+		}), R(() => {
 			n.unregister(t.id);
 		});
-		let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = z("hostEl");
-		return B(r, async (e, t) => {
+		let r = E(() => n.currentLayerId.value === t.id), i = E(() => n.leavingLayerId.value === t.id), a = J("hostEl");
+		return Y(r, async (e, t) => {
 			!e || t || typeof document < "u" && (() => {
 				let e = document.activeElement;
 				return !e || e === document.body ? !0 : !!e.closest("[inert]");
-			})() && (await E(), a.value?.focus());
-		}), (e, t) => (k(), y("div", {
+			})() && (await F(), a.value?.focus());
+		}), (e, t) => (V(), k("div", {
 			ref_key: "hostEl",
 			ref: a,
-			class: D(["dock-layer-item-host", {
+			class: I(["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
-		}, [N(e.$slots, "default")], 10, $));
+		}, [W(e.$slots, "default")], 10, Ke));
 	}
-}), ke = /* @__PURE__ */ S({
+}), Je = /* @__PURE__ */ M({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -738,16 +933,16 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		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) => (k(), _(I(U), T({
+		let n = t, r = E(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), { specularStyle: a, onPointerMove: o } = i(), s = E(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
+		return (e, n) => (V(), D(K(se), P({
 			as: t.as,
 			"as-child": t.asChild
 		}, s.value, {
-			class: i.value,
-			style: I(a),
-			onPointermove: I(o)
+			class: r.value,
+			style: K(a),
+			onPointermove: K(o)
 		}), {
-			default: V(() => [N(e.$slots, "default")]),
+			default: X(() => [W(e.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"as",
@@ -757,7 +952,7 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 			"onPointermove"
 		]));
 	}
-}), Ae = /* @__PURE__ */ S({
+}), Ye = /* @__PURE__ */ M({
 	__name: "DockBackgroundToggle",
 	props: {
 		paused: {
@@ -769,22 +964,22 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 	},
 	emits: ["update:paused"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = g(() => n.paused ? n.playLabel : n.pauseLabel);
+		let n = e, r = t, i = E(() => n.paused ? n.playLabel : n.pauseLabel);
 		function a() {
 			r("update:paused", !n.paused);
 		}
-		return (t, n) => (k(), _(ke, {
+		return (t, n) => (V(), D(Je, {
 			type: "button",
 			"aria-pressed": e.paused,
 			"aria-label": i.value,
 			title: i.value,
 			onClick: a
 		}, {
-			default: V(() => [e.paused ? (k(), _(I(oe), {
+			default: X(() => [e.paused ? (V(), D(K(de), {
 				key: 0,
 				size: 18,
 				"aria-hidden": "true"
-			})) : (k(), _(I(K), {
+			})) : (V(), D(K(ue), {
 				key: 1,
 				size: 18,
 				"aria-hidden": "true"
@@ -796,7 +991,7 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 			"title"
 		]));
 	}
-}), je = /* @__PURE__ */ S({
+}), Xe = /* @__PURE__ */ M({
 	__name: "DockTabButton",
 	props: {
 		as: { default: "button" },
@@ -813,13 +1008,13 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let n = t, r = L(), i = g(() => r["data-tier"] === "primary"), a = g(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (k(), _(I(U), {
+		let n = t, r = re(), i = E(() => r["data-tier"] === "primary"), a = E(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
+		return (e, n) => (V(), D(K(se), {
 			as: t.as,
 			"as-child": t.asChild,
-			class: D(a.value)
+			class: I(a.value)
 		}, {
-			default: V(() => [N(e.$slots, "default")]),
+			default: X(() => [W(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -827,7 +1022,7 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 			"class"
 		]));
 	}
-}), Me = /* @__PURE__ */ S({
+}), Ze = /* @__PURE__ */ M({
 	__name: "DockSelectTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -843,19 +1038,19 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let r = t, i = W(g(() => {
+		let r = t, i = le(E(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (t, a) => (k(), _(I(ae), T(I(i), { class: I(e)("dock-select-trigger", r.class) }), {
-			default: V(() => [N(t.$slots, "default"), x(I(ie), { "as-child": "" }, {
-				default: V(() => [N(t.$slots, "icon", {}, () => [x(I(n), { class: "dock-select-trigger__chevron" })])]),
+		return (t, a) => (V(), D(K(ce), P(K(i), { class: K(e)("dock-select-trigger", r.class) }), {
+			default: X(() => [W(t.$slots, "default"), j(K(Z), { "as-child": "" }, {
+				default: X(() => [W(t.$slots, "icon", {}, () => [j(K(n), { class: "dock-select-trigger__chevron" })])]),
 				_: 3
 			})]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), Ne = /* @__PURE__ */ S({
+}), Qe = /* @__PURE__ */ M({
 	__name: "DockDropdownTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -871,15 +1066,160 @@ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let n = t, r = W(g(() => {
+		let n = t, r = le(E(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (k(), _(I(H), T(I(r), { class: I(e)("dock-dropdown-trigger", n.class) }), {
-			default: V(() => [N(t.$slots, "default")]),
+		return (t, i) => (V(), D(K(oe), P(K(r), { class: K(e)("dock-dropdown-trigger", n.class) }), {
+			default: X(() => [W(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
+}), $e = ["data-orientation", "aria-orientation"], et = /* @__PURE__ */ M({
+	__name: "DockSeparator",
+	setup(e) {
+		let t = f(), n = E(() => t?.orientation.value ?? "horizontal"), r = E(() => n.value), i = E(() => n.value === "vertical" ? "horizontal" : "vertical");
+		return (e, t) => (V(), k("div", {
+			class: "dock-separator",
+			role: "separator",
+			"data-orientation": r.value,
+			"aria-orientation": i.value
+		}, null, 8, $e));
+	}
+}), tt = ["data-orientation", "aria-label"], nt = ["aria-label"], rt = { class: "dock-hairline-extend-chip-label" }, it = /* @__PURE__ */ M({
+	__name: "DockRail",
+	props: /* @__PURE__ */ N({
+		extent: { default: "beyond" },
+		position: { default: "end" },
+		items: {},
+		icon: {},
+		iconLabel: { default: "Switch dock context" }
+	}, {
+		context: {},
+		contextModifiers: {}
+	}),
+	emits: /* @__PURE__ */ N(["advance"], ["update:context"]),
+	setup(e, { emit: t }) {
+		let n = e, i = q(e, "context"), a = t, o = f(), s = E(() => o?.orientation.value ?? "horizontal"), c = E(() => n.icon ?? r), l = E(() => n.items && n.items.length > 0 ? [...n.items] : []);
+		function u(e) {
+			i.value = e, a("advance", e);
+		}
+		return (t, n) => (V(), k("div", {
+			class: I(["dock-hairline-extend", [
+				s.value,
+				`extent-${e.extent}`,
+				`at-${e.position}`
+			]]),
+			"data-orientation": s.value,
+			role: "group",
+			"aria-label": e.iconLabel
+		}, [A("div", {
+			class: "dock-hairline-strip",
+			role: "tablist",
+			"aria-label": e.iconLabel
+		}, [(V(!0), k(T, null, te(l.value, (e) => (V(), D(Je, {
+			key: e.id,
+			type: "button",
+			class: I(["dock-hairline-extend-chip", { "is-active": i.value === e.id }]),
+			role: "tab",
+			"aria-selected": i.value === e.id,
+			"aria-label": e.label,
+			title: e.label,
+			onClick: (t) => u(e.id)
+		}, {
+			default: X(() => [(V(), D(G(e.icon ?? c.value), { class: "size-4" })), A("span", rt, ne(e.label), 1)]),
+			_: 2
+		}, 1032, [
+			"class",
+			"aria-selected",
+			"aria-label",
+			"title",
+			"onClick"
+		]))), 128))], 8, nt)], 10, tt));
+	}
 });
 //#endregion
-export { u as DOCK_CONTEXT_KEY, Ae as DockBackgroundToggle, Ne as DockDropdownTrigger, ke as DockIconButton, Oe as DockLayer, De as DockLayerGroup, Me as DockSelectTrigger, ce as DockSeparator, je as DockTabButton, Se as GlassDock, c as provideDockContext, l as useDockContext, Q as useLayerTransition, s as useOptionalDockContext };
+//#region src/components/custom/dock/composables/useDockOrientationMorph.ts
+function at(e) {
+	let { rootEl: t } = e, n = U("vertical"), r = U(0), i = U(!1), a = S({
+		from: e.verticalSize,
+		to: 0,
+		axis: "height"
+	}), o = S({
+		from: 0,
+		to: e.horizontalSize,
+		axis: "width"
+	}), s = null;
+	function c(e) {
+		r.value = e, a.drive(e), o.drive(e);
+		let n = t.value;
+		n && n.style.setProperty("--dock-morph-t", `${e}`);
+	}
+	function l() {
+		s &&= (s.dispose(), null);
+	}
+	function u() {
+		return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	}
+	function d(e) {
+		if (u()) {
+			m(e);
+			return;
+		}
+		let n = t.value, a = s !== null && !s.settled ? s.velocity : 0;
+		if (!s || s.settled) {
+			l(), s = new Q({
+				response: g.response,
+				dampingFraction: g.dampingFraction,
+				initial: r.value,
+				respectReducedMotion: !0
+			});
+			let o = s;
+			o.reset(r.value, a), o.target = e, i.value = !0, n && n.setAttribute("data-morphing", ""), o.play((e) => {
+				if (c(e), o.settled) {
+					i.value = !1;
+					let e = t.value;
+					e && e.removeAttribute("data-morphing");
+				}
+			});
+		} else s.reset(r.value, a), s.target = e;
+	}
+	function f(e) {
+		e === n.value && !i.value || (n.value = e, d(+(e === "horizontal")));
+	}
+	function p() {
+		f(n.value === "vertical" ? "horizontal" : "vertical");
+	}
+	function m(e) {
+		let r = e < 0 ? 0 : e > 1 ? 1 : e;
+		l(), i.value = !1, n.value = r >= .5 ? "horizontal" : "vertical", c(r), c(r);
+		let a = t.value;
+		a && a.removeAttribute("data-morphing");
+	}
+	function h(e) {
+		let t = Math.min(Math.max(e / .5, 0), 1);
+		return 1 - t * t * (3 - 2 * t);
+	}
+	function _(e) {
+		let t = Math.min(Math.max((e - .5) / .5, 0), 1);
+		return t * t * (3 - 2 * t);
+	}
+	let v = E(() => a.sizeStyle.value), y = E(() => o.sizeStyle.value), b = E(() => ({ opacity: String(h(r.value)) })), x = E(() => ({ opacity: String(_(r.value)) })), C = E(() => Math.max(a.stretch.value, o.stretch.value));
+	return Y(t, (e) => {
+		e && e.style.setProperty("--dock-morph-t", `${r.value}`);
+	}, { immediate: !0 }), z(l), {
+		orientation: n,
+		t: r,
+		morphing: i,
+		verticalStyle: v,
+		horizontalStyle: y,
+		verticalOpacity: b,
+		horizontalOpacity: x,
+		stretch: C,
+		morphTo: f,
+		toggle: p,
+		pin: m
+	};
+}
+//#endregion
+export { _ as DOCK_CONTEXT_KEY, Ye as DockBackgroundToggle, Qe as DockDropdownTrigger, Je as DockIconButton, qe as DockLayer, Ge as DockLayerGroup, it as DockRail, Ze as DockSelectTrigger, et as DockSeparator, Xe as DockTabButton, Le as GlassDock, p as provideDockContext, h as useDockContext, at as useDockOrientationMorph, He as useLayerTransition, f as useOptionalDockContext };