@weasel-js/ui 1.3.0 → 1.4.0-pre.1

package/dist/chunks/Timeline-DsLeV5I1.js

@@ -0,0 +1,894 @@
+import { I as e, M as t, i as n } from "./icons-CdLHgzV8.js";
+import { t as r } from "./DetentSlider-CXIeTHaM.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { EASINGS as s, cubicBezierEasing as c, resolveEasing as l, sampleTrack as u, useVisibleRaf as d } from "@weasel-js/core";
+import { useCallback as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
+var y = {
+	ruler: "_ruler_1qsom_1",
+	tick: "_tick_1qsom_11",
+	playhead: "_playhead_1qsom_29",
+	lane: "_lane_1qsom_38",
+	laneLabel: "_laneLabel_1qsom_45",
+	disclosure: "_disclosure_1qsom_63",
+	disclosureIcon: "_disclosureIcon_1qsom_64",
+	disclosureCollapsed: "_disclosureCollapsed_1qsom_65",
+	laneTrack: "_laneTrack_1qsom_67",
+	key: "_key_1qsom_74",
+	eventMark: "_eventMark_1qsom_74",
+	keyGhost: "_keyGhost_1qsom_94",
+	eventGhost: "_eventGhost_1qsom_94",
+	curve: "_curve_1qsom_109",
+	nestedBar: "_nestedBar_1qsom_123",
+	transport: "_transport_1qsom_132",
+	transportButton: "_transportButton_1qsom_141",
+	transportRow: "_transportRow_1qsom_167",
+	time: "_time_1qsom_182",
+	rate: "_rate_1qsom_183",
+	rateSlider: "_rateSlider_1qsom_184",
+	rateReadout: "_rateReadout_1qsom_188",
+	root: "_root_1qsom_194",
+	label: "_label_1qsom_209",
+	body: "_body_1qsom_211",
+	gutter: "_gutter_1qsom_212",
+	rulerWrap: "_rulerWrap_1qsom_213",
+	lanes: "_lanes_1qsom_215",
+	inspector: "_inspector_1qsom_222",
+	segment: "_segment_1qsom_231",
+	easingPicker: "_easingPicker_1qsom_241",
+	easingLabel: "_easingLabel_1qsom_242",
+	easingPreview: "_easingPreview_1qsom_244",
+	bezierHandle: "_bezierHandle_1qsom_253"
+};
+//#endregion
+//#region src/components/Timeline/easingSpec.ts
+function b(e) {
+	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
+}
+function x(e) {
+	return e === void 0 ? null : b(e);
+}
+function S(e) {
+	if (e === void 0) return "linear";
+	if (typeof e == "string") return e;
+	let t = b(e);
+	if (t) return `cubic-bezier(${t.join(", ")})`;
+	for (let [t, n] of Object.entries(s)) if (n === e) return t;
+	return "custom";
+}
+function C(e, t) {
+	let n = l(e), r = Array(t), i = t - 1;
+	for (let e = 0; e < t; e++) r[e] = n(i === 0 ? 0 : e / i);
+	return r;
+}
+var w = Object.keys(s), T = 24, E = {
+	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
+	]
+}, D = [
+	.25,
+	.1,
+	.25,
+	1
+];
+function O(e) {
+	let { value: t, onChange: n } = e, r = x(t), i = S(t), s = r === null && w.includes(i), c = r === null ? s ? i : "linear" : "custom", l = C(t, T).map((e, t) => `${t / (T - 1) * 100},${100 - e * 100}`).join(" ");
+	return /* @__PURE__ */ o("div", {
+		className: y.easingPicker,
+		children: [
+			/* @__PURE__ */ o("label", { children: ["Easing", /* @__PURE__ */ o("select", {
+				value: c,
+				onChange: (e) => n(e.target.value === "linear" ? void 0 : e.target.value),
+				children: [
+					/* @__PURE__ */ a("option", {
+						value: "linear",
+						children: "linear"
+					}),
+					w.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ a("option", {
+						value: e,
+						children: e
+					}, e)),
+					r === null ? null : /* @__PURE__ */ a("option", {
+						value: "custom",
+						children: "custom"
+					})
+				]
+			})] }),
+			r === null ? /* @__PURE__ */ a("button", {
+				type: "button",
+				className: y.transportButton,
+				onClick: () => n({ bezier: E[c] ?? D }),
+				children: "Convert to bezier"
+			}) : /* @__PURE__ */ a("span", {
+				className: y.easingLabel,
+				children: i
+			}),
+			/* @__PURE__ */ a("svg", {
+				className: y.easingPreview,
+				"data-testid": "easing-preview",
+				viewBox: "0 0 100 100",
+				preserveAspectRatio: "none",
+				children: /* @__PURE__ */ a("polyline", {
+					points: l,
+					vectorEffect: "non-scaling-stroke"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Timeline/timeScale.ts
+var k = 1;
+function A(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 j(e, t) {
+	let n = e.to - e.from;
+	return n === 0 ? 0 : (t - e.from) / n;
+}
+function M(e, t) {
+	return `${j(e, t) * 100}%`;
+}
+function N(e, t) {
+	let n = e.to - e.from;
+	return n === 0 ? 0 : t / n;
+}
+function P(e, t) {
+	return `${N(e, t) * 100}%`;
+}
+function F(e, t) {
+	let n = Math.min(e.to - e.from, t.to - t.from), r = e.from;
+	return r < t.from && (r = t.from), r + n > t.to && (r = t.to - n), {
+		from: r,
+		to: r + n
+	};
+}
+function I(e, t, n, r) {
+	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(k, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
+	return F({
+		from: t - s * o,
+		to: t + (1 - s) * o
+	}, r);
+}
+function L(e, t, n) {
+	return F({
+		from: e.from + t,
+		to: e.to + t
+	}, n);
+}
+function R(e) {
+	let t = 10 ** Math.floor(Math.log10(e)), n = e / t;
+	return (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * t;
+}
+function z(e, t, n) {
+	let r = e.to - e.from;
+	if (t <= 0 || r <= 0) return [];
+	let i = R(n / t * r), a = [];
+	for (let t = Math.ceil(e.from / i) * i; t <= e.to + 1e-9; t += i) a.push(Math.round(t / i) * i);
+	return a;
+}
+//#endregion
+//#region src/components/Timeline/lanes.ts
+function B(e) {
+	if (e.kind !== "sampled") return !1;
+	let t = e.keys;
+	return t.length > 0 && t.every((e) => typeof e.value == "number");
+}
+function V(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: B(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 ee(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, ee(r, o)),
+			selection: {
+				trackPath: t.trackPath,
+				keyIndex: c
+			}
+		};
+	}
+	return {
+		tracks: e.slice(),
+		selection: t
+	};
+}
+function q(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 : u(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 J(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 Y(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 X(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));
+}
+function te(e, t, n) {
+	let r = e, i = n;
+	for (let n of t) {
+		let t = Math.abs(n - e);
+		t <= i && (r = n, i = t);
+	}
+	return r;
+}
+//#endregion
+//#region src/components/Timeline/Lane.tsx
+var Z = 8, ne = 6, re = 10, ie = 16;
+function ae(e, t) {
+	let n = c(...e), r = Array(t), i = t - 1;
+	for (let e = 0; e < t; e++) r[e] = n(i === 0 ? 0 : e / i);
+	return r;
+}
+function oe(e) {
+	return e.kind === "sampled" ? e.track.keys.map((e) => e.t) : e.kind === "event" ? e.track.events.map((e) => e.t) : [];
+}
+function Q(e) {
+	let { row: t, window: r, mode: s, selection: c, onSelect: l, onKeyInput: u, onKeyCommit: d, onInsert: f, onToggleExpand: m, expanded: h, snapTimes: g, selectedSegment: b = null, onSelectSegment: S, onEasingCommit: w } = e, T = _(null), E = _(null);
+	p(() => () => {
+		E.current?.();
+	}, []);
+	let [D, O] = v(null), [k, N] = v(null), F = (e) => M(r, e + t.offset), I = (e) => {
+		let n = T.current?.getBoundingClientRect();
+		return n ? A(r, n.width).toMs(e - n.left) - t.offset : r.from;
+	}, L = () => {
+		let e = A(r, T.current?.getBoundingClientRect().width ?? 0);
+		return e.toMs(ne) - e.toMs(0);
+	}, R = s === "graph" && t.numeric, z = t.kind === "sampled" ? t.track.keys : [], B = z.map((e) => e.value), V = R ? Math.min(...B) : 0, H = (R ? Math.max(...B) : 1) - V || 1, U = (e) => Z + (e - V) / H * (100 - 2 * Z), W = (e) => {
+		let t = T.current?.getBoundingClientRect();
+		if (!t || t.height === 0) return V;
+		let n = ((1 - (e - t.top) / t.height) * 100 - Z) / (100 - 2 * Z);
+		return V + Math.min(1, Math.max(0, n)) * H;
+	}, ee = () => {
+		let e = [];
+		for (let n = 1; n < z.length; n++) {
+			let i = z[n - 1], a = z[n], o = D && D.keyIndex === n ? ae(D.points, ie) : C(a.easing, ie);
+			for (let n = 0; n < o.length; n++) {
+				let s = i.t + (a.t - i.t) * n / (o.length - 1), c = i.value + (a.value - i.value) * o[n];
+				e.push(`${j(r, s + t.offset) * 100},${100 - U(c)}`);
+			}
+		}
+		return e.join(" ");
+	}, G = b != null && t.kind === "sampled" ? x(z[b]?.easing) : null, K = D && D.keyIndex === b ? D.points : G, q = (e, t, n) => {
+		let r = z[e - 1], i = z[e], a = r.t + t * (i.t - r.t), o = r.value + n * (i.value - r.value);
+		return {
+			left: F(a),
+			bottom: `${U(o)}%`
+		};
+	}, J = (e, t) => (n) => {
+		if (n.button !== 0 || !G) return;
+		n.stopPropagation();
+		let r = z[e - 1], i = z[e], a = [...G], o = (e) => {
+			let n = I(e.clientX), o = i.t === r.t ? 0 : Math.min(1, Math.max(0, (n - r.t) / (i.t - r.t))), s = W(e.clientY), c = i.value === r.value ? 0 : (s - r.value) / (i.value - r.value), l = [...a];
+			return l[t * 2] = o, l[t * 2 + 1] = c, l;
+		}, s = (t) => {
+			a = o(t), O({
+				keyIndex: e,
+				points: a
+			});
+		}, c = (t) => {
+			a = o(t), w?.(e, { bezier: a }), l();
+		}, l = () => {
+			O(null), document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", c), document.removeEventListener("pointercancel", l), E.current = null;
+		};
+		document.addEventListener("pointermove", s), document.addEventListener("pointerup", c), document.addEventListener("pointercancel", l), E.current = l;
+	}, Y = (e) => (n) => {
+		if (n.button !== 0) return;
+		n.stopPropagation(), l(e);
+		let r = (e) => {
+			let n = Math.max(0, I(e.clientX));
+			return e.altKey ? n : te(n + t.offset, g, L()) - t.offset;
+		}, i = (e) => R ? W(e.clientY) : void 0;
+		N({
+			keyIndex: e,
+			t: Q[e],
+			value: B[e]
+		});
+		let a = (t) => {
+			let n = i(t);
+			N({
+				keyIndex: e,
+				t: r(t),
+				value: n ?? B[e]
+			}), n === void 0 ? u(e, r(t)) : u(e, r(t), n);
+		}, o = (t) => {
+			let n = i(t);
+			n === void 0 ? d(e, r(t)) : d(e, r(t), n), s();
+		}, s = () => {
+			N(null), document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", o), document.removeEventListener("pointercancel", s), E.current = null;
+		};
+		document.addEventListener("pointermove", a), document.addEventListener("pointerup", o), document.addEventListener("pointercancel", s), E.current = s;
+	}, X = (e, t) => (n) => {
+		let r = re * (n.shiftKey ? 10 : 1);
+		n.key === "ArrowRight" && (n.preventDefault(), d(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), d(e, Math.max(0, t - r)));
+	}, Q = oe(t);
+	return /* @__PURE__ */ o("div", {
+		className: y.lane,
+		"data-depth": t.depth,
+		"data-mode": s,
+		children: [/* @__PURE__ */ o("div", {
+			className: y.laneLabel,
+			children: [t.kind === "timeline" ? /* @__PURE__ */ a("span", {
+				role: "button",
+				tabIndex: 0,
+				"aria-expanded": h,
+				"data-testid": "timeline-disclosure",
+				className: y.disclosure,
+				onClick: m,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+				},
+				children: /* @__PURE__ */ a(n, {
+					size: 14,
+					className: [y.disclosureIcon, !h && y.disclosureCollapsed].filter(Boolean).join(" ")
+				})
+			}) : null, t.label]
+		}), /* @__PURE__ */ o("div", {
+			className: y.laneTrack,
+			ref: T,
+			"data-testid": "timeline-lane-track",
+			onDoubleClick: (e) => {
+				t.kind === "sampled" && f(Math.max(0, I(e.clientX)));
+			},
+			children: [
+				t.kind === "timeline" ? /* @__PURE__ */ a("div", {
+					className: y.nestedBar,
+					"data-testid": "timeline-nested",
+					style: {
+						left: F(0),
+						width: P(r, t.track.timeline.duration ?? 0)
+					}
+				}) : null,
+				t.kind === "sampled" ? z.slice(1).map((e, n) => {
+					let i = n + 1;
+					return /* @__PURE__ */ a("div", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": `${t.label} segment into ${Math.round(e.t)} ms`,
+						"aria-current": b === i ? "true" : void 0,
+						"data-testid": "timeline-segment",
+						className: y.segment,
+						style: {
+							left: F(z[i - 1].t),
+							width: P(r, e.t - z[i - 1].t)
+						},
+						onClick: () => S?.(i),
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), S?.(i));
+						}
+					}, `seg-${i}`);
+				}) : null,
+				R && z.length > 1 ? /* @__PURE__ */ a("svg", {
+					className: y.curve,
+					"data-testid": "timeline-curve",
+					viewBox: "0 0 100 100",
+					preserveAspectRatio: "none",
+					children: /* @__PURE__ */ a("polyline", {
+						points: ee(),
+						vectorEffect: "non-scaling-stroke"
+					})
+				}) : null,
+				Q.map((e, n) => /* @__PURE__ */ a("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `${t.label} key at ${Math.round(e)} ms`,
+					"aria-current": c === n ? "true" : void 0,
+					"data-testid": t.kind === "event" ? "timeline-event" : "timeline-key",
+					"data-dragging": k?.keyIndex === n ? "true" : void 0,
+					className: t.kind === "event" ? y.eventMark : y.key,
+					style: R ? {
+						left: F(e),
+						bottom: `${U(B[n])}%`
+					} : { left: F(e) },
+					onPointerDown: Y(n),
+					onKeyDown: X(n, e)
+				}, n)),
+				k ? /* @__PURE__ */ a("div", {
+					"aria-hidden": "true",
+					"data-testid": "timeline-key-ghost",
+					className: t.kind === "event" ? y.eventGhost : y.keyGhost,
+					style: R && k.value !== void 0 ? {
+						left: F(k.t),
+						bottom: `${U(k.value)}%`
+					} : { left: F(k.t) }
+				}) : null,
+				R && K && b != null ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `${t.label} bezier handle 1`,
+					"data-testid": "timeline-bezier-handle",
+					className: y.bezierHandle,
+					style: q(b, K[0], K[1]),
+					onPointerDown: J(b, 0)
+				}), /* @__PURE__ */ a("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": `${t.label} bezier handle 2`,
+					"data-testid": "timeline-bezier-handle",
+					className: y.bezierHandle,
+					style: q(b, K[2], K[3]),
+					onPointerDown: J(b, 1)
+				})] }) : null
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/Timeline/Ruler.tsx
+var se = 64, ce = .0015;
+function le(e) {
+	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
+}
+function ue(e) {
+	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: s } = e, c = _(null), l = _(null);
+	p(() => () => {
+		l.current?.();
+	}, []);
+	let [u, d] = v(0);
+	m(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = () => d(e.getBoundingClientRect().width);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let f = () => c.current?.getBoundingClientRect().width ?? 0, h = (e) => {
+		let n = c.current?.getBoundingClientRect();
+		if (!n) return t.from;
+		let r = A(t, n.width).toMs(e - n.left);
+		return Math.min(t.to, Math.max(t.from, r));
+	}, g = (e) => {
+		if (e.button !== 0) return;
+		i(h(e.clientX));
+		let t = (e) => {
+			i(h(e.clientX));
+		}, n = () => {
+			document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", n), document.removeEventListener("pointercancel", n), l.current = null;
+		};
+		document.addEventListener("pointermove", t), document.addEventListener("pointerup", n), document.addEventListener("pointercancel", n), l.current = n;
+	}, b = (e) => {
+		if (e.ctrlKey) s(I(t, h(e.clientX), Math.exp(e.deltaY * ce), n));
+		else {
+			let r = f(), i = r === 0 ? 0 : (t.to - t.from) / r;
+			s(L(t, e.deltaY * i, n));
+		}
+	}, x = z(t, u, se), S = (e) => M(t, e);
+	return /* @__PURE__ */ o("div", {
+		className: y.ruler,
+		ref: c,
+		"data-testid": "timeline-ruler",
+		onPointerDown: g,
+		onWheel: b,
+		children: [x.map((e) => /* @__PURE__ */ a("span", {
+			className: y.tick,
+			"data-testid": "timeline-tick",
+			style: { left: S(e) },
+			children: le(e)
+		}, e)), /* @__PURE__ */ a("div", {
+			className: y.playhead,
+			"data-testid": "timeline-playhead",
+			style: { left: S(r) }
+		})]
+	});
+}
+//#endregion
+//#region src/components/Timeline/Transport.tsx
+var $ = [
+	.25,
+	.5,
+	1,
+	2,
+	4
+], de = (e) => `${(e / 1e3).toFixed(2)}s`;
+function fe(n) {
+	let { paused: i, loop: s, rate: c, playhead: l, duration: u, onPlay: d, onPause: f, onLoopChange: p, onRateChange: m } = n, h = s !== !1 && s !== 0, g = $.includes(c) ? $ : [...$, c].sort((e, t) => e - t);
+	return /* @__PURE__ */ o("div", {
+		className: y.transport,
+		children: [
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				className: y.transportButton,
+				"aria-label": i ? "Play" : "Pause",
+				onClick: i ? d : f,
+				children: a(i ? e : t, { size: 14 })
+			}),
+			/* @__PURE__ */ o("span", {
+				className: y.time,
+				"data-testid": "timeline-time",
+				children: [
+					de(l),
+					" / ",
+					de(u)
+				]
+			}),
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": h,
+				"aria-label": "Loop",
+				className: y.transportButton,
+				onClick: () => p(!h),
+				children: "⟲"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: y.rate,
+				children: [
+					"Rate",
+					/* @__PURE__ */ a(r, {
+						ariaLabel: "Rate",
+						items: g,
+						value: c,
+						onChange: m,
+						formatLabel: (e) => `${e}x`,
+						labels: "none",
+						className: y.rateSlider
+					}),
+					/* @__PURE__ */ o("span", {
+						className: y.rateReadout,
+						children: [c, "x"]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Timeline/Timeline.tsx
+function pe(e) {
+	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: s, onScrub: c, renderKeyEditor: l, label: u, className: d } = e, [f, p] = v(() => /* @__PURE__ */ new Set()), [m, g] = v({
+		from: 0,
+		to: n
+	}), [_, b] = v(null), [x, S] = v(null), C = e.window ?? m, w = e.onWindowChange ?? g, T = e.selection === void 0 ? _ : e.selection, E = e.onSelect ?? b, D = {
+		from: 0,
+		to: n
+	}, k = h(() => V(t, f), [t, f]), A = h(() => {
+		let e = new Set([0, n]);
+		for (let t of k) if (t.kind === "sampled") for (let n of t.track.keys) e.add(n.t + t.offset);
+		return [...e];
+	}, [k, n]), j = (e) => {
+		p((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, M = (e) => {
+		if ((e.key === "Delete" || e.key === "Backspace") && T) {
+			e.preventDefault();
+			let n = J(t, T);
+			s(n.tracks), E(n.selection);
+		}
+	}, N = T ? H(t, T.trackPath) : void 0, P = N?.kind === "sampled" ? N.keys[T.keyIndex] : void 0, F = x ? H(t, x.trackPath) : void 0, I = F?.kind === "sampled" ? F.keys[x.keyIndex] : void 0;
+	return /* @__PURE__ */ o("div", {
+		className: [y.root, d].filter(Boolean).join(" "),
+		"data-testid": "timeline-root",
+		tabIndex: -1,
+		onKeyDown: M,
+		children: [
+			u ? /* @__PURE__ */ a("div", {
+				className: y.label,
+				children: u
+			}) : null,
+			e.transport === !1 ? null : /* @__PURE__ */ o("div", {
+				className: y.transportRow,
+				children: [/* @__PURE__ */ a(fe, {
+					...e.transport ?? {
+						paused: !0,
+						loop: !1,
+						rate: 1,
+						onPlay: () => {},
+						onPause: () => {},
+						onLoopChange: () => {},
+						onRateChange: () => {}
+					},
+					playhead: r,
+					duration: n
+				}), /* @__PURE__ */ a("button", {
+					type: "button",
+					role: "switch",
+					"aria-checked": (e.mode ?? "dope") === "graph",
+					"aria-label": "Graph mode",
+					className: y.transportButton,
+					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
+					children: "Graph"
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: y.body,
+				children: [/* @__PURE__ */ a("div", { className: y.gutter }), /* @__PURE__ */ a("div", {
+					className: y.rulerWrap,
+					children: /* @__PURE__ */ a(ue, {
+						window: C,
+						bounds: D,
+						playhead: r,
+						onScrub: c,
+						onWindowChange: w
+					})
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: y.lanes,
+				children: k.map((n) => {
+					let r = n.path;
+					return /* @__PURE__ */ a(Q, {
+						row: n,
+						window: C,
+						mode: e.mode ?? "dope",
+						selection: T && U(T.trackPath, r) ? T.keyIndex : null,
+						expanded: f.has(n.key),
+						snapTimes: A,
+						onToggleExpand: () => j(n.key),
+						onSelect: (e) => E({
+							trackPath: r,
+							keyIndex: e
+						}),
+						onKeyInput: (e, n, a) => {
+							if (!i) return;
+							let o = K(t, {
+								trackPath: r,
+								keyIndex: e
+							}, n);
+							i(a === void 0 ? o.tracks : X(o.tracks, o.selection, a));
+						},
+						onKeyCommit: (e, n, i) => {
+							let a = K(t, {
+								trackPath: r,
+								keyIndex: e
+							}, n);
+							s(i === void 0 ? a.tracks : X(a.tracks, a.selection, i)), E(a.selection);
+						},
+						onInsert: (e) => {
+							let n = q(t, r, e);
+							s(n.tracks), E(n.selection);
+						},
+						selectedSegment: x && U(x.trackPath, r) ? x.keyIndex : null,
+						onSelectSegment: (e) => S({
+							trackPath: r,
+							keyIndex: e
+						}),
+						onEasingCommit: (e, n) => {
+							s(Y(t, {
+								trackPath: r,
+								keyIndex: e
+							}, n));
+						}
+					}, n.key);
+				})
+			}),
+			l && T && P && N?.kind === "sampled" ? /* @__PURE__ */ a("div", {
+				className: y.inspector,
+				children: l({
+					key: P,
+					track: N,
+					selection: T,
+					commit: (e) => s(X(t, T, e.value)),
+					setEasing: (e) => s(Y(t, T, e))
+				})
+			}) : null,
+			x && I ? /* @__PURE__ */ a("div", {
+				className: y.inspector,
+				children: /* @__PURE__ */ a(O, {
+					value: I.easing,
+					onChange: (e) => s(Y(t, x, e))
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/Timeline/AnimatedTimeline.tsx
+function me(e) {
+	let { handle: t, ...n } = e, [, r] = g((e) => e + 1, 0);
+	p(() => t.subscribe(r), [t]);
+	let i = _(null), o = d(() => {
+		r(), t.isPaused() || i.current?.request();
+	});
+	i.current = o, p(() => (t.isPaused() || o.request(), () => o.cancel()), [t, o]);
+	let s = f((e) => {
+		t.edit(() => {
+			let n = t.tracks();
+			n.splice(0, n.length, ...e);
+		});
+	}, [t]), c = t.time(), l = t.duration();
+	return /* @__PURE__ */ a(pe, {
+		...n,
+		tracks: t.tracks(),
+		duration: l,
+		playhead: c,
+		onChange: s,
+		onScrub: t.seek,
+		transport: e.transport === !1 ? !1 : {
+			paused: t.isPaused(),
+			loop: t.loop(),
+			rate: t.timeScale(),
+			onPlay: () => {
+				t.time() >= l && t.seek(0), t.resume(), o.request(), r();
+			},
+			onPause: () => {
+				t.pause(), r();
+			},
+			onLoopChange: (e) => {
+				t.setLoop(e), r();
+			},
+			onRateChange: (e) => {
+				t.setTimeScale(e), r();
+			}
+		}
+	});
+}
+//#endregion
+export { O as a, S as c, U as i, C as l, pe as n, w as o, fe as r, x as s, me as t };
+
+//# sourceMappingURL=Timeline-DsLeV5I1.js.map