@weasel-js/ui 1.5.2 → 1.6.1

package/dist/chunks/{Tabs-BFHikpml.js → Tabs-BbpzLLdY.js}

@@ -38,4 +38,4 @@ function l({ children: t, className: n, ...i }) {
 //#endregion
 export { o as i, s as n, l as r, c as t };
 
-//# sourceMappingURL=Tabs-BFHikpml.js.map
+//# sourceMappingURL=Tabs-BbpzLLdY.js.map

package/dist/chunks/Tabs-BbpzLLdY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-BbpzLLdY.js","names":["Tabs","RACTabs","s","TabList","RACTabList","Tab","RACTab","TabPanel","RACTabPanel","Tabs_module_default","Tabs$1","rest","Tabs","className","TabList$1","TabList","Tab$1","Tab","TabPanel$1","TabPanel"],"sources":["../../src/components/Tabs/Tabs.module.css","../../src/components/Tabs/Tabs.tsx"],"sourcesContent":[".tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.tabs[data-orientation=\"horizontal\"] {\n  flex-direction: column;\n}\n\n.tabs[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  gap: var(--wzl-space-6);\n}\n\n.list {\n  display: flex;\n  gap: var(--wzl-space-1);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.tabs[data-orientation=\"vertical\"] .list {\n  flex-direction: column;\n  border-bottom: none;\n  border-right: 1px solid var(--wzl-border);\n  padding-right: var(--wzl-space-4);\n}\n\n.tab {\n  position: relative;\n  padding: var(--wzl-space-3) var(--wzl-space-5);\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n  outline: none;\n  transition: color var(--wzl-motion-fast);\n}\n\n.tab[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected] {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected]::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  height: 2px;\n  background: var(--wzl-accent-strong);\n}\n\n.tabs[data-orientation=\"vertical\"] .tab[data-selected]::after {\n  left: auto;\n  right: -9px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  height: auto;\n}\n\n.tab[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.tab[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.panel {\n  padding: var(--wzl-space-6) 0;\n  outline: none;\n}\n\n.panel[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport {\n  Tabs as RACTabs,\n  TabList as RACTabList,\n  Tab as RACTab,\n  TabPanel as RACTabPanel,\n  type TabsProps as RACTabsProps,\n  type TabListProps as RACTabListProps,\n  type TabProps as RACTabProps,\n  type TabPanelProps as RACTabPanelProps,\n} from 'react-aria-components';\nimport s from './Tabs.module.css';\n\n/** Props for {@link Tabs}, on top of React Aria's `Tabs` props. */\nexport type TabsProps = Omit<RACTabsProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Tab set wrapping React Aria's Tabs, skinned against the `--wzl-*` tokens.\n * Holds a {@link TabList} and one {@link TabPanel} per tab.\n */\nexport function Tabs({ children, className, ...rest }: TabsProps) {\n  return (\n    <RACTabs {...rest} className={[s.tabs, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabs>\n  );\n}\n\n/** Props for {@link TabList}, on top of React Aria's `TabList` props. */\nexport type TabListProps<T extends object> = Omit<RACTabListProps<T>, 'className'> & {\n  className?: string;\n};\n\n/** The row of tab buttons inside a {@link Tabs}. */\nexport function TabList<T extends object>({ className, ...rest }: TabListProps<T>) {\n  return <RACTabList<T> {...rest} className={[s.list, className].filter(Boolean).join(' ')} />;\n}\n\n/** Props for {@link Tab}, on top of React Aria's `Tab` props. */\nexport type TabProps = Omit<RACTabProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One tab button. Its `id` selects the {@link TabPanel} it reveals. */\nexport function Tab({ children, className, ...rest }: TabProps) {\n  return (\n    <RACTab {...rest} className={[s.tab, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTab>\n  );\n}\n\n/** Props for {@link TabPanel}, on top of React Aria's `TabPanel` props. */\nexport type TabPanelProps = Omit<RACTabPanelProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** The content shown for the {@link Tab} whose `id` matches this panel's. */\nexport function TabPanel({ children, className, ...rest }: TabPanelProps) {\n  return (\n    <RACTabPanel {...rest} className={[s.panel, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabPanel>\n  );\n}\n"],"mappings":";;;;;;;;;;ACuBA,SAAgBA,EAAK,EAAE,aAAU,cAAW,GAAGW,KAAmB;CAChE,OACE,kBAACV,GAAD;EAAS,GAAIU;EAAM,WAAW,CAACT,EAAE,MAAMW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvE;CACM,CAAA;AAEb;AAQA,SAAgBV,EAA0B,EAAE,cAAW,GAAGQ,KAAyB;CACjF,OAAO,kBAACP,GAAD;EAAe,GAAIO;EAAM,WAAW,CAACT,EAAE,MAAMW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAAI,CAAA;AAC7F;AASA,SAAgBR,EAAI,EAAE,aAAU,cAAW,GAAGM,KAAkB;CAC9D,OACE,kBAACL,GAAD;EAAQ,GAAIK;EAAM,WAAW,CAACT,EAAE,KAAKW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE;CACK,CAAA;AAEZ;AASA,SAAgBN,EAAS,EAAE,aAAU,cAAW,GAAGI,KAAuB;CACxE,OACE,kBAACH,GAAD;EAAa,GAAIG;EAAM,WAAW,CAACT,EAAE,OAAOW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5E;CACU,CAAA;AAEjB"}

package/dist/chunks/{Timeline-DNKY_yiK.js → Timeline--58F7MED.js}

