@weasel-js/ui 1.6.1 → 1.7.1

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

@@ -1,68 +1,69 @@
-import { rt as e, st as t } from "./icons-Dk8SRS8g.js";
-import { n } from "./Disclosure-0G0uh2fa.js";
-import { r } from "./Plot2D-CTXHkL5p.js";
-import { i, n as a, t as o } from "./createKeyframeLayer-Czj6Y235.js";
+import { rt as e, st as t } from "./icons-Dr2-r30x.js";
+import { n } from "./Disclosure-Ch2KxYuB.js";
+import { r } from "./Plot2D-BHNbgCAl.js";
+import { i, n as a, t as o } from "./createKeyframeLayer-BTa4LyJE.js";
 import { t as s } from "./snap-DRjbOiG9.js";
-import { t as c } from "./DetentSlider-CL8TlX3S.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 { t as c } from "./DetentSlider-Bh7EpMqT.js";
+import { EASINGS as l, openPointerSession as u, resolveEasing as d, sampleTrack as f, useLatest as p, useVisibleRaf as m } from "@weasel-js/core";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useReducer as S, useRef as C, useState as w } from "react";
+import { multiplier as T, qty as E } from "@weasel-js/quantity";
+var D = {
+	ruler: "_ruler_hovf2_1",
+	tick: "_tick_hovf2_11",
+	playhead: "_playhead_hovf2_29",
+	lane: "_lane_hovf2_38",
+	laneLabel: "_laneLabel_hovf2_45",
+	disclosure: "_disclosure_hovf2_65",
+	laneTrack: "_laneTrack_hovf2_67",
+	key: "_key_hovf2_74",
+	eventMark: "_eventMark_hovf2_74",
+	keyGhost: "_keyGhost_hovf2_94",
+	eventGhost: "_eventGhost_hovf2_94",
+	graphHost: "_graphHost_hovf2_111",
+	graph: "_graph_hovf2_111",
+	nestedBar: "_nestedBar_hovf2_130",
+	transport: "_transport_hovf2_139",
+	transportButton: "_transportButton_hovf2_148",
+	transportRow: "_transportRow_hovf2_175",
+	time: "_time_hovf2_193",
+	rate: "_rate_hovf2_200",
+	rateSlider: "_rateSlider_hovf2_201",
+	rateReadout: "_rateReadout_hovf2_205",
+	root: "_root_hovf2_212",
+	label: "_label_hovf2_227",
+	body: "_body_hovf2_229",
+	gutter: "_gutter_hovf2_46",
+	rulerWrap: "_rulerWrap_hovf2_231",
+	lanes: "_lanes_hovf2_233",
+	inspector: "_inspector_hovf2_240",
+	segment: "_segment_hovf2_249",
+	easingPicker: "_easingPicker_hovf2_259",
+	easingLabel: "_easingLabel_hovf2_260",
+	easingPreview: "_easingPreview_hovf2_262"
 };
 //#endregion
 //#region src/components/Timeline/easingSpec.ts
