@weasel-js/ui 1.6.1 → 1.7.0

package/dist/chunks/{Timeline--58F7MED.js → Timeline-B39cwfMB.js}

@@ -1,68 +1,69 @@
-import { rt as e, st as t } from "./icons-Dk8SRS8g.js";
-import { n } from "./Disclosure-0G0uh2fa.js";
+import { rt as e, st as t } from "./icons-BhcR1l64.js";
+import { n } from "./Disclosure-Ch2KxYuB.js";
 import { r } from "./Plot2D-CTXHkL5p.js";
-import { i, n as a, t as o } from "./createKeyframeLayer-Czj6Y235.js";
+import { i, n as a, t as o } from "./createKeyframeLayer-DVl321_l.js";
 import { t as s } from "./snap-DRjbOiG9.js";
-import { t as c } from "./DetentSlider-CL8TlX3S.js";
+import { t as c } from "./DetentSlider-5uQPFucv.js";
 import { EASINGS as l, openPointerSession as u, resolveEasing as d, sampleTrack as f, useVisibleRaf as p } from "@weasel-js/core";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useCallback as _, useEffect as v, useLayoutEffect as y, useMemo as b, useReducer as x, useRef as S, useState as C } from "react";
-var w = {
-	ruler: "_ruler_g66rp_1",
-	tick: "_tick_g66rp_11",
-	playhead: "_playhead_g66rp_29",
-	lane: "_lane_g66rp_38",
-	laneLabel: "_laneLabel_g66rp_45",
-	disclosure: "_disclosure_g66rp_65",
-	laneTrack: "_laneTrack_g66rp_67",
-	key: "_key_g66rp_74",
-	eventMark: "_eventMark_g66rp_74",
-	keyGhost: "_keyGhost_g66rp_94",
-	eventGhost: "_eventGhost_g66rp_94",
-	graphHost: "_graphHost_g66rp_111",
-	graph: "_graph_g66rp_111",
-	nestedBar: "_nestedBar_g66rp_130",
-	transport: "_transport_g66rp_139",
-	transportButton: "_transportButton_g66rp_148",
-	transportRow: "_transportRow_g66rp_174",
-	time: "_time_g66rp_192",
-	rate: "_rate_g66rp_198",
-	rateSlider: "_rateSlider_g66rp_199",
-	rateReadout: "_rateReadout_g66rp_203",
-	root: "_root_g66rp_209",
-	label: "_label_g66rp_224",
-	body: "_body_g66rp_226",
-	gutter: "_gutter_g66rp_46",
-	rulerWrap: "_rulerWrap_g66rp_228",
-	lanes: "_lanes_g66rp_230",
-	inspector: "_inspector_g66rp_237",
-	segment: "_segment_g66rp_246",
-	easingPicker: "_easingPicker_g66rp_256",
-	easingLabel: "_easingLabel_g66rp_257",
-	easingPreview: "_easingPreview_g66rp_259"
+import { multiplier as w, qty as T } from "@weasel-js/quantity";
+var E = {
+	ruler: "_ruler_65nbe_1",
+	tick: "_tick_65nbe_11",
+	playhead: "_playhead_65nbe_29",
+	lane: "_lane_65nbe_38",
+	laneLabel: "_laneLabel_65nbe_45",
+	disclosure: "_disclosure_65nbe_65",
+	laneTrack: "_laneTrack_65nbe_67",
+	key: "_key_65nbe_74",
+	eventMark: "_eventMark_65nbe_74",
+	keyGhost: "_keyGhost_65nbe_94",
+	eventGhost: "_eventGhost_65nbe_94",
+	graphHost: "_graphHost_65nbe_111",
+	graph: "_graph_65nbe_111",
+	nestedBar: "_nestedBar_65nbe_130",
+	transport: "_transport_65nbe_139",
+	transportButton: "_transportButton_65nbe_148",
+	transportRow: "_transportRow_65nbe_175",
+	time: "_time_65nbe_193",
+	rate: "_rate_65nbe_199",
+	rateSlider: "_rateSlider_65nbe_200",
+	rateReadout: "_rateReadout_65nbe_204",
+	root: "_root_65nbe_210",
+	label: "_label_65nbe_225",
+	body: "_body_65nbe_227",
+	gutter: "_gutter_65nbe_46",
+	rulerWrap: "_rulerWrap_65nbe_229",
+	lanes: "_lanes_65nbe_231",
+	inspector: "_inspector_65nbe_238",
+	segment: "_segment_65nbe_247",
+	easingPicker: "_easingPicker_65nbe_257",
+	easingLabel: "_easingLabel_65nbe_258",
+	easingPreview: "_easingPreview_65nbe_260"
 };
 //#endregion
 //#region src/components/Timeline/easingSpec.ts
-function T(e) {
+function D(e) {
 	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
 }
-function E(e) {
-	return e === void 0 ? null : T(e);
+function O(e) {
+	return e === void 0 ? null : D(e);
 }
-function D(e) {
+function k(e) {
 	if (e === void 0) return "linear";
 	if (typeof e == "string") return e;
-	let t = T(e);
+	let t = D(e);
 	if (t) return `cubic-bezier(${t.join(", ")})`;
 	for (let [t, n] of Object.entries(l)) if (n === e) return t;
 	return "custom";
 }
-function O(e, t) {
+function A(e, t) {
 	let n = d(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 k = Object.keys(l), A = 24, j = {
+var j = Object.keys(l), M = 24, N = {
 	linear: [
 		0,
 		0,
@@ -123,16 +124,16 @@ var k = Object.keys(l), A = 24, j = {
 		.63,
 		1
 	]
-}, M = [
+}, P = [
 	.25,
 	.1,
 	.25,
 	1
 ];
-function N(e) {
-	let { value: t, onChange: n } = e, r = E(t), i = D(t), a = r === null && k.includes(i), o = r === null ? a ? i : "linear" : "custom", s = O(t, A).map((e, t) => `${t / 23 * 100},${100 - e * 100}`).join(" ");
+function F(e) {
+	let { value: t, onChange: n } = e, r = O(t), i = k(t), a = r === null && j.includes(i), o = r === null ? a ? i : "linear" : "custom", s = A(t, M).map((e, t) => `${t / 23 * 100},${100 - e * 100}`).join(" ");
 	return /* @__PURE__ */ g("div", {
-		className: w.easingPicker,
+		className: E.easingPicker,
 		children: [
 			/* @__PURE__ */ g("label", { children: ["Easing", /* @__PURE__ */ g("select", {
 				value: o,
@@ -142,7 +143,7 @@ function N(e) {
 						value: "linear",
 						children: "linear"
 					}),
-					k.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ h("option", {
+					j.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ h("option", {
 						value: e,
 						children: e
 					}, e)),
@@ -154,15 +155,15 @@ function N(e) {
 			})] }),
 			r === null ? /* @__PURE__ */ h("button", {
 				type: "button",
-				className: w.transportButton,
-				onClick: () => n({ bezier: j[o] ?? M }),
+				className: E.transportButton,
+				onClick: () => n({ bezier: N[o] ?? P }),
 				children: "Convert to bezier"
 			}) : /* @__PURE__ */ h("span", {
-				className: w.easingLabel,
+				className: E.easingLabel,
 				children: i
 			}),
 			/* @__PURE__ */ h("svg", {
-				className: w.easingPreview,
+				className: E.easingPreview,
 				"data-testid": "easing-preview",
 				viewBox: "0 0 100 100",
 				preserveAspectRatio: "none",
@@ -176,8 +177,8 @@ function N(e) {
 }
 //#endregion
 //#region src/components/Timeline/timeScale.ts
-var P = 1;
-function F(e, t) {
+var I = 1;
+function L(e, t) {
 	let n = e.to - e.from, r = n === 0 ? 0 : t / n, i = t === 0 ? 0 : n / t;
 	return {
 		window: e,
@@ -186,36 +187,36 @@ function F(e, t) {
 		toMs: (t) => e.from + t * i
 	};
 }
-function I(e, t) {
+function R(e, t) {
 	let n = e.to - e.from;
 	return n === 0 ? 0 : (t - e.from) / n;
 }
-function L(e, t) {
-	return `${I(e, t) * 100}%`;
+function z(e, t) {
+	return `${R(e, t) * 100}%`;
 }
-function R(e, t) {
+function ee(e, t) {
 	let n = e.to - e.from;
 	return n === 0 ? 0 : t / n;
 }
-function z(e, t) {
-	return `${R(e, t) * 100}%`;
-}
 function B(e, t) {
+	return `${ee(e, t) * 100}%`;
+}
+function V(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 V(e, t, n, r) {
-	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(P, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
-	return B({
+function te(e, t, n, r) {
+	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(I, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
+	return V({
 		from: t - s * o,
 		to: t + (1 - s) * o
 	}, r);
 }
-function ee(e, t, n) {
-	return B({
+function ne(e, t, n) {
+	return V({
 		from: e.from + t,
 		to: e.to + t
 	}, n);
@@ -229,12 +230,12 @@ function H(e, t, n) {
 }
 //#endregion
 //#region src/components/Timeline/LaneGraph.tsx
-var te = 8, ne = 10;
-function re(e) {
-	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * te / 84;
+var re = 8, ie = 10;
+function ae(e) {
+	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * re / 84;
 	return [n - i, n + r + i];
 }
-function ie(e) {
+function oe(e) {
 	let { keys: t, label: n, window: r, offset: s, snapTimes: c, selection: l, selectedSegment: u, onSelect: d, onSelectSegment: f, onKeysInput: p, onKeysCommit: m } = e, g = S(null), [_, v] = C({
 		width: 0,
 		height: 0
@@ -259,12 +260,12 @@ function ie(e) {
 		formatX: (e) => `${Math.round(e)} ms`,
 		snapX: c.map((e) => e - s),
 		xClamp: [0, Infinity],
-		step: { x: ne }
+		step: { x: ie }
 	}), [
 		n,
 		c,
 		s
-	]), T = b(() => ({
+	]), w = b(() => ({
 		keys: t,
 		selectedKey: l,
 		selectedSegment: u,
@@ -273,7 +274,7 @@ function ie(e) {
 		t,
 		l,
 		u
-	]), [E, D] = C(null), O = E ?? T, k = S(O);
+	]), [T, D] = C(null), O = T ?? w, k = S(O);
 	k.current = O;
 	let A = b(() => [{
 		layer: x,
@@ -291,12 +292,12 @@ function ie(e) {
 		D(null);
 		let r = t;
 		r.keys !== n.keys && m(r.keys);
-	}, [N, P] = re(O.keys), F = _.width > 0 ? H(r, _.width, 64) : [];
+	}, [N, P] = ae(O.keys), F = _.width > 0 ? H(r, _.width, 64) : [];
 	return /* @__PURE__ */ h("div", {
 		ref: g,
-		className: w.graphHost,
+		className: E.graphHost,
 		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ h(i, {
-			className: w.graph,
+			className: E.graph,
 			"aria-label": `${n} graph`,
 			layers: A,
 			onLayerChange: j,
@@ -321,22 +322,22 @@ function ie(e) {
 }
 //#endregion
 //#region src/components/Timeline/Lane.tsx
-var ae = 10;
-function oe(e) {
+var se = 10;
+function ce(e) {
 	return e.kind === "sampled" ? e.track.keys.map((e) => e.t) : e.kind === "event" ? e.track.events.map((e) => e.t) : [];
 }
-function se(e) {
-	let { row: t, window: r, mode: i, selection: a, onSelect: o, onKeyInput: c, onKeyCommit: l, onInsert: d, onToggleExpand: f, expanded: p, snapTimes: _, selectedSegment: y = null, onSelectSegment: b, onKeysInput: x, onKeysCommit: T } = e, E = S(null), D = S(null);
+function le(e) {
+	let { row: t, window: r, mode: i, selection: a, onSelect: o, onKeyInput: c, onKeyCommit: l, onInsert: d, onToggleExpand: f, expanded: p, snapTimes: _, selectedSegment: y = null, onSelectSegment: b, onKeysInput: x, onKeysCommit: w } = e, T = S(null), D = S(null);
 	v(() => () => {
 		D.current?.cancel();
 	}, []);
-	let [O, k] = C(null), A = (e) => L(r, e + t.offset), j = (e) => {
-		let n = E.current?.getBoundingClientRect();
-		return n ? F(r, n.width).toMs(e - n.left) - t.offset : r.from;
+	let [O, k] = C(null), A = (e) => z(r, e + t.offset), j = (e) => {
+		let n = T.current?.getBoundingClientRect();
+		return n ? L(r, n.width).toMs(e - n.left) - t.offset : r.from;
 	}, M = () => {
-		let e = E.current?.getBoundingClientRect().width ?? 0, t = F(r, e);
+		let e = T.current?.getBoundingClientRect().width ?? 0, t = L(r, e);
 		return t.toMs(6) - t.toMs(0);
-	}, N = i === "graph" && t.numeric, P = t.kind === "sampled" ? t.track.keys : [], I = (e) => (n) => {
+	}, N = i === "graph" && t.numeric, P = t.kind === "sampled" ? t.track.keys : [], F = (e) => (n) => {
 		if (n.button !== 0) return;
 		n.stopPropagation(), o(e);
 		let r = (e) => {
@@ -345,7 +346,7 @@ function se(e) {
 		};
 		k({
 			keyIndex: e,
-			t: B[e]
+			t: R[e]
 		});
 		let i = () => {
 			k(null), D.current = null;
@@ -362,23 +363,23 @@ function se(e) {
 			},
 			onCancel: i
 		}, { capture: !1 });
-	}, R = (e, t) => (n) => {
-		let r = ae * (n.shiftKey ? 10 : 1);
+	}, I = (e, t) => (n) => {
+		let r = se * (n.shiftKey ? 10 : 1);
 		n.key === "ArrowRight" && (n.preventDefault(), l(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), l(e, Math.max(0, t - r)));
-	}, B = oe(t);
+	}, R = ce(t);
 	return /* @__PURE__ */ g("div", {
-		className: w.lane,
+		className: E.lane,
 		"data-depth": t.depth,
 		"data-mode": i,
 		"data-graph": N ? "true" : void 0,
 		children: [/* @__PURE__ */ g("div", {
-			className: w.laneLabel,
+			className: E.laneLabel,
 			children: [t.kind === "timeline" ? /* @__PURE__ */ h("span", {
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": p,
 				"data-testid": "timeline-disclosure",
-				className: w.disclosure,
+				className: E.disclosure,
 				onClick: f,
 				onKeyDown: (e) => {
 					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
@@ -386,13 +387,13 @@ function se(e) {
 				children: /* @__PURE__ */ h(n, { open: p })
 			}) : null, t.label]
 		}), /* @__PURE__ */ h("div", {
-			className: w.laneTrack,
-			ref: E,
+			className: E.laneTrack,
+			ref: T,
 			"data-testid": "timeline-lane-track",
 			onDoubleClick: (e) => {
 				t.kind === "sampled" && d(Math.max(0, j(e.clientX)));
 			},
-			children: N ? /* @__PURE__ */ h(ie, {
+			children: N ? /* @__PURE__ */ h(oe, {
 				keys: P,
 				label: t.label,
 				window: r,
@@ -403,14 +404,14 @@ function se(e) {
 				onSelect: o,
 				onSelectSegment: b,
 				onKeysInput: x,
-				onKeysCommit: (e) => T?.(e)
+				onKeysCommit: (e) => w?.(e)
 			}) : /* @__PURE__ */ g(m, { children: [
 				t.kind === "timeline" ? /* @__PURE__ */ h("div", {
-					className: w.nestedBar,
+					className: E.nestedBar,
 					"data-testid": "timeline-nested",
 					style: {
 						left: A(0),
-						width: z(r, t.track.timeline.duration ?? 0)
+						width: B(r, t.track.timeline.duration ?? 0)
 					}
 				}) : null,
 				t.kind === "sampled" ? P.slice(1).map((e, n) => {
@@ -421,10 +422,10 @@ function se(e) {
 						"aria-label": `${t.label} segment into ${Math.round(e.t)} ms`,
 						"aria-current": y === i ? "true" : void 0,
 						"data-testid": "timeline-segment",
-						className: w.segment,
+						className: E.segment,
 						style: {
 							left: A(P[i - 1].t),
-							width: z(r, e.t - P[i - 1].t)
+							width: B(r, e.t - P[i - 1].t)
 						},
 						onClick: () => b?.(i),
 						onKeyDown: (e) => {
@@ -432,22 +433,22 @@ function se(e) {
 						}
 					}, `seg-${i}`);
 				}) : null,
-				B.map((e, n) => /* @__PURE__ */ h("div", {
+				R.map((e, n) => /* @__PURE__ */ h("div", {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${t.label} key at ${Math.round(e)} ms`,
 					"aria-current": a === n ? "true" : void 0,
 					"data-testid": t.kind === "event" ? "timeline-event" : "timeline-key",
 					"data-dragging": O?.keyIndex === n ? "true" : void 0,
-					className: t.kind === "event" ? w.eventMark : w.key,
+					className: t.kind === "event" ? E.eventMark : E.key,
 					style: { left: A(e) },
-					onPointerDown: I(n),
-					onKeyDown: R(n, e)
+					onPointerDown: F(n),
+					onKeyDown: I(n, e)
 				}, n)),
 				O ? /* @__PURE__ */ h("div", {
 					"aria-hidden": "true",
 					"data-testid": "timeline-key-ghost",
-					className: t.kind === "event" ? w.eventGhost : w.keyGhost,
+					className: t.kind === "event" ? E.eventGhost : E.keyGhost,
 					style: { left: A(O.t) }
 				}) : null
 			] })
@@ -456,11 +457,11 @@ function se(e) {
 }
 //#endregion
 //#region src/components/Timeline/Ruler.tsx
-var ce = .0015;
-function le(e) {
+var ue = .0015;
+function de(e) {
 	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
 }
-function ue(e) {
+function fe(e) {
 	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: a } = e, o = S(null), s = S(null);
 	v(() => () => {
 		s.current?.cancel();
@@ -477,7 +478,7 @@ function ue(e) {
 	let d = () => o.current?.getBoundingClientRect().width ?? 0, f = (e) => {
 		let n = o.current?.getBoundingClientRect();
 		if (!n) return t.from;
-		let r = F(t, n.width).toMs(e - n.left);
+		let r = L(t, n.width).toMs(e - n.left);
 		return Math.min(t.to, Math.max(t.from, r));
 	}, p = (e) => {
 		if (e.button !== 0) return;
@@ -493,25 +494,25 @@ function ue(e) {
 			onCancel: t
 		}, { capture: !1 });
 	}, m = (e) => {
-		if (e.ctrlKey) a(V(t, f(e.clientX), Math.exp(e.deltaY * ce), n));
+		if (e.ctrlKey) a(te(t, f(e.clientX), Math.exp(e.deltaY * ue), n));
 		else {
 			let r = d(), i = r === 0 ? 0 : (t.to - t.from) / r;
-			a(ee(t, e.deltaY * i, n));
+			a(ne(t, e.deltaY * i, n));
 		}
-	}, _ = H(t, c, 64), b = (e) => L(t, e);
+	}, _ = H(t, c, 64), b = (e) => z(t, e);
 	return /* @__PURE__ */ g("div", {
-		className: w.ruler,
+		className: E.ruler,
 		ref: o,
 		"data-testid": "timeline-ruler",
 		onPointerDown: p,
 		onWheel: m,
 		children: [_.map((e) => /* @__PURE__ */ h("span", {
-			className: w.tick,
+			className: E.tick,
 			"data-testid": "timeline-tick",
 			style: { left: b(e) },
-			children: le(e)
+			children: de(e)
 		}, e)), /* @__PURE__ */ h("div", {
-			className: w.playhead,
+			className: E.playhead,
 			"data-testid": "timeline-playhead",
 			style: { left: b(r) }
 		})]
@@ -519,21 +520,21 @@ function ue(e) {
 }
 //#endregion
 //#region src/components/Timeline/Transport.tsx
-var U = [
+var U = w({ symbol: "x" }), W = [
 	.25,
 	.5,
 	1,
 	2,
 	4
-], W = (e) => `${(e / 1e3).toFixed(2)}s`;
-function G(n) {
-	let { paused: r, loop: i, rate: a, playhead: o, duration: s, onPlay: l, onPause: u, onLoopChange: d, onRateChange: f } = n, p = i !== !1 && i !== 0, m = U.includes(a) ? U : [...U, a].sort((e, t) => e - t);
+], G = (e) => `${(e / 1e3).toFixed(2)}s`;
+function K(n) {
+	let { paused: r, loop: i, rate: a, playhead: o, duration: s, onPlay: l, onPause: u, onLoopChange: d, onRateChange: f } = n, p = i !== !1 && i !== 0, m = W.includes(a) ? W : [...W, a].sort((e, t) => e - t);
 	return /* @__PURE__ */ g("div", {
-		className: w.transport,
+		className: E.transport,
 		children: [
 			/* @__PURE__ */ h("button", {
 				type: "button",
-				className: w.transportButton,
+				className: E.transportButton,
 				"aria-label": r ? "Play" : "Pause",
 				onClick: r ? l : u,
 				children: h(r ? t : e, { size: 14 })
@@ -543,36 +544,39 @@ function G(n) {
 				role: "switch",
 				"aria-checked": p,
 				"aria-label": "Loop",
-				className: w.transportButton,
+				className: E.transportButton,
 				onClick: () => d(!p),
 				children: "⟲"
 			}),
 			/* @__PURE__ */ g("div", {
-				className: w.rate,
+				className: E.rate,
 				children: [
 					"Rate",
 					/* @__PURE__ */ h(c, {
 						ariaLabel: "Rate",
-						items: m,
+						items: m.map((e) => ({
+							value: e,
+							ariaLabel: T(e, U).spoken
+						})),
 						value: a,
 						onChange: f,
-						formatLabel: (e) => `${e}x`,
+						formatLabel: (e) => T(e, U).text,
 						labels: "none",
-						className: w.rateSlider
+						className: E.rateSlider
 					}),
-					/* @__PURE__ */ g("span", {
-						className: w.rateReadout,
-						children: [a, "x"]
+					/* @__PURE__ */ h("span", {
+						className: E.rateReadout,
+						children: T(a, U).text
 					})
 				]
 			}),
 			/* @__PURE__ */ g("span", {
-				className: w.time,
+				className: E.time,
 				"data-testid": "timeline-time",
 				children: [
-					W(o),
+					G(o),
 					" / ",
-					W(s)
+					G(s)
 				]
 			})
 		]
@@ -580,12 +584,12 @@ function G(n) {
 }
 //#endregion
 //#region src/components/Timeline/lanes.ts
-function de(e) {
+function pe(e) {
 	if (e.kind !== "sampled") return !1;
 	let t = e.keys;
 	return t.length > 0 && t.every((e) => typeof e.value == "number");
 }
-function fe(e, t) {
+function me(e, t) {
 	let n = [], r = (e, i, a, o) => {
 		e.forEach((e, s) => {
 			let c = [...i, s], l = c.join(".");
@@ -597,13 +601,13 @@ function fe(e, t) {
 				depth: a,
 				offset: o,
 				kind: e.kind,
-				numeric: de(e)
+				numeric: pe(e)
 			}), e.kind === "timeline" && t.has(l) && r(e.timeline.tracks, c, a + 1, o + e.at);
 		});
 	};
 	return r(e, [], 0, 0), n;
 }
-function K(e, t) {
+function q(e, t) {
 	let n = e, r;
 	for (let e of t) {
 		if (r = n[e], !r) return;
@@ -613,22 +617,22 @@ function K(e, t) {
 }
 //#endregion
 //#region src/components/Timeline/keys.ts
-function q(e, t) {
+function J(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function J(e, t) {
+function Y(e, t) {
 	return {
 		...e,
 		keys: t
 	};
 }
-function pe(e, t) {
+function he(e, t) {
 	return {
 		...e,
 		events: t
 	};
 }
-function Y(e, t, n) {
+function X(e, t, n) {
 	let r = e.slice(), [i, ...a] = t;
 	if (a.length === 0) return r[i] = n, r;
 	let o = r[i];
@@ -638,19 +642,19 @@ function Y(e, t, n) {
 		...s,
 		timeline: {
 			...s.timeline,
-			tracks: Y(s.timeline.tracks, a, n)
+			tracks: X(s.timeline.tracks, a, n)
 		}
 	}, r;
 }
-function X(e, t, n) {
-	let r = K(e, t.trackPath), i = Math.max(0, n);
+function Z(e, t, n) {
+	let r = q(e, t.trackPath), i = Math.max(0, n);
 	if (r?.kind === "sampled") {
 		let n = r, a = {
 			...n.keys[t.keyIndex],
 			t: i
 		}, o = n.keys.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: Y(e, t.trackPath, J(r, o)),
+			tracks: X(e, t.trackPath, Y(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -663,7 +667,7 @@ function X(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: Y(e, t.trackPath, pe(r, o)),
+			tracks: X(e, t.trackPath, he(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -675,8 +679,8 @@ function X(e, t, n) {
 		selection: t
 	};
 }
-function me(e, t, n) {
-	let r = K(e, t);
+function ge(e, t, n) {
+	let r = q(e, t);
 	if (r?.kind !== "sampled") return {
 		tracks: e.slice(),
 		selection: null
@@ -686,60 +690,60 @@ function me(e, t, n) {
 		t: a,
 		value: o
 	}), {
-		tracks: Y(e, t, J(r, s)),
+		tracks: X(e, t, Y(r, s)),
 		selection: {
 			trackPath: t,
 			keyIndex: l
 		}
 	};
 }
-function he(e, t) {
-	let n = K(e, t.trackPath);
+function _e(e, t) {
+	let n = q(e, t.trackPath);
 	if (n?.kind !== "sampled") return {
 		tracks: e.slice(),
 		selection: t
 	};
 	let r = n.keys.filter((e, n) => n !== t.keyIndex);
 	return {
-		tracks: Y(e, t.trackPath, J(n, r)),
+		tracks: X(e, t.trackPath, Y(n, r)),
 		selection: r.length === 0 ? null : {
 			trackPath: t.trackPath,
 			keyIndex: Math.max(0, t.keyIndex - 1)
 		}
 	};
 }
-function Z(e, t, n) {
-	let r = K(e, t.trackPath);
+function Q(e, t, n) {
+	let r = q(e, t.trackPath);
 	if (r?.kind !== "sampled") return e.slice();
 	let i = r.keys.slice(), { easing: a, ...o } = i[t.keyIndex];
 	return i[t.keyIndex] = n === void 0 ? o : {
 		...o,
 		easing: n
-	}, Y(e, t.trackPath, J(r, i));
+	}, X(e, t.trackPath, Y(r, i));
 }
-function Q(e, t, n) {
-	let r = K(e, t);
-	return r?.kind === "sampled" ? Y(e, t, J(r, n.slice())) : e.slice();
+function $(e, t, n) {
+	let r = q(e, t);
+	return r?.kind === "sampled" ? X(e, t, Y(r, n.slice())) : e.slice();
 }
-function ge(e, t, n) {
-	let r = K(e, t.trackPath);
+function ve(e, t, n) {
+	let r = q(e, t.trackPath);
 	if (r?.kind !== "sampled") return e.slice();
 	let i = r.keys.slice();
 	return i[t.keyIndex] = {
 		...i[t.keyIndex],
 		value: n
-	}, Y(e, t.trackPath, J(r, i));
+	}, X(e, t.trackPath, Y(r, i));
 }
 //#endregion
 //#region src/components/Timeline/Timeline.tsx
-function $(e) {
+function ye(e) {
 	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: a, onScrub: o, renderKeyEditor: s, label: c, className: l } = e, [u, d] = C(() => /* @__PURE__ */ new Set()), [f, p] = C({
 		from: 0,
 		to: n
-	}), [m, _] = C(null), [v, y] = C(null), x = e.window ?? f, S = e.onWindowChange ?? p, T = e.selection === void 0 ? m : e.selection, E = e.onSelect ?? _, D = {
+	}), [m, _] = C(null), [v, y] = C(null), x = e.window ?? f, S = e.onWindowChange ?? p, w = e.selection === void 0 ? m : e.selection, T = e.onSelect ?? _, D = {
 		from: 0,
 		to: n
-	}, O = b(() => fe(t, u), [t, u]), k = b(() => {
+	}, O = b(() => me(t, u), [t, u]), k = b(() => {
 		let e = /* @__PURE__ */ new Set([0, n]);
 		for (let t of O) if (t.kind === "sampled") for (let n of t.track.keys) e.add(n.t + t.offset);
 		return [...e];
@@ -749,25 +753,25 @@ function $(e) {
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
 	}, j = (e) => {
-		if ((e.key === "Delete" || e.key === "Backspace") && T) {
+		if ((e.key === "Delete" || e.key === "Backspace") && w) {
 			e.preventDefault();
-			let n = he(t, T);
-			a(n.tracks), E(n.selection);
+			let n = _e(t, w);
+			a(n.tracks), T(n.selection);
 		}
-	}, M = T ? K(t, T.trackPath) : void 0, P = M?.kind === "sampled" ? M.keys[T.keyIndex] : void 0, F = v ? K(t, v.trackPath) : void 0, I = F?.kind === "sampled" ? F.keys[v.keyIndex] : void 0;
+	}, M = w ? q(t, w.trackPath) : void 0, N = M?.kind === "sampled" ? M.keys[w.keyIndex] : void 0, P = v ? q(t, v.trackPath) : void 0, I = P?.kind === "sampled" ? P.keys[v.keyIndex] : void 0;
 	return /* @__PURE__ */ g("div", {
-		className: [w.root, l].filter(Boolean).join(" "),
+		className: [E.root, l].filter(Boolean).join(" "),
 		"data-testid": "timeline-root",
 		tabIndex: -1,
 		onKeyDown: j,
 		children: [
 			c ? /* @__PURE__ */ h("div", {
-				className: w.label,
+				className: E.label,
 				children: c
 			}) : null,
 			e.transport === !1 ? null : /* @__PURE__ */ g("div", {
-				className: w.transportRow,
-				children: [/* @__PURE__ */ h(G, {
+				className: E.transportRow,
+				children: [/* @__PURE__ */ h(K, {
 					...e.transport ?? {
 						paused: !0,
 						loop: !1,
@@ -784,16 +788,16 @@ function $(e) {
 					role: "switch",
 					"aria-checked": (e.mode ?? "dope") === "graph",
 					"aria-label": "Graph mode",
-					className: w.transportButton,
+					className: E.transportButton,
 					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
 					children: "Graph"
 				})]
 			}),
 			/* @__PURE__ */ g("div", {
-				className: w.body,
-				children: [/* @__PURE__ */ h("div", { className: w.gutter }), /* @__PURE__ */ h("div", {
-					className: w.rulerWrap,
-					children: /* @__PURE__ */ h(ue, {
+				className: E.body,
+				children: [/* @__PURE__ */ h("div", { className: E.gutter }), /* @__PURE__ */ h("div", {
+					className: E.rulerWrap,
+					children: /* @__PURE__ */ h(fe, {
 						window: x,
 						bounds: D,
 						playhead: r,
@@ -803,41 +807,41 @@ function $(e) {
 				})]
 			}),
 			/* @__PURE__ */ h("div", {
-				className: w.lanes,
+				className: E.lanes,
 				children: O.map((n) => {
 					let r = n.path;
-					return /* @__PURE__ */ h(se, {
+					return /* @__PURE__ */ h(le, {
 						row: n,
 						window: x,
 						mode: e.mode ?? "dope",
-						selection: T && q(T.trackPath, r) ? T.keyIndex : null,
+						selection: w && J(w.trackPath, r) ? w.keyIndex : null,
 						expanded: u.has(n.key),
 						snapTimes: k,
 						onToggleExpand: () => A(n.key),
-						onSelect: (e) => E({
+						onSelect: (e) => T({
 							trackPath: r,
 							keyIndex: e
 						}),
 						onKeyInput: (e, n) => {
-							i?.(X(t, {
+							i?.(Z(t, {
 								trackPath: r,
 								keyIndex: e
 							}, n).tracks);
 						},
 						onKeyCommit: (e, n) => {
-							let i = X(t, {
+							let i = Z(t, {
 								trackPath: r,
 								keyIndex: e
 							}, n);
-							a(i.tracks), E(i.selection);
+							a(i.tracks), T(i.selection);
 						},
-						onKeysInput: (e) => i?.(Q(t, r, e)),
-						onKeysCommit: (e) => a(Q(t, r, e)),
+						onKeysInput: (e) => i?.($(t, r, e)),
+						onKeysCommit: (e) => a($(t, r, e)),
 						onInsert: (e) => {
-							let n = me(t, r, e);
-							a(n.tracks), E(n.selection);
+							let n = ge(t, r, e);
+							a(n.tracks), T(n.selection);
 						},
-						selectedSegment: v && q(v.trackPath, r) ? v.keyIndex : null,
+						selectedSegment: v && J(v.trackPath, r) ? v.keyIndex : null,
 						onSelectSegment: (e) => y({
 							trackPath: r,
 							keyIndex: e
@@ -845,21 +849,21 @@ function $(e) {
 					}, n.key);
 				})
 			}),
-			s && T && P && M?.kind === "sampled" ? /* @__PURE__ */ h("div", {
-				className: w.inspector,
+			s && w && N && M?.kind === "sampled" ? /* @__PURE__ */ h("div", {
+				className: E.inspector,
 				children: s({
-					key: P,
+					key: N,
 					track: M,
-					selection: T,
-					commit: (e) => a(ge(t, T, e.value)),
-					setEasing: (e) => a(Z(t, T, e))
+					selection: w,
+					commit: (e) => a(ve(t, w, e.value)),
+					setEasing: (e) => a(Q(t, w, e))
 				})
 			}) : null,
 			v && I ? /* @__PURE__ */ h("div", {
-				className: w.inspector,
-				children: /* @__PURE__ */ h(N, {
+				className: E.inspector,
+				children: /* @__PURE__ */ h(F, {
 					value: I.easing,
-					onChange: (e) => a(Z(t, v, e))
+					onChange: (e) => a(Q(t, v, e))
 				})
 			}) : null
 		]
@@ -867,7 +871,7 @@ function $(e) {
 }
 //#endregion
 //#region src/components/Timeline/AnimatedTimeline.tsx
-function _e(e) {
+function be(e) {
 	let { handle: t, ...n } = e, [, r] = x((e) => e + 1, 0);
 	v(() => t.subscribe(r), [t]);
 	let i = S(null), a = p(() => {
@@ -880,7 +884,7 @@ function _e(e) {
 			n.splice(0, n.length, ...e);
 		});
 	}, [t]), s = t.time(), c = t.duration();
-	return /* @__PURE__ */ h($, {
+	return /* @__PURE__ */ h(ye, {
 		...n,
 		tracks: t.tracks(),
 		duration: c,
@@ -907,6 +911,6 @@ function _e(e) {
 	});
 }
 //#endregion
-export { N as a, D as c, G as i, O as l, $ as n, k as o, q as r, E as s, _e as t };
+export { F as a, k as c, K as i, A as l, ye as n, j as o, J as r, O as s, be as t };
 
-//# sourceMappingURL=Timeline--58F7MED.js.map
+//# sourceMappingURL=Timeline-B39cwfMB.js.map