@weasel-js/ui 1.4.4 → 1.5.0

package/dist/chunks/Timeline-DOZgb1CG.js

@@ -0,0 +1,915 @@
+import { H as e, R as t, i as n } from "./icons-BV27dhKB.js";
+import { r } from "./Plot2D-CVZwQpWJ.js";
+import { a as i, i as a, n as o, t as s } from "./createKeyframeLayer-AL4jP0EX.js";
+import { t as c } from "./DetentSlider-CYicfnKr.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { EASINGS as f, openPointerSession as p, resolveEasing as m, sampleTrack as h, useVisibleRaf as g } from "@weasel-js/core";
+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_1s0c6_1",
+	tick: "_tick_1s0c6_11",
+	playhead: "_playhead_1s0c6_29",
+	lane: "_lane_1s0c6_38",
+	laneLabel: "_laneLabel_1s0c6_45",
+	disclosure: "_disclosure_1s0c6_65",
+	disclosureIcon: "_disclosureIcon_1s0c6_66",
+	disclosureCollapsed: "_disclosureCollapsed_1s0c6_67",
+	laneTrack: "_laneTrack_1s0c6_69",
+	key: "_key_1s0c6_76",
+	eventMark: "_eventMark_1s0c6_76",
+	keyGhost: "_keyGhost_1s0c6_96",
+	eventGhost: "_eventGhost_1s0c6_96",
+	graphHost: "_graphHost_1s0c6_113",
+	graph: "_graph_1s0c6_113",
+	nestedBar: "_nestedBar_1s0c6_132",
+	transport: "_transport_1s0c6_141",
+	transportButton: "_transportButton_1s0c6_150",
+	transportRow: "_transportRow_1s0c6_176",
+	time: "_time_1s0c6_191",
+	rate: "_rate_1s0c6_192",
+	rateSlider: "_rateSlider_1s0c6_193",
+	rateReadout: "_rateReadout_1s0c6_197",
+	root: "_root_1s0c6_203",
+	label: "_label_1s0c6_218",
+	body: "_body_1s0c6_220",
+	gutter: "_gutter_1s0c6_46",
+	rulerWrap: "_rulerWrap_1s0c6_222",
+	lanes: "_lanes_1s0c6_224",
+	inspector: "_inspector_1s0c6_231",
+	segment: "_segment_1s0c6_240",
+	easingPicker: "_easingPicker_1s0c6_250",
+	easingLabel: "_easingLabel_1s0c6_251",
+	easingPreview: "_easingPreview_1s0c6_253"
+};
+//#endregion
+//#region src/components/Timeline/easingSpec.ts
+function T(e) {
+	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
+}
+function E(e) {
+	return e === void 0 ? null : T(e);
+}
+function D(e) {
+	if (e === void 0) return "linear";
+	if (typeof e == "string") return e;
+	let t = T(e);
+	if (t) return `cubic-bezier(${t.join(", ")})`;
+	for (let [t, n] of Object.entries(f)) if (n === e) return t;
+	return "custom";
+}
+function O(e, t) {
+	let n = m(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(f), A = 24, j = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	easeInQuad: [
+		.11,
+		0,
+		.5,
+		0
+	],
+	easeOutQuad: [
+		.5,
+		1,
+		.89,
+		1
+	],
+	easeInOutQuad: [
+		.45,
+		0,
+		.55,
+		1
+	],
+	easeInCubic: [
+		.32,
+		0,
+		.67,
+		0
+	],
+	easeOutCubic: [
+		.33,
+		1,
+		.68,
+		1
+	],
+	easeInOutCubic: [
+		.65,
+		0,
+		.35,
+		1
+	],
+	easeInSine: [
+		.12,
+		0,
+		.39,
+		0
+	],
+	easeOutSine: [
+		.61,
+		1,
+		.88,
+		1
+	],
+	easeInOutSine: [
+		.37,
+		0,
+		.63,
+		1
+	]
+}, M = [
+	.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 / (A - 1) * 100},${100 - e * 100}`).join(" ");
+	return /* @__PURE__ */ d("div", {
+		className: w.easingPicker,
+		children: [
+			/* @__PURE__ */ d("label", { children: ["Easing", /* @__PURE__ */ d("select", {
+				value: o,
+				onChange: (e) => n(e.target.value === "linear" ? void 0 : e.target.value),
+				children: [
+					/* @__PURE__ */ u("option", {
+						value: "linear",
+						children: "linear"
+					}),
+					k.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ u("option", {
+						value: e,
+						children: e
+					}, e)),
+					r === null ? null : /* @__PURE__ */ u("option", {
+						value: "custom",
+						children: "custom"
+					})
+				]
+			})] }),
+			r === null ? /* @__PURE__ */ u("button", {
+				type: "button",
+				className: w.transportButton,
+				onClick: () => n({ bezier: j[o] ?? M }),
+				children: "Convert to bezier"
+			}) : /* @__PURE__ */ u("span", {
+				className: w.easingLabel,
+				children: i
+			}),
+			/* @__PURE__ */ u("svg", {
+				className: w.easingPreview,
+				"data-testid": "easing-preview",
+				viewBox: "0 0 100 100",
+				preserveAspectRatio: "none",
+				children: /* @__PURE__ */ u("polyline", {
+					points: s,
+					vectorEffect: "non-scaling-stroke"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Timeline/timeScale.ts
+var P = 1;
+function F(e, t) {
+	let n = e.to - e.from, r = n === 0 ? 0 : t / n, i = t === 0 ? 0 : n / t;
+	return {
+		window: e,
+		widthPx: t,
+		toPx: (t) => (t - e.from) * r,
+		toMs: (t) => e.from + t * i
+	};
+}
+function I(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 R(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) {
+	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 ee(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({
+		from: t - s * o,
+		to: t + (1 - s) * o
+	}, r);
+}
+function te(e, t, n) {
+	return B({
+		from: e.from + t,
+		to: e.to + t
+	}, n);
+}
+function V(e, t, n) {
+	let i = e.to - e.from;
+	if (t <= 0 || i <= 0) return [];
+	let a = r(n / t * i), o = [];
+	for (let t = Math.ceil(e.from / a) * a; t <= e.to + 1e-9; t += a) o.push(Math.round(t / a) * a);
+	return o;
+}
+//#endregion
+//#region src/components/Timeline/lanes.ts
+function ne(e) {
+	if (e.kind !== "sampled") return !1;
+	let t = e.keys;
+	return t.length > 0 && t.every((e) => typeof e.value == "number");
+}
+function re(e, t) {
+	let n = [], r = (e, i, a, o) => {
+		e.forEach((e, s) => {
+			let c = [...i, s], l = c.join(".");
+			n.push({
+				key: l,
+				path: c,
+				track: e,
+				label: e.label ?? `${e.kind} ${s}`,
+				depth: a,
+				offset: o,
+				kind: e.kind,
+				numeric: ne(e)
+			}), e.kind === "timeline" && t.has(l) && r(e.timeline.tracks, c, a + 1, o + e.at);
+		});
+	};
+	return r(e, [], 0, 0), n;
+}
+function H(e, t) {
+	let n = e, r;
+	for (let e of t) {
+		if (r = n[e], !r) return;
+		n = r.kind === "timeline" ? r.timeline.tracks : [];
+	}
+	return r;
+}
+//#endregion
+//#region src/components/Timeline/keys.ts
+function U(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function W(e, t) {
+	return {
+		...e,
+		keys: t
+	};
+}
+function ie(e, t) {
+	return {
+		...e,
+		events: t
+	};
+}
+function G(e, t, n) {
+	let r = e.slice(), [i, ...a] = t;
+	if (a.length === 0) return r[i] = n, r;
+	let o = r[i];
+	if (o?.kind !== "timeline") return r;
+	let s = o;
+	return r[i] = {
+		...s,
+		timeline: {
+			...s.timeline,
+			tracks: G(s.timeline.tracks, a, n)
+		}
+	}, r;
+}
+function K(e, t, n) {
+	let r = H(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: G(e, t.trackPath, W(r, o)),
+			selection: {
+				trackPath: t.trackPath,
+				keyIndex: c
+			}
+		};
+	}
+	if (r?.kind === "event") {
+		let n = r, a = {
+			...n.events[t.keyIndex],
+			t: i
+		}, o = n.events.filter((e, n) => n !== t.keyIndex), s = o.findIndex((e) => e.t > i), c = s === -1 ? o.length : s;
+		return o.splice(c, 0, a), {
+			tracks: G(e, t.trackPath, ie(r, o)),
+			selection: {
+				trackPath: t.trackPath,
+				keyIndex: c
+			}
+		};
+	}
+	return {
+		tracks: e.slice(),
+		selection: t
+	};
+}
+function ae(e, t, n) {
+	let r = H(e, t);
+	if (r?.kind !== "sampled") return {
+		tracks: e.slice(),
+		selection: null
+	};
+	let i = r, a = Math.max(0, n), o = i.keys.length === 0 ? 0 : h(i, a), s = i.keys.slice(), c = s.findIndex((e) => e.t > a), l = c === -1 ? s.length : c;
+	return s.splice(l, 0, {
+		t: a,
+		value: o
+	}), {
+		tracks: G(e, t, W(r, s)),
+		selection: {
+			trackPath: t,
+			keyIndex: l
+		}
+	};
+}
+function oe(e, t) {
+	let n = H(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: G(e, t.trackPath, W(n, r)),
+		selection: r.length === 0 ? null : {
+			trackPath: t.trackPath,
+			keyIndex: Math.max(0, t.keyIndex - 1)
+		}
+	};
+}
+function q(e, t, n) {
+	let r = H(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
+	}, G(e, t.trackPath, W(r, i));
+}
+function J(e, t, n) {
+	let r = H(e, t);
+	return r?.kind === "sampled" ? G(e, t, W(r, n.slice())) : e.slice();
+}
+function se(e, t, n) {
+	let r = H(e, t.trackPath);
+	if (r?.kind !== "sampled") return e.slice();
+	let i = r.keys.slice();
+	return i[t.keyIndex] = {
+		...i[t.keyIndex],
+		value: n
+	}, G(e, t.trackPath, W(r, i));
+}
+//#endregion
+//#region src/components/Timeline/LaneGraph.tsx
+var Y = 8, ce = 10;
+function le(e) {
+	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * Y / (100 - 2 * Y);
+	return [n - i, n + r + i];
+}
+function ue(e) {
+	let { keys: t, label: n, window: r, offset: a, snapTimes: c, selection: l, selectedSegment: d, onSelect: f, onSelectSegment: p, onKeysInput: m, onKeysCommit: h } = e, g = S(null), [_, v] = C({
+		width: 0,
+		height: 0
+	});
+	y(() => {
+		let e = g.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.getBoundingClientRect();
+			v((e) => e.width === t.width && e.height === t.height ? e : {
+				width: t.width,
+				height: t.height
+			});
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let x = b(() => o({
+		id: "keys",
+		label: n,
+		formatX: (e) => `${Math.round(e)} ms`,
+		snapX: c.map((e) => e - a),
+		xClamp: [0, Infinity],
+		step: { x: ce }
+	}), [
+		n,
+		c,
+		a
+	]), T = b(() => ({
+		keys: t,
+		selectedKey: l,
+		selectedSegment: d,
+		drag: null
+	}), [
+		t,
+		l,
+		d
+	]), [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;
+		if (n.selectedKey !== null && n.selectedKey !== r.selectedKey && f(n.selectedKey), n.selectedSegment !== null && n.selectedSegment !== r.selectedSegment && p?.(n.selectedSegment), !n.drag) {
+			D(null);
+			return;
+		}
+		if (D(n), n.drag.kind !== "key") return;
+		let i = s(n).keys;
+		i !== n.keys && m?.(i);
+	}, M = (e, t, n) => {
+		D(null);
+		let r = t;
+		r.keys !== n.keys && h(r.keys);
+	}, [N, P] = le(O.keys), F = _.width > 0 ? V(r, _.width, 64) : [];
+	return /* @__PURE__ */ u("div", {
+		ref: g,
+		className: w.graphHost,
+		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ u(i, {
+			className: w.graph,
+			"aria-label": `${n} graph`,
+			layers: A,
+			onLayerChange: j,
+			onLayerCommit: M,
+			width: _.width,
+			height: _.height,
+			xRange: [r.from - a, r.to - a],
+			yRange: [N, P],
+			grid: !1,
+			axes: !1,
+			xTicks: {
+				values: F.map((e) => e - a),
+				labels: !1
+			},
+			yTicks: {
+				labels: "outside",
+				gap: 10
+			},
+			history: !1
+		}) : null
+	});
+}
+//#endregion
+//#region src/components/Timeline/Lane.tsx
+var de = 6, fe = 10;
+function pe(e) {
+	return e.kind === "sampled" ? e.track.keys.map((e) => e.t) : e.kind === "event" ? e.track.events.map((e) => e.t) : [];
+}
+function me(e) {
+	let { row: t, window: r, mode: i, selection: o, onSelect: s, onKeyInput: c, onKeyCommit: f, onInsert: m, onToggleExpand: h, expanded: g, snapTimes: _, selectedSegment: y = null, onSelectSegment: b, onKeysInput: x, onKeysCommit: T } = e, E = 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;
+	}, M = () => {
+		let e = F(r, E.current?.getBoundingClientRect().width ?? 0);
+		return e.toMs(de) - e.toMs(0);
+	}, N = i === "graph" && t.numeric, P = t.kind === "sampled" ? t.track.keys : [], I = (e) => (n) => {
+		if (n.button !== 0) return;
+		n.stopPropagation(), s(e);
+		let r = (e) => {
+			let n = Math.max(0, j(e.clientX));
+			return e.altKey ? n : a(n + t.offset, _, M()) - t.offset;
+		};
+		k({
+			keyIndex: e,
+			t: B[e]
+		});
+		let i = () => {
+			k(null), D.current = null;
+		};
+		D.current?.cancel(), D.current = p(n.currentTarget, n, {
+			onMove: (t) => {
+				k({
+					keyIndex: e,
+					t: r(t)
+				}), c(e, r(t));
+			},
+			onEnd: (t) => {
+				f(e, r(t)), i();
+			},
+			onCancel: i
+		}, { capture: !1 });
+	}, R = (e, t) => (n) => {
+		let r = fe * (n.shiftKey ? 10 : 1);
+		n.key === "ArrowRight" && (n.preventDefault(), f(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), f(e, Math.max(0, t - r)));
+	}, B = pe(t);
+	return /* @__PURE__ */ d("div", {
+		className: w.lane,
+		"data-depth": t.depth,
+		"data-mode": i,
+		"data-graph": N ? "true" : void 0,
+		children: [/* @__PURE__ */ d("div", {
+			className: w.laneLabel,
+			children: [t.kind === "timeline" ? /* @__PURE__ */ u("span", {
+				role: "button",
+				tabIndex: 0,
+				"aria-expanded": g,
+				"data-testid": "timeline-disclosure",
+				className: w.disclosure,
+				onClick: h,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
+				},
+				children: /* @__PURE__ */ u(n, {
+					size: 14,
+					className: [w.disclosureIcon, !g && w.disclosureCollapsed].filter(Boolean).join(" ")
+				})
+			}) : null, t.label]
+		}), /* @__PURE__ */ u("div", {
+			className: w.laneTrack,
+			ref: E,
+			"data-testid": "timeline-lane-track",
+			onDoubleClick: (e) => {
+				t.kind === "sampled" && m(Math.max(0, j(e.clientX)));
+			},
+			children: N ? /* @__PURE__ */ u(ue, {
+				keys: P,
+				label: t.label,
+				window: r,
+				offset: t.offset,
+				snapTimes: _,
+				selection: o,
+				selectedSegment: y,
+				onSelect: s,
+				onSelectSegment: b,
+				onKeysInput: x,
+				onKeysCommit: (e) => T?.(e)
+			}) : /* @__PURE__ */ d(l, { children: [
+				t.kind === "timeline" ? /* @__PURE__ */ u("div", {
+					className: w.nestedBar,
+					"data-testid": "timeline-nested",
+					style: {
+						left: A(0),
+						width: z(r, t.track.timeline.duration ?? 0)
+					}
+				}) : null,
+				t.kind === "sampled" ? P.slice(1).map((e, n) => {
+					let i = n + 1;
+					return /* @__PURE__ */ u("div", {
+						role: "button",
+						tabIndex: 0,
+						"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,
+						style: {
+							left: A(P[i - 1].t),
+							width: z(r, e.t - P[i - 1].t)
+						},
+						onClick: () => b?.(i),
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), b?.(i));
+						}
+					}, `seg-${i}`);
+				}) : null,
+				B.map((e, n) => /* @__PURE__ */ u("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `${t.label} key at ${Math.round(e)} ms`,
+					"aria-current": o === 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,
+					style: { left: A(e) },
+					onPointerDown: I(n),
+					onKeyDown: R(n, e)
+				}, n)),
+				O ? /* @__PURE__ */ u("div", {
+					"aria-hidden": "true",
+					"data-testid": "timeline-key-ghost",
+					className: t.kind === "event" ? w.eventGhost : w.keyGhost,
+					style: { left: A(O.t) }
+				}) : null
+			] })
+		})]
+	});
+}
+//#endregion
+//#region src/components/Timeline/Ruler.tsx
+var he = .0015;
+function ge(e) {
+	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
+}
+function _e(e) {
+	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: a } = e, o = S(null), s = S(null);
+	v(() => () => {
+		s.current?.cancel();
+	}, []);
+	let [c, l] = C(0);
+	y(() => {
+		let e = o.current;
+		if (!e) return;
+		let t = () => l(e.getBoundingClientRect().width);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let f = () => o.current?.getBoundingClientRect().width ?? 0, m = (e) => {
+		let n = o.current?.getBoundingClientRect();
+		if (!n) return t.from;
+		let r = F(t, n.width).toMs(e - n.left);
+		return Math.min(t.to, Math.max(t.from, r));
+	}, h = (e) => {
+		if (e.button !== 0) return;
+		i(m(e.clientX)), s.current?.cancel();
+		let t = () => {
+			s.current = null;
+		};
+		s.current = p(e.currentTarget, e, {
+			onMove: (e) => {
+				i(m(e.clientX));
+			},
+			onEnd: t,
+			onCancel: t
+		}, { capture: !1 });
+	}, g = (e) => {
+		if (e.ctrlKey) a(ee(t, m(e.clientX), Math.exp(e.deltaY * he), n));
+		else {
+			let r = f(), i = r === 0 ? 0 : (t.to - t.from) / r;
+			a(te(t, e.deltaY * i, n));
+		}
+	}, _ = V(t, c, 64), b = (e) => L(t, e);
+	return /* @__PURE__ */ d("div", {
+		className: w.ruler,
+		ref: o,
+		"data-testid": "timeline-ruler",
+		onPointerDown: h,
+		onWheel: g,
+		children: [_.map((e) => /* @__PURE__ */ u("span", {
+			className: w.tick,
+			"data-testid": "timeline-tick",
+			style: { left: b(e) },
+			children: ge(e)
+		}, e)), /* @__PURE__ */ u("div", {
+			className: w.playhead,
+			"data-testid": "timeline-playhead",
+			style: { left: b(r) }
+		})]
+	});
+}
+//#endregion
+//#region src/components/Timeline/Transport.tsx
+var X = [
+	.25,
+	.5,
+	1,
+	2,
+	4
+], Z = (e) => `${(e / 1e3).toFixed(2)}s`;
+function Q(n) {
+	let { paused: r, loop: i, rate: a, playhead: o, duration: s, onPlay: l, onPause: f, onLoopChange: p, onRateChange: m } = n, h = i !== !1 && i !== 0, g = X.includes(a) ? X : [...X, a].sort((e, t) => e - t);
+	return /* @__PURE__ */ d("div", {
+		className: w.transport,
+		children: [
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				className: w.transportButton,
+				"aria-label": r ? "Play" : "Pause",
+				onClick: r ? l : f,
+				children: u(r ? e : t, { size: 14 })
+			}),
+			/* @__PURE__ */ d("span", {
+				className: w.time,
+				"data-testid": "timeline-time",
+				children: [
+					Z(o),
+					" / ",
+					Z(s)
+				]
+			}),
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": h,
+				"aria-label": "Loop",
+				className: w.transportButton,
+				onClick: () => p(!h),
+				children: "⟲"
+			}),
+			/* @__PURE__ */ d("div", {
+				className: w.rate,
+				children: [
+					"Rate",
+					/* @__PURE__ */ u(c, {
+						ariaLabel: "Rate",
+						items: g,
+						value: a,
+						onChange: m,
+						formatLabel: (e) => `${e}x`,
+						labels: "none",
+						className: w.rateSlider
+					}),
+					/* @__PURE__ */ d("span", {
+						className: w.rateReadout,
+						children: [a, "x"]
+					})
+				]
+			})
+		]
+	});
+}
+//#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, [f, p] = C(() => /* @__PURE__ */ new Set()), [m, h] = C({
+		from: 0,
+		to: n
+	}), [g, _] = C(null), [v, y] = C(null), x = e.window ?? m, S = e.onWindowChange ?? h, T = e.selection === void 0 ? g : e.selection, E = e.onSelect ?? _, D = {
+		from: 0,
+		to: n
+	}, O = b(() => re(t, f), [t, f]), k = b(() => {
+		let e = 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];
+	}, [O, n]), A = (e) => {
+		p((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, j = (e) => {
+		if ((e.key === "Delete" || e.key === "Backspace") && T) {
+			e.preventDefault();
+			let n = oe(t, T);
+			a(n.tracks), E(n.selection);
+		}
+	}, M = T ? H(t, T.trackPath) : void 0, P = M?.kind === "sampled" ? M.keys[T.keyIndex] : void 0, F = v ? H(t, v.trackPath) : void 0, I = F?.kind === "sampled" ? F.keys[v.keyIndex] : void 0;
+	return /* @__PURE__ */ d("div", {
+		className: [w.root, l].filter(Boolean).join(" "),
+		"data-testid": "timeline-root",
+		tabIndex: -1,
+		onKeyDown: j,
+		children: [
+			c ? /* @__PURE__ */ u("div", {
+				className: w.label,
+				children: c
+			}) : null,
+			e.transport === !1 ? null : /* @__PURE__ */ d("div", {
+				className: w.transportRow,
+				children: [/* @__PURE__ */ u(Q, {
+					...e.transport ?? {
+						paused: !0,
+						loop: !1,
+						rate: 1,
+						onPlay: () => {},
+						onPause: () => {},
+						onLoopChange: () => {},
+						onRateChange: () => {}
+					},
+					playhead: r,
+					duration: n
+				}), /* @__PURE__ */ u("button", {
+					type: "button",
+					role: "switch",
+					"aria-checked": (e.mode ?? "dope") === "graph",
+					"aria-label": "Graph mode",
+					className: w.transportButton,
+					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
+					children: "Graph"
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: w.body,
+				children: [/* @__PURE__ */ u("div", { className: w.gutter }), /* @__PURE__ */ u("div", {
+					className: w.rulerWrap,
+					children: /* @__PURE__ */ u(_e, {
+						window: x,
+						bounds: D,
+						playhead: r,
+						onScrub: o,
+						onWindowChange: S
+					})
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: w.lanes,
+				children: O.map((n) => {
+					let r = n.path;
+					return /* @__PURE__ */ u(me, {
+						row: n,
+						window: x,
+						mode: e.mode ?? "dope",
+						selection: T && U(T.trackPath, r) ? T.keyIndex : null,
+						expanded: f.has(n.key),
+						snapTimes: k,
+						onToggleExpand: () => A(n.key),
+						onSelect: (e) => E({
+							trackPath: r,
+							keyIndex: e
+						}),
+						onKeyInput: (e, n) => {
+							i?.(K(t, {
+								trackPath: r,
+								keyIndex: e
+							}, n).tracks);
+						},
+						onKeyCommit: (e, n) => {
+							let i = K(t, {
+								trackPath: r,
+								keyIndex: e
+							}, n);
+							a(i.tracks), E(i.selection);
+						},
+						onKeysInput: (e) => i?.(J(t, r, e)),
+						onKeysCommit: (e) => a(J(t, r, e)),
+						onInsert: (e) => {
+							let n = ae(t, r, e);
+							a(n.tracks), E(n.selection);
+						},
+						selectedSegment: v && U(v.trackPath, r) ? v.keyIndex : null,
+						onSelectSegment: (e) => y({
+							trackPath: r,
+							keyIndex: e
+						})
+					}, n.key);
+				})
+			}),
+			s && T && P && M?.kind === "sampled" ? /* @__PURE__ */ u("div", {
+				className: w.inspector,
+				children: s({
+					key: P,
+					track: M,
+					selection: T,
+					commit: (e) => a(se(t, T, e.value)),
+					setEasing: (e) => a(q(t, T, e))
+				})
+			}) : null,
+			v && I ? /* @__PURE__ */ u("div", {
+				className: w.inspector,
+				children: /* @__PURE__ */ u(N, {
+					value: I.easing,
+					onChange: (e) => a(q(t, v, e))
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/Timeline/AnimatedTimeline.tsx
+function ve(e) {
+	let { handle: t, ...n } = e, [, r] = x((e) => e + 1, 0);
+	v(() => t.subscribe(r), [t]);
+	let i = S(null), a = g(() => {
+		r(), t.isPaused() || i.current?.request();
+	});
+	i.current = a, v(() => (t.isPaused() || a.request(), () => a.cancel()), [t, a]);
+	let o = _((e) => {
+		t.edit(() => {
+			let n = t.tracks();
+			n.splice(0, n.length, ...e);
+		});
+	}, [t]), s = t.time(), c = t.duration();
+	return /* @__PURE__ */ u($, {
+		...n,
+		tracks: t.tracks(),
+		duration: c,
+		playhead: s,
+		onChange: o,
+		onScrub: t.seek,
+		transport: e.transport === !1 ? !1 : {
+			paused: t.isPaused(),
+			loop: t.loop(),
+			rate: t.timeScale(),
+			onPlay: () => {
+				t.time() >= c && t.seek(0), t.resume(), a.request(), r();
+			},
+			onPause: () => {
+				t.pause(), r();
+			},
+			onLoopChange: (e) => {
+				t.setLoop(e), r();
+			},
+			onRateChange: (e) => {
+				t.setTimeScale(e), r();
+			}
+		}
+	});
+}
+//#endregion
+export { N as a, D as c, U as i, O as l, $ as n, k as o, Q as r, E as s, ve as t };
+
+//# sourceMappingURL=Timeline-DOZgb1CG.js.map