@camstack/addon-training 0.1.47 → 0.1.49

package/dist/{MaskShapeCanvas-Kfg9dl6B.mjs → MaskShapeCanvas-HNL0xNpy.mjs}

@@ -1,36 +1,37 @@
-import { S as e, _ as t, a as n, c as r, g as i, u as a } from "./_virtual_mf___mfe_internal__addon_training_page__loadShare__react__loadShare__.js-DeDbF7NI.mjs";
+import { d as e, l as t, o as n, v as r, w as i, y as a } from "./_virtual_mf___mfe_internal__addon_training_page__loadShare__react__loadShare__.js-CEvdvp1T.mjs";
 import { n as o, r as s } from "./_virtual_mf___mfe_internal__addon_training_page__loadShare__react_mf_1_jsx_mf_2_runtime__loadShare__.js-DnrbBvrw.mjs";
-import { a as c, c as l, i as u, l as d, n as f, o as p, r as m, s as h } from "./ReactKonva-DGuYUN0L.mjs";
+import { r as c } from "./ui-text-CqJgUCKX.mjs";
+import { a as l, c as u, i as d, l as f, n as p, o as m, r as h, s as g } from "./ReactKonva-DzGysLZQ.mjs";
 //#region ../ui-library/src/composites/cap-settings/MaskShapeCanvas.tsx
