@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/timeline.js

@@ -1,79 +1,75 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./HoverPopover-BcIxvyqZ.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, defineComponent as u, guardReactiveProps as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
-//#region src/components/custom/timeline/geometry.ts
-function S(e) {
-	if (typeof e.gradient == "string") return e.gradient;
-	if (e.gradient && typeof e.gradient == "object") {
-		let t = e.gradient;
-		return `linear-gradient(90deg, ${t.from}, ${t.to})`;
-	}
-	return "var(--timeline-segment-default-gradient, linear-gradient(90deg, var(--surface-tint-15), var(--surface-tint-25)))";
-}
-function C(e) {
+import { t as e } from "./useSpring-BBSKFx_0.js";
+import { t } from "./useSpringPress-BypV_KO-.js";
+import { t as n } from "./useLiquidFlex-Ch4exNvN.js";
+import { t as r } from "./vSpecular-DlYN0UZy.js";
+import { t as i } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as a, r as o, t as s } from "./PopoverContent-DOtszFWK.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, watch as D, withCtx as O, withDirectives as ee } from "vue";
+//#region src/components/timeline/geometry.ts
+function k(e) {
 	return typeof e.progress == "number" ? Math.max(0, Math.min(1, e.progress)) : e.state === "completed" ? 1 : e.state === "active" ? .5 : 0;
 }
