@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/{Timeline-BEyKaBXl.js → Timeline-SgmpQtUV.js}

@@ -1,46 +1,45 @@
-import { H as e, R as t, i as n } from "./icons-Btrs-JD7.js";
-import { r } from "./Plot2D-Czvyt_vG.js";
-import { i, n as a, t as o } from "./createKeyframeLayer-7j7ukrSx.js";
-import { t as s } from "./snap-B0WQwetQ.js";
-import { t as c } from "./DetentSlider-BWNSv07Z.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 { rt as e, st as t } from "./icons-DbScMMqX.js";
+import { n } from "./Disclosure-D79jhmh2.js";
+import { r } from "./Plot2D-lyO7waPQ.js";
+import { i, n as a, t as o } from "./createKeyframeLayer-BzDRCrrh.js";
+import { t as s } from "./snap-DC4Km8xG.js";
+import { t as c } from "./DetentSlider-BYyaZha6.js";
+import { EASINGS as l, openPointerSession as u, resolveEasing as d, sampleTrack as f, useVisibleRaf as p } from "@weasel-js/core";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useCallback as _, useEffect as v, useLayoutEffect as y, useMemo as b, useReducer as x, useRef as S, useState as C } from "react";
 var w = {
-	ruler: "_ruler_v2h5a_1",
-	tick: "_tick_v2h5a_11",
-	playhead: "_playhead_v2h5a_29",
-	lane: "_lane_v2h5a_38",
-	laneLabel: "_laneLabel_v2h5a_45",
-	disclosure: "_disclosure_v2h5a_65",
-	disclosureIcon: "_disclosureIcon_v2h5a_66",
-	disclosureCollapsed: "_disclosureCollapsed_v2h5a_67",
-	laneTrack: "_laneTrack_v2h5a_69",
-	key: "_key_v2h5a_76",
-	eventMark: "_eventMark_v2h5a_76",
-	keyGhost: "_keyGhost_v2h5a_96",
-	eventGhost: "_eventGhost_v2h5a_96",
-	graphHost: "_graphHost_v2h5a_113",
-	graph: "_graph_v2h5a_113",
-	nestedBar: "_nestedBar_v2h5a_132",
-	transport: "_transport_v2h5a_141",
-	transportButton: "_transportButton_v2h5a_150",
-	transportRow: "_transportRow_v2h5a_176",
-	time: "_time_v2h5a_194",
-	rate: "_rate_v2h5a_200",
-	rateSlider: "_rateSlider_v2h5a_201",
-	rateReadout: "_rateReadout_v2h5a_205",
-	root: "_root_v2h5a_211",
-	label: "_label_v2h5a_226",
-	body: "_body_v2h5a_228",
-	gutter: "_gutter_v2h5a_46",
-	rulerWrap: "_rulerWrap_v2h5a_230",
-	lanes: "_lanes_v2h5a_232",
-	inspector: "_inspector_v2h5a_239",
-	segment: "_segment_v2h5a_248",
-	easingPicker: "_easingPicker_v2h5a_258",
-	easingLabel: "_easingLabel_v2h5a_259",
-	easingPreview: "_easingPreview_v2h5a_261"
+	ruler: "_ruler_g66rp_1",
+	tick: "_tick_g66rp_11",
+	playhead: "_playhead_g66rp_29",
+	lane: "_lane_g66rp_38",
+	laneLabel: "_laneLabel_g66rp_45",
+	disclosure: "_disclosure_g66rp_65",
+	laneTrack: "_laneTrack_g66rp_67",
+	key: "_key_g66rp_74",
+	eventMark: "_eventMark_g66rp_74",
+	keyGhost: "_keyGhost_g66rp_94",
+	eventGhost: "_eventGhost_g66rp_94",
+	graphHost: "_graphHost_g66rp_111",
+	graph: "_graph_g66rp_111",
+	nestedBar: "_nestedBar_g66rp_130",
+	transport: "_transport_g66rp_139",
+	transportButton: "_transportButton_g66rp_148",
+	transportRow: "_transportRow_g66rp_174",
+	time: "_time_g66rp_192",
+	rate: "_rate_g66rp_198",
+	rateSlider: "_rateSlider_g66rp_199",
+	rateReadout: "_rateReadout_g66rp_203",
+	root: "_root_g66rp_209",
+	label: "_label_g66rp_224",
+	body: "_body_g66rp_226",
+	gutter: "_gutter_g66rp_46",
+	rulerWrap: "_rulerWrap_g66rp_228",
+	lanes: "_lanes_g66rp_230",
+	inspector: "_inspector_g66rp_237",
+	segment: "_segment_g66rp_246",
+	easingPicker: "_easingPicker_g66rp_256",
+	easingLabel: "_easingLabel_g66rp_257",
+	easingPreview: "_easingPreview_g66rp_259"
 };
 //#endregion
 //#region src/components/Timeline/easingSpec.ts