@@ -1,46 +1,45 @@
-import { H as e, R as t, i as n } from "./icons-DFLytcui.js";
-import { r } from "./Plot2D-CXf_f7QD.js";
-import { i, n as a, t as o } from "./createKeyframeLayer-DKtO0Sw_.js";
-import { t as s } from "./snap-CEjuWOhN.js";
-import { t as c } from "./DetentSlider-CAubVX0J.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-Dk8SRS8g.js";
+import { n } from "./Disclosure-0G0uh2fa.js";
+import { r } from "./Plot2D-CTXHkL5p.js";
+import { i, n as a, t as o } from "./createKeyframeLayer-Czj6Y235.js";
+import { t as s } from "./snap-DRjbOiG9.js";
+import { t as c } from "./DetentSlider-CL8TlX3S.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_yy4iy_1",
-	tick: "_tick_yy4iy_11",
-	playhead: "_playhead_yy4iy_29",
-	lane: "_lane_yy4iy_38",
-	laneLabel: "_laneLabel_yy4iy_45",
-	disclosure: "_disclosure_yy4iy_65",
-	disclosureIcon: "_disclosureIcon_yy4iy_66",
-	disclosureCollapsed: "_disclosureCollapsed_yy4iy_67",
-	laneTrack: "_laneTrack_yy4iy_69",
-	key: "_key_yy4iy_76",
-	eventMark: "_eventMark_yy4iy_76",
-	keyGhost: "_keyGhost_yy4iy_96",
-	eventGhost: "_eventGhost_yy4iy_96",
-	graphHost: "_graphHost_yy4iy_113",
-	graph: "_graph_yy4iy_113",
-	nestedBar: "_nestedBar_yy4iy_132",
-	transport: "_transport_yy4iy_141",
-	transportButton: "_transportButton_yy4iy_150",
-	transportRow: "_transportRow_yy4iy_176",
-	time: "_time_yy4iy_194",
-	rate: "_rate_yy4iy_200",
-	rateSlider: "_rateSlider_yy4iy_201",
-	rateReadout: "_rateReadout_yy4iy_205",
-	root: "_root_yy4iy_211",
-	label: "_label_yy4iy_226",
-	body: "_body_yy4iy_228",
-	gutter: "_gutter_yy4iy_46",
-	rulerWrap: "_rulerWrap_yy4iy_230",
-	lanes: "_lanes_yy4iy_232",
-	inspector: "_inspector_yy4iy_239",
-	segment: "_segment_yy4iy_248",
-	easingPicker: "_easingPicker_yy4iy_258",
-	easingLabel: "_easingLabel_yy4iy_259",
-	easingPreview: "_easingPreview_yy4iy_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,
@@ -131,43 +130,43 @@ var k = Object.keys(f), A = 24, j = {
 	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", {
+	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 / 23 * 100},${100 - e * 100}`).join(" ");
+	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"
 				})
@@ -208,20 +207,20 @@ function B(e, t) {
 		to: r + n
 	};
 }
-function ee(e, t, n, r) {
+function V(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) {
+function ee(e, t, n) {
 	return B({
 		from: e.from + t,
 		to: e.to + t
 	}, n);
 }
-function V(e, t, n) {
+function H(e, t, n) {
 	let i = e.to - e.from;
 	if (t <= 0 || i <= 0) return [];
 	let a = r(n / t * i), o = [];
@@ -230,13 +229,13 @@ function V(e, t, n) {
 }
 //#endregion
 //#region src/components/Timeline/LaneGraph.tsx
-var H = 8, ne = 10;
+var te = 8, ne = 10;
 function re(e) {
-	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * H / (100 - 2 * H);
+	let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = r * te / 84;
 	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);
-	}, [N, P] = re(O.keys), F = _.width > 0 ? V(r, _.width, 64) : [];
-	return /* @__PURE__ */ u("div", {
+		r.keys !== n.keys && m(r.keys);
+	}, [N, P] = re(O.keys), F = _.width > 0 ? H(r, _.width, 64) : [];
+	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();
 	}, []);
@@ -335,8 +334,8 @@ function se(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(6) - e.toMs(0);
+		let e = E.current?.getBoundingClientRect().width ?? 0, t = F(r, e);
+		return t.toMs(6) - t.toMs(0);
 	}, N = i === "graph" && t.numeric, P = t.kind === "sampled" ? t.track.keys : [], I = (e) => (n) => {
 		if (n.button !== 0) return;
 		n.stopPropagation(), o(e);
@@ -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(V(t, f(e.clientX), Math.exp(e.deltaY * ce), n));
 		else {
-			let r = f(), i = r === 0 ? 0 : (t.to - t.from) / r;
-			a(te(t, e.deltaY * i, n));
+			let r = d(), i = r === 0 ? 0 : (t.to - t.from) / r;
+			a(ee(t, e.deltaY * i, n));
 		}
-	}, _ = V(t, c, 64), b = (e) => L(t, e);
-	return /* @__PURE__ */ d("div", {
+	}, _ = H(t, c, 64), b = (e) => L(t, e);
+	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(() => {
-		let e = new Set([0, n]);
+	}, O = b(() => fe(t, u), [t, u]), k = b(() => {
+		let e = /* @__PURE__ */ new Set([0, n]);
 		for (let t of O) if (t.kind === "sampled") for (let n of t.track.keys) e.add(n.t + t.offset);
 		return [...e];
 	}, [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,14 +880,14 @@ 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,
 		playhead: s,
 		onChange: o,
 		onScrub: t.seek,
-		transport: e.transport === !1 ? !1 : {
+		transport: e.transport !== !1 && {
 			paused: t.isPaused(),
 			loop: t.loop(),
 			rate: t.timeScale(),
@@ -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-DNKY_yiK.js.map
+//# sourceMappingURL=Timeline--58F7MED.js.map