@weasel-js/ui 1.7.0 → 1.7.2

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

@@ -1,69 +1,70 @@
-import { rt as e, st as t } from "./icons-BhcR1l64.js";
+import { rt as e, st as t } from "./icons-Dr2-r30x.js";
 import { n } from "./Disclosure-Ch2KxYuB.js";
-import { r } from "./Plot2D-CTXHkL5p.js";
-import { i, n as a, t as o } from "./createKeyframeLayer-DVl321_l.js";
+import { r } from "./Plot2D-BrvQS0dh.js";
+import { i, n as a, t as o } from "./createKeyframeLayer-DSVf13Su.js";
 import { t as s } from "./snap-DRjbOiG9.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";
-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"
+import { t as c } from "./DetentSlider-DNTAk8xP.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_c5e84_1",
+	tick: "_tick_c5e84_11 _numeric_zns9n_4",
+	playhead: "_playhead_c5e84_30",
+	lane: "_lane_c5e84_39",
+	laneLabel: "_laneLabel_c5e84_46",
+	disclosure: "_disclosure_c5e84_66",
+	laneTrack: "_laneTrack_c5e84_68",
+	key: "_key_c5e84_75",
+	eventMark: "_eventMark_c5e84_75",
+	keyGhost: "_keyGhost_c5e84_95",
+	eventGhost: "_eventGhost_c5e84_95",
+	graphHost: "_graphHost_c5e84_112",
+	graph: "_graph_c5e84_112",
+	nestedBar: "_nestedBar_c5e84_131",
+	transport: "_transport_c5e84_140",
+	transportButton: "_transportButton_c5e84_149",
+	transportRow: "_transportRow_c5e84_176",
+	time: "_time_c5e84_194 _numeric_zns9n_4",
+	rate: "_rate_c5e84_201",
+	rateSlider: "_rateSlider_c5e84_202",
+	rateReadout: "_rateReadout_c5e84_206 _numeric_zns9n_4",
+	sizer: "_sizer_c5e84_218 _sizer_18u60_4",
+	root: "_root_c5e84_222",
+	label: "_label_c5e84_237",
+	body: "_body_c5e84_239",
+	gutter: "_gutter_c5e84_47",
+	rulerWrap: "_rulerWrap_c5e84_241",
+	lanes: "_lanes_c5e84_243",
+	inspector: "_inspector_c5e84_250",
+	segment: "_segment_c5e84_259",
+	easingPicker: "_easingPicker_c5e84_269",
+	easingLabel: "_easingLabel_c5e84_270 _numeric_zns9n_4",
+	easingPreview: "_easingPreview_c5e84_272"
 };
 //#endregion
 //#region src/components/Timeline/easingSpec.ts