@@ -55,15 +54,15 @@ function D(e) {
 	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;
+	for (let [t, n] of Object.entries(l)) if (n === e) return t;
 	return "custom";
 }
 function O(e, t) {
-	let n = m(e), r = Array(t), i = t - 1;
+	let n = d(e), r = Array(t), i = t - 1;
 	for (let e = 0; e < t; e++) r[e] = n(i === 0 ? 0 : e / i);
 	return r;
 }
-var k = Object.keys(f), A = 24, j = {
+var k = Object.keys(l), A = 24, j = {
 	linear: [
 		0,
 		0,
@@ -132,42 +131,42 @@ var k = Object.keys(f), A = 24, j = {
 ];
 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", {
+	return /* @__PURE__ */ g("div", {
 		className: w.easingPicker,
 		children: [
-			/* @__PURE__ */ d("label", { children: ["Easing", /* @__PURE__ */ d("select", {
+			/* @__PURE__ */ g("label", { children: ["Easing", /* @__PURE__ */ g("select", {
 				value: o,
 				onChange: (e) => n(e.target.value === "linear" ? void 0 : e.target.value),
 				children: [
-					/* @__PURE__ */ u("option", {
+					/* @__PURE__ */ h("option", {
 						value: "linear",
 						children: "linear"
 					}),
-					k.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ u("option", {
+					k.filter((e) => e !== "linear").map((e) => /* @__PURE__ */ h("option", {
 						value: e,
 						children: e
 					}, e)),
-					r === null ? null : /* @__PURE__ */ u("option", {
+					r === null ? null : /* @__PURE__ */ h("option", {
 						value: "custom",
 						children: "custom"
 					})
 				]
 			})] }),
-			r === null ? /* @__PURE__ */ u("button", {
+			r === null ? /* @__PURE__ */ h("button", {
 				type: "button",
 				className: w.transportButton,
 				onClick: () => n({ bezier: j[o] ?? M }),
 				children: "Convert to bezier"
-			}) : /* @__PURE__ */ u("span", {
+			}) : /* @__PURE__ */ h("span", {
 				className: w.easingLabel,
 				children: i
 			}),
-			/* @__PURE__ */ u("svg", {
+			/* @__PURE__ */ h("svg", {
 				className: w.easingPreview,
 				"data-testid": "easing-preview",
 				viewBox: "0 0 100 100",
 				preserveAspectRatio: "none",
-				children: /* @__PURE__ */ u("polyline", {
+				children: /* @__PURE__ */ h("polyline", {
 					points: s,
 					vectorEffect: "non-scaling-stroke"
 				})
@@ -236,7 +235,7 @@ function re(e) {
 	return [n - i, n + r + i];
 }
 function ie(e) {
-	let { keys: t, label: n, window: r, offset: s, snapTimes: c, selection: l, selectedSegment: d, onSelect: f, onSelectSegment: p, onKeysInput: m, onKeysCommit: h } = e, g = S(null), [_, v] = C({
+	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({
 		width: 0,
 		height: 0
 	});
@@ -268,12 +267,12 @@ function ie(e) {
 	]), T = b(() => ({
 		keys: t,
 		selectedKey: l,
-		selectedSegment: d,
+		selectedSegment: u,
 		drag: null
 	}), [
 		t,
 		l,
-		d
+		u
 	]), [E, D] = C(null), O = E ?? T, k = S(O);
 	k.current = O;
 	let A = b(() => [{
@@ -281,22 +280,22 @@ function ie(e) {
 		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) {
+		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);
 			return;
 		}
 		if (D(n), n.drag.kind !== "key") return;
 		let i = o(n).keys;
-		i !== n.keys && m?.(i);
+		i !== n.keys && p?.(i);
 	}, M = (e, t, n) => {
 		D(null);
 		let r = t;
-		r.keys !== n.keys && h(r.keys);
+		r.keys !== n.keys && m(r.keys);
 	}, [N, P] = re(O.keys), F = _.width > 0 ? V(r, _.width, 64) : [];
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ h("div", {
 		ref: g,
 		className: w.graphHost,
-		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ u(i, {
+		children: _.width > 0 && _.height > 0 ? /* @__PURE__ */ h(i, {
 			className: w.graph,
 			"aria-label": `${n} graph`,
 			layers: A,
@@ -327,7 +326,7 @@ 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 se(e) {
-	let { row: t, window: r, mode: i, selection: a, onSelect: o, 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);
+	let { row: t, window: r, mode: i, selection: a, onSelect: o, onKeyInput: c, onKeyCommit: l, onInsert: d, onToggleExpand: f, expanded: p, snapTimes: _, selectedSegment: y = null, onSelectSegment: b, onKeysInput: x, onKeysCommit: T } = e, E = S(null), D = S(null);
 	v(() => () => {
 		D.current?.cancel();
 	}, []);
@@ -351,7 +350,7 @@ function se(e) {
 		let i = () => {
 			k(null), D.current = null;
 		};
-		D.current?.cancel(), D.current = p(n.currentTarget, n, {
+		D.current?.cancel(), D.current = u(n.currentTarget, n, {
 			onMove: (t) => {
 				k({
 					keyIndex: e,
@@ -359,44 +358,41 @@ function se(e) {
 				}), c(e, r(t));
 			},
 			onEnd: (t) => {
-				f(e, r(t)), i();
+				l(e, r(t)), i();
 			},
 			onCancel: i
 		}, { capture: !1 });
 	}, R = (e, t) => (n) => {
 		let r = ae * (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)));
+		n.key === "ArrowRight" && (n.preventDefault(), l(e, t + r)), n.key === "ArrowLeft" && (n.preventDefault(), l(e, Math.max(0, t - r)));
 	}, B = oe(t);
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ g("div", {
 		className: w.lane,
 		"data-depth": t.depth,
 		"data-mode": i,
 		"data-graph": N ? "true" : void 0,
-		children: [/* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ g("div", {
 			className: w.laneLabel,
-			children: [t.kind === "timeline" ? /* @__PURE__ */ u("span", {
+			children: [t.kind === "timeline" ? /* @__PURE__ */ h("span", {
 				role: "button",
 				tabIndex: 0,
-				"aria-expanded": g,
+				"aria-expanded": p,
 				"data-testid": "timeline-disclosure",
 				className: w.disclosure,
-				onClick: h,
+				onClick: f,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
 				},
-				children: /* @__PURE__ */ u(n, {
-					size: 14,
-					className: [w.disclosureIcon, !g && w.disclosureCollapsed].filter(Boolean).join(" ")
-				})
+				children: /* @__PURE__ */ h(n, { open: p })
 			}) : null, t.label]
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ h("div", {
 			className: w.laneTrack,
 			ref: E,
 			"data-testid": "timeline-lane-track",
 			onDoubleClick: (e) => {
-				t.kind === "sampled" && m(Math.max(0, j(e.clientX)));
+				t.kind === "sampled" && d(Math.max(0, j(e.clientX)));
 			},
-			children: N ? /* @__PURE__ */ u(ie, {
+			children: N ? /* @__PURE__ */ h(ie, {
 				keys: P,
 				label: t.label,
 				window: r,
@@ -408,8 +404,8 @@ function se(e) {
 				onSelectSegment: b,
 				onKeysInput: x,
 				onKeysCommit: (e) => T?.(e)
-			}) : /* @__PURE__ */ d(l, { children: [
-				t.kind === "timeline" ? /* @__PURE__ */ u("div", {
+			}) : /* @__PURE__ */ g(m, { children: [
+				t.kind === "timeline" ? /* @__PURE__ */ h("div", {
 					className: w.nestedBar,
 					"data-testid": "timeline-nested",
 					style: {
@@ -419,7 +415,7 @@ function se(e) {
 				}) : null,
 				t.kind === "sampled" ? P.slice(1).map((e, n) => {
 					let i = n + 1;
-					return /* @__PURE__ */ u("div", {
+					return /* @__PURE__ */ h("div", {
 						role: "button",
 						tabIndex: 0,
 						"aria-label": `${t.label} segment into ${Math.round(e.t)} ms`,
@@ -436,7 +432,7 @@ function se(e) {
 						}
 					}, `seg-${i}`);
 				}) : null,
-				B.map((e, n) => /* @__PURE__ */ u("div", {
+				B.map((e, n) => /* @__PURE__ */ h("div", {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${t.label} key at ${Math.round(e)} ms`,
@@ -448,7 +444,7 @@ function se(e) {
 					onPointerDown: I(n),
 					onKeyDown: R(n, e)
 				}, n)),
-				O ? /* @__PURE__ */ u("div", {
+				O ? /* @__PURE__ */ h("div", {
 					"aria-hidden": "true",
 					"data-testid": "timeline-key-ghost",
 					className: t.kind === "event" ? w.eventGhost : w.keyGhost,
@@ -478,43 +474,43 @@ function ue(e) {
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, []);
-	let f = () => o.current?.getBoundingClientRect().width ?? 0, m = (e) => {
+	let d = () => o.current?.getBoundingClientRect().width ?? 0, f = (e) => {
 		let n = o.current?.getBoundingClientRect();
 		if (!n) return t.from;
 		let r = F(t, n.width).toMs(e - n.left);
 		return Math.min(t.to, Math.max(t.from, r));
-	}, h = (e) => {
+	}, p = (e) => {
 		if (e.button !== 0) return;
-		i(m(e.clientX)), s.current?.cancel();
+		i(f(e.clientX)), s.current?.cancel();
 		let t = () => {
 			s.current = null;
 		};
-		s.current = p(e.currentTarget, e, {
+		s.current = u(e.currentTarget, e, {
 			onMove: (e) => {
-				i(m(e.clientX));
+				i(f(e.clientX));
 			},
 			onEnd: t,
 			onCancel: t
 		}, { capture: !1 });
-	}, g = (e) => {
-		if (e.ctrlKey) a(ee(t, m(e.clientX), Math.exp(e.deltaY * ce), n));
+	}, m = (e) => {
+		if (e.ctrlKey) a(ee(t, f(e.clientX), Math.exp(e.deltaY * ce), n));
 		else {
-			let r = f(), i = r === 0 ? 0 : (t.to - t.from) / r;
+			let r = d(), 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", {
+	return /* @__PURE__ */ g("div", {
 		className: w.ruler,
 		ref: o,
 		"data-testid": "timeline-ruler",
-		onPointerDown: h,
-		onWheel: g,
-		children: [_.map((e) => /* @__PURE__ */ u("span", {
+		onPointerDown: p,
+		onWheel: m,
+		children: [_.map((e) => /* @__PURE__ */ h("span", {
 			className: w.tick,
 			"data-testid": "timeline-tick",
 			style: { left: b(e) },
 			children: le(e)
-		}, e)), /* @__PURE__ */ u("div", {
+		}, e)), /* @__PURE__ */ h("div", {
 			className: w.playhead,
 			"data-testid": "timeline-playhead",
 			style: { left: b(r) }
@@ -531,46 +527,46 @@ var U = [
 	4
 ], W = (e) => `${(e / 1e3).toFixed(2)}s`;
 function G(n) {
-	let { paused: r, loop: i, rate: a, playhead: o, duration: s, onPlay: l, onPause: f, onLoopChange: p, onRateChange: m } = n, h = i !== !1 && i !== 0, g = U.includes(a) ? U : [...U, a].sort((e, t) => e - t);
-	return /* @__PURE__ */ d("div", {
+	let { paused: r, loop: i, rate: a, playhead: o, duration: s, onPlay: l, onPause: u, onLoopChange: d, onRateChange: f } = n, p = i !== !1 && i !== 0, m = U.includes(a) ? U : [...U, a].sort((e, t) => e - t);
+	return /* @__PURE__ */ g("div", {
 		className: w.transport,
 		children: [
-			/* @__PURE__ */ u("button", {
+			/* @__PURE__ */ h("button", {
 				type: "button",
 				className: w.transportButton,
 				"aria-label": r ? "Play" : "Pause",
-				onClick: r ? l : f,
-				children: u(r ? e : t, { size: 14 })
+				onClick: r ? l : u,
+				children: h(r ? t : e, { size: 14 })
 			}),
-			/* @__PURE__ */ u("button", {
+			/* @__PURE__ */ h("button", {
 				type: "button",
 				role: "switch",
-				"aria-checked": h,
+				"aria-checked": p,
 				"aria-label": "Loop",
 				className: w.transportButton,
-				onClick: () => p(!h),
+				onClick: () => d(!p),
 				children: "⟲"
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ g("div", {
 				className: w.rate,
 				children: [
 					"Rate",
-					/* @__PURE__ */ u(c, {
+					/* @__PURE__ */ h(c, {
 						ariaLabel: "Rate",
-						items: g,
+						items: m,
 						value: a,
-						onChange: m,
+						onChange: f,
 						formatLabel: (e) => `${e}x`,
 						labels: "none",
 						className: w.rateSlider
 					}),
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ g("span", {
 						className: w.rateReadout,
 						children: [a, "x"]
 					})
 				]
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ g("span", {
 				className: w.time,
 				"data-testid": "timeline-time",
 				children: [
@@ -685,7 +681,7 @@ function me(e, t, n) {
 		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;
+	let i = r, a = Math.max(0, n), o = i.keys.length === 0 ? 0 : f(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
@@ -737,18 +733,18 @@ function ge(e, t, n) {
 //#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({
+	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({
 		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 = {
+	}), [m, _] = C(null), [v, y] = C(null), x = e.window ?? f, S = e.onWindowChange ?? p, T = e.selection === void 0 ? m : e.selection, E = e.onSelect ?? _, D = {
 		from: 0,
 		to: n
-	}, O = b(() => fe(t, f), [t, f]), k = b(() => {
+	}, O = b(() => fe(t, u), [t, u]), 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) => {
+		d((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
@@ -759,19 +755,19 @@ function $(e) {
 			a(n.tracks), E(n.selection);
 		}
 	}, M = T ? K(t, T.trackPath) : void 0, P = M?.kind === "sampled" ? M.keys[T.keyIndex] : void 0, F = v ? K(t, v.trackPath) : void 0, I = F?.kind === "sampled" ? F.keys[v.keyIndex] : void 0;
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ g("div", {
 		className: [w.root, l].filter(Boolean).join(" "),
 		"data-testid": "timeline-root",
 		tabIndex: -1,
 		onKeyDown: j,
 		children: [
-			c ? /* @__PURE__ */ u("div", {
+			c ? /* @__PURE__ */ h("div", {
 				className: w.label,
 				children: c
 			}) : null,
-			e.transport === !1 ? null : /* @__PURE__ */ d("div", {
+			e.transport === !1 ? null : /* @__PURE__ */ g("div", {
 				className: w.transportRow,
-				children: [/* @__PURE__ */ u(G, {
+				children: [/* @__PURE__ */ h(G, {
 					...e.transport ?? {
 						paused: !0,
 						loop: !1,
@@ -783,7 +779,7 @@ function $(e) {
 					},
 					playhead: r,
 					duration: n
-				}), /* @__PURE__ */ u("button", {
+				}), /* @__PURE__ */ h("button", {
 					type: "button",
 					role: "switch",
 					"aria-checked": (e.mode ?? "dope") === "graph",
@@ -793,11 +789,11 @@ function $(e) {
 					children: "Graph"
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ g("div", {
 				className: w.body,
-				children: [/* @__PURE__ */ u("div", { className: w.gutter }), /* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ h("div", { className: w.gutter }), /* @__PURE__ */ h("div", {
 					className: w.rulerWrap,
-					children: /* @__PURE__ */ u(ue, {
+					children: /* @__PURE__ */ h(ue, {
 						window: x,
 						bounds: D,
 						playhead: r,
@@ -806,16 +802,16 @@ function $(e) {
 					})
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ h("div", {
 				className: w.lanes,
 				children: O.map((n) => {
 					let r = n.path;
-					return /* @__PURE__ */ u(se, {
+					return /* @__PURE__ */ h(se, {
 						row: n,
 						window: x,
 						mode: e.mode ?? "dope",
 						selection: T && q(T.trackPath, r) ? T.keyIndex : null,
-						expanded: f.has(n.key),
+						expanded: u.has(n.key),
 						snapTimes: k,
 						onToggleExpand: () => A(n.key),
 						onSelect: (e) => E({
@@ -849,7 +845,7 @@ function $(e) {
 					}, n.key);
 				})
 			}),
-			s && T && P && M?.kind === "sampled" ? /* @__PURE__ */ u("div", {
+			s && T && P && M?.kind === "sampled" ? /* @__PURE__ */ h("div", {
 				className: w.inspector,
 				children: s({
 					key: P,
@@ -859,9 +855,9 @@ function $(e) {
 					setEasing: (e) => a(Z(t, T, e))
 				})
 			}) : null,
-			v && I ? /* @__PURE__ */ u("div", {
+			v && I ? /* @__PURE__ */ h("div", {
 				className: w.inspector,
-				children: /* @__PURE__ */ u(N, {
+				children: /* @__PURE__ */ h(N, {
 					value: I.easing,
 					onChange: (e) => a(Z(t, v, e))
 				})
@@ -874,7 +870,7 @@ function $(e) {
 function _e(e) {
 	let { handle: t, ...n } = e, [, r] = x((e) => e + 1, 0);
 	v(() => t.subscribe(r), [t]);
-	let i = S(null), a = g(() => {
+	let i = S(null), a = p(() => {
 		r(), t.isPaused() || i.current?.request();
 	});
 	i.current = a, v(() => (t.isPaused() || a.request(), () => a.cancel()), [t, a]);
@@ -884,7 +880,7 @@ function _e(e) {
 			n.splice(0, n.length, ...e);
 		});
 	}, [t]), s = t.time(), c = t.duration();
-	return /* @__PURE__ */ u($, {
+	return /* @__PURE__ */ h($, {
 		...n,
 		tracks: t.tracks(),
 		duration: c,
@@ -913,4 +909,4 @@ function _e(e) {
 //#endregion
 export { N as a, D as c, G as i, O as l, $ as n, k as o, q as r, E as s, _e as t };
 
-//# sourceMappingURL=Timeline-BEyKaBXl.js.map
+//# sourceMappingURL=Timeline-SgmpQtUV.js.map