-function w(e) {
+function A(e) {
 	return typeof e.weight == "number" && e.weight > 0 ? e.weight : 1;
 }
-function ee(e) {
-	let t = r(() => {
-		let t = e.value.reduce((e, t) => e + w(t), 0);
+function j(e) {
+	let t = l(() => {
+		let t = e.value.reduce((e, t) => e + A(t), 0);
 		return t > 0 ? t : 1;
 	});
 	function n(n) {
 		let r = 0;
 		for (let t = 0; t < n; t += 1) {
 			let n = e.value[t];
-			n && (r += w(n));
+			n && (r += A(n));
 		}
 		return r / t.value;
 	}
-	function i(n) {
+	function r(n) {
 		let r = e.value[n];
-		return r ? w(r) / t.value : 0;
+		return r ? A(r) / t.value : 0;
 	}
-	function a(e) {
-		return n(e) + i(e);
+	function i(e) {
+		return n(e) + r(e);
 	}
 	return {
 		totalWeight: t,
 		regionLeft: n,
-		regionWidth: i,
-		boundaryX: a,
-		continuousAriaValueNow: r(() => {
+		regionWidth: r,
+		boundaryX: i,
+		continuousAriaValueNow: l(() => {
 			let t = 0;
-			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += C(n));
+			for (let n of e.value) n.state === "completed" ? t += 1 : n.state === "active" && (t += k(n));
 			return Math.round(t * 100) / 100;
 		})
 	};
 }
-function T(e) {
+function M(e) {
 	return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--timeline-segment-default-gradient-color, var(--surface-tint-25))";
 }
-function E(e) {
+function N(e) {
 	if (e.length === 0) return "var(--timeline-segment-default-gradient, linear-gradient(90deg, var(--surface-tint-15), var(--surface-tint-25)))";
 	if (e.length === 1) {
-		let t = T(e[0]);
+		let t = M(e[0]);
 		return `linear-gradient(90deg, ${t}, ${t})`;
 	}
-	let t = e.reduce((e, t) => e + w(t), 0) || 1, n = [], r = 0;
+	let t = e.reduce((e, t) => e + A(t), 0) || 1, n = [], r = 0;
 	return e.forEach((i, a) => {
-		let o = w(i), s = (r + o / 2) / t, c = a === 0 ? 0 : a === e.length - 1 ? 1 : s;
-		n.push(`${T(i)} ${(c * 100).toFixed(3)}%`), r += o;
+		let o = A(i), s = (r + o / 2) / t, c = a === 0 ? 0 : a === e.length - 1 ? 1 : s;
+		n.push(`${M(i)} ${(c * 100).toFixed(3)}%`), r += o;
 	}), `linear-gradient(90deg, ${n.join(", ")})`;
 }
-function D(e, t) {
+function P(e, t) {
 	let n = t > 0 ? t : 1, r = `${(100 / n).toFixed(3)}%`, i = 1 - n;
 	return {
 		sizeX: r,
 		positionX: i > 1e-6 ? `${(e / i * 100).toFixed(3)}%` : "0%"
 	};
 }
-function O(e) {
-	return C(e);
+function F(e) {
+	return k(e);
 }
-function k(e) {
+function I(e) {
 	let t = e.value ?? null;
 	return {
 		label: t?.label ?? e.label,
@@ -83,27 +79,27 @@ function k(e) {
 	};
 }
 //#endregion
-//#region src/components/custom/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
-var A = ["aria-label"], j = [
+//#region src/components/timeline/ContinuousMarkers.vue?vue&type=script&setup=true&lang.ts
+var L = ["aria-label"], R = [
 	"aria-label",
 	"data-state",
 	"data-current",
 	"data-completed",
 	"onClick",
 	"onKeydown"
-], M = { class: "sr-only" }, N = {
+], z = { class: "sr-only" }, B = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, P = { class: "timeline-popover-label" }, F = {
+}, V = { class: "timeline-popover-label" }, H = {
 	key: 0,
 	class: "timeline-popover-value tabular-nums"
-}, I = {
+}, U = {
 	key: 1,
 	class: "timeline-popover-description"
-}, L = { class: "timeline-popover-state" }, R = [
+}, W = { class: "timeline-popover-state" }, G = [
 	"aria-label",
 	"data-state",
 	"data-current",
@@ -114,13 +110,13 @@ var A = ["aria-label"], j = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], z = { class: "sr-only" }, B = {
+], K = { class: "sr-only" }, q = {
 	key: 0,
 	class: "continuous-dot-check",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	"aria-hidden": "true"
-}, V = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}, J = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousMarkers",
 	props: {
 		segments: {},
@@ -134,74 +130,82 @@ var A = ["aria-label"], j = [
 		"hoverEnd",
 		"click"
 	],
-	setup(e, { emit: r }) {
-		let c = r;
-		function l(e, t) {
-			c(t ? "hover" : "hoverEnd", e);
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e, t) {
+			n(t ? "hover" : "hoverEnd", e);
 		}
-		function u(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c("click", t));
+		function i(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n("click", t));
 		}
-		return (r, d) => e.segments.length > 0 ? (h(), o("ul", {
+		return (t, l) => e.segments.length > 0 ? (x(), f("ul", {
 			key: 0,
 			class: "continuous-markers",
 			role: "list",
 			"aria-label": `${e.markersAriaLabel} — phase markers`
-		}, [(h(!0), o(n, null, _(e.segments, (n, p) => (h(), o("li", {
-			key: `dot-li-${n.key}`,
+		}, [(x(!0), f(c, null, C(e.segments, (c, m) => (x(), f("li", {
+			key: `dot-li-${c.key}`,
 			class: "continuous-marker",
 			role: "listitem",
-			style: m({ left: `${e.boundaryX(p) * 100}%` })
-		}, [e.disablePopover ? (h(), o("button", {
+			style: b({ left: `${e.boundaryX(m) * 100}%` })
+		}, [e.disablePopover ? (x(), f("button", {
 			key: 1,
 			type: "button",
 			class: "continuous-dot segmented-dot",
-			"aria-label": `${n.label}: ${n.state}`,
-			"data-state": n.state,
-			"data-current": n.key === e.currentSegmentKey || void 0,
-			"data-completed": n.state === "completed" || void 0,
-			onMouseenter: (e) => c("hover", n),
-			onMouseleave: (e) => c("hoverEnd", n),
-			onFocus: (e) => c("hover", n),
-			onBlur: (e) => c("hoverEnd", n),
-			onClick: (e) => c("click", n),
-			onKeydown: (e) => u(e, n)
-		}, [s("span", z, y(n.label), 1), n.state === "completed" ? (h(), o("svg", B, [...d[1] ||= [s("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : a("", !0)], 40, R)) : (h(), i(t, {
+			"aria-label": `${c.label}: ${c.state}`,
+			"data-state": c.state,
+			"data-current": c.key === e.currentSegmentKey || void 0,
+			"data-completed": c.state === "completed" || void 0,
+			onMouseenter: (e) => n("hover", c),
+			onMouseleave: (e) => n("hoverEnd", c),
+			onFocus: (e) => n("hover", c),
+			onBlur: (e) => n("hoverEnd", c),
+			onClick: (e) => n("click", c),
+			onKeydown: (e) => i(e, c)
+		}, [p("span", K, T(c.label), 1), c.state === "completed" ? (x(), f("svg", q, [...l[1] ||= [p("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : d("", !0)], 40, G)) : (x(), u(E(o), {
 			key: 0,
-			side: "top",
-			"side-offset": 10,
-			"hover-open-delay": 120,
+			trigger: "hover",
+			"open-delay": 120,
 			"close-delay": 160,
-			class: f(`timeline-popover timeline-popover-${n.key}`),
-			"onUpdate:open": (e) => l(n, e)
+			"onUpdate:open": (e) => r(c, e ?? !1)
 		}, {
-			trigger: x(() => [s("button", {
-				type: "button",
-				class: "continuous-dot segmented-dot",
-				"aria-label": `${n.label}: ${n.state}`,
-				"data-state": n.state,
-				"data-current": n.key === e.currentSegmentKey || void 0,
-				"data-completed": n.state === "completed" || void 0,
-				onClick: (e) => c("click", n),
-				onKeydown: (e) => u(e, n)
-			}, [s("span", M, y(n.label), 1), n.state === "completed" ? (h(), o("svg", N, [...d[0] ||= [s("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : a("", !0)], 40, j)]),
-			content: x(() => [v(r.$slots, "popoverContent", { segment: n }, () => [s("div", {
-				class: "timeline-popover-body",
-				style: m({ "--popover-tint": typeof n.gradient == "object" && n.gradient ? n.gradient.to : "var(--foreground)" })
-			}, [
-				s("span", P, y(b(k)(n).label), 1),
-				b(k)(n).value == null ? a("", !0) : (h(), o("span", F, y(b(k)(n).value), 1)),
-				b(k)(n).description ? (h(), o("span", I, y(b(k)(n).description), 1)) : a("", !0),
-				s("span", L, y(b(k)(n).state), 1)
-			], 4)], !0)]),
+			default: O(() => [h(E(a), { "as-child": "" }, {
+				default: O(() => [p("button", {
+					type: "button",
+					class: "continuous-dot segmented-dot",
+					"aria-label": `${c.label}: ${c.state}`,
+					"data-state": c.state,
+					"data-current": c.key === e.currentSegmentKey || void 0,
+					"data-completed": c.state === "completed" || void 0,
+					onClick: (e) => n("click", c),
+					onKeydown: (e) => i(e, c)
+				}, [p("span", z, T(c.label), 1), c.state === "completed" ? (x(), f("svg", B, [...l[0] ||= [p("path", { d: "M5 13l4 4L19 7" }, null, -1)]])) : d("", !0)], 40, R)]),
+				_: 2
+			}, 1024), h(E(s), {
+				role: "card",
+				side: "top",
+				"side-offset": 10,
+				class: v(`timeline-popover timeline-popover-${c.key}`)
+			}, {
+				default: O(() => [w(t.$slots, "popoverContent", { segment: c }, () => [p("div", {
+					class: "timeline-popover-body",
+					style: b({ "--popover-tint": typeof c.gradient == "object" && c.gradient ? c.gradient.to : "var(--foreground)" })
+				}, [
+					p("span", V, T(E(I)(c).label), 1),
+					E(I)(c).value == null ? d("", !0) : (x(), f("span", H, T(E(I)(c).value), 1)),
+					E(I)(c).description ? (x(), f("span", U, T(E(I)(c).description), 1)) : d("", !0),
+					p("span", W, T(E(I)(c).state), 1)
+				], 4)], !0)]),
+				_: 2
+			}, 1032, ["class"])]),
 			_: 2
-		}, 1032, ["class", "onUpdate:open"]))], 4))), 128))], 8, A)) : a("", !0);
+		}, 1032, ["onUpdate:open"]))], 4))), 128))], 8, L)) : d("", !0);
 	}
-}), [["__scopeId", "data-v-54dadfb5"]]), H = [
+}), [["__scopeId", "data-v-0d42a418"]]), Y = [
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-label"
-], U = ["data-state"], W = /* @__PURE__ */ e(/* @__PURE__ */ u({
+], X = ["data-state"], Z = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousRail",
 	props: {
 		segments: {},
@@ -212,36 +216,36 @@ var A = ["aria-label"], j = [
 		regionWidth: { type: Function }
 	},
 	setup(e) {
-		return (t, r) => (h(), o("div", {
-			class: "continuous-track",
+		return (t, n) => (x(), f("div", {
+			class: "continuous-track timeline-rail",
 			role: "progressbar",
 			"aria-valuemin": 0,
 			"aria-valuemax": e.segments.length,
 			"aria-valuenow": e.valueNow,
 			"aria-label": e.railAriaLabel
-		}, [(h(!0), o(n, null, _(e.segments, (t, n) => (h(), o("div", {
+		}, [(x(!0), f(c, null, C(e.segments, (t, r) => (x(), f("div", {
 			key: t.key,
-			class: f(["continuous-region", [
+			class: v(["continuous-region", [
 				`state-${t.state}`,
-				n === 0 && "is-first",
-				n === e.segments.length - 1 && "is-last"
+				r === 0 && "is-first",
+				r === e.segments.length - 1 && "is-last"
 			]]),
 			"data-state": t.state,
-			style: m({
-				left: `${e.regionLeft(n) * 100}%`,
-				width: `${e.regionWidth(n) * 100}%`,
+			style: b({
+				left: `${e.regionLeft(r) * 100}%`,
+				width: `${e.regionWidth(r) * 100}%`,
 				"--stitch-gradient": e.railGradient,
-				"--stitch-size-x": b(D)(e.regionLeft(n), e.regionWidth(n)).sizeX,
-				"--stitch-pos-x": b(D)(e.regionLeft(n), e.regionWidth(n)).positionX,
-				"--continuous-fill-width": `${b(O)(t) * 100}%`
+				"--stitch-size-x": E(P)(e.regionLeft(r), e.regionWidth(r)).sizeX,
+				"--stitch-pos-x": E(P)(e.regionLeft(r), e.regionWidth(r)).positionX,
+				"--continuous-fill-width": `${E(F)(t) * 100}%`
 			}),
 			"aria-hidden": "true"
-		}, [...r[0] ||= [s("div", { class: "continuous-region-fill" }, null, -1)]], 14, U))), 128))], 8, H));
+		}, [...n[0] ||= [p("div", { class: "continuous-region-fill" }, null, -1)]], 14, X))), 128))], 8, Y));
 	}
-}), [["__scopeId", "data-v-e129d308"]]), G = ["aria-label"], K = { class: "continuous-track-wrap" }, q = {
+}), [["__scopeId", "data-v-6e008bf0"]]), Q = ["aria-label"], te = { class: "continuous-track-wrap" }, ne = {
 	key: 0,
 	class: "continuous-detail"
-}, J = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}, re = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ContinuousTimeline",
 	props: {
 		segments: {},
@@ -258,45 +262,45 @@ var A = ["aria-label"], j = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let n = e, i = t, u = r(() => n.segments ?? []), { regionLeft: d, regionWidth: f, boundaryX: p, continuousAriaValueNow: m } = ee(u), _ = r(() => E(u.value)), y = r(() => {
+		let n = e, r = t, i = l(() => n.segments ?? []), { regionLeft: a, regionWidth: o, boundaryX: s, continuousAriaValueNow: c } = j(i), u = l(() => N(i.value)), g = l(() => {
 			if (n.ariaLabel) return n.ariaLabel;
-			let e = u.value.map((e) => e.label).filter(Boolean);
+			let e = i.value.map((e) => e.label).filter(Boolean);
 			return e.length > 0 ? `Timeline: ${e.join(", ")}` : "Timeline";
-		}), S = g(null), C = r(() => {
-			let e = u.value;
+		}), _ = S(null), v = l(() => {
+			let e = i.value;
 			if (e.length === 0) return null;
-			let t = S.value ?? n.currentSegmentKey ?? null;
+			let t = _.value ?? n.currentSegmentKey ?? null;
 			return t == null ? null : e.find((e) => e.key === t) ?? null;
-		}), w = r(() => S.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
-		function T(e) {
-			S.value = e.key, i("hover", {
+		}), y = l(() => _.value == null ? n.currentSegmentKey == null ? "idle" : "current" : "hovered");
+		function b(e) {
+			_.value = e.key, r("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function D(e) {
-			S.value === e.key && (S.value = null), i("hoverEnd", {
+		function C(e) {
+			_.value === e.key && (_.value = null), r("hoverEnd", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function O(e) {
-			i("click", {
+		function T(e) {
+			r("click", {
 				key: e.key,
 				segment: e
 			});
 		}
-		return (t, r) => (h(), o("div", {
+		return (t, r) => (x(), f("div", {
 			class: "timeline-row timeline-continuous",
 			role: "group",
-			"aria-label": y.value
-		}, [s("div", K, [l(W, {
-			segments: u.value,
-			"rail-gradient": _.value,
-			"rail-aria-label": y.value,
-			"value-now": b(m),
-			"region-left": b(d),
-			"region-width": b(f)
+			"aria-label": g.value
+		}, [p("div", te, [h(Z, {
+			segments: i.value,
+			"rail-gradient": u.value,
+			"rail-aria-label": g.value,
+			"value-now": E(c),
+			"region-left": E(a),
+			"region-width": E(o)
 		}, null, 8, [
 			"segments",
 			"rail-gradient",
@@ -304,18 +308,18 @@ var A = ["aria-label"], j = [
 			"value-now",
 			"region-left",
 			"region-width"
-		]), l(V, {
-			segments: u.value,
-			"markers-aria-label": y.value,
+		]), h(J, {
+			segments: i.value,
+			"markers-aria-label": g.value,
 			"current-segment-key": e.currentSegmentKey,
 			"disable-popover": e.disablePopover,
-			"boundary-x": b(p),
-			onHover: T,
-			onHoverEnd: D,
-			onClick: O
-		}, c({ _: 2 }, [t.$slots.popoverContent ? {
+			"boundary-x": E(s),
+			onHover: b,
+			onHoverEnd: C,
+			onClick: T
+		}, m({ _: 2 }, [t.$slots.popoverContent ? {
 			name: "popoverContent",
-			fn: x(({ segment: e }) => [v(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
+			fn: O(({ segment: e }) => [w(t.$slots, "popoverContent", { segment: e }, void 0, !0)]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
@@ -323,14 +327,17 @@ var A = ["aria-label"], j = [
 			"current-segment-key",
 			"disable-popover",
 			"boundary-x"
-		])]), t.$slots.detail ? (h(), o("div", q, [v(t.$slots, "detail", {
-			segment: C.value,
-			source: w.value,
+		])]), t.$slots.detail ? (x(), f("div", ne, [w(t.$slots, "detail", {
+			segment: v.value,
+			source: y.value,
 			currentKey: n.currentSegmentKey ?? null,
-			hoveredKey: S.value
-		}, void 0, !0)])) : a("", !0)], 8, G));
+			hoveredKey: _.value
+		}, void 0, !0)])) : d("", !0)], 8, Q));
 	}
-}), [["__scopeId", "data-v-48215043"]]), Y = { class: "timeline-row" }, X = { class: "caret-value fira-code" }, Z = ["aria-valuenow"], Q = /* @__PURE__ */ e(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-dd68996f"]]), ie = { class: "timeline-row" }, ae = { class: "caret-value fira-code" }, oe = ["data-scrubbing", "aria-valuenow"], se = {
+	class: "glass-thumb",
+	"aria-hidden": "true"
+}, ce = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "ScrubberTimeline",
 	props: {
 		modelValue: { default: 0 },
@@ -341,57 +348,98 @@ var A = ["aria-label"], j = [
 		"scrubStart",
 		"scrubEnd"
 	],
-	setup(e, { emit: t }) {
-		let n = e, r = t, i = g(), c = g(!1);
-		function l(e) {
-			let t = i.value.getBoundingClientRect();
+	setup(i, { emit: a }) {
+		let o = {
+			response: .34,
+			dampingFraction: .74
+		}, s = {
+			response: .46,
+			dampingFraction: .82
+		}, c = {
+			response: .22,
+			dampingFraction: .7
+		}, u = i, m = a, h = S(), g = S(!1), _ = e(() => u.modelValue, {
+			response: o.response,
+			dampingFraction: o.dampingFraction
+		}), y = e(() => u.modelValue, {
+			response: s.response,
+			dampingFraction: s.dampingFraction
+		}), C = n({
+			from: 0,
+			to: 1,
+			axis: "width",
+			maxStretch: 1.12,
+			squishLaw: "tanh"
+		});
+		D(() => _.velocity.value, (e) => C.squish(Math.abs(e)));
+		let w = l(() => C.stretch.value), O = t({
+			response: c.response,
+			dampingFraction: c.dampingFraction
+		}), k = l(() => 1 - .04 * O.value.value), A = S(!1), j;
+		function M() {
+			A.value = !1, requestAnimationFrame(() => {
+				A.value = !0, j && clearTimeout(j), j = setTimeout(() => {
+					A.value = !1;
+				}, 520);
+			});
+		}
+		function N(e) {
+			let t = h.value.getBoundingClientRect();
 			return Math.max(0, Math.min(1, (e.clientX - t.left) / t.width));
 		}
-		function u(e) {
-			e.currentTarget.setPointerCapture(e.pointerId), c.value = !0, r("scrubStart"), r("update:modelValue", l(e));
+		function P(e) {
+			e.currentTarget.setPointerCapture(e.pointerId), g.value = !0, O.press(), m("scrubStart"), m("update:modelValue", N(e));
 		}
-		function d(e) {
-			c.value && r("update:modelValue", l(e));
+		function F(e) {
+			g.value && m("update:modelValue", N(e));
 		}
-		function f() {
-			c.value = !1, r("scrubEnd");
+		function I() {
+			g.value && (g.value = !1, O.release(), M(), m("scrubEnd"));
 		}
-		function p(e) {
+		function L(e) {
 			let t = e.shiftKey ? .1 : .01;
-			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), r("update:modelValue", Math.min(1, n.modelValue + t))) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), r("update:modelValue", Math.max(0, n.modelValue - t)));
+			e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), m("update:modelValue", Math.min(1, u.modelValue + t)), M()) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), m("update:modelValue", Math.max(0, u.modelValue - t)), M());
 		}
-		return (t, n) => (h(), o("div", Y, [e.label ? (h(), o("div", {
+		let R = l(() => {
+			let e = _.value.value, t = w.value, n = 1 / t * k.value;
+			return {
+				transform: `translateX(calc(${(e * 100).toFixed(3)}cqw - 50%)) scale(${(t * k.value).toFixed(4)}, ${n.toFixed(4)})`,
+				"--flex-vel": C.flexVel.value.toFixed(4)
+			};
+		}), z = l(() => ({ width: `${(y.value.value * 100).toFixed(3)}%` }));
+		return (e, t) => (x(), f("div", ie, [i.label ? (x(), f("div", {
 			key: 0,
 			class: "timeline-caret",
-			style: m({ left: e.modelValue * 100 + "%" })
-		}, [s("span", X, y(e.label), 1)], 4)) : a("", !0), s("div", {
+			style: b({ left: i.modelValue * 100 + "%" })
+		}, [p("span", ae, T(i.label), 1)], 4)) : d("", !0), p("div", {
 			ref_key: "trackRef",
-			ref: i,
-			class: "glass-track",
+			ref: h,
+			class: v(["glass-track timeline-rail", { "is-flooding": A.value }]),
+			"data-scrubbing": g.value ? "" : void 0,
 			role: "slider",
 			tabindex: "0",
-			"aria-valuenow": Number(e.modelValue ?? 0),
+			"aria-valuenow": Number(i.modelValue ?? 0),
 			"aria-valuemin": "0",
 			"aria-valuemax": "1",
 			"aria-label": "Timeline",
-			onPointerdown: u,
-			onPointermove: d,
-			onPointerup: f,
-			onPointercancel: f,
-			onKeydown: p
-		}, [s("div", {
+			onPointerdown: P,
+			onPointermove: F,
+			onPointerup: I,
+			onPointercancel: I,
+			onKeydown: L
+		}, [p("div", {
 			class: "glass-fill",
-			style: m({ width: e.modelValue * 100 + "%" })
-		}, null, 4), s("div", {
-			class: "glass-thumb",
-			style: m({ left: e.modelValue * 100 + "%" })
-		}, null, 4)], 40, Z)]));
+			style: b(z.value)
+		}, null, 4), p("div", {
+			class: "glass-thumb-seat",
+			style: b(R.value)
+		}, [ee(p("div", se, null, 512), [[E(r)]])], 4)], 42, oe)]));
 	}
-}), [["__scopeId", "data-v-a206e2d2"]]), $ = {
+}), [["__scopeId", "data-v-92398082"]]), le = {
 	class: "timeline-row timeline-segmented",
 	role: "group",
 	"aria-label": "Timeline progress"
-}, te = { class: "segmented-track" }, ne = ["data-state"], re = [
+}, ue = { class: "segmented-track timeline-rail" }, $ = ["data-state"], de = [
 	"aria-label",
 	"data-state",
 	"onMouseenter",
@@ -400,7 +448,7 @@ var A = ["aria-label"], j = [
 	"onBlur",
 	"onClick",
 	"onKeydown"
-], ie = { class: "sr-only" }, ae = /* @__PURE__ */ e(/* @__PURE__ */ u({
+], fe = { class: "sr-only" }, pe = /* @__PURE__ */ i(/* @__PURE__ */ g({
 	__name: "SegmentedTimeline",
 	props: { segments: {} },
 	emits: [
@@ -409,60 +457,63 @@ var A = ["aria-label"], j = [
 		"click"
 	],
 	setup(e, { emit: t }) {
-		let i = e, a = t, c = r(() => i.segments ?? []);
-		function l(e) {
-			a("hover", {
+		let n = e, r = t, i = l(() => n.segments ?? []);
+		function a(e) {
+			return e.gradient && typeof e.gradient == "object" ? e.gradient.to : "var(--cel-accent)";
+		}
+		function o(e) {
+			r("hover", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function u(e) {
-			a("hoverEnd", {
+		function s(e) {
+			r("hoverEnd", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function d(e) {
-			a("click", {
+		function u(e) {
+			r("click", {
 				key: e.key,
 				segment: e
 			});
 		}
-		function p(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a("click", {
+		function d(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r("click", {
 				key: t.key,
 				segment: t
 			}));
 		}
-		return (e, t) => (h(), o("div", $, [s("div", te, [(h(!0), o(n, null, _(c.value, (e, t) => (h(), o("div", {
+		return (e, t) => (x(), f("div", le, [p("div", ue, [(x(!0), f(c, null, C(i.value, (e, t) => (x(), f("div", {
 			key: e.key,
-			class: f(["segmented-cell", [
+			class: v(["segmented-cell", [
 				`state-${e.state}`,
 				t === 0 && "is-first",
-				t === c.value.length - 1 && "is-last"
+				t === i.value.length - 1 && "is-last"
 			]]),
 			"data-state": e.state
-		}, [s("div", {
-			class: "segmented-band",
-			style: m({
-				background: b(S)(e),
-				width: `${b(C)(e) * 100}%`
+		}, [p("div", {
+			class: "segmented-band timeline-cel",
+			style: b({
+				"--cel-accent": a(e),
+				width: `${E(k)(e) * 100}%`
 			}),
 			"aria-hidden": "true"
-		}, null, 4), s("button", {
+		}, null, 4), p("button", {
 			type: "button",
 			class: "segmented-dot",
 			"aria-label": `${e.label}: ${e.state}`,
 			"data-state": e.state,
-			onMouseenter: (t) => l(e),
-			onMouseleave: (t) => u(e),
-			onFocus: (t) => l(e),
-			onBlur: (t) => u(e),
-			onClick: (t) => d(e),
-			onKeydown: (t) => p(t, e)
-		}, [s("span", ie, y(e.label), 1)], 40, re)], 10, ne))), 128))])]));
+			onMouseenter: (t) => o(e),
+			onMouseleave: (t) => s(e),
+			onFocus: (t) => o(e),
+			onBlur: (t) => s(e),
+			onClick: (t) => u(e),
+			onKeydown: (t) => d(t, e)
+		}, [p("span", fe, T(e.label), 1)], 40, de)], 10, $))), 128))])]));
 	}
-}), [["__scopeId", "data-v-2db316ec"]]), oe = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-648d62e4"]]), me = /* @__PURE__ */ g({
 	__name: "GlassTimeline",
 	props: {
 		variant: { default: "scrubber" },
@@ -486,42 +537,42 @@ var A = ["aria-label"], j = [
 	],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		return (t, a) => e.variant === "continuous" ? (h(), i(J, {
+		return (t, i) => e.variant === "continuous" ? (x(), u(re, {
 			key: 0,
 			segments: n.segments,
 			"aria-label": n.ariaLabel,
 			"current-segment-key": n.currentSegmentKey,
 			"disable-popover": n.disablePopover,
-			onHover: a[0] ||= (e) => r("hover", e),
-			onHoverEnd: a[1] ||= (e) => r("hoverEnd", e),
-			onClick: a[2] ||= (e) => r("click", e)
-		}, c({
-			popoverContent: x((e) => [v(t.$slots, "popoverContent", p(d(e)))]),
+			onHover: i[0] ||= (e) => r("hover", e),
+			onHoverEnd: i[1] ||= (e) => r("hoverEnd", e),
+			onClick: i[2] ||= (e) => r("click", e)
+		}, m({
+			popoverContent: O((e) => [w(t.$slots, "popoverContent", y(_(e)))]),
 			_: 2
 		}, [t.$slots.detail ? {
 			name: "detail",
-			fn: x((e) => [v(t.$slots, "detail", p(d(e)))]),
+			fn: O((e) => [w(t.$slots, "detail", y(_(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"segments",
 			"aria-label",
 			"current-segment-key",
 			"disable-popover"
-		])) : e.variant === "segmented" ? (h(), i(ae, {
+		])) : e.variant === "segmented" ? (x(), u(pe, {
 			key: 1,
 			segments: n.segments,
-			onHover: a[3] ||= (e) => r("hover", e),
-			onHoverEnd: a[4] ||= (e) => r("hoverEnd", e),
-			onClick: a[5] ||= (e) => r("click", e)
-		}, null, 8, ["segments"])) : (h(), i(Q, {
+			onHover: i[3] ||= (e) => r("hover", e),
+			onHoverEnd: i[4] ||= (e) => r("hoverEnd", e),
+			onClick: i[5] ||= (e) => r("click", e)
+		}, null, 8, ["segments"])) : (x(), u(ce, {
 			key: 2,
 			"model-value": n.modelValue,
 			label: n.label,
-			"onUpdate:modelValue": a[6] ||= (e) => r("update:modelValue", e),
-			onScrubStart: a[7] ||= (e) => r("scrubStart"),
-			onScrubEnd: a[8] ||= (e) => r("scrubEnd")
+			"onUpdate:modelValue": i[6] ||= (e) => r("update:modelValue", e),
+			onScrubStart: i[7] ||= (e) => r("scrubStart"),
+			onScrubEnd: i[8] ||= (e) => r("scrubEnd")
 		}, null, 8, ["model-value", "label"]));
 	}
 });
 //#endregion
-export { oe as GlassTimeline };
+export { me as GlassTimeline };