@weasel-js/ui 1.7.0 → 1.7.1

package/dist/chunks/{createKeyframeLayer-DVl321_l.js → createKeyframeLayer-BTa4LyJE.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./dlog-F0I8KsIW.js";
-import { c as t, s as n, t as r } from "./Plot2D-CTXHkL5p.js";
-import { t as i } from "./snap-DRjbOiG9.js";
-import { cubicBezierEasing as a, openPointerSession as o, resolveEasing as s } from "@weasel-js/core";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-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";
+import { c as t, s as n, t as r } from "./Plot2D-BHNbgCAl.js";
+import { n as i } from "./handles-CqVANLtu.js";
+import { t as a } from "./snap-DRjbOiG9.js";
+import { cubicBezierEasing as o, openPointerSession as s, resolveEasing as c, useLatest as l } from "@weasel-js/core";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useCallback as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
 //#region src/components/CurveEditor/hitTest.ts
-function _(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], o = a.x - t.x, s = a.y - t.y, c = o * o + s * s;
@@ -17,7 +17,7 @@ function _(e, t, n) {
 	}
 	return i ? { index: i.index } : null;
 }
-function v(e, t, n) {
+function y(e, t, n) {
 	let r = n * n, i = null;
 	for (let n = 0; n < e.length; n++) {
 		let a = e[n];
@@ -41,20 +41,7 @@ function v(e, t, n) {
 		t: i.t
 	} : null;
 }
-//#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 = {
+var b = {
 	root: "_root_14z4g_1",
 	fill: "_fill_14z4g_18",
 	curve: "_curve_14z4g_24",
@@ -69,13 +56,13 @@ var S = {
 	keyframeGhost: "_keyframeGhost_14z4g_101",
 	segmentBand: "_segmentBand_14z4g_109",
 	handleStem: "_handleStem_14z4g_129"
-}, C = {
+}, x = {
 	shift: !1,
 	alt: !1,
 	meta: !1,
 	ctrl: !1
 };
-function w(e) {
+function S(e) {
 	return {
 		shift: e.shiftKey,
 		alt: e.altKey,
@@ -83,23 +70,17 @@ function w(e) {
 		ctrl: e.ctrlKey
 	};
 }
-function T(i) {
-	let { layers: a, onLayerChange: s, onLayerCommit: c, 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: _
-	}), [g, _]), N = m(a);
-	N.current = a;
-	let P = m(j);
-	P.current = j;
-	let F = m(M);
-	F.current = M;
-	let I = m(null), L = d((e) => {
-		let r = P.current, i = F.current;
+function C(i) {
+	let { layers: a, onLayerChange: o, onLayerCommit: c, width: u, height: v, xRange: y = [0, 1], yRange: C = [0, 1], grid: w, axes: T, xTicks: E, yTicks: D, className: O, style: k, children: A } = i, j = i.history !== !1, M = h(() => ({
+		xMin: y[0],
+		xMax: y[1],
+		yMin: C[0],
+		yMax: C[1]
+	}), [y, C]), N = h(() => ({
+		width: u,
+		height: v
+	}), [u, v]), P = l(a), F = l(M), I = l(N), L = g(null), R = p((e) => {
+		let r = F.current, i = I.current;
 		return {
 			modelRange: r,
 			plotSize: i,
@@ -107,86 +88,89 @@ function T(i) {
 			toModel: (e) => t(e, r, i),
 			modifiers: e
 		};
-	}, []), R = m(null), [z, B] = h(null), V = m([]), H = m([]), U = d(() => {
+	}, [F, I]), z = g(null), [ee, B] = _(null), V = g([]), H = g([]), U = p(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of N.current) e.set(t.layer.id, t.state);
+		for (let t of P.current) e.set(t.layer.id, t.state);
 		return e;
-	}, []), W = d((e) => {
-		let t = N.current;
+	}, [P]), W = p((e) => {
+		let t = P.current;
 		for (let n of t) {
 			let t = e.get(n.layer.id);
-			t !== void 0 && t !== n.state && s(n.layer.id, t);
+			t !== void 0 && t !== n.state && o(n.layer.id, t);
 		}
-	}, [s]), G = d(() => {
-		if (!A) return;
+	}, [o, P]), G = p(() => {
+		if (!j) return;
 		let e = V.current;
 		if (e.length === 0) return;
 		let t = e.pop();
 		H.current.push(U()), W(t);
 	}, [
-		A,
+		j,
 		U,
 		W
-	]), K = d(() => {
-		if (!A) return;
+	]), K = p(() => {
+		if (!j) return;
 		let e = H.current;
 		if (e.length === 0) return;
 		let t = e.pop();
 		V.current.push(U()), W(t);
 	}, [
-		A,
+		j,
 		U,
 		W
-	]), q = m(() => {}), J = m(() => {}), Y = m(() => {}), X = m(null), Z = d(() => {
-		X.current = null, R.current = null, B(null);
-	}, []), Q = d((e) => {
-		for (let t of N.current) if (t.layer.id === e) return t.state;
-	}, []);
-	q.current = (e) => {
-		let t = R.current;
+	]), q = g(null), J = p(() => {
+		q.current = null, z.current = null, B(null);
+	}, []), Y = p((e) => {
+		for (let t of P.current) if (t.layer.id === e) return t.state;
+	}, [P]), X = l((e) => {
+		let t = z.current;
 		if (!t) return;
-		let n = I.current;
+		let n = L.current;
 		if (!n) return;
-		let r = n.clientToModel(e), i = Q(t.layerId);
+		let r = n.clientToModel(e), i = Y(t.layerId);
 		if (i === void 0) return;
-		let a = L(w(e)), o = t.gesture.onMove(i, r, e, a);
-		o !== i && s(t.layerId, o);
-	}, J.current = (e) => {
-		let t = R.current;
+		let a = R(S(e)), s = t.gesture.onMove(i, r, e, a);
+		s !== i && o(t.layerId, s);
+	}), Z = l((e) => {
+		let t = z.current;
 		if (!t) return;
-		let n = Q(t.layerId);
+		let n = Y(t.layerId);
 		if (n === void 0) {
-			Z();
+			J();
 			return;
 		}
-		let r = L(w(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
-		i !== n && s(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), c && c(t.layerId, i, t.startSelfState), Z();
-	}, Y.current = () => {
-		let e = R.current;
+		let r = R(S(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
+		i !== n && o(t.layerId, i), j && (V.current.push(t.startStates), H.current = []), c && c(t.layerId, i, t.startSelfState), J();
+	}), Q = l(() => {
+		let e = z.current;
 		if (!e) return;
-		let t = Q(e.layerId);
+		let t = Y(e.layerId);
 		if (t === void 0) {
-			Z();
+			J();
 			return;
 		}
-		let n = L(C), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
-		r !== t && s(e.layerId, r), Z();
-	};
-	let $ = d((e, t, n) => {
+		let n = R(x), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
+		r !== t && o(e.layerId, r), J();
+	}), $ = p((e, t, n) => {
 		let r = U(), i = r.get(e);
-		R.current = {
+		z.current = {
 			layerId: e,
 			gesture: n,
 			startStates: r,
 			startSelfState: i
-		}, B(e), X.current = o(t.currentTarget, t, {
-			onMove: (e) => q.current(e),
-			onEnd: (e) => J.current(e),
-			onCancel: () => Y.current()
+		}, B(e), q.current = s(t.currentTarget, t, {
+			onMove: (e) => X.current(e),
+			onEnd: (e) => Z.current(e),
+			onCancel: () => Q.current()
 		}, { capture: !1 });
-	}, [U]), ee = d((t, n) => {
-		if (R.current) return;
-		let r = w(t), i = L(r), a = N.current, o = t.nativeEvent;
+	}, [
+		U,
+		Q,
+		Z,
+		X
+	]), te = p((t, n) => {
+		if (z.current) return;
+		let r = S(t), i = R(r), a = P.current, s = t.nativeEvent;
 		e("layered-curve-editor", "pointerdown", {
 			plot: n.plot,
 			model: n.model,
@@ -196,33 +180,33 @@ function T(i) {
 		for (let e = a.length - 1; e >= 0; e--) {
 			let r = a[e], u = r.layer.hitTest?.(r.state, n.plot, i);
 			if (!u) continue;
-			let d = r.state, f, p = r.layer.onPointerDown?.(d, u, o, i, {
+			let d = r.state, f, p = r.layer.onPointerDown?.(d, u, s, i, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					f = e, s(r.layer.id, e);
+					f = e, o(r.layer.id, e);
 				}
 			});
 			if (t.stopPropagation(), p) {
 				$(r.layer.id, t, p);
 				return;
 			}
-			f !== void 0 && (A && (V.current.push(l), H.current = []), c?.(r.layer.id, f, d));
+			f !== void 0 && (j && (V.current.push(l), H.current = []), c?.(r.layer.id, f, d));
 			return;
 		}
 		let u = null;
 		for (let e = a.length - 1; e >= 0; e--) {
 			let r = a[e];
 			if (!r.layer.onEmptyPointerDown) continue;
-			let c = r.state, d, f = r.layer.onEmptyPointerDown(c, n.model, o, i, {
+			let c = r.state, d, f = r.layer.onEmptyPointerDown(c, n.model, s, i, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					d = e, s(r.layer.id, e);
+					d = e, o(r.layer.id, e);
 				}
 			});
 			if (f) {
-				$(r.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = l, R.current.startSelfState = l.get(r.layer.id));
+				$(r.layer.id, t, f), d !== void 0 && z.current !== null && (z.current.startStates = l, z.current.startSelfState = l.get(r.layer.id));
 				return;
 			}
 			if (d !== void 0) {
@@ -234,17 +218,18 @@ function T(i) {
 				break;
 			}
 		}
-		u && (A && (V.current.push(l), H.current = []), c?.(u.id, u.next, u.prev));
+		u && (j && (V.current.push(l), H.current = []), c?.(u.id, u.next, u.prev));
 	}, [
-		L,
+		R,
 		$,
-		s,
+		o,
 		c,
-		A,
-		U
-	]), te = d((e) => {
-		let t = w(e), n = L(t), r = N.current;
-		if (A && (e.metaKey || e.ctrlKey)) {
+		j,
+		U,
+		P
+	]), ne = p((e) => {
+		let t = S(e), n = R(t), r = P.current;
+		if (j && (e.metaKey || e.ctrlKey)) {
 			let t = e.key.toLowerCase();
 			if (t === "z") {
 				e.shiftKey ? K() : G(), e.preventDefault();
@@ -258,58 +243,59 @@ function T(i) {
 		for (let t = r.length - 1; t >= 0; t--) {
 			let i = r[t];
 			if (!i.layer.onKeyDown) continue;
-			let a = U(), o;
+			let a = U(), s;
 			if (i.layer.onKeyDown(i.state, e.nativeEvent, n, { commit(e) {
-				o = e, s(i.layer.id, e);
-			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), c?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
+				s = e, o(i.layer.id, e);
+			} }), s !== void 0 && (j && (V.current.push(a), H.current = []), c?.(i.layer.id, s, i.state)), e.nativeEvent.defaultPrevented) return;
 		}
 	}, [
-		A,
+		j,
 		G,
 		K,
-		L,
+		R,
 		U,
-		s,
-		c
+		o,
+		c,
+		P
 	]);
-	f(() => () => {
-		X.current?.cancel();
+	m(() => () => {
+		q.current?.cancel();
 	}, []);
-	let ne = p(() => ({
-		modelRange: j,
-		plotSize: M,
-		toPlot: (e) => n(e, j, M),
-		toModel: (e) => t(e, j, M)
-	}), [j, M]), re = [S.root, D].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(r, {
-		ref: I,
-		className: re,
-		style: O,
-		width: g,
-		height: _,
-		xRange: v,
-		yRange: y,
-		grid: b,
-		axes: x,
-		xTicks: T,
-		yTicks: E,
-		tabIndex: A ? 0 : void 0,
+	let re = h(() => ({
+		modelRange: M,
+		plotSize: N,
+		toPlot: (e) => n(e, M, N),
+		toModel: (e) => t(e, M, N)
+	}), [M, N]), ie = [b.root, O].filter(Boolean).join(" ");
+	return /* @__PURE__ */ f(r, {
+		ref: L,
+		className: ie,
+		style: k,
+		width: u,
+		height: v,
+		xRange: y,
+		yRange: C,
+		grid: w,
+		axes: T,
+		xTicks: E,
+		yTicks: D,
+		tabIndex: j ? 0 : void 0,
 		role: "group",
 		"aria-label": i["aria-label"],
-		onPointerDown: ee,
-		onKeyDown: te,
-		children: [k, a.map((e) => {
+		onPointerDown: te,
+		onKeyDown: ne,
+		children: [A, a.map((e) => {
 			let t = {
-				...ne,
+				...re,
 				modifiers: {
 					shift: !1,
 					alt: !1,
 					meta: !1,
 					ctrl: !1
 				},
-				isActive: z === e.layer.id
+				isActive: ee === e.layer.id
 			};
-			return /* @__PURE__ */ l("g", {
+			return /* @__PURE__ */ d("g", {
 				"data-layer-id": e.layer.id,
 				children: e.layer.render(e.state, t)
 			}, e.layer.id);
@@ -318,8 +304,8 @@ function T(i) {
 }
 //#endregion
 //#region src/components/CurveEditor/createKeyframeLayer.tsx
-var E = 16, D = 8, O = 8, k = 6, A = x("--wzl-handle-size"), j = 3.5, M = 10, N = .01;
-function P(e) {
+var w = 16, T = 8, E = 8, D = 6, O = i("--wzl-handle-size"), k = 3.5, A = 10, j = .01;
+function M(e) {
 	return {
 		keys: e,
 		selectedKey: null,
@@ -327,14 +313,14 @@ function P(e) {
 		drag: null
 	};
 }
-function F(e, t) {
+function N(e, t) {
 	return t ? Math.min(t[1], Math.max(t[0], e)) : e;
 }
-function I(e) {
+function P(e) {
 	let t = e?.easing;
 	return typeof t == "object" && t && "bezier" in t ? t.bezier : null;
 }
-function L(e, t, n, r) {
+function F(e, t, n, r) {
 	let i = {
 		...e[t],
 		t: n,
@@ -345,7 +331,7 @@ function L(e, t, n, r) {
 		selectedKey: s
 	};
 }
-function R(e) {
+function I(e) {
 	let { drag: t, keys: n } = e;
 	if (!t) return {
 		keys: n,
@@ -356,7 +342,7 @@ function R(e) {
 		return e && e.t === t.t && e.value === t.value ? {
 			keys: n,
 			selectedKey: t.index
-		} : L(n, t.index, t.t, t.value);
+		} : F(n, t.index, t.t, t.value);
 	}
 	let r = n.slice();
 	return r[t.segment] = {
@@ -367,24 +353,24 @@ function R(e) {
 		selectedKey: e.selectedKey
 	};
 }
-function z(e = {}) {
-	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), o = e.snapRadiusPx ?? 6;
-	function d(e, t, n) {
+function L(e = {}) {
+	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), i = e.snapRadiusPx ?? 6;
+	function s(e, t, n) {
 		let r = e.drag;
-		return r?.kind === "handle" && r.segment === n ? a(...r.bezier) : s(t[n].easing);
+		return r?.kind === "handle" && r.segment === n ? o(...r.bezier) : c(t[n].easing);
 	}
-	function f(e, t, n) {
+	function l(e, t, n) {
 		let r = [];
 		for (let i = 1; i < t.length; i++) {
-			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({
+			let a = t[i - 1], o = t[i], c = s(e, t, i), l = [];
+			for (let e = 0; e <= w; e++) {
+				let t = e / w;
+				l.push(n.toPlot({
 					x: a.t + (o.t - a.t) * t,
-					y: a.value + (o.value - a.value) * s(t)
+					y: a.value + (o.value - a.value) * c(t)
 				}));
 			}
-			r.push(c);
+			r.push(l);
 		}
 		return r;
 	}
@@ -392,7 +378,7 @@ function z(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 : I(e.keys[t]);
+		return n?.kind === "handle" && n.segment === t ? n.bezier : P(e.keys[t]);
 	}
 	function m(e, t, n) {
 		let r = e.keys[e.selectedSegment - 1], i = e.keys[e.selectedSegment], a = (e, t) => n.toPlot({
@@ -403,8 +389,8 @@ function z(e = {}) {
 	}
 	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, a = f(e, i, t), o = a.flatMap((e, t) => t === 0 ? e : e.slice(1)), s = e.selectedSegment, d = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
-		return /* @__PURE__ */ u(c, { children: [
+		let i = e.drag?.kind === "key" ? I(e).keys : e.keys, a = l(e, i, t), o = a.flatMap((e, t) => t === 0 ? e : e.slice(1)), s = e.selectedSegment, c = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
+		return /* @__PURE__ */ f(u, { children: [
 			s !== null && s >= 1 && s < i.length ? (() => {
 				let e = t.toPlot({
 					x: i[s - 1].t,
@@ -413,21 +399,21 @@ function z(e = {}) {
 					x: i[s].t,
 					y: 0
 				}).x;
-				return /* @__PURE__ */ l("rect", {
-					className: S.segmentBand,
+				return /* @__PURE__ */ d("rect", {
+					className: b.segmentBand,
 					x: Math.min(e, n),
 					y: 0,
 					width: Math.abs(n - e),
 					height: t.plotSize.height
 				});
 			})() : null,
-			o.length > 1 ? /* @__PURE__ */ l("path", {
+			o.length > 1 ? /* @__PURE__ */ d("path", {
 				"data-curve-element": "curve",
-				className: S.curve,
+				className: b.curve,
 				d: h(o)
 			}) : null,
-			a.map((e, t) => /* @__PURE__ */ l("path", {
-				className: S.segmentTarget,
+			a.map((e, t) => /* @__PURE__ */ d("path", {
+				className: b.segmentTarget,
 				d: h(e),
 				role: "button",
 				tabIndex: 0,
@@ -435,34 +421,34 @@ function z(e = {}) {
 				"aria-current": s === t + 1 ? "true" : void 0,
 				"data-segment-index": t + 1
 			}, `seg-${t + 1}`)),
-			d ? (() => {
-				let [r, i] = m(e, d, t), a = t.toPlot({
+			c ? (() => {
+				let [r, i] = m(e, c, t), a = t.toPlot({
 					x: e.keys[s - 1].t,
 					y: e.keys[s - 1].value
 				}), o = t.toPlot({
 					x: e.keys[s].t,
 					y: e.keys[s].value
 				});
-				return /* @__PURE__ */ u(c, { children: [
-					/* @__PURE__ */ l("line", {
-						className: S.handleStem,
+				return /* @__PURE__ */ f(u, { children: [
+					/* @__PURE__ */ d("line", {
+						className: b.handleStem,
 						x1: a.x,
 						y1: a.y,
 						x2: r.x,
 						y2: r.y
 					}),
-					/* @__PURE__ */ l("line", {
-						className: S.handleStem,
+					/* @__PURE__ */ d("line", {
+						className: b.handleStem,
 						x1: o.x,
 						y1: o.y,
 						x2: i.x,
 						y2: i.y
 					}),
-					[r, i].map((e, t) => /* @__PURE__ */ l("circle", {
-						className: S.handle,
+					[r, i].map((e, t) => /* @__PURE__ */ d("circle", {
+						className: b.handle,
 						cx: e.x,
 						cy: e.y,
-						r: j,
+						r: k,
 						role: "button",
 						tabIndex: 0,
 						"aria-label": `${n} bezier handle ${t + 1}`,
@@ -475,12 +461,12 @@ function z(e = {}) {
 					x: i.t,
 					y: i.value
 				});
-				return /* @__PURE__ */ l("rect", {
-					className: S.keyframe,
-					x: o.x - A,
-					y: o.y - A,
-					width: A * 2,
-					height: A * 2,
+				return /* @__PURE__ */ d("rect", {
+					className: b.keyframe,
+					x: o.x - O,
+					y: o.y - O,
+					width: O * 2,
+					height: O * 2,
 					transform: `rotate(45 ${o.x} ${o.y})`,
 					role: "button",
 					tabIndex: 0,
@@ -495,49 +481,49 @@ function z(e = {}) {
 					x: e.drag.t,
 					y: e.drag.value
 				});
-				return /* @__PURE__ */ l("rect", {
+				return /* @__PURE__ */ d("rect", {
 					"aria-hidden": "true",
-					className: S.keyframeGhost,
-					x: n.x - A,
-					y: n.y - A,
-					width: A * 2,
-					height: A * 2,
+					className: b.keyframeGhost,
+					x: n.x - O,
+					y: n.y - O,
+					width: O * 2,
+					height: O * 2,
 					transform: `rotate(45 ${n.x} ${n.y})`,
 					"data-keyframe-ghost": ""
 				});
 			})() : null
 		] });
 	}
-	function y(e, t, n) {
+	function _(e, t, n) {
 		let r = p(e);
 		if (r) {
-			let i = _(m(e, r, n), t, O);
+			let i = v(m(e, r, n), t, E);
 			if (i) return {
 				kind: "handle",
 				payload: { handle: i.index }
 			};
 		}
-		let i = _(e.keys.map((e) => n.toPlot({
+		let i = v(e.keys.map((e) => n.toPlot({
 			x: e.t,
 			y: e.value
-		})), t, D);
+		})), t, T);
 		if (i) return {
 			kind: "key",
 			payload: { index: i.index }
 		};
-		let a = v(f(e, e.keys, n), t, k);
+		let a = y(l(e, e.keys, n), t, D);
 		return a ? {
 			kind: "segment",
 			payload: { segment: a.segIdx + 1 }
 		} : null;
 	}
-	function b(t) {
+	function x(t) {
 		return {
-			onMove(n, r, a, s) {
-				let c = F(r.x, e.xClamp);
-				if (e.snapX && !a.altKey) {
+			onMove(n, r, o, s) {
+				let c = N(r.x, e.xClamp);
+				if (e.snapX && !o.altKey) {
 					let t = (s.modelRange.xMax - s.modelRange.xMin) / s.plotSize.width;
-					c = F(i(c, e.snapX, Math.abs(t) * o), e.xClamp);
+					c = N(a(c, e.snapX, Math.abs(t) * i), e.xClamp);
 				}
 				return {
 					...n,
@@ -545,14 +531,14 @@ function z(e = {}) {
 						kind: "key",
 						index: t,
 						t: c,
-						value: F(r.y, e.yClamp)
+						value: N(r.y, e.yClamp)
 					}
 				};
 			},
 			onCommit(e) {
 				return {
 					...e,
-					...R(e),
+					...I(e),
 					drag: null
 				};
 			},
@@ -564,7 +550,7 @@ function z(e = {}) {
 			}
 		};
 	}
-	function x(e, t) {
+	function S(e, t) {
 		return {
 			onMove(n, r) {
 				let i = n.keys[e - 1], a = n.keys[e], o = n.drag;
@@ -582,7 +568,7 @@ function z(e = {}) {
 			onCommit(e) {
 				return {
 					...e,
-					...R(e),
+					...I(e),
 					drag: null
 				};
 			},
@@ -607,7 +593,7 @@ function z(e = {}) {
 						segment: r,
 						bezier: n
 					}
-				}), x(r, a);
+				}), S(r, a);
 			}
 			if (t.kind === "key") {
 				let { index: n } = t.payload, r = e.keys[n];
@@ -620,7 +606,7 @@ function z(e = {}) {
 						t: r.t,
 						value: r.value
 					}
-				}), b(n);
+				}), x(n);
 			}
 			if (t.kind === "segment") {
 				let { segment: n } = t.payload;
@@ -631,10 +617,10 @@ function z(e = {}) {
 			}
 		}
 	}
-	function w(n, r, i, a) {
+	function M(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 ? M : 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 ? A : 1, d = o.closest("[data-keyframe-index]");
 		if (d) {
 			let t = Number(d.getAttribute("data-keyframe-index")), o = n.keys[t];
 			if (!o) return;
@@ -647,11 +633,11 @@ function z(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 = F(o.t + c * p, e.xClamp), g = F(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 = N(o.t + c * p, e.xClamp), g = N(o.value + l * m, e.yClamp);
 			if (h === o.t && g === o.value) return;
 			a.commit({
 				...n,
-				...L(n.keys, t, h, g),
+				...F(n.keys, t, h, g),
 				drag: null
 			});
 			return;
@@ -668,7 +654,7 @@ function z(e = {}) {
 		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 * N * u)), t[e * 2 + 1] += l * N * u;
+			t[e * 2] = Math.min(1, Math.max(0, t[e * 2] + c * j * u)), t[e * 2 + 1] += l * j * u;
 			let i = {
 				kind: "handle",
 				segment: n.selectedSegment,
@@ -676,7 +662,7 @@ function z(e = {}) {
 			};
 			a.commit({
 				...n,
-				...R({
+				...I({
 					...n,
 					drag: i
 				}),
@@ -687,12 +673,12 @@ function z(e = {}) {
 	return {
 		id: t,
 		render: g,
-		hitTest: y,
+		hitTest: _,
 		onPointerDown: C,
-		onKeyDown: w
+		onKeyDown: M
 	};
 }
 //#endregion
-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 };
+export { b as a, C as i, L as n, v as o, M as r, y as s, I as t };
 
-//# sourceMappingURL=createKeyframeLayer-DVl321_l.js.map
+//# sourceMappingURL=createKeyframeLayer-BTa4LyJE.js.map