-function D(e) {
-	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
-}
 function O(e) {
-	return e === void 0 ? null : D(e);
+	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
 }
 function k(e) {
+	return e === void 0 ? null : O(e);
+}
+function A(e) {
 	if (e === void 0) return "linear";
 	if (typeof e == "string") return e;
-	let t = D(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 A(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 j = Object.keys(l), M = 24, N = {
+var M = Object.keys(l), N = 24, P = {
 	linear: [
 		0,
 		0,
@@ -124,50 +125,50 @@ var j = Object.keys(l), M = 24, N = {
 		.63,
 		1
 	]
-}, P = [
+}, F = [
 	.25,
 	.1,
 	.25,
 	1
 ];
-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: E.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"
 					}),
-					j.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: E.transportButton,
-				onClick: () => n({ bezier: N[o] ?? P }),
+				className: D.transportButton,
+				onClick: () => n({ bezier: P[o] ?? F }),
 				children: "Convert to bezier"
-			}) : /* @__PURE__ */ h("span", {
-				className: E.easingLabel,
+			}) : /* @__PURE__ */ g("span", {
+				className: D.easingLabel,
 				children: i
 			}),
-			/* @__PURE__ */ h("svg", {
-				className: E.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"
 				})
@@ -177,8 +178,8 @@ function F(e) {
 }
 //#endregion
 //#region src/components/Timeline/timeScale.ts
-var I = 1;
-function L(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,
@@ -187,19 +188,19 @@ function L(e, t) {
 		toMs: (t) => e.from + t * i
 	};
 }
-function R(e, t) {
+function ee(e, t) {
 	let n = e.to - e.from;
 	return n === 0 ? 0 : (t - e.from) / n;
 }
 function z(e, t) {
-	return `${R(e, t) * 100}%`;
+	return `${ee(e, t) * 100}%`;
 }
-function ee(e, t) {
+function te(e, t) {
 	let n = e.to - e.from;
 	return n === 0 ? 0 : t / n;
 }
 function B(e, t) {
-	return `${ee(e, t) * 100}%`;
+	return `${te(e, t) * 100}%`;
 }
 function V(e, t) {
 	let n = Math.min(e.to - e.from, t.to - t.from), r = e.from;
@@ -208,14 +209,14 @@ function V(e, t) {
 		to: r + n
 	};
 }
-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;
+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 ne(e, t, n) {
+function re(e, t, n) {
 	return V({
 		from: e.from + t,
 		to: e.to + t
@@ -230,22 +231,22 @@ function H(e, t, n) {
 }
 //#endregion
 //#region src/components/Timeline/LaneGraph.tsx
-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;
+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 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({
+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
 			});
@@ -254,18 +255,18 @@ function oe(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: ie }
+		step: { x: ae }
 	}), [
 		n,
 		c,
 		s
-	]), w = b(() => ({
+	]), T = x(() => ({
 		keys: t,
 		selectedKey: l,
 		selectedSegment: u,
@@ -274,42 +275,40 @@ function oe(e) {
 		t,
 		l,
 		u
-	]), [T, D] = C(null), O = T ?? w, 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] = ae(O.keys), F = _.width > 0 ? H(r, _.width, 64) : [];
-	return /* @__PURE__ */ h("div", {
-		ref: g,
-		className: E.graphHost,
-		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ h(i, {
-			className: E.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: {
@@ -322,36 +321,36 @@ function oe(e) {
 }
 //#endregion
 //#region src/components/Timeline/Lane.tsx
-var se = 10;
-function ce(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 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();
+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) => z(r, e + t.offset), j = (e) => {
+	let [O, k] = w(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;
+		return n ? R(r, n.width).toMs(e - n.left) - t.offset : r.from;
 	}, M = () => {
-		let e = T.current?.getBoundingClientRect().width ?? 0, t = L(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 : [], 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: R[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,
@@ -364,50 +363,50 @@ function le(e) {
 			onCancel: i
 		}, { capture: !1 });
 	}, I = (e, t) => (n) => {
-		let r = se * (n.shiftKey ? 10 : 1);
+		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)));
-	}, R = ce(t);
-	return /* @__PURE__ */ g("div", {
-		className: E.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: E.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: E.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: E.laneTrack,
+		}), /* @__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(oe, {
+			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) => w?.(e)
-			}) : /* @__PURE__ */ g(m, { children: [
-				t.kind === "timeline" ? /* @__PURE__ */ h("div", {
-					className: E.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),
@@ -416,13 +415,13 @@ function le(e) {
 				}) : 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: E.segment,
+						className: D.segment,
 						style: {
 							left: A(P[i - 1].t),
 							width: B(r, e.t - P[i - 1].t)
@@ -433,22 +432,22 @@ function le(e) {
 						}
 					}, `seg-${i}`);
 				}) : null,
-				R.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" ? E.eventMark : E.key,
+					className: t.kind === "event" ? D.eventMark : D.key,
 					style: { left: A(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" ? E.eventGhost : E.keyGhost,
+					className: t.kind === "event" ? D.eventGhost : D.keyGhost,
 					style: { left: A(O.t) }
 				}) : null
 			] })
@@ -457,17 +456,17 @@ function le(e) {
 }
 //#endregion
 //#region src/components/Timeline/Ruler.tsx
-var ue = .0015;
-function de(e) {
+var de = .0015;
+function fe(e) {
 	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
 }
-function fe(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);
@@ -478,7 +477,7 @@ function fe(e) {
 	let d = () => o.current?.getBoundingClientRect().width ?? 0, f = (e) => {
 		let n = o.current?.getBoundingClientRect();
 		if (!n) return t.from;
-		let r = L(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;
@@ -494,102 +493,116 @@ function fe(e) {
 			onCancel: t
 		}, { capture: !1 });
 	}, m = (e) => {
-		if (e.ctrlKey) a(te(t, f(e.clientX), Math.exp(e.deltaY * ue), 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(ne(t, e.deltaY * i, n));
+			a(re(t, e.deltaY * i, n));
 		}
-	}, _ = H(t, c, 64), b = (e) => z(t, e);
-	return /* @__PURE__ */ g("div", {
-		className: E.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: E.tick,
+		children: [h.map((e) => /* @__PURE__ */ g("span", {
+			className: D.tick,
 			"data-testid": "timeline-tick",
-			style: { left: b(e) },
-			children: de(e)
-		}, e)), /* @__PURE__ */ h("div", {
-			className: E.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 = w({ symbol: "x" }), W = [
+var U = T({ symbol: "x" }), W = [
 	.25,
 	.5,
 	1,
 	2,
 	4
-], G = (e) => `${(e / 1e3).toFixed(2)}s`;
-function K(n) {
+], G = (e) => `${(e / 1e3).toFixed(2)}s`, K = (e) => E(e, U).text;
+function q(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: E.transport,
+	return /* @__PURE__ */ _("div", {
+		className: D.transport,
 		children: [
-			/* @__PURE__ */ h("button", {
+			/* @__PURE__ */ g("button", {
 				type: "button",
-				className: E.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: E.transportButton,
+				className: D.transportButton,
 				onClick: () => d(!p),
 				children: "⟲"
 			}),
-			/* @__PURE__ */ g("div", {
-				className: E.rate,
+			/* @__PURE__ */ _("div", {
+				className: D.rate,
 				children: [
 					"Rate",
-					/* @__PURE__ */ h(c, {
+					/* @__PURE__ */ g(c, {
 						ariaLabel: "Rate",
 						items: m.map((e) => ({
 							value: e,
-							ariaLabel: T(e, U).spoken
+							ariaLabel: E(e, U).spoken
 						})),
 						value: a,
 						onChange: f,
-						formatLabel: (e) => T(e, U).text,
+						formatLabel: K,
 						labels: "none",
-						className: E.rateSlider
+						className: D.rateSlider
 					}),
-					/* @__PURE__ */ h("span", {
-						className: E.rateReadout,
-						children: T(a, U).text
+					/* @__PURE__ */ _("span", {
+						className: D.rateReadout,
+						children: [/* @__PURE__ */ g("span", { children: K(a) }), /* @__PURE__ */ g("span", {
+							className: D.sizer,
+							"aria-hidden": "true",
+							children: m.map((e) => /* @__PURE__ */ g("span", { children: K(e) }, e))
+						})]
 					})
 				]
 			}),
-			/* @__PURE__ */ g("span", {
-				className: E.time,
-				"data-testid": "timeline-time",
-				children: [
-					G(o),
-					" / ",
-					G(s)
-				]
+			/* @__PURE__ */ _("span", {
+				className: D.time,
+				children: [/* @__PURE__ */ _("span", {
+					"data-testid": "timeline-time",
+					children: [
+						G(Math.min(Math.max(o, 0), s)),
+						" / ",
+						G(s)
+					]
+				}), /* @__PURE__ */ g("span", {
+					className: D.sizer,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ _("span", { children: [
+						G(s),
+						" / ",
+						G(s)
+					] })
+				})]
 			})
 		]
 	});
 }
 //#endregion
 //#region src/components/Timeline/lanes.ts
-function pe(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 me(e, t) {
+function he(e, t) {
 	let n = [], r = (e, i, a, o) => {
 		e.forEach((e, s) => {
 			let c = [...i, s], l = c.join(".");
@@ -601,13 +614,13 @@ function me(e, t) {
 				depth: a,
 				offset: o,
 				kind: e.kind,
-				numeric: pe(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 q(e, t) {
+function J(e, t) {
 	let n = e, r;
 	for (let e of t) {
 		if (r = n[e], !r) return;
@@ -617,22 +630,22 @@ function q(e, t) {
 }
 //#endregion
 //#region src/components/Timeline/keys.ts
-function J(e, t) {
+function Y(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function Y(e, t) {
+function X(e, t) {
 	return {
 		...e,
 		keys: t
 	};
 }
-function he(e, t) {
+function ge(e, t) {
 	return {
 		...e,
 		events: t
 	};
 }
-function X(e, t, n) {
+function Z(e, t, n) {
 	let r = e.slice(), [i, ...a] = t;
 	if (a.length === 0) return r[i] = n, r;
 	let o = r[i];
@@ -642,19 +655,19 @@ function X(e, t, n) {
 		...s,
 		timeline: {
 			...s.timeline,
-			tracks: X(s.timeline.tracks, a, n)
+			tracks: Z(s.timeline.tracks, a, n)
 		}
 	}, r;
 }
-function Z(e, t, n) {
-	let r = q(e, t.trackPath), i = Math.max(0, n);
+function Q(e, t, n) {
+	let r = J(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: X(e, t.trackPath, Y(r, o)),
+			tracks: Z(e, t.trackPath, X(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -667,7 +680,7 @@ function Z(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: X(e, t.trackPath, he(r, o)),
+			tracks: Z(e, t.trackPath, ge(r, o)),
 			selection: {
 				trackPath: t.trackPath,
 				keyIndex: c
@@ -679,8 +692,8 @@ function Z(e, t, n) {
 		selection: t
 	};
 }
-function ge(e, t, n) {
-	let r = q(e, t);
+function _e(e, t, n) {
+	let r = J(e, t);
 	if (r?.kind !== "sampled") return {
 		tracks: e.slice(),
 		selection: null
@@ -690,60 +703,60 @@ function ge(e, t, n) {
 		t: a,
 		value: o
 	}), {
-		tracks: X(e, t, Y(r, s)),
+		tracks: Z(e, t, X(r, s)),
 		selection: {
 			trackPath: t,
 			keyIndex: l
 		}
 	};
 }
-function _e(e, t) {
-	let n = q(e, t.trackPath);
+function ve(e, t) {
+	let n = J(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: X(e, t.trackPath, Y(n, r)),
+		tracks: Z(e, t.trackPath, X(n, r)),
 		selection: r.length === 0 ? null : {
 			trackPath: t.trackPath,
 			keyIndex: Math.max(0, t.keyIndex - 1)
 		}
 	};
 }
-function Q(e, t, n) {
-	let r = q(e, t.trackPath);
+function $(e, t, n) {
+	let r = J(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
-	}, X(e, t.trackPath, Y(r, i));
+	}, Z(e, t.trackPath, X(r, i));
 }
-function $(e, t, n) {
-	let r = q(e, t);
-	return r?.kind === "sampled" ? X(e, t, Y(r, n.slice())) : e.slice();
+function ye(e, t, n) {
+	let r = J(e, t);
+	return r?.kind === "sampled" ? Z(e, t, X(r, n.slice())) : e.slice();
 }
-function ve(e, t, n) {
-	let r = q(e, t.trackPath);
+function be(e, t, n) {
+	let r = J(e, t.trackPath);
 	if (r?.kind !== "sampled") return e.slice();
 	let i = r.keys.slice();
 	return i[t.keyIndex] = {
 		...i[t.keyIndex],
 		value: n
-	}, X(e, t.trackPath, Y(r, i));
+	}, Z(e, t.trackPath, X(r, i));
 }
 //#endregion
 //#region src/components/Timeline/Timeline.tsx
-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({
+function xe(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, w = e.selection === void 0 ? m : e.selection, T = 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(() => me(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];
@@ -753,25 +766,25 @@ function ye(e) {
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
 	}, j = (e) => {
-		if ((e.key === "Delete" || e.key === "Backspace") && w) {
+		if ((e.key === "Delete" || e.key === "Backspace") && C) {
 			e.preventDefault();
-			let n = _e(t, w);
+			let n = ve(t, C);
 			a(n.tracks), T(n.selection);
 		}
-	}, 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: [E.root, l].filter(Boolean).join(" "),
+	}, M = C ? J(t, C.trackPath) : void 0, N = M?.kind === "sampled" ? M.keys[C.keyIndex] : void 0, P = v ? J(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: E.label,
+			c ? /* @__PURE__ */ g("div", {
+				className: D.label,
 				children: c
 			}) : null,
-			e.transport === !1 ? null : /* @__PURE__ */ g("div", {
-				className: E.transportRow,
-				children: [/* @__PURE__ */ h(K, {
+			e.transport === !1 ? null : /* @__PURE__ */ _("div", {
+				className: D.transportRow,
+				children: [/* @__PURE__ */ g(q, {
 					...e.transport ?? {
 						paused: !0,
 						loop: !1,
@@ -783,38 +796,38 @@ function ye(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: E.transportButton,
+					className: D.transportButton,
 					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
 					children: "Graph"
 				})]
 			}),
-			/* @__PURE__ */ g("div", {
-				className: E.body,
-				children: [/* @__PURE__ */ h("div", { className: E.gutter }), /* @__PURE__ */ h("div", {
-					className: E.rulerWrap,
-					children: /* @__PURE__ */ h(fe, {
-						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: E.lanes,
+			/* @__PURE__ */ g("div", {
+				className: D.lanes,
 				children: O.map((n) => {
 					let r = n.path;
-					return /* @__PURE__ */ h(le, {
+					return /* @__PURE__ */ g(ue, {
 						row: n,
-						window: x,
+						window: b,
 						mode: e.mode ?? "dope",
-						selection: w && J(w.trackPath, r) ? w.keyIndex : null,
+						selection: C && Y(C.trackPath, r) ? C.keyIndex : null,
 						expanded: u.has(n.key),
 						snapTimes: k,
 						onToggleExpand: () => A(n.key),
@@ -823,25 +836,25 @@ function ye(e) {
 							keyIndex: e
 						}),
 						onKeyInput: (e, n) => {
-							i?.(Z(t, {
+							i?.(Q(t, {
 								trackPath: r,
 								keyIndex: e
 							}, n).tracks);
 						},
 						onKeyCommit: (e, n) => {
-							let i = Z(t, {
+							let i = Q(t, {
 								trackPath: r,
 								keyIndex: e
 							}, n);
 							a(i.tracks), T(i.selection);
 						},
-						onKeysInput: (e) => i?.($(t, r, e)),
-						onKeysCommit: (e) => a($(t, r, e)),
+						onKeysInput: (e) => i?.(ye(t, r, e)),
+						onKeysCommit: (e) => a(ye(t, r, e)),
 						onInsert: (e) => {
-							let n = ge(t, r, e);
+							let n = _e(t, r, e);
 							a(n.tracks), T(n.selection);
 						},
-						selectedSegment: v && J(v.trackPath, r) ? v.keyIndex : null,
+						selectedSegment: v && Y(v.trackPath, r) ? v.keyIndex : null,
 						onSelectSegment: (e) => y({
 							trackPath: r,
 							keyIndex: e
@@ -849,21 +862,21 @@ function ye(e) {
 					}, n.key);
 				})
 			}),
-			s && w && N && M?.kind === "sampled" ? /* @__PURE__ */ h("div", {
-				className: E.inspector,
+			s && C && N && M?.kind === "sampled" ? /* @__PURE__ */ g("div", {
+				className: D.inspector,
 				children: s({
 					key: N,
 					track: M,
-					selection: w,
-					commit: (e) => a(ve(t, w, e.value)),
-					setEasing: (e) => a(Q(t, w, e))
+					selection: C,
+					commit: (e) => a(be(t, C, e.value)),
+					setEasing: (e) => a($(t, C, e))
 				})
 			}) : null,
-			v && I ? /* @__PURE__ */ h("div", {
-				className: E.inspector,
-				children: /* @__PURE__ */ h(F, {
-					value: I.easing,
-					onChange: (e) => a(Q(t, v, e))
+			v && F ? /* @__PURE__ */ g("div", {
+				className: D.inspector,
+				children: /* @__PURE__ */ g(I, {
+					value: F.easing,
+					onChange: (e) => a($(t, v, e))
 				})
 			}) : null
 		]
@@ -871,20 +884,20 @@ function ye(e) {
 }
 //#endregion
 //#region src/components/Timeline/AnimatedTimeline.tsx
-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(() => {
-		r(), t.isPaused() || i.current?.request();
-	});
-	i.current = a, v(() => (t.isPaused() || a.request(), () => a.cancel()), [t, a]);
-	let o = _((e) => {
+function Se(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(ye, {
+	return /* @__PURE__ */ g(xe, {
 		...n,
 		tracks: t.tracks(),
 		duration: c,
@@ -896,7 +909,7 @@ function be(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();
@@ -911,6 +924,6 @@ function be(e) {
 	});
 }
 //#endregion
-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 };
+export { I as a, A as c, q as i, j as l, xe as n, M as o, Y as r, k as s, Se as t };
 
-//# sourceMappingURL=Timeline-B39cwfMB.js.map
+//# sourceMappingURL=Timeline-sMCH2fah.js.map