-e();
-var g = {
+i();
+var _ = {
 	rect: "#ef4444",
 	polygon: "#3b82f6",
 	grid: "#6366f1",
 	line: "#f59e0b"
-}, _ = "33", v = "66", y = "#6366f1", b = 3, x = 2, S = 12, C = 16, w = 9;
-function T(e, t, n) {
+}, v = "33", y = "66", b = "#6366f1", x = 3, S = 2, C = 12, w = 16, T = 9;
+function E(e, t, n) {
 	return {
 		x: e.x * t,
 		y: e.y * n
 	};
 }
-function E(e, t, n) {
+function D(e, t, n) {
 	return {
 		x: e.x / t,
 		y: e.y / n
 	};
 }
-function D(e, t, n) {
+function O(e, t, n) {
 	return e.flatMap((e) => [e.x * t, e.y * n]);
 }
-function O(e) {
+function k(e) {
 	return !Number.isFinite(e) || e < 0 ? 0 : e > 1 ? 1 : e;
 }
-function k(e) {
-	return e.color ?? g[e.shape.kind];
+function A(e) {
+	return e.color ?? _[e.shape.kind];
 }
-function A(e, t) {
+function j(e, t) {
 	let n = e[t], r = e[(t + 1) % e.length];
 	if (!n || !r) return [...e];
 	let i = {
@@ -43,36 +44,36 @@ function A(e, t) {
 		...e.slice(t + 1)
 	];
 }
-function j(e, t) {
+function M(e, t) {
 	return e.length === t.length ? e.every((e, n) => {
 		let r = t[n];
 		return Math.abs(e.x - r.x) < 1e-6 && Math.abs(e.y - r.y) < 1e-6;
 	}) : !1;
 }
-function M(e) {
+function N(e) {
 	return e.kind === "polygon" || e.kind === "line";
 }
-function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawComplete: f, drawingKind: m, supportedShapes: h, transparent: _ = !1, backdrop: v, polygonVertices: A, grid: N }) {
-	let P = i(null), [F, z] = t({
+function P({ items: n, selectedId: i, onSelect: d, onShapeChange: f, onDrawComplete: p, drawingKind: h, supportedShapes: g, transparent: v = !1, backdrop: y, polygonVertices: j, grid: P }) {
+	let F = c(), I = r(null), [B, V] = a({
 		w: 800,
 		h: 450
-	}), [B, V] = t([]), [H, U] = t(null), [W, G] = t(null), [K, q] = t(null), J = m !== null && h.includes(m);
-	a(() => {
-		if (!K) return;
-		let t = e.find((e) => e.id === K.itemId);
-		if (!t || !M(t.shape)) {
-			q(null);
+	}), [H, U] = a([]), [W, G] = a(null), [K, ee] = a(null), [q, J] = a(null), Y = h !== null && g.includes(h);
+	e(() => {
+		if (!q) return;
+		let e = n.find((e) => e.id === q.itemId);
+		if (!e || !N(e.shape)) {
+			J(null);
 			return;
 		}
-		j(t.shape.points, K.points) && q(null);
-	}, [e, K]), a(() => {
-		let e = P.current;
+		M(e.shape.points, q.points) && J(null);
+	}, [n, q]), e(() => {
+		let e = I.current;
 		if (!e) return;
 		let t = new ResizeObserver((e) => {
 			let t = e[0];
 			if (!t) return;
 			let { width: n, height: r } = t.contentRect;
-			z(_ ? {
+			V(v ? {
 				w: n,
 				h: r
 			} : {
@@ -81,24 +82,24 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 			});
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [_]), a(() => {
-		!J && H !== null && U(null);
-	}, [J, H]);
-	let Y = r((e) => {
-		f(e), V([]);
-	}, [f]), X = r((e) => {
-		if (!J || m === null) {
-			u(null);
+	}, [v]), e(() => {
+		!Y && W !== null && G(null);
+	}, [Y, W]);
+	let X = t((e) => {
+		p(e), U([]);
+	}, [p]), te = t((e) => {
+		if (!Y || h === null) {
+			d(null);
 			return;
 		}
 		let t = e.target.getStage();
 		if (!t) return;
 		let n = t.getPointerPosition();
 		if (!n) return;
-		let r = E(n, F.w, F.h);
-		if (m === "rect") {
-			let e = O(r.x), t = O(r.y);
-			Y({
+		let r = D(n, B.w, B.h);
+		if (h === "rect") {
+			let e = k(r.x), t = k(r.y);
+			X({
 				kind: "rect",
 				x: e,
 				y: t,
@@ -107,9 +108,9 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 			});
 			return;
 		}
-		if (m === "grid") {
-			let e = N?.width ?? C, t = N?.height ?? w;
-			Y({
+		if (h === "grid") {
+			let e = P?.width ?? w, t = P?.height ?? T;
+			X({
 				kind: "grid",
 				gridWidth: e,
 				gridHeight: t,
@@ -117,94 +118,94 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 			});
 			return;
 		}
-		if (m === "line") {
-			if (B.length === 0) {
-				V([r]);
+		if (h === "line") {
+			if (H.length === 0) {
+				U([r]);
 				return;
 			}
-			Y({
+			X({
 				kind: "line",
-				points: [...B, r]
+				points: [...H, r]
 			});
 			return;
 		}
-		if (m === "polygon") {
-			if (B.length === 0) {
-				V([r]);
+		if (h === "polygon") {
+			if (H.length === 0) {
+				U([r]);
 				return;
 			}
-			if (B.length >= b) {
-				let e = T(B[0], F.w, F.h);
-				if (Math.hypot(n.x - e.x, n.y - e.y) < S) {
-					Y({
+			if (H.length >= x) {
+				let e = E(H[0], B.w, B.h);
+				if (Math.hypot(n.x - e.x, n.y - e.y) < C) {
+					X({
 						kind: "polygon",
-						points: B
+						points: H
 					});
 					return;
 				}
 			}
-			V((e) => [...e, r]);
+			U((e) => [...e, r]);
 		}
 	}, [
-		J,
-		m,
-		B,
-		F,
-		N,
 		Y,
-		u
-	]), ee = r((e) => {
-		!J || m !== "polygon" || B.length < b || (e.cancelBubble = !0, Y({
+		h,
+		H,
+		B,
+		P,
+		X,
+		d
+	]), ne = t((e) => {
+		!Y || h !== "polygon" || H.length < x || (e.cancelBubble = !0, X({
 			kind: "polygon",
-			points: B
+			points: H
 		}));
 	}, [
-		J,
-		m,
-		B,
-		Y
-	]), Z = i(null), Q = i(null);
-	a(() => () => {
+		Y,
+		h,
+		H,
+		X
+	]), Z = r(null), Q = r(null);
+	e(() => () => {
 		Z.current !== null && cancelAnimationFrame(Z.current);
 	}, []);
-	let te = r((e) => {
-		if (!J) return;
+	let re = t((e) => {
+		if (!Y) return;
 		let t = e.target.getStage();
 		t && (Q.current = t.getPointerPosition() ?? null, Z.current === null && (Z.current = requestAnimationFrame(() => {
-			Z.current = null, U(Q.current);
+			Z.current = null, G(Q.current);
 		})));
-	}, [J]), ne = i(!1), re = i(!0), ie = i(/* @__PURE__ */ new Set()), ae = r((e, t, n, r) => {
+	}, [Y]), ie = r(!1), ae = r(!0), oe = r(/* @__PURE__ */ new Set()), se = t((e, t, n, r) => {
 		let i = t.gridWidth * t.gridHeight;
 		if (n < 0 || n >= i || t.cells[n] === r) return;
 		let a = [...t.cells];
 		for (; a.length < i;) a.push(!1);
-		a.length = i, a[n] = r, d(e, {
+		a.length = i, a[n] = r, f(e, {
 			...t,
 			cells: a
 		});
-	}, [d]), $ = [];
-	if (!_) {
-		for (let e = 1; e < C; e++) {
-			let t = F.w / C * e;
-			$.push(/* @__PURE__ */ o(p, {
+	}, [f]), $ = [];
+	if (!v) {
+		for (let e = 1; e < w; e++) {
+			let t = B.w / w * e;
+			$.push(/* @__PURE__ */ o(m, {
 				points: [
 					t,
 					0,
 					t,
-					F.h
+					B.h
 				],
 				stroke: "#ffffff",
 				strokeWidth: .5,
 				opacity: .08
 			}, `gv-${e}`));
 		}
-		for (let e = 1; e < w; e++) {
-			let t = F.h / w * e;
-			$.push(/* @__PURE__ */ o(p, {
+		for (let e = 1; e < T; e++) {
+			let t = B.h / T * e;
+			$.push(/* @__PURE__ */ o(m, {
 				points: [
 					0,
 					t,
-					F.w,
+					B.w,
 					t
 				],
 				stroke: "#ffffff",
@@ -214,37 +215,37 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 		}
 	}
 	return /* @__PURE__ */ s("div", {
-		ref: P,
-		className: _ ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
-		style: { cursor: J ? "crosshair" : "default" },
+		ref: I,
+		className: v ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
+		style: { cursor: Y ? "crosshair" : "default" },
 		children: [
-			v && !_ ? /* @__PURE__ */ o("div", {
+			y && !v ? /* @__PURE__ */ o("div", {
 				className: "absolute inset-0 pointer-events-none [&>*]:w-full [&>*]:h-full [&>img]:object-cover [&>video]:object-cover",
 				style: {
-					width: F.w,
-					height: F.h
+					width: B.w,
+					height: B.h
 				},
-				children: v
+				children: y
 			}) : null,
-			/* @__PURE__ */ s(l, {
-				width: F.w,
-				height: F.h,
-				onClick: X,
-				onDblClick: ee,
-				onMouseMove: te,
+			/* @__PURE__ */ s(u, {
+				width: B.w,
+				height: B.h,
+				onClick: te,
+				onDblClick: ne,
+				onMouseMove: re,
 				children: [
-					/* @__PURE__ */ s(c, {
+					/* @__PURE__ */ s(l, {
 						listening: !1,
-						children: [/* @__PURE__ */ o(p, {
+						children: [/* @__PURE__ */ o(m, {
 							points: [
 								0,
 								0,
-								F.w,
+								B.w,
 								0,
-								F.w,
-								F.h,
+								B.w,
+								B.h,
 								0,
-								F.h,
+								B.h,
 								0,
 								0
 							],
@@ -252,96 +253,96 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 							strokeWidth: 0
 						}), $]
 					}),
-					/* @__PURE__ */ o(c, { children: e.map((e) => {
-						let t = e.id === n, r = e.enabled === !1, i = k(e), a = t && !J && !r;
-						if (e.shape.kind === "rect") return /* @__PURE__ */ o(I, {
+					/* @__PURE__ */ o(l, { children: n.map((e) => {
+						let t = e.id === i, n = e.enabled === !1, r = A(e), a = t && !Y && !n;
+						if (e.shape.kind === "rect") return /* @__PURE__ */ o(L, {
 							item: e,
 							shape: e.shape,
-							color: i,
+							color: r,
 							selected: t,
-							dimmed: r,
+							dimmed: n,
 							editable: a,
-							isDrawing: J,
-							size: F,
-							onSelect: u,
-							onShapeChange: d
+							isDrawing: Y,
+							size: B,
+							onSelect: d,
+							onShapeChange: f
 						}, e.id);
-						if (e.shape.kind === "grid") return /* @__PURE__ */ o(L, {
+						if (e.shape.kind === "grid") return /* @__PURE__ */ o(R, {
 							item: e,
 							shape: e.shape,
-							color: i,
-							dimmed: r,
+							color: r,
+							dimmed: n,
 							editable: a,
-							size: F,
-							onSelect: u,
-							paintingRef: ne,
-							paintValueRef: re,
-							paintedRef: ie,
-							paintCell: ae
+							size: B,
+							onSelect: d,
+							paintingRef: ie,
+							paintValueRef: ae,
+							paintedRef: oe,
+							paintCell: se
 						}, e.id);
-						let s = e.shape.kind === "line", c = s ? x : Math.max(b, A?.min ?? b), l = s ? x : A?.max, f = K && K.itemId === e.id ? K.points : e.shape.points;
-						return /* @__PURE__ */ o(R, {
+						let s = e.shape.kind === "line", c = s ? S : Math.max(x, j?.min ?? x), l = s ? S : j?.max, u = q && q.itemId === e.id ? q.points : e.shape.points;
+						return /* @__PURE__ */ o(z, {
 							item: e,
 							shape: e.shape,
-							color: i,
+							color: r,
 							selected: t,
-							dimmed: r,
+							dimmed: n,
 							editable: a,
 							isLine: s,
-							isDrawing: J,
-							size: F,
-							effectivePoints: f,
+							isDrawing: Y,
+							size: B,
+							effectivePoints: u,
 							minVertices: c,
 							maxVertices: l,
-							isDragging: W === e.id,
-							onSelect: u,
-							onShapeChange: d,
-							setDragOverride: q,
-							setDraggingItemId: G
+							isDragging: K === e.id,
+							onSelect: d,
+							onShapeChange: f,
+							setDragOverride: J,
+							setDraggingItemId: ee
 						}, e.id);
 					}) }),
-					/* @__PURE__ */ o(c, {
+					/* @__PURE__ */ o(l, {
 						listening: !1,
-						children: J && B.length > 0 && /* @__PURE__ */ s("Group", { children: [
-							m === "polygon" && B.length >= 2 && /* @__PURE__ */ o("Line", {
-								points: D(B, F.w, F.h),
-								stroke: y,
+						children: Y && H.length > 0 && /* @__PURE__ */ s("Group", { children: [
+							h === "polygon" && H.length >= 2 && /* @__PURE__ */ o("Line", {
+								points: O(H, B.w, B.h),
+								stroke: b,
 								strokeWidth: 1.5,
 								dash: [6, 3],
 								opacity: .8
 							}),
-							m === "line" && B.length === 1 && H && /* @__PURE__ */ o("Line", {
+							h === "line" && H.length === 1 && W && /* @__PURE__ */ o("Line", {
 								points: [
-									B[0].x * F.w,
-									B[0].y * F.h,
-									H.x,
-									H.y
+									H[0].x * B.w,
+									H[0].y * B.h,
+									W.x,
+									W.y
 								],
-								stroke: g.line,
+								stroke: _.line,
 								strokeWidth: 1.5,
 								dash: [6, 3],
 								opacity: .7
 							}),
-							m === "polygon" && H && B.length >= 1 && /* @__PURE__ */ o("Line", {
+							h === "polygon" && W && H.length >= 1 && /* @__PURE__ */ o("Line", {
 								points: [
-									B[B.length - 1].x * F.w,
-									B[B.length - 1].y * F.h,
-									H.x,
-									H.y
+									H[H.length - 1].x * B.w,
+									H[H.length - 1].y * B.h,
+									W.x,
+									W.y
 								],
-								stroke: y,
+								stroke: b,
 								strokeWidth: 1,
 								dash: [4, 4],
 								opacity: .5
 							}),
-							B.map((e, t) => {
-								let n = T(e, F.w, F.h), r = t === 0 && m === "polygon" && B.length >= b;
+							H.map((e, t) => {
+								let n = E(e, B.w, B.h), r = t === 0 && h === "polygon" && H.length >= x;
 								return /* @__PURE__ */ o("Circle", {
 									x: n.x,
 									y: n.y,
 									radius: r ? 7 : 4,
-									fill: r ? y : "#ffffff",
-									stroke: y,
+									fill: r ? b : "#ffffff",
+									stroke: b,
 									strokeWidth: 1.5,
 									opacity: .9
 								}, t);
@@ -350,26 +351,26 @@ function N({ items: e, selectedId: n, onSelect: u, onShapeChange: d, onDrawCompl
 					})
 				]
 			}),
-			J ? /* @__PURE__ */ o("div", {
+			Y ? /* @__PURE__ */ o("div", {
 				className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700",
-				children: m === "line" ? "Click to set the start point, click again to complete the line" : m === "rect" ? "Click to drop a rectangle, then drag the corner to resize" : m === "grid" ? "Click to add the grid, then paint cells" : B.length < b ? "Click to add points (min 3). Double-click or click the first point to close." : "Continue adding points. Double-click or click the first point to close."
+				children: h === "line" ? F("uiLibrary.maskShapeCanvas.hintLine", "Click to set the start point, click again to complete the line") : h === "rect" ? F("uiLibrary.maskShapeCanvas.hintRect", "Click to drop a rectangle, then drag the corner to resize") : h === "grid" ? F("uiLibrary.maskShapeCanvas.hintGrid", "Click to add the grid, then paint cells") : H.length < x ? F("uiLibrary.maskShapeCanvas.hintPoints", "Click to add points (min 3). Double-click or click the first point to close.") : F("uiLibrary.maskShapeCanvas.hintMore", "Continue adding points. Double-click or click the first point to close.")
 			}) : null
 		]
 	});
 }
-var P = .02;
-function F(e, t) {
+var F = .02;
+function I(e, t) {
 	return Math.abs(e.x - t.x) < 1e-6 && Math.abs(e.y - t.y) < 1e-6 && Math.abs(e.width - t.width) < 1e-6 && Math.abs(e.height - t.height) < 1e-6;
 }
-function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, isDrawing: f, size: p, onSelect: g, onShapeChange: y }) {
-	let [b, x] = t(null), S = {
+function L({ item: t, shape: n, color: r, selected: i, dimmed: c, editable: l, isDrawing: u, size: p, onSelect: m, onShapeChange: _ }) {
+	let [b, x] = a(null), S = {
 		x: n.x,
 		y: n.y,
 		width: n.width,
 		height: n.height
 	};
-	a(() => {
-		b && F(S, b) && x(null);
+	e(() => {
+		b && I(S, b) && x(null);
 	}, [
 		n.x,
 		n.y,
@@ -377,20 +378,20 @@ function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, i
 		n.height,
 		b
 	]);
-	let C = b ?? S, w = C.x * p.w, T = C.y * p.h, E = C.width * p.w, D = C.height * p.h, k = c ? .35 : i ? 1 : .85, A = (t) => {
-		x(t), y(e.id, {
+	let C = b ?? S, w = C.x * p.w, T = C.y * p.h, E = C.width * p.w, D = C.height * p.h, O = c ? .35 : i ? 1 : .85, A = (e) => {
+		x(e), _(t.id, {
 			kind: "rect",
-			x: t.x,
-			y: t.y,
-			width: t.width,
-			height: t.height
+			x: e.x,
+			y: e.y,
+			width: e.width,
+			height: e.height
 		});
 	};
-	return /* @__PURE__ */ o(u, {
-		onClick: (t) => {
-			t.cancelBubble = !0, f || g(e.id);
+	return /* @__PURE__ */ o(d, {
+		onClick: (e) => {
+			e.cancelBubble = !0, u || m(t.id);
 		},
-		children: /* @__PURE__ */ s(u, {
+		children: /* @__PURE__ */ s(d, {
 			draggable: l,
 			dragBoundFunc: l ? (e) => ({
 				x: Math.max(-w, Math.min(p.w - (w + E), e.x)),
@@ -417,23 +418,23 @@ function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, i
 			onMouseLeave: (e) => {
 				if (!l) return;
 				let t = e.target.getStage();
-				t && (t.container().style.cursor = f ? "crosshair" : "default");
+				t && (t.container().style.cursor = u ? "crosshair" : "default");
 			},
 			children: [
-				/* @__PURE__ */ o(h, {
+				/* @__PURE__ */ o(g, {
 					x: w,
 					y: T,
 					width: E,
 					height: D,
-					fill: r + (i ? v : _),
+					fill: r + (i ? y : v),
 					stroke: r,
 					strokeWidth: i ? 2.5 : 1.5,
-					opacity: k
+					opacity: O
 				}),
-				e.label ? /* @__PURE__ */ o(d, {
+				t.label ? /* @__PURE__ */ o(f, {
 					x: w,
 					y: T - 16,
-					text: e.label,
+					text: t.label,
 					fontSize: 12,
 					fill: r,
 					stroke: "#000000",
@@ -442,7 +443,7 @@ function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, i
 					fontStyle: "bold",
 					listening: !1
 				}) : null,
-				l ? /* @__PURE__ */ o(m, {
+				l ? /* @__PURE__ */ o(h, {
 					x: w + E,
 					y: T + D,
 					radius: 6,
@@ -458,19 +459,19 @@ function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, i
 						e.cancelBubble = !0;
 					},
 					onDragMove: (e) => {
-						let t = e.target, n = O(t.x() / p.w - C.x), r = O(t.y() / p.h - C.y);
+						let t = e.target, n = k(t.x() / p.w - C.x), r = k(t.y() / p.h - C.y);
 						x({
 							...C,
-							width: Math.max(P, Math.min(n, 1 - C.x)),
-							height: Math.max(P, Math.min(r, 1 - C.y))
+							width: Math.max(F, Math.min(n, 1 - C.x)),
+							height: Math.max(F, Math.min(r, 1 - C.y))
 						});
 					},
 					onDragEnd: (e) => {
-						let t = e.target, n = O(t.x() / p.w - C.x), r = O(t.y() / p.h - C.y);
+						let t = e.target, n = k(t.x() / p.w - C.x), r = k(t.y() / p.h - C.y);
 						A({
 							...C,
-							width: Math.max(P, Math.min(n, 1 - C.x)),
-							height: Math.max(P, Math.min(r, 1 - C.y))
+							width: Math.max(F, Math.min(n, 1 - C.x)),
+							height: Math.max(F, Math.min(r, 1 - C.y))
 						});
 					},
 					onMouseEnter: (e) => {
@@ -486,31 +487,31 @@ function I({ item: e, shape: n, color: r, selected: i, dimmed: c, editable: l, i
 		})
 	});
 }
-function L({ item: e, shape: t, color: n, dimmed: r, editable: i, size: a, onSelect: s, paintingRef: c, paintValueRef: l, paintedRef: d, paintCell: f }) {
-	let { gridWidth: p, gridHeight: m, cells: g } = t, _ = a.w / p, y = a.h / m, b = p * m, x = r ? .3 : 1, S = (n) => {
+function R({ item: e, shape: t, color: n, dimmed: r, editable: i, size: a, onSelect: s, paintingRef: c, paintValueRef: l, paintedRef: u, paintCell: f }) {
+	let { gridWidth: p, gridHeight: m, cells: h } = t, _ = a.w / p, v = a.h / m, b = p * m, x = r ? .3 : 1, S = (n) => {
 		if (!i) {
 			s(e.id);
 			return;
 		}
-		let r = g[n] !== !0;
-		c.current = !0, l.current = r, d.current = new Set([n]), f(e.id, t, n, r);
+		let r = h[n] !== !0;
+		c.current = !0, l.current = r, u.current = new Set([n]), f(e.id, t, n, r);
 	}, C = (n) => {
-		!c.current || !i || d.current.has(n) || (d.current.add(n), f(e.id, t, n, l.current));
+		!c.current || !i || u.current.has(n) || (u.current.add(n), f(e.id, t, n, l.current));
 	}, w = () => {
-		c.current && (c.current = !1, d.current = /* @__PURE__ */ new Set());
+		c.current && (c.current = !1, u.current = /* @__PURE__ */ new Set());
 	};
-	return /* @__PURE__ */ o(u, {
+	return /* @__PURE__ */ o(d, {
 		opacity: x,
 		onMouseUp: w,
 		onMouseLeave: w,
 		children: Array.from({ length: b }, (e, t) => {
-			let r = t % p, i = Math.floor(t / p), a = g[t] === !0;
-			return /* @__PURE__ */ o(h, {
+			let r = t % p, i = Math.floor(t / p), a = h[t] === !0;
+			return /* @__PURE__ */ o(g, {
 				x: r * _,
-				y: i * y,
+				y: i * v,
 				width: _,
-				height: y,
-				fill: a ? n + v : "#ffffff10",
+				height: v,
+				fill: a ? n + y : "#ffffff10",
 				stroke: a ? n : "#ffffff40",
 				strokeWidth: .5,
 				onMouseDown: (e) => {
@@ -521,18 +522,18 @@ function L({ item: e, shape: t, color: n, dimmed: r, editable: i, size: a, onSel
 		})
 	});
 }
-function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, isLine: c, isDrawing: l, size: m, effectivePoints: h, minVertices: g, maxVertices: y, isDragging: b, onSelect: x, onShapeChange: S, setDragOverride: C, setDraggingItemId: w }) {
-	let O = D(h, m.w, m.h), k = i ? .35 : r ? 1 : c ? .8 : .85, j = (e) => c ? {
+function z({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, isLine: c, isDrawing: l, size: u, effectivePoints: h, minVertices: g, maxVertices: _, isDragging: b, onSelect: x, onShapeChange: S, setDragOverride: C, setDraggingItemId: w }) {
+	let T = O(h, u.w, u.h), k = i ? .35 : r ? 1 : c ? .8 : .85, A = (e) => c ? {
 		kind: "line",
 		points: [...e]
 	} : {
 		kind: "polygon",
 		points: [...e]
-	}, M = h.map((e) => e.x * m.w), N = h.map((e) => e.y * m.h), P = M.length > 0 ? Math.min(...M) : 0, F = M.length > 0 ? Math.max(...M) : 0, I = N.length > 0 ? Math.min(...N) : 0, L = N.length > 0 ? Math.max(...N) : 0, R = (e) => ({
-		x: Math.max(-P, Math.min(m.w - F, e.x)),
-		y: Math.max(-I, Math.min(m.h - L, e.y))
+	}, M = h.map((e) => e.x * u.w), N = h.map((e) => e.y * u.h), P = M.length > 0 ? Math.min(...M) : 0, F = M.length > 0 ? Math.max(...M) : 0, I = N.length > 0 ? Math.min(...N) : 0, L = N.length > 0 ? Math.max(...N) : 0, R = (e) => ({
+		x: Math.max(-P, Math.min(u.w - F, e.x)),
+		y: Math.max(-I, Math.min(u.h - L, e.y))
 	}), z = (n) => {
-		let r = n.target, i = r.x() / m.w, a = r.y() / m.h;
+		let r = n.target, i = r.x() / u.w, a = r.y() / u.h;
 		if (r.position({
 			x: 0,
 			y: 0
@@ -544,14 +545,14 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 		C({
 			itemId: e.id,
 			points: o
-		}), S(e.id, j(o));
-	}, B = !c && h.length > g, V = !c && (y === void 0 || h.length < y);
-	return /* @__PURE__ */ s(u, {
+		}), S(e.id, A(o));
+	}, B = !c && h.length > g, V = !c && (_ === void 0 || h.length < _);
+	return /* @__PURE__ */ s(d, {
 		onClick: (t) => {
 			t.cancelBubble = !0, l || x(e.id);
 		},
 		children: [
-			/* @__PURE__ */ s(u, {
+			/* @__PURE__ */ s(d, {
 				draggable: a,
 				dragBoundFunc: a ? R : void 0,
 				onDragStart: a ? () => w(e.id) : void 0,
@@ -566,27 +567,27 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 					let t = e.target.getStage();
 					t && (t.container().style.cursor = l ? "crosshair" : "default");
 				},
-				children: [c ? /* @__PURE__ */ o(f, {
-					points: O,
+				children: [c ? /* @__PURE__ */ o(p, {
+					points: T,
 					stroke: n,
 					strokeWidth: r ? 3 : 2,
 					fill: n,
 					pointerLength: 10,
 					pointerWidth: 8,
 					opacity: k
-				}) : /* @__PURE__ */ o(p, {
-					points: O,
+				}) : /* @__PURE__ */ o(m, {
+					points: T,
 					closed: !0,
-					fill: n + (r ? v : _),
+					fill: n + (r ? y : v),
 					stroke: n,
 					strokeWidth: r ? 2.5 : 1.5,
 					opacity: k
 				}), e.label && h.length > 0 ? (() => {
-					let t = T({
+					let t = E({
 						x: h.reduce((e, t) => e + t.x, 0) / h.length,
 						y: h.reduce((e, t) => e + t.y, 0) / h.length
-					}, m.w, m.h), r = Math.max(40, e.label.length * 11 * .62);
-					return /* @__PURE__ */ o(d, {
+					}, u.w, u.h), r = Math.max(40, e.label.length * 11 * .62);
+					return /* @__PURE__ */ o(f, {
 						x: t.x - r / 2,
 						y: t.y - 7,
 						width: r,
@@ -603,7 +604,7 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 				})() : null]
 			}),
 			a && !b && h.map((r, i) => {
-				let a = T(r, m.w, m.h);
+				let a = E(r, u.w, u.h);
 				return /* @__PURE__ */ o("Circle", {
 					x: a.x,
 					y: a.y,
@@ -613,10 +614,10 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 					strokeWidth: 1.5,
 					draggable: !0,
 					onDragMove: (n) => {
-						let r = E({
+						let r = D({
 							x: n.target.x(),
 							y: n.target.y()
-						}, m.w, m.h);
+						}, u.w, u.h);
 						C((n) => {
 							let a = n && n.itemId === e.id ? n.points : t.points;
 							return {
@@ -626,25 +627,25 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 						});
 					},
 					onDragEnd: (n) => {
-						let r = E({
+						let r = D({
 							x: n.target.x(),
 							y: n.target.y()
-						}, m.w, m.h), a = t.points.map((e, t) => t === i ? r : e);
+						}, u.w, u.h), a = t.points.map((e, t) => t === i ? r : e);
 						C({
 							itemId: e.id,
 							points: a
-						}), S(e.id, j(a));
+						}), S(e.id, A(a));
 					},
 					onContextMenu: (n) => {
-						n.evt.preventDefault(), n.cancelBubble = !0, B && S(e.id, j(t.points.filter((e, t) => t !== i)));
+						n.evt.preventDefault(), n.cancelBubble = !0, B && S(e.id, A(t.points.filter((e, t) => t !== i)));
 					}
 				}, `pt-${i}`);
 			}),
 			a && !b && V && h.length >= 2 && h.map((r, i) => {
-				let a = h[(i + 1) % h.length], s = T({
+				let a = h[(i + 1) % h.length], s = E({
 					x: (r.x + a.x) / 2,
 					y: (r.y + a.y) / 2
-				}, m.w, m.h);
+				}, u.w, u.h);
 				return /* @__PURE__ */ o("Circle", {
 					x: s.x,
 					y: s.y,
@@ -674,13 +675,13 @@ function R({ item: e, shape: t, color: n, selected: r, dimmed: i, editable: a, i
 						n && (n.container().style.cursor = l ? "crosshair" : "default");
 					},
 					onClick: (n) => {
-						n.cancelBubble = !0, S(e.id, j(A(t.points, i)));
+						n.cancelBubble = !0, S(e.id, A(j(t.points, i)));
 					}
 				}, `mid-${i}`);
 			})
 		]
 	});
 }
-var z = n(N);
+var B = n(P);
 //#endregion
-export { z as MaskShapeCanvas };
+export { B as MaskShapeCanvas };