-function T(e) {
+function O(e) {
 	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
 }
-function E(e) {
-	return e === void 0 ? null : T(e);
+function k(e) {
+	return e === void 0 ? null : O(e);
 }
-function D(e) {
+function A(e) {
 	if (e === void 0) return "linear";
 	if (typeof e == "string") return e;
-	let t = T(e);
+	let t = O(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 j(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 M = Object.keys(l), N = 24, P = {
 	linear: [
 		0,
 		0,
@@ -123,50 +124,50 @@ var k = Object.keys(l), A = 24, j = {
 		.63,
 		1
 	]
-}, M = [
+}, F = [
 	.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(" ");
-	return /* @__PURE__ */ g("div", {
-		className: w.easingPicker,
+function I(e) {
+	let { value: t, onChange: n } = e, r = k(t), i = A(t), a = r === null && M.includes(i), o = r === null ? a ? i : "linear" : "custom", s = j(t, N).map((e, t) => `${t / 23 * 100},${100 - e * 100}`).join(" ");
+	return /* @__PURE__ */ _("div", {
+		className: D.easingPicker,
 		children: [
-			/* @__PURE__ */ g("label", { children: ["Easing", /* @__PURE__ */ g("select", {
+			/* @__PURE__ */ _("label", { children: ["Easing", /* @__PURE__ */ _("select", {
 				value: o,
 				onChange: (e) => n(e.target.value === "linear" ? void 0 : e.target.value),
 				children: [
-					/* @__PURE__ */ h("option", {
+					/* @__PURE__ */ g("option", {
 						value: "linear",
 						children: "linear"
 					}),
-					k.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ h("option", {
+					M.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ g("option", {
 						value: e,
 						children: e
 					}, e)),
-					r === null ? null : /* @__PURE__ */ h("option", {
+					r === null ? null : /* @__PURE__ */ g("option", {
 						value: "custom",
 						children: "custom"
 					})
 				]
 			})] }),
-			r === null ? /* @__PURE__ */ h("button", {
+			r === null ? /* @__PURE__ */ g("button", {
 				type: "button",
-				className: w.transportButton,
-				onClick: () => n({ bezier: j[o] ?? M }),
+				className: D.transportButton,
+				onClick: () => n({ bezier: P[o] ?? F }),
 				children: "Convert to bezier"
-			}) : /* @__PURE__ */ h("span", {
-				className: w.easingLabel,
+			}) : /* @__PURE__ */ g("span", {
+				className: D.easingLabel,
 				children: i
 			}),
-			/* @__PURE__ */ h("svg", {
-				className: w.easingPreview,
+			/* @__PURE__ */ g("svg", {
+				className: D.easingPreview,
 				"data-testid": "easing-preview",
 				viewBox: "0 0 100 100",
 				preserveAspectRatio: "none",
-				children: /* @__PURE__ */ h("polyline", {
+				children: /* @__PURE__ */ g("polyline", {
 					points: s,
 					vectorEffect: "non-scaling-stroke"
 				})
@@ -176,8 +177,8 @@ function N(e) {
 }
 //#endregion
 //#region src/components/Timeline/timeScale.ts
-var P = 1;
-function F(e, t) {
+var L = 1;
+function R(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 ee(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 `${ee(e, t) * 100}%`;
 }
-function R(e, t) {
+function te(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 `${te(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 ne(e, t, n, r) {
+	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(L, 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 re(e, t, n) {
+	return V({
 		from: e.from + t,
 		to: e.to + t
 	}, n);
@@ -229,22 +230,22 @@ 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 ie = 8, ae = 10;
+function oe(e) {
+	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * ie / 84;
 	return [n - i, n + r + i];
 }
-function ie(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({
+function se(e) {
+	let { keys: t, label: n, window: r, offset: s, snapTimes: c, selection: l, selectedSegment: u, onSelect: d, onSelectSegment: f, onKeysInput: m, onKeysCommit: h } = e, _ = C(null), [v, y] = w({
 		width: 0,
 		height: 0
 	});
-	y(() => {
-		let e = g.current;
+	b(() => {
+		let e = _.current;
 		if (!e) return;
 		let t = () => {
 			let t = e.getBoundingClientRect();
-			v((e) => e.width === t.width && e.height === t.height ? e : {
+			y((e) => e.width === t.width && e.height === t.height ? e : {
 				width: t.width,
 				height: t.height
 			});
@@ -253,18 +254,18 @@ function ie(e) {
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, []);
-	let x = b(() => a({
+	let S = x(() => a({
 		id: "keys",
 		label: n,
 		formatX: (e) => `${Math.round(e)} ms`,
 		snapX: c.map((e) => e - s),
 		xClamp: [0, Infinity],
-		step: { x: ne }
+		step: { x: ae }
 	}), [
 		n,
 		c,
 		s
-	]), T = b(() => ({
+	]), T = x(() => ({
 		keys: t,
 		selectedKey: l,
 		selectedSegment: u,
@@ -273,42 +274,40 @@ function ie(e) {
 		t,
 		l,
 		u
-	]), [E, D] = C(null), O = E ?? T, k = S(O);
-	k.current = O;
-	let A = b(() => [{
-		layer: x,
-		state: O
-	}], [x, O]), j = (e, t) => {
-		let n = t, r = k.current;
+	]), [E, O] = w(null), k = E ?? T, A = p(k), j = x(() => [{
+		layer: S,
+		state: k
+	}], [S, k]), M = (e, t) => {
+		let n = t, r = A.current;
 		if (n.selectedKey !== null && n.selectedKey !== r.selectedKey && d(n.selectedKey), n.selectedSegment !== null && n.selectedSegment !== r.selectedSegment && f?.(n.selectedSegment), !n.drag) {
-			D(null);
+			O(null);
 			return;
 		}
-		if (D(n), n.drag.kind !== "key") return;
+		if (O(n), n.drag.kind !== "key") return;
 		let i = o(n).keys;
-		i !== n.keys && p?.(i);
-	}, M = (e, t, n) => {
-		D(null);
+		i !== n.keys && m?.(i);
+	}, N = (e, t, n) => {
+		O(null);
 		let r = t;
-		r.keys !== n.keys && m(r.keys);
-	}, [N, P] = re(O.keys), F = _.width > 0 ? H(r, _.width, 64) : [];
-	return /* @__PURE__ */ h("div", {
-		ref: g,
-		className: w.graphHost,
-		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ h(i, {
-			className: w.graph,
+		r.keys !== n.keys && h(r.keys);
+	}, [P, F] = oe(k.keys), I = v.width > 0 ? H(r, v.width, 64) : [];
+	return /* @__PURE__ */ g("div", {
+		ref: _,
+		className: D.graphHost,
+		children: v.width > 0 && v.height > 0 ? /* @__PURE__ */ g(i, {
+			className: D.graph,
 			"aria-label": `${n} graph`,
-			layers: A,
-			onLayerChange: j,
-			onLayerCommit: M,
-			width: _.width,
-			height: _.height,
+			layers: j,
+			onLayerChange: M,
+			onLayerCommit: N,
+			width: v.width,
+			height: v.height,
 			xRange: [r.from - s, r.to - s],
-			yRange: [N, P],
+			yRange: [P, F],
 			grid: !1,
 			axes: !1,
 			xTicks: {
-				values: F.map((e) => e - s),
+				values: I.map((e) => e - s),
 				labels: !1
 			},
 			yTicks: {
@@ -321,36 +320,36 @@ function ie(e) {
 }
 //#endregion
 //#region src/components/Timeline/Lane.tsx
-var ae = 10;
-function oe(e) {
+var ce = 10;
+function le(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);
-	v(() => () => {
-		D.current?.cancel();
+function ue(e) {
+	let { row: t, window: r, mode: i, selection: a, onSelect: o, onKeyInput: c, onKeyCommit: l, onInsert: d, onToggleExpand: f, expanded: p, snapTimes: m, selectedSegment: v = null, onSelectSegment: b, onKeysInput: x, onKeysCommit: S } = e, T = C(null), E = C(null);
+	y(() => () => {
+		E.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] = w(null), A = (e) => z(r, e + t.offset), j = (e) => {
+		let n = T.current?.getBoundingClientRect();
+		return n ? R(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 = R(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) => {
 			let n = Math.max(0, j(e.clientX));
-			return e.altKey ? n : s(n + t.offset, _, M()) - t.offset;
+			return e.altKey ? n : s(n + t.offset, m, M()) - t.offset;
 		};
 		k({
 			keyIndex: e,
-			t: B[e]
+			t: L[e]
 		});
 		let i = () => {
-			k(null), D.current = null;
+			k(null), E.current = null;
 		};
-		D.current?.cancel(), D.current = u(n.currentTarget, n, {
+		E.current?.cancel(), E.current = u(n.currentTarget, n, {
 			onMove: (t) => {
 				k({
 					keyIndex: e,
@@ -362,69 +361,69 @@ function se(e) {
 			},
 			onCancel: i
 		}, { capture: !1 });
-	}, R = (e, t) => (n) => {
-		let r = ae * (n.shiftKey ? 10 : 1);
+	}, I = (e, t) => (n) => {
+		let r = ce * (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);
-	return /* @__PURE__ */ g("div", {
-		className: w.lane,
+	}, L = le(t);
+	return /* @__PURE__ */ _("div", {
+		className: D.lane,
 		"data-depth": t.depth,
 		"data-mode": i,
 		"data-graph": N ? "true" : void 0,
-		children: [/* @__PURE__ */ g("div", {
-			className: w.laneLabel,
-			children: [t.kind === "timeline" ? /* @__PURE__ */ h("span", {
+		children: [/* @__PURE__ */ _("div", {
+			className: D.laneLabel,
+			children: [t.kind === "timeline" ? /* @__PURE__ */ g("span", {
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": p,
 				"data-testid": "timeline-disclosure",
-				className: w.disclosure,
+				className: D.disclosure,
 				onClick: f,
 				onKeyDown: (e) => {
 					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
 				},
-				children: /* @__PURE__ */ h(n, { open: p })
+				children: /* @__PURE__ */ g(n, { open: p })
 			}) : null, t.label]
-		}), /* @__PURE__ */ h("div", {
-			className: w.laneTrack,
-			ref: E,
+		}), /* @__PURE__ */ g("div", {
+			className: D.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__ */ g(se, {
 				keys: P,
 				label: t.label,
 				window: r,
 				offset: t.offset,
-				snapTimes: _,
+				snapTimes: m,
 				selection: a,
-				selectedSegment: y,
+				selectedSegment: v,
 				onSelect: o,
 				onSelectSegment: b,
 				onKeysInput: x,
-				onKeysCommit: (e) => T?.(e)
-			}) : /* @__PURE__ */ g(m, { children: [
-				t.kind === "timeline" ? /* @__PURE__ */ h("div", {
-					className: w.nestedBar,
+				onKeysCommit: (e) => S?.(e)
+			}) : /* @__PURE__ */ _(h, { children: [
+				t.kind === "timeline" ? /* @__PURE__ */ g("div", {
+					className: D.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) => {
 					let i = n + 1;
-					return /* @__PURE__ */ h("div", {
+					return /* @__PURE__ */ g("div", {
 						role: "button",
 						tabIndex: 0,
 						"aria-label": `${t.label} segment into ${Math.round(e.t)} ms`,
-						"aria-current": y === i ? "true" : void 0,
+						"aria-current": v === i ? "true" : void 0,
 						"data-testid": "timeline-segment",
-						className: w.segment,
+						className: D.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 +431,22 @@ function se(e) {
 						}
 					}, `seg-${i}`);
 				}) : null,
-				B.map((e, n) => /* @__PURE__ */ h("div", {
+				L.map((e, n) => /* @__PURE__ */ g("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" ? D.eventMark : D.key,
 					style: { left: A(e) },
-					onPointerDown: I(n),
-					onKeyDown: R(n, e)
+					onPointerDown: F(n),
+					onKeyDown: I(n, e)
 				}, n)),
-				O ? /* @__PURE__ */ h("div", {
+				O ? /* @__PURE__ */ g("div", {
 					"aria-hidden": "true",
 					"data-testid": "timeline-key-ghost",
-					className: t.kind === "event" ? w.eventGhost : w.keyGhost,
+					className: t.kind === "event" ? D.eventGhost : D.keyGhost,
 					style: { left: A(O.t) }
 				}) : null
 			] })
@@ -456,17 +455,17 @@ function se(e) {
 }
 //#endregion
 //#region src/components/Timeline/Ruler.tsx
-var ce = .0015;
-function le(e) {
+var de = .0015;
+function fe(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: a } = e, o = S(null), s = S(null);
-	v(() => () => {
+function pe(e) {
+	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: a } = e, o = C(null), s = C(null);
+	y(() => () => {
 		s.current?.cancel();
 	}, []);
-	let [c, l] = C(0);
-	y(() => {
+	let [c, l] = w(0);
+	b(() => {
 		let e = o.current;
 		if (!e) return;
 		let t = () => l(e.getBoundingClientRect().width);
@@ -477,7 +476,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 = R(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,86 +492,89 @@ 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(ne(t, f(e.clientX), Math.exp(e.deltaY * de), n));
 		else {
 			let r = d(), i = r === 0 ? 0 : (t.to - t.from) / r;
-			a(ee(t, e.deltaY * i, n));
+			a(re(t, e.deltaY * i, n));
 		}
-	}, _ = H(t, c, 64), b = (e) => L(t, e);
-	return /* @__PURE__ */ g("div", {
-		className: w.ruler,
+	}, h = H(t, c, 64), v = (e) => z(t, e);
+	return /* @__PURE__ */ _("div", {
+		className: D.ruler,
 		ref: o,
 		"data-testid": "timeline-ruler",
 		onPointerDown: p,
 		onWheel: m,
-		children: [_.map((e) => /* @__PURE__ */ h("span", {
-			className: w.tick,
+		children: [h.map((e) => /* @__PURE__ */ g("span", {
+			className: D.tick,
 			"data-testid": "timeline-tick",
-			style: { left: b(e) },
-			children: le(e)
-		}, e)), /* @__PURE__ */ h("div", {
-			className: w.playhead,
+			style: { left: v(e) },
+			children: fe(e)
+		}, e)), /* @__PURE__ */ g("div", {
+			className: D.playhead,
 			"data-testid": "timeline-playhead",
-			style: { left: b(r) }
+			style: { left: v(r) }
 		})]
 	});
 }
 //#endregion
 //#region src/components/Timeline/Transport.tsx
-var U = [
+var U = T({ 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);
-	return /* @__PURE__ */ g("div", {
-		className: w.transport,
+], 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__ */ _("div", {
+		className: D.transport,
 		children: [
-			/* @__PURE__ */ h("button", {
+			/* @__PURE__ */ g("button", {
 				type: "button",
-				className: w.transportButton,
+				className: D.transportButton,
 				"aria-label": r ? "Play" : "Pause",
 				onClick: r ? l : u,
-				children: h(r ? t : e, { size: 14 })
+				children: g(r ? t : e, { size: 14 })
 			}),
-			/* @__PURE__ */ h("button", {
+			/* @__PURE__ */ g("button", {
 				type: "button",
 				role: "switch",
 				"aria-checked": p,
 				"aria-label": "Loop",
-				className: w.transportButton,
+				className: D.transportButton,
 				onClick: () => d(!p),
 				children: "⟲"
 			}),
-			/* @__PURE__ */ g("div", {
-				className: w.rate,
+			/* @__PURE__ */ _("div", {
+				className: D.rate,
 				children: [
 					"Rate",
-					/* @__PURE__ */ h(c, {
+					/* @__PURE__ */ g(c, {
 						ariaLabel: "Rate",
-						items: m,
+						items: m.map((e) => ({
+							value: e,
+							ariaLabel: E(e, U).spoken
+						})),
 						value: a,
 						onChange: f,
-						formatLabel: (e) => `${e}x`,
+						formatLabel: (e) => E(e, U).text,
 						labels: "none",
-						className: w.rateSlider
+						className: D.rateSlider
 					}),
 					/* @__PURE__ */ g("span", {
-						className: w.rateReadout,
-						children: [a, "x"]
+						className: D.rateReadout,
+						children: E(a, U).text
 					})
 				]
 			}),
-			/* @__PURE__ */ g("span", {
-				className: w.time,
+			/* @__PURE__ */ _("span", {
+				className: D.time,
 				"data-testid": "timeline-time",
 				children: [
-					W(o),
+					G(o),
 					" / ",
-					W(s)
+					G(s)
 				]
 			})
 		]
@@ -580,12 +582,12 @@ function G(n) {
 }
 //#endregion
 //#region src/components/Timeline/lanes.ts
-function de(e) {
+function me(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 he(e, t) {
 	let n = [], r = (e, i, a, o) => {
 		e.forEach((e, s) => {
 			let c = [...i, s], l = c.join(".");
@@ -597,13 +599,13 @@ function fe(e, t) {
 				depth: a,
 				offset: o,
 				kind: e.kind,
-				numeric: de(e)
+				numeric: me(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 +615,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 ge(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 +640,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 +665,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, ge(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -675,8 +677,8 @@ function X(e, t, n) {
 		selection: t
 	};
 }
-function me(e, t, n) {
-	let r = K(e, t);
+function _e(e, t, n) {
+	let r = q(e, t);
 	if (r?.kind !== "sampled") return {
 		tracks: e.slice(),
 		selection: null
@@ -686,60 +688,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 ve(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 ye(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) {
-	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({
+function be(e) {
+	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: a, onScrub: o, renderKeyEditor: s, label: c, className: l } = e, [u, d] = w(() => /* @__PURE__ */ new Set()), [f, p] = w({
 		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, h] = w(null), [v, y] = w(null), b = e.window ?? f, S = e.onWindowChange ?? p, C = e.selection === void 0 ? m : e.selection, T = e.onSelect ?? h, E = {
 		from: 0,
 		to: n
-	}, O = b(() => fe(t, u), [t, u]), k = b(() => {
+	}, O = x(() => he(t, u), [t, u]), k = x(() => {
 		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 +751,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") && C) {
 			e.preventDefault();
-			let n = he(t, T);
-			a(n.tracks), E(n.selection);
+			let n = ve(t, C);
+			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;
-	return /* @__PURE__ */ g("div", {
-		className: [w.root, l].filter(Boolean).join(" "),
+	}, M = C ? q(t, C.trackPath) : void 0, N = M?.kind === "sampled" ? M.keys[C.keyIndex] : void 0, P = v ? q(t, v.trackPath) : void 0, F = P?.kind === "sampled" ? P.keys[v.keyIndex] : void 0;
+	return /* @__PURE__ */ _("div", {
+		className: [D.root, l].filter(Boolean).join(" "),
 		"data-testid": "timeline-root",
 		tabIndex: -1,
 		onKeyDown: j,
 		children: [
-			c ? /* @__PURE__ */ h("div", {
-				className: w.label,
+			c ? /* @__PURE__ */ g("div", {
+				className: D.label,
 				children: c
 			}) : null,
-			e.transport === !1 ? null : /* @__PURE__ */ g("div", {
-				className: w.transportRow,
-				children: [/* @__PURE__ */ h(G, {
+			e.transport === !1 ? null : /* @__PURE__ */ _("div", {
+				className: D.transportRow,
+				children: [/* @__PURE__ */ g(K, {
 					...e.transport ?? {
 						paused: !0,
 						loop: !1,
@@ -779,65 +781,65 @@ function $(e) {
 					},
 					playhead: r,
 					duration: n
-				}), /* @__PURE__ */ h("button", {
+				}), /* @__PURE__ */ g("button", {
 					type: "button",
 					role: "switch",
 					"aria-checked": (e.mode ?? "dope") === "graph",
 					"aria-label": "Graph mode",
-					className: w.transportButton,
+					className: D.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, {
-						window: x,
-						bounds: D,
+			/* @__PURE__ */ _("div", {
+				className: D.body,
+				children: [/* @__PURE__ */ g("div", { className: D.gutter }), /* @__PURE__ */ g("div", {
+					className: D.rulerWrap,
+					children: /* @__PURE__ */ g(pe, {
+						window: b,
+						bounds: E,
 						playhead: r,
 						onScrub: o,
 						onWindowChange: S
 					})
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
-				className: w.lanes,
+			/* @__PURE__ */ g("div", {
+				className: D.lanes,
 				children: O.map((n) => {
 					let r = n.path;
-					return /* @__PURE__ */ h(se, {
+					return /* @__PURE__ */ g(ue, {
 						row: n,
-						window: x,
+						window: b,
 						mode: e.mode ?? "dope",
-						selection: T && q(T.trackPath, r) ? T.keyIndex : null,
+						selection: C && J(C.trackPath, r) ? C.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 = _e(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 +847,21 @@ function $(e) {
 					}, n.key);
 				})
 			}),
-			s && T && P && M?.kind === "sampled" ? /* @__PURE__ */ h("div", {
-				className: w.inspector,
+			s && C && N && M?.kind === "sampled" ? /* @__PURE__ */ g("div", {
+				className: D.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: C,
+					commit: (e) => a(ye(t, C, e.value)),
+					setEasing: (e) => a(Q(t, C, e))
 				})
 			}) : null,
-			v && I ? /* @__PURE__ */ h("div", {
-				className: w.inspector,
-				children: /* @__PURE__ */ h(N, {
-					value: I.easing,
-					onChange: (e) => a(Z(t, v, e))
+			v && F ? /* @__PURE__ */ g("div", {
+				className: D.inspector,
+				children: /* @__PURE__ */ g(I, {
+					value: F.easing,
+					onChange: (e) => a(Q(t, v, e))
 				})
 			}) : null
 		]
@@ -867,20 +869,20 @@ function $(e) {
 }
 //#endregion
 //#region src/components/Timeline/AnimatedTimeline.tsx
-function _e(e) {
-	let { handle: t, ...n } = e, [, r] = x((e) => e + 1, 0);
-	v(() => t.subscribe(r), [t]);
-	let i = S(null), a = p(() => {
-		r(), t.isPaused() || i.current?.request();
-	});
-	i.current = a, v(() => (t.isPaused() || a.request(), () => a.cancel()), [t, a]);
-	let o = _((e) => {
+function xe(e) {
+	let { handle: t, ...n } = e, [, r] = S((e) => e + 1, 0);
+	y(() => t.subscribe(r), [t]);
+	let i = m(() => {
+		r(), t.isPaused() || a.current.request();
+	}), a = p(i);
+	y(() => (t.isPaused() || i.request(), () => i.cancel()), [t, i]);
+	let o = v((e) => {
 		t.edit(() => {
 			let n = t.tracks();
 			n.splice(0, n.length, ...e);
 		});
 	}, [t]), s = t.time(), c = t.duration();
-	return /* @__PURE__ */ h($, {
+	return /* @__PURE__ */ g(be, {
 		...n,
 		tracks: t.tracks(),
 		duration: c,
@@ -892,7 +894,7 @@ function _e(e) {
 			loop: t.loop(),
 			rate: t.timeScale(),
 			onPlay: () => {
-				t.time() >= c && t.seek(0), t.resume(), a.request(), r();
+				t.time() >= c && t.seek(0), t.resume(), i.request(), r();
 			},
 			onPause: () => {
 				t.pause(), r();
@@ -907,6 +909,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 { I as a, A as c, K as i, j as l, be as n, M as o, J as r, k as s, xe as t };
 
-//# sourceMappingURL=Timeline--58F7MED.js.map
+//# sourceMappingURL=Timeline-pqnYk5cV.js.map