@weasel-js/ui 1.4.4 → 1.5.0

package/dist/chunks/Timeline-Bz806JbE.js

@@ -1,908 +0,0 @@
-import { H as e, R as t, i as n } from "./icons-BV27dhKB.js";
-import { t as r } from "./DetentSlider-BpD7bgjN.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { EASINGS as s, cubicBezierEasing as c, openPointerSession as l, resolveEasing as u, sampleTrack as d, useVisibleRaf as f } from "@weasel-js/core";
-import { useCallback as p, useEffect as m, useLayoutEffect as h, useMemo as g, useReducer as _, useRef as v, useState as y } from "react";
-var b = {
-	ruler: "_ruler_gapxk_1",
-	tick: "_tick_gapxk_11",
-	playhead: "_playhead_gapxk_29",
-	lane: "_lane_gapxk_38",
-	laneLabel: "_laneLabel_gapxk_45",
-	disclosure: "_disclosure_gapxk_63",
-	disclosureIcon: "_disclosureIcon_gapxk_64",
-	disclosureCollapsed: "_disclosureCollapsed_gapxk_65",
-	laneTrack: "_laneTrack_gapxk_67",
-	key: "_key_gapxk_74",
-	eventMark: "_eventMark_gapxk_74",
-	keyGhost: "_keyGhost_gapxk_94",
-	eventGhost: "_eventGhost_gapxk_94",
-	curve: "_curve_gapxk_109",
-	nestedBar: "_nestedBar_gapxk_123",
-	transport: "_transport_gapxk_132",
-	transportButton: "_transportButton_gapxk_141",
-	transportRow: "_transportRow_gapxk_167",
-	time: "_time_gapxk_182",
-	rate: "_rate_gapxk_183",
-	rateSlider: "_rateSlider_gapxk_184",
-	rateReadout: "_rateReadout_gapxk_188",
-	root: "_root_gapxk_194",
-	label: "_label_gapxk_209",
-	body: "_body_gapxk_211",
-	gutter: "_gutter_gapxk_212",
-	rulerWrap: "_rulerWrap_gapxk_213",
-	lanes: "_lanes_gapxk_215",
-	inspector: "_inspector_gapxk_222",
-	segment: "_segment_gapxk_231",
-	easingPicker: "_easingPicker_gapxk_241",
-	easingLabel: "_easingLabel_gapxk_242",
-	easingPreview: "_easingPreview_gapxk_244",
-	bezierHandle: "_bezierHandle_gapxk_253"
-};
-//#endregion
-//#region src/components/Timeline/easingSpec.ts
-function x(e) {
-	return typeof e == "object" && e && "bezier" in e ? e.bezier : null;
-}
-function S(e) {
-	return e === void 0 ? null : x(e);
-}
-function C(e) {
-	if (e === void 0) return "linear";
-	if (typeof e == "string") return e;
-	let t = x(e);
-	if (t) return `cubic-bezier(${t.join(", ")})`;
-	for (let [t, n] of Object.entries(s)) if (n === e) return t;
-	return "custom";
-}
-function w(e, t) {
-	let n = u(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 T = Object.keys(s), E = 24, D = {
-	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
-	]
-}, O = [
-	.25,
-	.1,
-	.25,
-	1
-];
-function k(e) {
-	let { value: t, onChange: n } = e, r = S(t), i = C(t), s = r === null && T.includes(i), c = r === null ? s ? i : "linear" : "custom", l = w(t, E).map((e, t) => `${t / (E - 1) * 100},${100 - e * 100}`).join(" ");
-	return /* @__PURE__ */ o("div", {
-		className: b.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"
-					}),
-					T.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: b.transportButton,
-				onClick: () => n({ bezier: D[c] ?? O }),
-				children: "Convert to bezier"
-			}) : /* @__PURE__ */ a("span", {
-				className: b.easingLabel,
-				children: i
-			}),
-			/* @__PURE__ */ a("svg", {
-				className: b.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 A = 1;
-function j(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 M(e, t) {
-	let n = e.to - e.from;
-	return n === 0 ? 0 : (t - e.from) / n;
-}
-function N(e, t) {
-	return `${M(e, t) * 100}%`;
-}
-function P(e, t) {
-	let n = e.to - e.from;
-	return n === 0 ? 0 : t / n;
-}
-function F(e, t) {
-	return `${P(e, t) * 100}%`;
-}
-function I(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 L(e, t, n, r) {
-	let i = e.to - e.from, a = r.to - r.from, o = Math.min(a, Math.max(A, i * n)), s = i === 0 ? .5 : (t - e.from) / i;
-	return I({
-		from: t - s * o,
-		to: t + (1 - s) * o
-	}, r);
-}
-function ee(e, t, n) {
-	return I({
-		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 te(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, te(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 : d(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 ne(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, re = 6, ie = 10, ae = 16;
-function oe(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 se(e) {
-	return e.kind === "sampled" ? e.track.keys.map((e) => e.t) : e.kind === "event" ? e.track.events.map((e) => e.t) : [];
-}
-function ce(e) {
-	let { row: t, window: r, mode: s, selection: c, onSelect: u, onKeyInput: d, onKeyCommit: f, onInsert: p, onToggleExpand: h, expanded: g, snapTimes: _, selectedSegment: x = null, onSelectSegment: C, onEasingCommit: T } = e, E = v(null), D = v(null);
-	m(() => () => {
-		D.current?.cancel();
-	}, []);
-	let [O, k] = y(null), [A, P] = y(null), I = (e) => N(r, e + t.offset), L = (e) => {
-		let n = E.current?.getBoundingClientRect();
-		return n ? j(r, n.width).toMs(e - n.left) - t.offset : r.from;
-	}, ee = () => {
-		let e = j(r, E.current?.getBoundingClientRect().width ?? 0);
-		return e.toMs(re) - 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 = E.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;
-	}, te = () => {
-		let e = [];
-		for (let n = 1; n < z.length; n++) {
-			let i = z[n - 1], a = z[n], o = O && O.keyIndex === n ? oe(O.points, ae) : w(a.easing, ae);
-			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(`${M(r, s + t.offset) * 100},${100 - U(c)}`);
-			}
-		}
-		return e.join(" ");
-	}, G = x != null && t.kind === "sampled" ? S(z[x]?.easing) : null, K = O && O.keyIndex === x ? O.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: I(a),
-			bottom: `${U(o)}%`
-		};
-	}, J = (e, t) => {
-		D.current?.cancel(), D.current = l(e.currentTarget, e, t, { capture: !1 });
-	}, Y = (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 = L(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 = () => {
-			k(null), D.current = null;
-		};
-		J(n, {
-			onMove: (t) => {
-				a = o(t), k({
-					keyIndex: e,
-					points: a
-				});
-			},
-			onEnd: (t) => {
-				a = o(t), T?.(e, { bezier: a }), s();
-			},
-			onCancel: s
-		});
-	}, X = (e) => (n) => {
-		if (n.button !== 0) return;
-		n.stopPropagation(), u(e);
-		let r = (e) => {
-			let n = Math.max(0, L(e.clientX));
-			return e.altKey ? n : ne(n + t.offset, _, ee()) - t.offset;
-		}, i = (e) => R ? W(e.clientY) : void 0;
-		P({
-			keyIndex: e,
-			t: Q[e],
-			value: B[e]
-		});
-		let a = () => {
-			P(null), D.current = null;
-		};
-		J(n, {
-			onMove: (t) => {
-				let n = i(t);
-				P({
-					keyIndex: e,
-					t: r(t),
-					value: n ?? B[e]
-				}), n === void 0 ? d(e, r(t)) : d(e, r(t), n);
-			},
-			onEnd: (t) => {
-				let n = i(t);
-				n === void 0 ? f(e, r(t)) : f(e, r(t), n), a();
-			},
-			onCancel: a
-		});
-	}, ce = (e, t) => (n) => {
-		let r = ie * (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)));
-	}, Q = se(t);
-	return /* @__PURE__ */ o("div", {
-		className: b.lane,
-		"data-depth": t.depth,
-		"data-mode": s,
-		children: [/* @__PURE__ */ o("div", {
-			className: b.laneLabel,
-			children: [t.kind === "timeline" ? /* @__PURE__ */ a("span", {
-				role: "button",
-				tabIndex: 0,
-				"aria-expanded": g,
-				"data-testid": "timeline-disclosure",
-				className: b.disclosure,
-				onClick: h,
-				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
-				},
-				children: /* @__PURE__ */ a(n, {
-					size: 14,
-					className: [b.disclosureIcon, !g && b.disclosureCollapsed].filter(Boolean).join(" ")
-				})
-			}) : null, t.label]
-		}), /* @__PURE__ */ o("div", {
-			className: b.laneTrack,
-			ref: E,
-			"data-testid": "timeline-lane-track",
-			onDoubleClick: (e) => {
-				t.kind === "sampled" && p(Math.max(0, L(e.clientX)));
-			},
-			children: [
-				t.kind === "timeline" ? /* @__PURE__ */ a("div", {
-					className: b.nestedBar,
-					"data-testid": "timeline-nested",
-					style: {
-						left: I(0),
-						width: F(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": x === i ? "true" : void 0,
-						"data-testid": "timeline-segment",
-						className: b.segment,
-						style: {
-							left: I(z[i - 1].t),
-							width: F(r, e.t - z[i - 1].t)
-						},
-						onClick: () => C?.(i),
-						onKeyDown: (e) => {
-							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), C?.(i));
-						}
-					}, `seg-${i}`);
-				}) : null,
-				R && z.length > 1 ? /* @__PURE__ */ a("svg", {
-					className: b.curve,
-					"data-testid": "timeline-curve",
-					viewBox: "0 0 100 100",
-					preserveAspectRatio: "none",
-					children: /* @__PURE__ */ a("polyline", {
-						points: te(),
-						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": A?.keyIndex === n ? "true" : void 0,
-					className: t.kind === "event" ? b.eventMark : b.key,
-					style: R ? {
-						left: I(e),
-						bottom: `${U(B[n])}%`
-					} : { left: I(e) },
-					onPointerDown: X(n),
-					onKeyDown: ce(n, e)
-				}, n)),
-				A ? /* @__PURE__ */ a("div", {
-					"aria-hidden": "true",
-					"data-testid": "timeline-key-ghost",
-					className: t.kind === "event" ? b.eventGhost : b.keyGhost,
-					style: R && A.value !== void 0 ? {
-						left: I(A.t),
-						bottom: `${U(A.value)}%`
-					} : { left: I(A.t) }
-				}) : null,
-				R && K && x != 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: b.bezierHandle,
-					style: q(x, K[0], K[1]),
-					onPointerDown: Y(x, 0)
-				}), /* @__PURE__ */ a("div", {
-					role: "button",
-					tabIndex: 0,
-					"aria-label": `${t.label} bezier handle 2`,
-					"data-testid": "timeline-bezier-handle",
-					className: b.bezierHandle,
-					style: q(x, K[2], K[3]),
-					onPointerDown: Y(x, 1)
-				})] }) : null
-			]
-		})]
-	});
-}
-//#endregion
-//#region src/components/Timeline/Ruler.tsx
-var Q = 64, le = .0015;
-function ue(e) {
-	return e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 2)}s` : `${Math.round(e)}ms`;
-}
-function de(e) {
-	let { window: t, bounds: n, playhead: r, onScrub: i, onWindowChange: s } = e, c = v(null), u = v(null);
-	m(() => () => {
-		u.current?.cancel();
-	}, []);
-	let [d, f] = y(0);
-	h(() => {
-		let e = c.current;
-		if (!e) return;
-		let t = () => f(e.getBoundingClientRect().width);
-		if (t(), typeof ResizeObserver > "u") return;
-		let n = new ResizeObserver(t);
-		return n.observe(e), () => n.disconnect();
-	}, []);
-	let p = () => c.current?.getBoundingClientRect().width ?? 0, g = (e) => {
-		let n = c.current?.getBoundingClientRect();
-		if (!n) return t.from;
-		let r = j(t, n.width).toMs(e - n.left);
-		return Math.min(t.to, Math.max(t.from, r));
-	}, _ = (e) => {
-		if (e.button !== 0) return;
-		i(g(e.clientX)), u.current?.cancel();
-		let t = () => {
-			u.current = null;
-		};
-		u.current = l(e.currentTarget, e, {
-			onMove: (e) => {
-				i(g(e.clientX));
-			},
-			onEnd: t,
-			onCancel: t
-		}, { capture: !1 });
-	}, x = (e) => {
-		if (e.ctrlKey) s(L(t, g(e.clientX), Math.exp(e.deltaY * le), n));
-		else {
-			let r = p(), i = r === 0 ? 0 : (t.to - t.from) / r;
-			s(ee(t, e.deltaY * i, n));
-		}
-	}, S = z(t, d, Q), C = (e) => N(t, e);
-	return /* @__PURE__ */ o("div", {
-		className: b.ruler,
-		ref: c,
-		"data-testid": "timeline-ruler",
-		onPointerDown: _,
-		onWheel: x,
-		children: [S.map((e) => /* @__PURE__ */ a("span", {
-			className: b.tick,
-			"data-testid": "timeline-tick",
-			style: { left: C(e) },
-			children: ue(e)
-		}, e)), /* @__PURE__ */ a("div", {
-			className: b.playhead,
-			"data-testid": "timeline-playhead",
-			style: { left: C(r) }
-		})]
-	});
-}
-//#endregion
-//#region src/components/Timeline/Transport.tsx
-var $ = [
-	.25,
-	.5,
-	1,
-	2,
-	4
-], fe = (e) => `${(e / 1e3).toFixed(2)}s`;
-function pe(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: b.transport,
-		children: [
-			/* @__PURE__ */ a("button", {
-				type: "button",
-				className: b.transportButton,
-				"aria-label": i ? "Play" : "Pause",
-				onClick: i ? d : f,
-				children: a(i ? e : t, { size: 14 })
-			}),
-			/* @__PURE__ */ o("span", {
-				className: b.time,
-				"data-testid": "timeline-time",
-				children: [
-					fe(l),
-					" / ",
-					fe(u)
-				]
-			}),
-			/* @__PURE__ */ a("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": h,
-				"aria-label": "Loop",
-				className: b.transportButton,
-				onClick: () => p(!h),
-				children: "⟲"
-			}),
-			/* @__PURE__ */ o("div", {
-				className: b.rate,
-				children: [
-					"Rate",
-					/* @__PURE__ */ a(r, {
-						ariaLabel: "Rate",
-						items: g,
-						value: c,
-						onChange: m,
-						formatLabel: (e) => `${e}x`,
-						labels: "none",
-						className: b.rateSlider
-					}),
-					/* @__PURE__ */ o("span", {
-						className: b.rateReadout,
-						children: [c, "x"]
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/Timeline/Timeline.tsx
-function me(e) {
-	let { tracks: t, duration: n, playhead: r, onInput: i, onChange: s, onScrub: c, renderKeyEditor: l, label: u, className: d } = e, [f, p] = y(() => /* @__PURE__ */ new Set()), [m, h] = y({
-		from: 0,
-		to: n
-	}), [_, v] = y(null), [x, S] = y(null), C = e.window ?? m, w = e.onWindowChange ?? h, T = e.selection === void 0 ? _ : e.selection, E = e.onSelect ?? v, D = {
-		from: 0,
-		to: n
-	}, O = g(() => V(t, f), [t, f]), A = g(() => {
-		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]), 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: [b.root, d].filter(Boolean).join(" "),
-		"data-testid": "timeline-root",
-		tabIndex: -1,
-		onKeyDown: M,
-		children: [
-			u ? /* @__PURE__ */ a("div", {
-				className: b.label,
-				children: u
-			}) : null,
-			e.transport === !1 ? null : /* @__PURE__ */ o("div", {
-				className: b.transportRow,
-				children: [/* @__PURE__ */ a(pe, {
-					...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: b.transportButton,
-					onClick: () => e.onModeChange?.((e.mode ?? "dope") === "graph" ? "dope" : "graph"),
-					children: "Graph"
-				})]
-			}),
-			/* @__PURE__ */ o("div", {
-				className: b.body,
-				children: [/* @__PURE__ */ a("div", { className: b.gutter }), /* @__PURE__ */ a("div", {
-					className: b.rulerWrap,
-					children: /* @__PURE__ */ a(de, {
-						window: C,
-						bounds: D,
-						playhead: r,
-						onScrub: c,
-						onWindowChange: w
-					})
-				})]
-			}),
-			/* @__PURE__ */ a("div", {
-				className: b.lanes,
-				children: O.map((n) => {
-					let r = n.path;
-					return /* @__PURE__ */ a(ce, {
-						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: b.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: b.inspector,
-				children: /* @__PURE__ */ a(k, {
-					value: I.easing,
-					onChange: (e) => s(Y(t, x, e))
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-//#region src/components/Timeline/AnimatedTimeline.tsx
-function he(e) {
-	let { handle: t, ...n } = e, [, r] = _((e) => e + 1, 0);
-	m(() => t.subscribe(r), [t]);
-	let i = v(null), o = f(() => {
-		r(), t.isPaused() || i.current?.request();
-	});
-	i.current = o, m(() => (t.isPaused() || o.request(), () => o.cancel()), [t, o]);
-	let s = p((e) => {
-		t.edit(() => {
-			let n = t.tracks();
-			n.splice(0, n.length, ...e);
-		});
-	}, [t]), c = t.time(), l = t.duration();
-	return /* @__PURE__ */ a(me, {
-		...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 { k as a, C as c, U as i, w as l, me as n, T as o, pe as r, S as s, he as t };
-
-//# sourceMappingURL=Timeline-Bz806JbE.js.map