@weasel-js/ui 1.4.0 → 1.4.1

package/dist/chunks/{Timeline-BE7UWajy.js → Timeline-CWuh0nV0.js}

@@ -1,9 +1,9 @@
 import { H as e, R as t, i as n } from "./icons-BV27dhKB.js";
-import { t as r } from "./DetentSlider--tQdVQj_.js";
+import { t as r } from "./DetentSlider-Cd5360U3.js";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { EASINGS as s, cubicBezierEasing as c, resolveEasing as l, sampleTrack as u, useVisibleRaf as d } from "@weasel-js/core";
-import { useCallback as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
-var y = {
+import { EASINGS as s, cubicBezierEasing as c, openPointerSession as l, resolveEasing as u, sampleTrack as d, useVisibleRaf as f } from "@weasel-js/core";
+import { useCallback as p, useEffect as m, useLayoutEffect as h, useMemo as g, useReducer as _, useRef as v, useState as y } from "react";
+var b = {
 	ruler: "_ruler_gapxk_1",
 	tick: "_tick_gapxk_11",
 	playhead: "_playhead_gapxk_29",
@@ -41,26 +41,26 @@ var y = {
 };
 //#endregion
 //#region src/components/Timeline/easingSpec.ts
-function b(e) {
-	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
-}
 function x(e) {
-	return e === void 0 ? null : b(e);
+	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
 }
 function S(e) {
+	return e === void 0 ? null : x(e);
+}
+function C(e) {
 	if (e === void 0) return "linear";
 	if (typeof e == "string") return e;
-	let t = b(e);
+	let t = x(e);
 	if (t) return `cubic-bezier(${t.join(", ")})`;
 	for (let [t, n] of Object.entries(s)) if (n === e) return t;
 	return "custom";
 }
-function C(e, t) {
-	let n = l(e), r = Array(t), i = t - 1;
+function w(e, t) {
+	let n = u(e), r = Array(t), i = t - 1;
 	for (let e = 0; e < t; e++) r[e] = n(i === 0 ? 0 : e / i);
 	return r;
 }
-var w = Object.keys(s), T = 24, E = {
+var T = Object.keys(s), E = 24, D = {
 	linear: [
 		0,
 		0,
@@ -121,16 +121,16 @@ var w = Object.keys(s), T = 24, E = {
 		.63,
 		1
 	]
-}, D = [
+}, O = [
 	.25,
 	.1,
 	.25,
 	1
 ];
-function O(e) {
-	let { value: t, onChange: n } = e, r = x(t), i = S(t), s = r === null && w.includes(i), c = r === null ? s ? i : "linear" : "custom", l = C(t, T).map((e, t) => `${t / (T - 1) * 100},${100 - e * 100}`).join(" ");
+function k(e) {
+	let { value: t, onChange: n } = e, r = S(t), i = C(t), s = r === null && T.includes(i), c = r === null ? s ? i : "linear" : "custom", l = w(t, E).map((e, t) => `${t / (E - 1) * 100},${100 - e * 100}`).join(" ");
 	return /* @__PURE__ */ o("div", {
-		className: y.easingPicker,
+		className: b.easingPicker,
 		children: [
 			/* @__PURE__ */ o("label", { children: ["Easing", /* @__PURE__ */ o("select", {
 				value: c,
@@ -140,7 +140,7 @@ function O(e) {
 						value: "linear",
 						children: "linear"
 					}),
-					w.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ a("option", {
+					T.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ a("option", {
 						value: e,
 						children: e
 					}, e)),
@@ -152,15 +152,15 @@ function O(e) {
 			})] }),
 			r === null ? /* @__PURE__ */ a("button", {
 				type: "button",
-				className: y.transportButton,
-				onClick: () => n({ bezier: E[c] ?? D }),
+				className: b.transportButton,
+				onClick: () => n({ bezier: D[c] ?? O }),
 				children: "Convert to bezier"
 			}) : /* @__PURE__ */ a("span", {
-				className: y.easingLabel,
+				className: b.easingLabel,
 				children: i
 			}),
 			/* @__PURE__ */ a("svg", {
-				className: y.easingPreview,
+				className: b.easingPreview,
 				"data-testid": "easing-preview",
 				viewBox: "0 0 100 100",
 				preserveAspectRatio: "none",
@@ -174,8 +174,8 @@ function O(e) {
 }
 //#endregion
 //#region src/components/Timeline/timeScale.ts
-var k = 1;
-function A(e, t) {
+var A = 1;
+function j(e, t) {
 	let n = e.to - e.from, r = n === 0 ? 0 : t / n, i = t === 0 ? 0 : n / t;
 	return {
 		window: e,
@@ -184,36 +184,36 @@ function A(e, t) {
 		toMs: (t) => e.from + t * i
 	};
 }
-function j(e, t) {
+function M(e, t) {
 	let n = e.to - e.from;
 	return n === 0 ? 0 : (t - e.from) / n;
 }
-function M(e, t) {
-	return `${j(e, t) * 100}%`;
-}
 function N(e, t) {
-	let n = e.to - e.from;
-	return n === 0 ? 0 : t / n;
+	return `${M(e, t) * 100}%`;
 }
 function P(e, t) {
-	return `${N(e, t) * 100}%`;
+	let n = e.to - e.from;
+	return n === 0 ? 0 : t / n;
 }
 function F(e, t) {
+	return `${P(e, t) * 100}%`;
+}
+function I(e, t) {
 	let n = Math.min(e.to - e.from, t.to - t.from), r = e.from;
 	return r < t.from && (r = t.from), r + n > t.to && (r = t.to - n), {
 		from: r,
 		to: r + n
 	};
 }
-function I(e, t, n, r) {
-	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(k, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
-	return F({
+function L(e, t, n, r) {
+	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(A, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
+	return I({
 		from: t - s * o,
 		to: t + (1 - s) * o
 	}, r);
 }
-function L(e, t, n) {
-	return F({
+function ee(e, t, n) {
+	return I({
 		from: e.from + t,
 		to: e.to + t
 	}, n);
@@ -273,7 +273,7 @@ function W(e, t) {
 		keys: t
 	};
 }
-function ee(e, t) {
+function te(e, t) {
 	return {
 		...e,
 		events: t
@@ -314,7 +314,7 @@ function K(e, t, n) {
 			t: i
 		}, o = n.events.filter((e, n) => n !== t.keyIndex), s = o.findIndex((e) => e.t > i), c = s === -1 ? o.length : s;
 		return o.splice(c, 0, a), {
-			tracks: G(e, t.trackPath, ee(r, o)),
+			tracks: G(e, t.trackPath, te(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -332,7 +332,7 @@ function q(e, t, n) {
 		tracks: e.slice(),
 		selection: null
 	};
-	let i = r, a = Math.max(0, n), o = i.keys.length === 0 ? 0 : u(i, a), s = i.keys.slice(), c = s.findIndex((e) => e.t > a), l = c === -1 ? s.length : c;
+	let i = r, a = Math.max(0, n), o = i.keys.length === 0 ? 0 : d(i, a), s = i.keys.slice(), c = s.findIndex((e) => e.t > a), l = c === -1 ? s.length : c;
 	return s.splice(l, 0, {
 		t: a,
 		value: o
@@ -377,7 +377,7 @@ function X(e, t, n) {
 		value: n
 	}, G(e, t.trackPath, W(r, i));
 }
-function te(e, t, n) {
+function ne(e, t, n) {
 	let r = e, i = n;
 	for (let n of t) {
 		let t = Math.abs(n - e);
@@ -387,129 +387,139 @@ function te(e, t, n) {
 }
 //#endregion
 //#region src/components/Timeline/Lane.tsx
-var Z = 8, ne = 6, re = 10, ie = 16;
-function ae(e, t) {
+var Z = 8, re = 6, ie = 10, ae = 16;
+function oe(e, t) {
 	let n = c(...e), r = Array(t), i = t - 1;
 	for (let e = 0; e < t; e++) r[e] = n(i === 0 ? 0 : e / i);
 	return r;
 }
-function oe(e) {
+function se(e) {
 	return e.kind === "sampled" ? e.track.keys.map((e) => e.t) : e.kind === "event" ? e.track.events.map((e) => e.t) : [];
 }
-function Q(e) {
-	let { row: t, window: r, mode: s, selection: c, onSelect: l, onKeyInput: u, onKeyCommit: d, onInsert: f, onToggleExpand: m, expanded: h, snapTimes: g, selectedSegment: b = null, onSelectSegment: S, onEasingCommit: w } = e, T = _(null), E = _(null);
-	p(() => () => {
-		E.current?.();
+function ce(e) {
+	let { row: t, window: r, mode: s, selection: c, onSelect: u, onKeyInput: d, onKeyCommit: f, onInsert: p, onToggleExpand: h, expanded: g, snapTimes: _, selectedSegment: x = null, onSelectSegment: C, onEasingCommit: T } = e, E = v(null), D = v(null);
+	m(() => () => {
+		D.current?.cancel();
 	}, []);
-	let [D, O] = v(null), [k, N] = v(null), F = (e) => M(r, e + t.offset), I = (e) => {
-		let n = T.current?.getBoundingClientRect();
-		return n ? A(r, n.width).toMs(e - n.left) - t.offset : r.from;
-	}, L = () => {
-		let e = A(r, T.current?.getBoundingClientRect().width ?? 0);
-		return e.toMs(ne) - e.toMs(0);
+	let [O, k] = y(null), [A, P] = y(null), I = (e) => N(r, e + t.offset), L = (e) => {
+		let n = E.current?.getBoundingClientRect();
+		return n ? j(r, n.width).toMs(e - n.left) - t.offset : r.from;
+	}, ee = () => {
+		let e = j(r, E.current?.getBoundingClientRect().width ?? 0);
+		return e.toMs(re) - e.toMs(0);
 	}, R = s === "graph" && t.numeric, z = t.kind === "sampled" ? t.track.keys : [], B = z.map((e) => e.value), V = R ? Math.min(...B) : 0, H = (R ? Math.max(...B) : 1) - V || 1, U = (e) => Z + (e - V) / H * (100 - 2 * Z), W = (e) => {
-		let t = T.current?.getBoundingClientRect();
+		let t = E.current?.getBoundingClientRect();
 		if (!t || t.height === 0) return V;
 		let n = ((1 - (e - t.top) / t.height) * 100 - Z) / (100 - 2 * Z);
 		return V + Math.min(1, Math.max(0, n)) * H;
-	}, ee = () => {
+	}, te = () => {
 		let e = [];
 		for (let n = 1; n < z.length; n++) {
-			let i = z[n - 1], a = z[n], o = D && D.keyIndex === n ? ae(D.points, ie) : C(a.easing, ie);
+			let i = z[n - 1], a = z[n], o = O && O.keyIndex === n ? oe(O.points, ae) : w(a.easing, ae);
 			for (let n = 0; n < o.length; n++) {
 				let s = i.t + (a.t - i.t) * n / (o.length - 1), c = i.value + (a.value - i.value) * o[n];
-				e.push(`${j(r, s + t.offset) * 100},${100 - U(c)}`);
+				e.push(`${M(r, s + t.offset) * 100},${100 - U(c)}`);
 			}
 		}
 		return e.join(" ");
-	}, G = b != null && t.kind === "sampled" ? x(z[b]?.easing) : null, K = D && D.keyIndex === b ? D.points : G, q = (e, t, n) => {
+	}, G = x != null && t.kind === "sampled" ? S(z[x]?.easing) : null, K = O && O.keyIndex === x ? O.points : G, q = (e, t, n) => {
 		let r = z[e - 1], i = z[e], a = r.t + t * (i.t - r.t), o = r.value + n * (i.value - r.value);
 		return {
-			left: F(a),
+			left: I(a),
 			bottom: `${U(o)}%`
 		};
-	}, J = (e, t) => (n) => {
+	}, J = (e, t) => {
+		D.current?.cancel(), D.current = l(e.currentTarget, e, t, { capture: !1 });
+	}, Y = (e, t) => (n) => {
 		if (n.button !== 0 || !G) return;
 		n.stopPropagation();
 		let r = z[e - 1], i = z[e], a = [...G], o = (e) => {
-			let n = I(e.clientX), o = i.t === r.t ? 0 : Math.min(1, Math.max(0, (n - r.t) / (i.t - r.t))), s = W(e.clientY), c = i.value === r.value ? 0 : (s - r.value) / (i.value - r.value), l = [...a];
+			let n = L(e.clientX), o = i.t === r.t ? 0 : Math.min(1, Math.max(0, (n - r.t) / (i.t - r.t))), s = W(e.clientY), c = i.value === r.value ? 0 : (s - r.value) / (i.value - r.value), l = [...a];
 			return l[t * 2] = o, l[t * 2 + 1] = c, l;
-		}, s = (t) => {
-			a = o(t), O({
-				keyIndex: e,
-				points: a
-			});
-		}, c = (t) => {
-			a = o(t), w?.(e, { bezier: a }), l();
-		}, l = () => {
-			O(null), document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", c), document.removeEventListener("pointercancel", l), E.current = null;
+		}, s = () => {
+			k(null), D.current = null;
 		};
-		document.addEventListener("pointermove", s), document.addEventListener("pointerup", c), document.addEventListener("pointercancel", l), E.current = l;
-	}, Y = (e) => (n) => {
+		J(n, {
+			onMove: (t) => {
+				a = o(t), k({
+					keyIndex: e,
+					points: a
+				});
+			},
+			onEnd: (t) => {
+				a = o(t), T?.(e, { bezier: a }), s();
+			},
+			onCancel: s
+		});
+	}, X = (e) => (n) => {
 		if (n.button !== 0) return;
-		n.stopPropagation(), l(e);
+		n.stopPropagation(), u(e);
 		let r = (e) => {
-			let n = Math.max(0, I(e.clientX));
-			return e.altKey ? n : te(n + t.offset, g, L()) - t.offset;
+			let n = Math.max(0, L(e.clientX));
+			return e.altKey ? n : ne(n + t.offset, _, ee()) - t.offset;
 		}, i = (e) => R ? W(e.clientY) : void 0;
-		N({
+		P({
 			keyIndex: e,
 			t: Q[e],
 			value: B[e]
 		});
-		let a = (t) => {
-			let n = i(t);
-			N({
-				keyIndex: e,
-				t: r(t),
-				value: n ?? B[e]
-			}), n === void 0 ? u(e, r(t)) : u(e, r(t), n);
-		}, o = (t) => {
-			let n = i(t);
-			n === void 0 ? d(e, r(t)) : d(e, r(t), n), s();
-		}, s = () => {
-			N(null), document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", o), document.removeEventListener("pointercancel", s), E.current = null;
+		let a = () => {
+			P(null), D.current = null;
 		};
-		document.addEventListener("pointermove", a), document.addEventListener("pointerup", o), document.addEventListener("pointercancel", s), E.current = s;
-	}, X = (e, t) => (n) => {
-		let r = re * (n.shiftKey ? 10 : 1);
-		n.key === "ArrowRight" && (n.preventDefault(), d(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), d(e, Math.max(0, t - r)));
-	}, Q = oe(t);
+		J(n, {
+			onMove: (t) => {
+				let n = i(t);
+				P({
+					keyIndex: e,
+					t: r(t),
+					value: n ?? B[e]
+				}), n === void 0 ? d(e, r(t)) : d(e, r(t), n);
+			},
+			onEnd: (t) => {
+				let n = i(t);
+				n === void 0 ? f(e, r(t)) : f(e, r(t), n), a();
+			},
+			onCancel: a
+		});
+	}, ce = (e, t) => (n) => {
+		let r = ie * (n.shiftKey ? 10 : 1);
+		n.key === "ArrowRight" && (n.preventDefault(), f(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), f(e, Math.max(0, t - r)));
+	}, Q = se(t);
 	return /* @__PURE__ */ o("div", {
-		className: y.lane,
+		className: b.lane,
 		"data-depth": t.depth,
 		"data-mode": s,
 		children: [/* @__PURE__ */ o("div", {
-			className: y.laneLabel,
+			className: b.laneLabel,
 			children: [t.kind === "timeline" ? /* @__PURE__ */ a("span", {
 				role: "button",
 				tabIndex: 0,
-				"aria-expanded": h,
+				"aria-expanded": g,
 				"data-testid": "timeline-disclosure",
-				className: y.disclosure,
-				onClick: m,
+				className: b.disclosure,
+				onClick: h,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
 				},
 				children: /* @__PURE__ */ a(n, {
 					size: 14,
-					className: [y.disclosureIcon, !h && y.disclosureCollapsed].filter(Boolean).join(" ")
+					className: [b.disclosureIcon, !g && b.disclosureCollapsed].filter(Boolean).join(" ")
 				})
 			}) : null, t.label]
 		}), /* @__PURE__ */ o("div", {
-			className: y.laneTrack,
-			ref: T,
+			className: b.laneTrack,
+			ref: E,
 			"data-testid": "timeline-lane-track",
 			onDoubleClick: (e) => {
-				t.kind === "sampled" && f(Math.max(0, I(e.clientX)));
+				t.kind === "sampled" && p(Math.max(0, L(e.clientX)));
 			},
 			children: [
 				t.kind === "timeline" ? /* @__PURE__ */ a("div", {
-					className: y.nestedBar,
+					className: b.nestedBar,
 					"data-testid": "timeline-nested",
 					style: {
-						left: F(0),
-						width: P(r, t.track.timeline.duration ?? 0)
+						left: I(0),
+						width: F(r, t.track.timeline.duration ?? 0)
 					}
 				}) : null,
 				t.kind === "sampled" ? z.slice(1).map((e, n) => {
@@ -518,26 +528,26 @@ function Q(e) {
 						role: "button",
 						tabIndex: 0,
 						"aria-label": `${t.label} segment into ${Math.round(e.t)} ms`,
-						"aria-current": b === i ? "true" : void 0,
+						"aria-current": x === i ? "true" : void 0,
 						"data-testid": "timeline-segment",
-						className: y.segment,
+						className: b.segment,
 						style: {
-							left: F(z[i - 1].t),
-							width: P(r, e.t - z[i - 1].t)
+							left: I(z[i - 1].t),
+							width: F(r, e.t - z[i - 1].t)
 						},
-						onClick: () => S?.(i),
+						onClick: () => C?.(i),
 						onKeyDown: (e) => {
-							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), S?.(i));
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), C?.(i));
 						}
 					}, `seg-${i}`);
 				}) : null,
 				R && z.length > 1 ? /* @__PURE__ */ a("svg", {
-					className: y.curve,
+					className: b.curve,
 					"data-testid": "timeline-curve",
 					viewBox: "0 0 100 100",
 					preserveAspectRatio: "none",
 					children: /* @__PURE__ */ a("polyline", {
-						points: ee(),
+						points: te(),
 						vectorEffect: "non-scaling-stroke"
 					})
 				}) : null,
@@ -547,40 +557,40 @@ function Q(e) {
 					"aria-label": `${t.label} key at ${Math.round(e)} ms`,
 					"aria-current": c === n ? "true" : void 0,
 					"data-testid": t.kind === "event" ? "timeline-event" : "timeline-key",
-					"data-dragging": k?.keyIndex === n ? "true" : void 0,
-					className: t.kind === "event" ? y.eventMark : y.key,
+					"data-dragging": A?.keyIndex === n ? "true" : void 0,
+					className: t.kind === "event" ? b.eventMark : b.key,
 					style: R ? {
-						left: F(e),
+						left: I(e),
 						bottom: `${U(B[n])}%`
-					} : { left: F(e) },
-					onPointerDown: Y(n),
-					onKeyDown: X(n, e)
+					} : { left: I(e) },
+					onPointerDown: X(n),
+					onKeyDown: ce(n, e)
 				}, n)),
-				k ? /* @__PURE__ */ a("div", {
+				A ? /* @__PURE__ */ a("div", {
 					"aria-hidden": "true",
 					"data-testid": "timeline-key-ghost",
-					className: t.kind === "event" ? y.eventGhost : y.keyGhost,
-					style: R && k.value !== void 0 ? {
-						left: F(k.t),
-						bottom: `${U(k.value)}%`
-					} : { left: F(k.t) }
+					className: t.kind === "event" ? b.eventGhost : b.keyGhost,
+					style: R && A.value !== void 0 ? {
+						left: I(A.t),
+						bottom: `${U(A.value)}%`
+					} : { left: I(A.t) }
 				}) : null,
-				R && K && b != null ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
+				R && K && x != null ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${t.label} bezier handle 1`,
 					"data-testid": "timeline-bezier-handle",
-					className: y.bezierHandle,
-					style: q(b, K[0], K[1]),
-					onPointerDown: J(b, 0)
+					className: b.bezierHandle,
+					style: q(x, K[0], K[1]),
+					onPointerDown: Y(x, 0)
 				}), /* @__PURE__ */ a("div", {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${t.label} bezier handle 2`,
 					"data-testid": "timeline-bezier-handle",
-					className: y.bezierHandle,
-					style: q(b, K[2], K[3]),
-					onPointerDown: J(b, 1)
+					className: b.bezierHandle,
+					style: q(x, K[2], K[3]),
+					onPointerDown: Y(x, 1)
 				})] }) : null
 			]
 		})]
@@ -588,60 +598,64 @@ function Q(e) {
 }
 //#endregion
 //#region src/components/Timeline/Ruler.tsx
-var se = 64, ce = .0015;
-function le(e) {
+var Q = 64, le = .0015;
+function ue(e) {
 	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
 }
-function ue(e) {
-	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: s } = e, c = _(null), l = _(null);
-	p(() => () => {
-		l.current?.();
+function de(e) {
+	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: s } = e, c = v(null), u = v(null);
+	m(() => () => {
+		u.current?.cancel();
 	}, []);
-	let [u, d] = v(0);
-	m(() => {
+	let [d, f] = y(0);
+	h(() => {
 		let e = c.current;
 		if (!e) return;
-		let t = () => d(e.getBoundingClientRect().width);
+		let t = () => f(e.getBoundingClientRect().width);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, []);
-	let f = () => c.current?.getBoundingClientRect().width ?? 0, h = (e) => {
+	let p = () => c.current?.getBoundingClientRect().width ?? 0, g = (e) => {
 		let n = c.current?.getBoundingClientRect();
 		if (!n) return t.from;
-		let r = A(t, n.width).toMs(e - n.left);
+		let r = j(t, n.width).toMs(e - n.left);
 		return Math.min(t.to, Math.max(t.from, r));
-	}, g = (e) => {
+	}, _ = (e) => {
 		if (e.button !== 0) return;
-		i(h(e.clientX));
-		let t = (e) => {
-			i(h(e.clientX));
-		}, n = () => {
-			document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", n), document.removeEventListener("pointercancel", n), l.current = null;
+		i(g(e.clientX)), u.current?.cancel();
+		let t = () => {
+			u.current = null;
 		};
-		document.addEventListener("pointermove", t), document.addEventListener("pointerup", n), document.addEventListener("pointercancel", n), l.current = n;
-	}, b = (e) => {
-		if (e.ctrlKey) s(I(t, h(e.clientX), Math.exp(e.deltaY * ce), n));
+		u.current = l(e.currentTarget, e, {
+			onMove: (e) => {
+				i(g(e.clientX));
+			},
+			onEnd: t,
+			onCancel: t
+		}, { capture: !1 });
+	}, x = (e) => {
+		if (e.ctrlKey) s(L(t, g(e.clientX), Math.exp(e.deltaY * le), n));
 		else {
-			let r = f(), i = r === 0 ? 0 : (t.to - t.from) / r;
-			s(L(t, e.deltaY * i, n));
+			let r = p(), i = r === 0 ? 0 : (t.to - t.from) / r;
+			s(ee(t, e.deltaY * i, n));
 		}
-	}, x = z(t, u, se), S = (e) => M(t, e);
+	}, S = z(t, d, Q), C = (e) => N(t, e);
 	return /* @__PURE__ */ o("div", {
-		className: y.ruler,
+		className: b.ruler,
 		ref: c,
 		"data-testid": "timeline-ruler",
-		onPointerDown: g,
-		onWheel: b,
-		children: [x.map((e) => /* @__PURE__ */ a("span", {
-			className: y.tick,
+		onPointerDown: _,
+		onWheel: x,
+		children: [S.map((e) => /* @__PURE__ */ a("span", {
+			className: b.tick,
 			"data-testid": "timeline-tick",
-			style: { left: S(e) },
-			children: le(e)
+			style: { left: C(e) },
+			children: ue(e)
 		}, e)), /* @__PURE__ */ a("div", {
-			className: y.playhead,
+			className: b.playhead,
 			"data-testid": "timeline-playhead",
-			style: { left: S(r) }
+			style: { left: C(r) }
 		})]
 	});
 }
@@ -653,26 +667,26 @@ var $ = [
 	1,
 	2,
 	4
-], de = (e) => `${(e / 1e3).toFixed(2)}s`;
-function fe(n) {
+], fe = (e) => `${(e / 1e3).toFixed(2)}s`;
+function pe(n) {
 	let { paused: i, loop: s, rate: c, playhead: l, duration: u, onPlay: d, onPause: f, onLoopChange: p, onRateChange: m } = n, h = s !== !1 && s !== 0, g = $.includes(c) ? $ : [...$, c].sort((e, t) => e - t);
 	return /* @__PURE__ */ o("div", {
-		className: y.transport,
+		className: b.transport,
 		children: [
 			/* @__PURE__ */ a("button", {
 				type: "button",
-				className: y.transportButton,
+				className: b.transportButton,
 				"aria-label": i ? "Play" : "Pause",
 				onClick: i ? d : f,
 				children: a(i ? e : t, { size: 14 })
 			}),
 			/* @__PURE__ */ o("span", {
-				className: y.time,
+				className: b.time,
 				"data-testid": "timeline-time",
 				children: [
-					de(l),
+					fe(l),
 					" / ",
-					de(u)
+					fe(u)
 				]
 			}),
 			/* @__PURE__ */ a("button", {
@@ -680,12 +694,12 @@ function fe(n) {
 				role: "switch",
 				"aria-checked": h,
 				"aria-label": "Loop",
-				className: y.transportButton,
+				className: b.transportButton,
 				onClick: () => p(!h),
 				children: "⟲"
 			}),
 			/* @__PURE__ */ o("div", {
-				className: y.rate,
+				className: b.rate,
 				children: [
 					"Rate",
 					/* @__PURE__ */ a(r, {
@@ -695,10 +709,10 @@ function fe(n) {
 						onChange: m,
 						formatLabel: (e) => `${e}x`,
 						labels: "none",
-						className: y.rateSlider
+						className: b.rateSlider
 					}),
 					/* @__PURE__ */ o("span", {
-						className: y.rateReadout,
+						className: b.rateReadout,
 						children: [c, "x"]
 					})
 				]
@@ -708,18 +722,18 @@ function fe(n) {
 }
 //#endregion
 //#region src/components/Timeline/Timeline.tsx
-function pe(e) {
-	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: s, onScrub: c, renderKeyEditor: l, label: u, className: d } = e, [f, p] = v(() => /* @__PURE__ */ new Set()), [m, g] = v({
+function me(e) {
+	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: s, onScrub: c, renderKeyEditor: l, label: u, className: d } = e, [f, p] = y(() => /* @__PURE__ */ new Set()), [m, h] = y({
 		from: 0,
 		to: n
-	}), [_, b] = v(null), [x, S] = v(null), C = e.window ?? m, w = e.onWindowChange ?? g, T = e.selection === void 0 ? _ : e.selection, E = e.onSelect ?? b, D = {
+	}), [_, v] = y(null), [x, S] = y(null), C = e.window ?? m, w = e.onWindowChange ?? h, T = e.selection === void 0 ? _ : e.selection, E = e.onSelect ?? v, D = {
 		from: 0,
 		to: n
-	}, k = h(() => V(t, f), [t, f]), A = h(() => {
+	}, O = g(() => V(t, f), [t, f]), A = g(() => {
 		let e = new Set([0, n]);
-		for (let t of k) if (t.kind === "sampled") for (let n of t.track.keys) e.add(n.t + t.offset);
+		for (let t of O) if (t.kind === "sampled") for (let n of t.track.keys) e.add(n.t + t.offset);
 		return [...e];
-	}, [k, n]), j = (e) => {
+	}, [O, n]), j = (e) => {
 		p((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
@@ -732,18 +746,18 @@ function pe(e) {
 		}
 	}, N = T ? H(t, T.trackPath) : void 0, P = N?.kind === "sampled" ? N.keys[T.keyIndex] : void 0, F = x ? H(t, x.trackPath) : void 0, I = F?.kind === "sampled" ? F.keys[x.keyIndex] : void 0;
 	return /* @__PURE__ */ o("div", {
-		className: [y.root, d].filter(Boolean).join(" "),
+		className: [b.root, d].filter(Boolean).join(" "),
 		"data-testid": "timeline-root",
 		tabIndex: -1,
 		onKeyDown: M,
 		children: [
 			u ? /* @__PURE__ */ a("div", {
-				className: y.label,
+				className: b.label,
 				children: u
 			}) : null,
 			e.transport === !1 ? null : /* @__PURE__ */ o("div", {
-				className: y.transportRow,
-				children: [/* @__PURE__ */ a(fe, {
+				className: b.transportRow,
+				children: [/* @__PURE__ */ a(pe, {
 					...e.transport ?? {
 						paused: !0,
 						loop: !1,
@@ -760,16 +774,16 @@ function pe(e) {
 					role: "switch",
 					"aria-checked": (e.mode ?? "dope") === "graph",
 					"aria-label": "Graph mode",
-					className: y.transportButton,
+					className: b.transportButton,
 					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
 					children: "Graph"
 				})]
 			}),
 			/* @__PURE__ */ o("div", {
-				className: y.body,
-				children: [/* @__PURE__ */ a("div", { className: y.gutter }), /* @__PURE__ */ a("div", {
-					className: y.rulerWrap,
-					children: /* @__PURE__ */ a(ue, {
+				className: b.body,
+				children: [/* @__PURE__ */ a("div", { className: b.gutter }), /* @__PURE__ */ a("div", {
+					className: b.rulerWrap,
+					children: /* @__PURE__ */ a(de, {
 						window: C,
 						bounds: D,
 						playhead: r,
@@ -779,10 +793,10 @@ function pe(e) {
 				})]
 			}),
 			/* @__PURE__ */ a("div", {
-				className: y.lanes,
-				children: k.map((n) => {
+				className: b.lanes,
+				children: O.map((n) => {
 					let r = n.path;
-					return /* @__PURE__ */ a(Q, {
+					return /* @__PURE__ */ a(ce, {
 						row: n,
 						window: C,
 						mode: e.mode ?? "dope",
@@ -828,7 +842,7 @@ function pe(e) {
 				})
 			}),
 			l && T && P && N?.kind === "sampled" ? /* @__PURE__ */ a("div", {
-				className: y.inspector,
+				className: b.inspector,
 				children: l({
 					key: P,
 					track: N,
@@ -838,8 +852,8 @@ function pe(e) {
 				})
 			}) : null,
 			x && I ? /* @__PURE__ */ a("div", {
-				className: y.inspector,
-				children: /* @__PURE__ */ a(O, {
+				className: b.inspector,
+				children: /* @__PURE__ */ a(k, {
 					value: I.easing,
 					onChange: (e) => s(Y(t, x, e))
 				})
@@ -849,20 +863,20 @@ function pe(e) {
 }
 //#endregion
 //#region src/components/Timeline/AnimatedTimeline.tsx
-function me(e) {
-	let { handle: t, ...n } = e, [, r] = g((e) => e + 1, 0);
-	p(() => t.subscribe(r), [t]);
-	let i = _(null), o = d(() => {
+function he(e) {
+	let { handle: t, ...n } = e, [, r] = _((e) => e + 1, 0);
+	m(() => t.subscribe(r), [t]);
+	let i = v(null), o = f(() => {
 		r(), t.isPaused() || i.current?.request();
 	});
-	i.current = o, p(() => (t.isPaused() || o.request(), () => o.cancel()), [t, o]);
-	let s = f((e) => {
+	i.current = o, m(() => (t.isPaused() || o.request(), () => o.cancel()), [t, o]);
+	let s = p((e) => {
 		t.edit(() => {
 			let n = t.tracks();
 			n.splice(0, n.length, ...e);
 		});
 	}, [t]), c = t.time(), l = t.duration();
-	return /* @__PURE__ */ a(pe, {
+	return /* @__PURE__ */ a(me, {
 		...n,
 		tracks: t.tracks(),
 		duration: l,
@@ -889,6 +903,6 @@ function me(e) {
 	});
 }
 //#endregion
-export { O as a, S as c, U as i, C as l, pe as n, w as o, fe as r, x as s, me as t };
+export { k as a, C as c, U as i, w as l, me as n, T as o, pe as r, S as s, he as t };
 
-//# sourceMappingURL=Timeline-BE7UWajy.js.map
+//# sourceMappingURL=Timeline-CWuh0nV0.js.map