@weasel-js/ui 1.5.0 → 1.5.2

package/dist/chunks/{createKeyframeLayer-AL4jP0EX.js → createKeyframeLayer-DKtO0Sw_.js}

@@ -1,10 +1,12 @@
 import { t as e } from "./dlog-CMYiRF3Q.js";
-import { c as t, s as n, t as r } from "./Plot2D-CVZwQpWJ.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { cubicBezierEasing as s, openPointerSession as c, resolveEasing as l } from "@weasel-js/core";
-import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { c as t, s as n, t as r } from "./Plot2D-CXf_f7QD.js";
+import { t as i } from "./snap-CEjuWOhN.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cubicBezierEasing as c, openPointerSession as l, resolveEasing as u } from "@weasel-js/core";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { tokenPx as g } from "@weasel-js/theme";
 //#region src/components/CurveEditor/hitTest.ts
-function h(e, t, n) {
+function _(e, t, n) {
 	let r = n * n, i = null;
 	for (let n = 0; n < e.length; n++) {
 		let a = e[n], o = a.x - t.x, s = a.y - t.y, c = o * o + s * s;
@@ -15,7 +17,7 @@ function h(e, t, n) {
 	}
 	return i ? { index: i.index } : null;
 }
-function g(e, t, n) {
+function v(e, t, n) {
 	let r = n * n, i = null;
 	for (let n = 0; n < e.length; n++) {
 		let a = e[n];
@@ -39,29 +41,42 @@ function g(e, t, n) {
 		t: i.t
 	} : null;
 }
-var _ = {
-	root: "_root_19koz_1",
-	fill: "_fill_19koz_19",
-	curve: "_curve_19koz_25",
-	anchor: "_anchor_19koz_32",
-	active: "_active_19koz_43",
-	pinned: "_pinned_19koz_48",
-	locked: "_locked_19koz_55",
-	endpoint: "_endpoint_19koz_63",
-	hidden: "_hidden_19koz_71",
-	keyframe: "_keyframe_19koz_85",
-	handle: "_handle_19koz_92",
-	segmentTarget: "_segmentTarget_19koz_98",
-	keyframeGhost: "_keyframeGhost_19koz_108",
-	segmentBand: "_segmentBand_19koz_116",
-	handleStem: "_handleStem_19koz_136"
-}, v = {
+//#endregion
+//#region src/handles.ts
+var y = [
+	"--wzl-handle-size",
+	"--wzl-handle-size-sm",
+	"--wzl-handle-size-lg"
+];
+function b(e, t) {
+	return g(e, t);
+}
+function x(e, t) {
+	return b(e, t) / 2;
+}
+var S = {
+	root: "_root_61ttk_1",
+	fill: "_fill_61ttk_18",
+	curve: "_curve_61ttk_24",
+	anchor: "_anchor_61ttk_31",
+	active: "_active_61ttk_42",
+	pinned: "_pinned_61ttk_47",
+	locked: "_locked_61ttk_54",
+	endpoint: "_endpoint_61ttk_62",
+	hidden: "_hidden_61ttk_70",
+	keyframe: "_keyframe_61ttk_84",
+	handle: "_handle_61ttk_91",
+	segmentTarget: "_segmentTarget_61ttk_97",
+	keyframeGhost: "_keyframeGhost_61ttk_107",
+	segmentBand: "_segmentBand_61ttk_115",
+	handleStem: "_handleStem_61ttk_135"
+}, C = {
 	shift: !1,
 	alt: !1,
 	meta: !1,
 	ctrl: !1
 };
-function y(e) {
+function w(e) {
 	return {
 		shift: e.shiftKey,
 		alt: e.altKey,
@@ -69,22 +84,22 @@ function y(e) {
 		ctrl: e.ctrlKey
 	};
 }
-function b(i) {
-	let { layers: s, onLayerChange: l, onLayerCommit: h, width: g, height: b, xRange: x = [0, 1], yRange: S = [0, 1], grid: C, axes: w, xTicks: T, yTicks: E, className: D, style: O, children: k } = i, A = i.history !== !1, j = f(() => ({
-		xMin: x[0],
-		xMax: x[1],
-		yMin: S[0],
-		yMax: S[1]
-	}), [x, S]), M = f(() => ({
+function T(i) {
+	let { layers: a, onLayerChange: c, onLayerCommit: u, width: g, height: _, xRange: v = [0, 1], yRange: y = [0, 1], grid: b, axes: x, xTicks: T, yTicks: E, className: D, style: O, children: k } = i, A = i.history !== !1, j = p(() => ({
+		xMin: v[0],
+		xMax: v[1],
+		yMin: y[0],
+		yMax: y[1]
+	}), [v, y]), M = p(() => ({
 		width: g,
-		height: b
-	}), [g, b]), N = p(s);
-	N.current = s;
-	let P = p(j);
+		height: _
+	}), [g, _]), N = m(a);
+	N.current = a;
+	let P = m(j);
 	P.current = j;
-	let F = p(M);
+	let F = m(M);
 	F.current = M;
-	let I = p(null), L = u((e) => {
+	let I = m(null), L = d((e) => {
 		let r = P.current, i = F.current;
 		return {
 			modelRange: r,
@@ -93,17 +108,17 @@ function b(i) {
 			toModel: (e) => t(e, r, i),
 			modifiers: e
 		};
-	}, []), R = p(null), [z, B] = m(null), V = p([]), H = p([]), U = u(() => {
+	}, []), R = m(null), [z, B] = h(null), V = m([]), H = m([]), U = d(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let t of N.current) e.set(t.layer.id, t.state);
 		return e;
-	}, []), W = u((e) => {
+	}, []), W = d((e) => {
 		let t = N.current;
 		for (let n of t) {
 			let t = e.get(n.layer.id);
-			t !== void 0 && t !== n.state && l(n.layer.id, t);
+			t !== void 0 && t !== n.state && c(n.layer.id, t);
 		}
-	}, [l]), G = u(() => {
+	}, [c]), G = d(() => {
 		if (!A) return;
 		let e = V.current;
 		if (e.length === 0) return;
@@ -113,7 +128,7 @@ function b(i) {
 		A,
 		U,
 		W
-	]), K = u(() => {
+	]), K = d(() => {
 		if (!A) return;
 		let e = H.current;
 		if (e.length === 0) return;
@@ -123,9 +138,9 @@ function b(i) {
 		A,
 		U,
 		W
-	]), q = p(() => {}), J = p(() => {}), Y = p(() => {}), X = p(null), Z = u(() => {
+	]), q = m(() => {}), J = m(() => {}), Y = m(() => {}), X = m(null), Z = d(() => {
 		X.current = null, R.current = null, B(null);
-	}, []), Q = u((e) => {
+	}, []), Q = d((e) => {
 		for (let t of N.current) if (t.layer.id === e) return t.state;
 	}, []);
 	q.current = (e) => {
@@ -135,8 +150,8 @@ function b(i) {
 		if (!n) return;
 		let r = n.clientToModel(e), i = Q(t.layerId);
 		if (i === void 0) return;
-		let a = L(y(e)), o = t.gesture.onMove(i, r, e, a);
-		o !== i && l(t.layerId, o);
+		let a = L(w(e)), o = t.gesture.onMove(i, r, e, a);
+		o !== i && c(t.layerId, o);
 	}, J.current = (e) => {
 		let t = R.current;
 		if (!t) return;
@@ -145,8 +160,8 @@ function b(i) {
 			Z();
 			return;
 		}
-		let r = L(y(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
-		i !== n && l(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), h && h(t.layerId, i, t.startSelfState), Z();
+		let r = L(w(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
+		i !== n && c(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), u && u(t.layerId, i, t.startSelfState), Z();
 	}, Y.current = () => {
 		let e = R.current;
 		if (!e) return;
@@ -155,24 +170,24 @@ function b(i) {
 			Z();
 			return;
 		}
-		let n = L(v), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
-		r !== t && l(e.layerId, r), Z();
+		let n = L(C), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
+		r !== t && c(e.layerId, r), Z();
 	};
-	let $ = u((e, t, n) => {
+	let $ = d((e, t, n) => {
 		let r = U();
 		R.current = {
 			layerId: e,
 			gesture: n,
 			startStates: r,
 			startSelfState: r.get(e)
-		}, B(e), X.current = c(t.currentTarget, t, {
+		}, B(e), X.current = l(t.currentTarget, t, {
 			onMove: (e) => q.current(e),
 			onEnd: (e) => J.current(e),
 			onCancel: () => Y.current()
 		}, { capture: !1 });
-	}, [U]), ee = u((t, n) => {
+	}, [U]), ee = d((t, n) => {
 		if (R.current) return;
-		let r = L(y(t)), i = N.current, a = t.nativeEvent;
+		let r = L(w(t)), i = N.current, a = t.nativeEvent;
 		e("layered-curve-editor", "pointerdown", {
 			plot: n.plot,
 			model: n.model,
@@ -180,56 +195,56 @@ function b(i) {
 		});
 		let o = U();
 		for (let e = i.length - 1; e >= 0; e--) {
-			let s = i[e], c = s.layer.hitTest?.(s.state, n.plot, r);
-			if (!c) continue;
-			let u = s.state, d, f = s.layer.onPointerDown?.(u, c, a, r, {
+			let s = i[e], l = s.layer.hitTest?.(s.state, n.plot, r);
+			if (!l) continue;
+			let d = s.state, f, p = s.layer.onPointerDown?.(d, l, a, r, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					d = e, l(s.layer.id, e);
+					f = e, c(s.layer.id, e);
 				}
 			});
-			if (t.stopPropagation(), f) {
-				$(s.layer.id, t, f);
+			if (t.stopPropagation(), p) {
+				$(s.layer.id, t, p);
 				return;
 			}
-			d !== void 0 && (A && (V.current.push(o), H.current = []), h?.(s.layer.id, d, u));
+			f !== void 0 && (A && (V.current.push(o), H.current = []), u?.(s.layer.id, f, d));
 			return;
 		}
 		let s = null;
 		for (let e = i.length - 1; e >= 0; e--) {
-			let c = i[e];
-			if (!c.layer.onEmptyPointerDown) continue;
-			let u = c.state, d, f = c.layer.onEmptyPointerDown(u, n.model, a, r, {
+			let l = i[e];
+			if (!l.layer.onEmptyPointerDown) continue;
+			let u = l.state, d, f = l.layer.onEmptyPointerDown(u, n.model, a, r, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					d = e, l(c.layer.id, e);
+					d = e, c(l.layer.id, e);
 				}
 			});
 			if (f) {
-				$(c.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = o, R.current.startSelfState = o.get(c.layer.id));
+				$(l.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = o, R.current.startSelfState = o.get(l.layer.id));
 				return;
 			}
 			if (d !== void 0) {
 				s = {
-					id: c.layer.id,
+					id: l.layer.id,
 					next: d,
 					prev: u
 				};
 				break;
 			}
 		}
-		s && (A && (V.current.push(o), H.current = []), h?.(s.id, s.next, s.prev));
+		s && (A && (V.current.push(o), H.current = []), u?.(s.id, s.next, s.prev));
 	}, [
 		L,
 		$,
-		l,
-		h,
+		c,
+		u,
 		A,
 		U
-	]), te = u((e) => {
-		let t = L(y(e)), n = N.current;
+	]), te = d((e) => {
+		let t = L(w(e)), n = N.current;
 		if (A && (e.metaKey || e.ctrlKey)) {
 			let t = e.key.toLowerCase();
 			if (t === "z") {
@@ -246,8 +261,8 @@ function b(i) {
 			if (!i.layer.onKeyDown) continue;
 			let a = U(), o;
 			if (i.layer.onKeyDown(i.state, e.nativeEvent, t, { commit(e) {
-				o = e, l(i.layer.id, e);
-			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), h?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
+				o = e, c(i.layer.id, e);
+			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), u?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
 		}
 	}, [
 		A,
@@ -255,28 +270,28 @@ function b(i) {
 		K,
 		L,
 		U,
-		l,
-		h
+		c,
+		u
 	]);
-	d(() => () => {
+	f(() => () => {
 		X.current?.cancel();
 	}, []);
-	let ne = f(() => ({
+	let ne = p(() => ({
 		modelRange: j,
 		plotSize: M,
 		toPlot: (e) => n(e, j, M),
 		toModel: (e) => t(e, j, M)
 	}), [j, M]);
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ s(r, {
 		ref: I,
-		className: [_.root, D].filter(Boolean).join(" "),
+		className: [S.root, D].filter(Boolean).join(" "),
 		style: O,
 		width: g,
-		height: b,
-		xRange: x,
-		yRange: S,
-		grid: C,
-		axes: w,
+		height: _,
+		xRange: v,
+		yRange: y,
+		grid: b,
+		axes: x,
 		xTicks: T,
 		yTicks: E,
 		tabIndex: A ? 0 : void 0,
@@ -284,7 +299,7 @@ function b(i) {
 		"aria-label": i["aria-label"],
 		onPointerDown: ee,
 		onKeyDown: te,
-		children: [k, s.map((e) => {
+		children: [k, a.map((e) => {
 			let t = {
 				...ne,
 				modifiers: {
@@ -295,7 +310,7 @@ function b(i) {
 				},
 				isActive: z === e.layer.id
 			};
-			return /* @__PURE__ */ a("g", {
+			return /* @__PURE__ */ o("g", {
 				"data-layer-id": e.layer.id,
 				children: e.layer.render(e.state, t)
 			}, e.layer.id);
@@ -303,19 +318,9 @@ function b(i) {
 	});
 }
 //#endregion
-//#region src/components/CurveEditor/snap.ts
-function x(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/CurveEditor/createKeyframeLayer.tsx
-var S = 16, C = 8, w = 8, T = 6, E = 6, D = 4.5, O = 3.5, k = 10, A = .01;
-function j(e) {
+var E = 16, D = 8, O = 8, k = 6, A = x("--wzl-handle-size"), j = 3.5, M = 10, N = .01;
+function P(e) {
 	return {
 		keys: e,
 		selectedKey: null,
@@ -323,14 +328,14 @@ function j(e) {
 		drag: null
 	};
 }
-function M(e, t) {
+function F(e, t) {
 	return t ? Math.min(t[1], Math.max(t[0], e)) : e;
 }
-function N(e) {
+function I(e) {
 	let t = e?.easing;
 	return typeof t == "object" && t && "bezier" in t ? t.bezier : null;
 }
-function P(e, t, n, r) {
+function L(e, t, n, r) {
 	let i = {
 		...e[t],
 		t: n,
@@ -341,7 +346,7 @@ function P(e, t, n, r) {
 		selectedKey: s
 	};
 }
-function F(e) {
+function R(e) {
 	let { drag: t, keys: n } = e;
 	if (!t) return {
 		keys: n,
@@ -352,7 +357,7 @@ function F(e) {
 		return e && e.t === t.t && e.value === t.value ? {
 			keys: n,
 			selectedKey: t.index
-		} : P(n, t.index, t.t, t.value);
+		} : L(n, t.index, t.t, t.value);
 	}
 	let r = n.slice();
 	return r[t.segment] = {
@@ -363,18 +368,18 @@ function F(e) {
 		selectedKey: e.selectedKey
 	};
 }
-function I(e = {}) {
-	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), c = e.snapRadiusPx ?? E;
-	function u(e, t, n) {
+function z(e = {}) {
+	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), l = e.snapRadiusPx ?? 6;
+	function d(e, t, n) {
 		let r = e.drag;
-		return r?.kind === "handle" && r.segment === n ? s(...r.bezier) : l(t[n].easing);
+		return r?.kind === "handle" && r.segment === n ? c(...r.bezier) : u(t[n].easing);
 	}
-	function d(e, t, n) {
+	function f(e, t, n) {
 		let r = [];
 		for (let i = 1; i < t.length; i++) {
-			let a = t[i - 1], o = t[i], s = u(e, t, i), c = [];
-			for (let e = 0; e <= S; e++) {
-				let t = e / S;
+			let a = t[i - 1], o = t[i], s = d(e, t, i), c = [];
+			for (let e = 0; e <= E; e++) {
+				let t = e / E;
 				c.push(n.toPlot({
 					x: a.t + (o.t - a.t) * t,
 					y: a.value + (o.value - a.value) * s(t)
@@ -384,81 +389,81 @@ function I(e = {}) {
 		}
 		return r;
 	}
-	function f(e) {
+	function p(e) {
 		let t = e.selectedSegment;
 		if (t === null || t < 1 || t >= e.keys.length) return null;
 		let n = e.drag;
-		return n?.kind === "handle" && n.segment === t ? n.bezier : N(e.keys[t]);
+		return n?.kind === "handle" && n.segment === t ? n.bezier : I(e.keys[t]);
 	}
-	function p(e, t, n) {
+	function m(e, t, n) {
 		let r = e.keys[e.selectedSegment - 1], i = e.keys[e.selectedSegment], a = (e, t) => n.toPlot({
 			x: r.t + e * (i.t - r.t),
 			y: r.value + t * (i.value - r.value)
 		});
 		return [a(t[0], t[1]), a(t[2], t[3])];
 	}
-	let m = (e) => e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x.toFixed(2)},${e.y.toFixed(2)}`).join("");
-	function v(e, t) {
-		let s = e.drag?.kind === "key" ? F(e).keys : e.keys, c = d(e, s, t), l = c.flatMap((e, t) => t === 0 ? e : e.slice(1)), u = e.selectedSegment, h = f(e), g = e.drag?.kind === "key" ? e.drag.index : null;
-		return /* @__PURE__ */ o(i, { children: [
-			u !== null && u >= 1 && u < s.length ? (() => {
+	let h = (e) => e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x.toFixed(2)},${e.y.toFixed(2)}`).join("");
+	function g(e, t) {
+		let i = e.drag?.kind === "key" ? R(e).keys : e.keys, c = f(e, i, t), l = c.flatMap((e, t) => t === 0 ? e : e.slice(1)), u = e.selectedSegment, d = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
+		return /* @__PURE__ */ s(a, { children: [
+			u !== null && u >= 1 && u < i.length ? (() => {
 				let e = t.toPlot({
-					x: s[u - 1].t,
+					x: i[u - 1].t,
 					y: 0
 				}).x, n = t.toPlot({
-					x: s[u].t,
+					x: i[u].t,
 					y: 0
 				}).x;
-				return /* @__PURE__ */ a("rect", {
-					className: _.segmentBand,
+				return /* @__PURE__ */ o("rect", {
+					className: S.segmentBand,
 					x: Math.min(e, n),
 					y: 0,
 					width: Math.abs(n - e),
 					height: t.plotSize.height
 				});
 			})() : null,
-			l.length > 1 ? /* @__PURE__ */ a("path", {
+			l.length > 1 ? /* @__PURE__ */ o("path", {
 				"data-curve-element": "curve",
-				className: _.curve,
-				d: m(l)
+				className: S.curve,
+				d: h(l)
 			}) : null,
-			c.map((e, t) => /* @__PURE__ */ a("path", {
-				className: _.segmentTarget,
-				d: m(e),
+			c.map((e, t) => /* @__PURE__ */ o("path", {
+				className: S.segmentTarget,
+				d: h(e),
 				role: "button",
 				tabIndex: 0,
-				"aria-label": `${n} segment into ${r(s[t + 1].t)}`,
+				"aria-label": `${n} segment into ${r(i[t + 1].t)}`,
 				"aria-current": u === t + 1 ? "true" : void 0,
 				"data-segment-index": t + 1
 			}, `seg-${t + 1}`)),
-			h ? (() => {
-				let [r, s] = p(e, h, t), c = t.toPlot({
+			d ? (() => {
+				let [r, i] = m(e, d, t), c = t.toPlot({
 					x: e.keys[u - 1].t,
 					y: e.keys[u - 1].value
 				}), l = t.toPlot({
 					x: e.keys[u].t,
 					y: e.keys[u].value
 				});
-				return /* @__PURE__ */ o(i, { children: [
-					/* @__PURE__ */ a("line", {
-						className: _.handleStem,
+				return /* @__PURE__ */ s(a, { children: [
+					/* @__PURE__ */ o("line", {
+						className: S.handleStem,
 						x1: c.x,
 						y1: c.y,
 						x2: r.x,
 						y2: r.y
 					}),
-					/* @__PURE__ */ a("line", {
-						className: _.handleStem,
+					/* @__PURE__ */ o("line", {
+						className: S.handleStem,
 						x1: l.x,
 						y1: l.y,
-						x2: s.x,
-						y2: s.y
+						x2: i.x,
+						y2: i.y
 					}),
-					[r, s].map((e, t) => /* @__PURE__ */ a("circle", {
-						className: _.handle,
+					[r, i].map((e, t) => /* @__PURE__ */ o("circle", {
+						className: S.handle,
 						cx: e.x,
 						cy: e.y,
-						r: O,
+						r: j,
 						role: "button",
 						tabIndex: 0,
 						"aria-label": `${n} bezier handle ${t + 1}`,
@@ -466,38 +471,38 @@ function I(e = {}) {
 					}, `handle-${t}`))
 				] });
 			})() : null,
-			e.keys.map((i, o) => {
+			e.keys.map((i, a) => {
 				let s = t.toPlot({
 					x: i.t,
 					y: i.value
 				});
-				return /* @__PURE__ */ a("rect", {
-					className: _.keyframe,
-					x: s.x - D,
-					y: s.y - D,
-					width: D * 2,
-					height: D * 2,
+				return /* @__PURE__ */ o("rect", {
+					className: S.keyframe,
+					x: s.x - A,
+					y: s.y - A,
+					width: A * 2,
+					height: A * 2,
 					transform: `rotate(45 ${s.x} ${s.y})`,
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${n} key at ${r(i.t)}`,
-					"aria-current": e.selectedKey === o ? "true" : void 0,
-					"data-keyframe-index": o,
-					"data-dragging": g === o ? "true" : void 0
-				}, `key-${o}`);
+					"aria-current": e.selectedKey === a ? "true" : void 0,
+					"data-keyframe-index": a,
+					"data-dragging": g === a ? "true" : void 0
+				}, `key-${a}`);
 			}),
 			e.drag?.kind === "key" ? (() => {
 				let n = t.toPlot({
 					x: e.drag.t,
 					y: e.drag.value
 				});
-				return /* @__PURE__ */ a("rect", {
+				return /* @__PURE__ */ o("rect", {
 					"aria-hidden": "true",
-					className: _.keyframeGhost,
-					x: n.x - D,
-					y: n.y - D,
-					width: D * 2,
-					height: D * 2,
+					className: S.keyframeGhost,
+					x: n.x - A,
+					y: n.y - A,
+					width: A * 2,
+					height: A * 2,
 					transform: `rotate(45 ${n.x} ${n.y})`,
 					"data-keyframe-ghost": ""
 				});
@@ -505,23 +510,23 @@ function I(e = {}) {
 		] });
 	}
 	function y(e, t, n) {
-		let r = f(e);
+		let r = p(e);
 		if (r) {
-			let i = h(p(e, r, n), t, w);
+			let i = _(m(e, r, n), t, O);
 			if (i) return {
 				kind: "handle",
 				payload: { handle: i.index }
 			};
 		}
-		let i = h(e.keys.map((e) => n.toPlot({
+		let i = _(e.keys.map((e) => n.toPlot({
 			x: e.t,
 			y: e.value
-		})), t, C);
+		})), t, D);
 		if (i) return {
 			kind: "key",
 			payload: { index: i.index }
 		};
-		let a = g(d(e, e.keys, n), t, T);
+		let a = v(f(e, e.keys, n), t, k);
 		return a ? {
 			kind: "segment",
 			payload: { segment: a.segIdx + 1 }
@@ -529,26 +534,26 @@ function I(e = {}) {
 	}
 	function b(t) {
 		return {
-			onMove(n, r, i, a) {
-				let o = M(r.x, e.xClamp);
-				if (e.snapX && !i.altKey) {
-					let t = (a.modelRange.xMax - a.modelRange.xMin) / a.plotSize.width;
-					o = M(x(o, e.snapX, Math.abs(t) * c), e.xClamp);
+			onMove(n, r, a, o) {
+				let s = F(r.x, e.xClamp);
+				if (e.snapX && !a.altKey) {
+					let t = (o.modelRange.xMax - o.modelRange.xMin) / o.plotSize.width;
+					s = F(i(s, e.snapX, Math.abs(t) * l), e.xClamp);
 				}
 				return {
 					...n,
 					drag: {
 						kind: "key",
 						index: t,
-						t: o,
-						value: M(r.y, e.yClamp)
+						t: s,
+						value: F(r.y, e.yClamp)
 					}
 				};
 			},
 			onCommit(e) {
 				return {
 					...e,
-					...F(e),
+					...R(e),
 					drag: null
 				};
 			},
@@ -560,7 +565,7 @@ function I(e = {}) {
 			}
 		};
 	}
-	function j(e, t) {
+	function x(e, t) {
 		return {
 			onMove(n, r) {
 				let i = n.keys[e - 1], a = n.keys[e], o = n.drag;
@@ -578,7 +583,7 @@ function I(e = {}) {
 			onCommit(e) {
 				return {
 					...e,
-					...F(e),
+					...R(e),
 					drag: null
 				};
 			},
@@ -590,10 +595,10 @@ function I(e = {}) {
 			}
 		};
 	}
-	function I(e, t, n, r, i) {
+	function C(e, t, n, r, i) {
 		if (n.button === 0) {
 			if (t.kind === "handle") {
-				let n = f(e), r = e.selectedSegment;
+				let n = p(e), r = e.selectedSegment;
 				if (!n || r === null) return;
 				let { handle: a } = t.payload;
 				return i.commit({
@@ -603,7 +608,7 @@ function I(e = {}) {
 						segment: r,
 						bezier: n
 					}
-				}), j(r, a);
+				}), x(r, a);
 			}
 			if (t.kind === "key") {
 				let { index: n } = t.payload, r = e.keys[n];
@@ -627,10 +632,10 @@ function I(e = {}) {
 			}
 		}
 	}
-	function L(n, r, i, a) {
+	function w(n, r, i, a) {
 		let o = r.target;
 		if (o?.closest?.("[data-layer-id]")?.getAttribute("data-layer-id") !== t) return;
-		let s = r.key === "Enter" || r.key === " ", c = r.key === "ArrowRight" ? 1 : r.key === "ArrowLeft" ? -1 : 0, l = r.key === "ArrowUp" ? 1 : r.key === "ArrowDown" ? -1 : 0, u = r.shiftKey ? k : 1, d = o.closest("[data-keyframe-index]");
+		let s = r.key === "Enter" || r.key === " ", c = r.key === "ArrowRight" ? 1 : r.key === "ArrowLeft" ? -1 : 0, l = r.key === "ArrowUp" ? 1 : r.key === "ArrowDown" ? -1 : 0, u = r.shiftKey ? M : 1, d = o.closest("[data-keyframe-index]");
 		if (d) {
 			let t = Number(d.getAttribute("data-keyframe-index")), o = n.keys[t];
 			if (!o) return;
@@ -643,28 +648,28 @@ function I(e = {}) {
 			}
 			if (c === 0 && l === 0) return;
 			r.preventDefault();
-			let f = i.modelRange, p = (e.step?.x ?? Math.abs(f.xMax - f.xMin) / 100) * u, m = (e.step?.y ?? Math.abs(f.yMax - f.yMin) / 100) * u, h = M(o.t + c * p, e.xClamp), g = M(o.value + l * m, e.yClamp);
+			let f = i.modelRange, p = (e.step?.x ?? Math.abs(f.xMax - f.xMin) / 100) * u, m = (e.step?.y ?? Math.abs(f.yMax - f.yMin) / 100) * u, h = F(o.t + c * p, e.xClamp), g = F(o.value + l * m, e.yClamp);
 			if (h === o.t && g === o.value) return;
 			a.commit({
 				...n,
-				...P(n.keys, t, h, g),
+				...L(n.keys, t, h, g),
 				drag: null
 			});
 			return;
 		}
-		let p = o.closest("[data-segment-index]");
-		if (p && s) {
+		let f = o.closest("[data-segment-index]");
+		if (f && s) {
 			r.preventDefault(), a.commit({
 				...n,
-				selectedSegment: Number(p.getAttribute("data-segment-index"))
+				selectedSegment: Number(f.getAttribute("data-segment-index"))
 			});
 			return;
 		}
-		let m = o.closest("[data-handle-index]"), h = f(n);
+		let m = o.closest("[data-handle-index]"), h = p(n);
 		if (m && h && n.selectedSegment !== null && (c !== 0 || l !== 0)) {
 			r.preventDefault();
 			let e = Number(m.getAttribute("data-handle-index")), t = [...h];
-			t[e * 2] = Math.min(1, Math.max(0, t[e * 2] + c * A * u)), t[e * 2 + 1] += l * A * u;
+			t[e * 2] = Math.min(1, Math.max(0, t[e * 2] + c * N * u)), t[e * 2 + 1] += l * N * u;
 			let i = {
 				kind: "handle",
 				segment: n.selectedSegment,
@@ -672,7 +677,7 @@ function I(e = {}) {
 			};
 			a.commit({
 				...n,
-				...F({
+				...R({
 					...n,
 					drag: i
 				}),
@@ -682,13 +687,13 @@ function I(e = {}) {
 	}
 	return {
 		id: t,
-		render: v,
+		render: g,
 		hitTest: y,
-		onPointerDown: I,
-		onKeyDown: L
+		onPointerDown: C,
+		onKeyDown: w
 	};
 }
 //#endregion
-export { b as a, g as c, x as i, I as n, _ as o, j as r, h as s, F as t };
+export { S as a, b as c, T as i, _ as l, z as n, y as o, P as r, x as s, R as t, v as u };
 
-//# sourceMappingURL=createKeyframeLayer-AL4jP0EX.js.map
+//# sourceMappingURL=createKeyframeLayer-DKtO0Sw_.js.map