@camstack/ui-library 1.0.2 → 1.0.4

package/dist/MaskShapeCanvas-DI4BY7W2.js

@@ -0,0 +1,913 @@
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Arrow, Circle, Group, Layer, Line, Rect, Stage, Text } from "react-konva";
+//#region src/composites/cap-settings/MaskShapeCanvas.tsx
+/**
+* MaskShapeCanvas — ONE shared, Konva-based on-frame "drawing plane" editor
+* that handles ALL four `MaskShape` kinds: `rect`, `polygon`, `grid`, `line`.
+*
+* It is a generalization of the detection `ZoneCanvas` (orchestrator) so that
+* privacy-mask (rect/polygon), motion-zones (grid), and the
+* pipeline-orchestrator zones/lines editor can eventually all share a single
+* editor instead of three bespoke ones. Every coordinate is normalized 0..1 of
+* the camera frame (top-left origin), like every existing on-frame editor.
+*
+* ─────────────────────────────────────────────────────────────────────────────
+* Behaviours ported (the references are NOT edited — this generalizes them):
+*
+*   - From `ZoneCanvas` (orchestrator zone-editor):
+*       • ResizeObserver-sized `<Stage>`, `transparent` absolute-fill overlay
+*         mode for layering over a stream player, optional `backdrop` slot,
+*         pointer-events pass-through while not editing.
+*       • polygon draw / vertex-drag / body-drag with optimistic local override
+*         + the `useEffect` that drops the override once the controlled prop
+*         echoes the commit back, the rAF-throttled cursor ghost-line preview,
+*         the `Arrow` tripwire, and the memoised export.
+*   - From `PrivacyMaskCanvas`:
+*       • rect move + bottom-right-handle resize with 0..1 clamp, polygon
+*         vertex add (edge midpoint) / remove (✕, gated by min/max), and the
+*         `polygonVertices` {min,max} gate (e.g. Hikvision {min:4,max:4}).
+*   - From `MotionGridCanvas`:
+*       • grid cell-paint gesture (press-drag paints every touched cell to the
+*         value the first-touched cell flipped to), row-major `cells`.
+*
+* ─────────────────────────────────────────────────────────────────────────────
+* Usage — each consumer maps its own model onto `MaskShapeItem[]` and gates the
+* editor with `supportedShapes`:
+*
+* @example privacy-mask (rect + polygon)
+* ```tsx
+* const items: MaskShapeItem[] = regions.map((r) => ({ id: r.id, shape: r.shape }))
+* <MaskShapeCanvas
+*   transparent
+*   items={items}
+*   supportedShapes={['rect', 'polygon']}
+*   polygonVertices={options.polygonVertices}        // Hikvision {min:4,max:4}
+*   selectedId={selectedId}
+*   onSelect={setSelectedId}
+*   onShapeChange={(id, shape) =>
+*     onRegionsChange(regions.map((r) => (r.id === id ? { ...r, shape } : r)))}
+*   onDrawComplete={(shape) => onRegionsChange([...regions, { id: nextId(), shape }])}
+*   drawingKind={drawing ? 'rect' : null}
+* />
+* ```
+*
+* @example motion-zones (grid)
+* ```tsx
+* const items: MaskShapeItem[] = [{
+*   id: 'motion',
+*   shape: { kind: 'grid', gridWidth: w, gridHeight: h, cells },
+* }]
+* <MaskShapeCanvas
+*   transparent
+*   items={items}
+*   supportedShapes={['grid']}
+*   grid={{ width: w, height: h }}
+*   selectedId="motion"
+*   onSelect={() => {}}
+*   onShapeChange={(_id, shape) => {
+*     if (shape.kind === 'grid') onCellsChange(shape.cells)
+*   }}
+*   onDrawComplete={() => {}}
+*   drawingKind={null}
+* />
+* ```
+*
+* @example orchestrator (polygon + line/tripwire)
+* ```tsx
+* const items: MaskShapeItem[] = zones.map((z) => ({
+*   id: z.id,
+*   label: z.name,
+*   color: z.color,
+*   shape: z.kind === 'tripwire'
+*     ? { kind: 'line', points: z.points }
+*     : { kind: 'polygon', points: z.points },
+* }))
+* <MaskShapeCanvas
+*   transparent
+*   items={items}
+*   supportedShapes={['polygon', 'line']}
+*   selectedId={selectedZoneId}
+*   onSelect={onSelectZone}
+*   onShapeChange={(id, shape) => {
+*     if (shape.kind === 'polygon' || shape.kind === 'line')
+*       onZonePointsChange(id, shape.points)
+*   }}
+*   onDrawComplete={(shape) => onZoneComplete(shape)}
+*   drawingKind={drawingKind === 'tripwire' ? 'line' : drawingKind}
+*   backdrop={<CameraStreamPlayer ... />}
+* />
+* ```
+*
+* Purely controlled — the parent owns the truth. Every edit fires
+* `onShapeChange(id, shape)` (or `onDrawComplete(shape)` for a freshly-drawn
+* shape) with a brand-new immutable shape object; points and cells are never
+* mutated in place.
+*/
+var DEFAULT_COLOR = {
+	rect: "#ef4444",
+	polygon: "#3b82f6",
+	grid: "#6366f1",
+	line: "#f59e0b"
+};
+/** Polygon body fill alpha (hex suffix). `#33` ≈ 20%, `#66` ≈ 40%. */
+var FILL_ALPHA = "33";
+var FILL_ALPHA_SELECTED = "66";
+var DRAW_PREVIEW_STROKE = "#6366f1";
+var FLOOR_POLYGON_VERTICES = 3;
+var FLOOR_LINE_VERTICES = 2;
+var CLOSE_HIT_RADIUS = 12;
+var RHYTHM_COLS = 16;
+var RHYTHM_ROWS = 9;
+function toCanvas(p, w, h) {
+	return {
+		x: p.x * w,
+		y: p.y * h
+	};
+}
+function toNorm(p, w, h) {
+	return {
+		x: p.x / w,
+		y: p.y / h
+	};
+}
+function flatPoints(points, w, h) {
+	return points.flatMap((p) => [p.x * w, p.y * h]);
+}
+/** Clamp to the normalized 0..1 range, mapping non-finite values to 0. */
+function clamp01(v) {
+	if (!Number.isFinite(v)) return 0;
+	if (v < 0) return 0;
+	if (v > 1) return 1;
+	return v;
+}
+function resolveColor(item) {
+	return item.color ?? DEFAULT_COLOR[item.shape.kind];
+}
+/** Insert a vertex at the midpoint of edge `edgeStart → edgeStart+1`. */
+function insertMidpoint(points, edgeStart) {
+	const a = points[edgeStart];
+	const b = points[(edgeStart + 1) % points.length];
+	if (!a || !b) return [...points];
+	const mid = {
+		x: (a.x + b.x) / 2,
+		y: (a.y + b.y) / 2
+	};
+	return [
+		...points.slice(0, edgeStart + 1),
+		mid,
+		...points.slice(edgeStart + 1)
+	];
+}
+/** Float-tolerant point-list equality (used to detect prop catch-up). */
+function pointsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((p, i) => {
+		const o = b[i];
+		return Math.abs(p.x - o.x) < 1e-6 && Math.abs(p.y - o.y) < 1e-6;
+	});
+}
+function isPointShape(shape) {
+	return shape.kind === "polygon" || shape.kind === "line";
+}
+function MaskShapeCanvasImpl({ items, selectedId, onSelect, onShapeChange, onDrawComplete, drawingKind, supportedShapes, transparent = false, backdrop, polygonVertices, grid }) {
+	const containerRef = useRef(null);
+	const [size, setSize] = useState({
+		w: 800,
+		h: 450
+	});
+	const [drawPoints, setDrawPoints] = useState([]);
+	const [cursorPos, setCursorPos] = useState(null);
+	const [draggingItemId, setDraggingItemId] = useState(null);
+	const [dragOverride, setDragOverride] = useState(null);
+	const isDrawing = drawingKind !== null && supportedShapes.includes(drawingKind);
+	useEffect(() => {
+		if (!dragOverride) return;
+		const it = items.find((i) => i.id === dragOverride.itemId);
+		if (!it || !isPointShape(it.shape)) {
+			setDragOverride(null);
+			return;
+		}
+		if (pointsEqual(it.shape.points, dragOverride.points)) setDragOverride(null);
+	}, [items, dragOverride]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			const { width, height } = entry.contentRect;
+			setSize(transparent ? {
+				w: width,
+				h: height
+			} : {
+				w: width,
+				h: width * 9 / 16
+			});
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [transparent]);
+	useEffect(() => {
+		if (!isDrawing && cursorPos !== null) setCursorPos(null);
+	}, [isDrawing, cursorPos]);
+	const completeDraw = useCallback((shape) => {
+		onDrawComplete(shape);
+		setDrawPoints([]);
+	}, [onDrawComplete]);
+	const handleStageClick = useCallback((e) => {
+		if (!isDrawing || drawingKind === null) {
+			onSelect(null);
+			return;
+		}
+		const stage = e.target.getStage();
+		if (!stage) return;
+		const pos = stage.getPointerPosition();
+		if (!pos) return;
+		const norm = toNorm(pos, size.w, size.h);
+		if (drawingKind === "rect") {
+			const x = clamp01(norm.x);
+			const y = clamp01(norm.y);
+			completeDraw({
+				kind: "rect",
+				x,
+				y,
+				width: Math.min(.2, 1 - x),
+				height: Math.min(.2, 1 - y)
+			});
+			return;
+		}
+		if (drawingKind === "grid") {
+			const gw = grid?.width ?? RHYTHM_COLS;
+			const gh = grid?.height ?? RHYTHM_ROWS;
+			completeDraw({
+				kind: "grid",
+				gridWidth: gw,
+				gridHeight: gh,
+				cells: Array.from({ length: gw * gh }, () => false)
+			});
+			return;
+		}
+		if (drawingKind === "line") {
+			if (drawPoints.length === 0) {
+				setDrawPoints([norm]);
+				return;
+			}
+			completeDraw({
+				kind: "line",
+				points: [...drawPoints, norm]
+			});
+			return;
+		}
+		if (drawingKind === "polygon") {
+			if (drawPoints.length === 0) {
+				setDrawPoints([norm]);
+				return;
+			}
+			if (drawPoints.length >= FLOOR_POLYGON_VERTICES) {
+				const first = toCanvas(drawPoints[0], size.w, size.h);
+				if (Math.hypot(pos.x - first.x, pos.y - first.y) < CLOSE_HIT_RADIUS) {
+					completeDraw({
+						kind: "polygon",
+						points: drawPoints
+					});
+					return;
+				}
+			}
+			setDrawPoints((prev) => [...prev, norm]);
+		}
+	}, [
+		isDrawing,
+		drawingKind,
+		drawPoints,
+		size,
+		grid,
+		completeDraw,
+		onSelect
+	]);
+	const handleDblClick = useCallback((e) => {
+		if (!isDrawing || drawingKind !== "polygon") return;
+		if (drawPoints.length < FLOOR_POLYGON_VERTICES) return;
+		e.cancelBubble = true;
+		completeDraw({
+			kind: "polygon",
+			points: drawPoints
+		});
+	}, [
+		isDrawing,
+		drawingKind,
+		drawPoints,
+		completeDraw
+	]);
+	const cursorRafRef = useRef(null);
+	const pendingCursorRef = useRef(null);
+	useEffect(() => () => {
+		if (cursorRafRef.current !== null) cancelAnimationFrame(cursorRafRef.current);
+	}, []);
+	const handleMouseMove = useCallback((e) => {
+		if (!isDrawing) return;
+		const stage = e.target.getStage();
+		if (!stage) return;
+		pendingCursorRef.current = stage.getPointerPosition() ?? null;
+		if (cursorRafRef.current !== null) return;
+		cursorRafRef.current = requestAnimationFrame(() => {
+			cursorRafRef.current = null;
+			setCursorPos(pendingCursorRef.current);
+		});
+	}, [isDrawing]);
+	const paintingRef = useRef(false);
+	const paintValueRef = useRef(true);
+	const paintedRef = useRef(/* @__PURE__ */ new Set());
+	const paintCell = useCallback((itemId, shape, index, value) => {
+		const total = shape.gridWidth * shape.gridHeight;
+		if (index < 0 || index >= total) return;
+		if (shape.cells[index] === value) return;
+		const next = [...shape.cells];
+		while (next.length < total) next.push(false);
+		next.length = total;
+		next[index] = value;
+		onShapeChange(itemId, {
+			...shape,
+			cells: next
+		});
+	}, [onShapeChange]);
+	const rhythmLines = [];
+	if (!transparent) {
+		for (let i = 1; i < RHYTHM_COLS; i++) {
+			const x = size.w / RHYTHM_COLS * i;
+			rhythmLines.push(/* @__PURE__ */ jsx(Line, {
+				points: [
+					x,
+					0,
+					x,
+					size.h
+				],
+				stroke: "#ffffff",
+				strokeWidth: .5,
+				opacity: .08
+			}, `gv-${i}`));
+		}
+		for (let i = 1; i < RHYTHM_ROWS; i++) {
+			const y = size.h / RHYTHM_ROWS * i;
+			rhythmLines.push(/* @__PURE__ */ jsx(Line, {
+				points: [
+					0,
+					y,
+					size.w,
+					y
+				],
+				stroke: "#ffffff",
+				strokeWidth: .5,
+				opacity: .08
+			}, `gh-${i}`));
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: transparent ? "absolute inset-0" : "relative w-full bg-zinc-900 rounded-lg overflow-hidden",
+		style: { cursor: isDrawing ? "crosshair" : "default" },
+		children: [
+			backdrop && !transparent ? /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 pointer-events-none [&>*]:w-full [&>*]:h-full [&>img]:object-cover [&>video]:object-cover",
+				style: {
+					width: size.w,
+					height: size.h
+				},
+				children: backdrop
+			}) : null,
+			/* @__PURE__ */ jsxs(Stage, {
+				width: size.w,
+				height: size.h,
+				onClick: handleStageClick,
+				onDblClick: handleDblClick,
+				onMouseMove: handleMouseMove,
+				children: [
+					/* @__PURE__ */ jsxs(Layer, {
+						listening: false,
+						children: [/* @__PURE__ */ jsx(Line, {
+							points: [
+								0,
+								0,
+								size.w,
+								0,
+								size.w,
+								size.h,
+								0,
+								size.h,
+								0,
+								0
+							],
+							stroke: "transparent",
+							strokeWidth: 0
+						}), rhythmLines]
+					}),
+					/* @__PURE__ */ jsx(Layer, { children: items.map((item) => {
+						const selected = item.id === selectedId;
+						const dimmed = item.enabled === false;
+						const color = resolveColor(item);
+						const editable = selected && !isDrawing && !dimmed;
+						if (item.shape.kind === "rect") return /* @__PURE__ */ jsx(RectItem, {
+							item,
+							shape: item.shape,
+							color,
+							selected,
+							dimmed,
+							editable,
+							isDrawing,
+							size,
+							onSelect,
+							onShapeChange
+						}, item.id);
+						if (item.shape.kind === "grid") return /* @__PURE__ */ jsx(GridItem, {
+							item,
+							shape: item.shape,
+							color,
+							dimmed,
+							editable,
+							size,
+							onSelect,
+							paintingRef,
+							paintValueRef,
+							paintedRef,
+							paintCell
+						}, item.id);
+						const isLine = item.shape.kind === "line";
+						const minVertices = isLine ? FLOOR_LINE_VERTICES : Math.max(FLOOR_POLYGON_VERTICES, polygonVertices?.min ?? FLOOR_POLYGON_VERTICES);
+						const maxVertices = isLine ? FLOOR_LINE_VERTICES : polygonVertices?.max;
+						const effectivePoints = dragOverride && dragOverride.itemId === item.id ? dragOverride.points : item.shape.points;
+						return /* @__PURE__ */ jsx(PointItem, {
+							item,
+							shape: item.shape,
+							color,
+							selected,
+							dimmed,
+							editable,
+							isLine,
+							isDrawing,
+							size,
+							effectivePoints,
+							minVertices,
+							maxVertices,
+							isDragging: draggingItemId === item.id,
+							onSelect,
+							onShapeChange,
+							setDragOverride,
+							setDraggingItemId
+						}, item.id);
+					}) }),
+					/* @__PURE__ */ jsx(Layer, {
+						listening: false,
+						children: isDrawing && drawPoints.length > 0 && /* @__PURE__ */ jsxs(Group, { children: [
+							drawingKind === "polygon" && drawPoints.length >= 2 && /* @__PURE__ */ jsx(Line, {
+								points: flatPoints(drawPoints, size.w, size.h),
+								stroke: DRAW_PREVIEW_STROKE,
+								strokeWidth: 1.5,
+								dash: [6, 3],
+								opacity: .8
+							}),
+							drawingKind === "line" && drawPoints.length === 1 && cursorPos && /* @__PURE__ */ jsx(Line, {
+								points: [
+									drawPoints[0].x * size.w,
+									drawPoints[0].y * size.h,
+									cursorPos.x,
+									cursorPos.y
+								],
+								stroke: DEFAULT_COLOR.line,
+								strokeWidth: 1.5,
+								dash: [6, 3],
+								opacity: .7
+							}),
+							drawingKind === "polygon" && cursorPos && drawPoints.length >= 1 && /* @__PURE__ */ jsx(Line, {
+								points: [
+									drawPoints[drawPoints.length - 1].x * size.w,
+									drawPoints[drawPoints.length - 1].y * size.h,
+									cursorPos.x,
+									cursorPos.y
+								],
+								stroke: DRAW_PREVIEW_STROKE,
+								strokeWidth: 1,
+								dash: [4, 4],
+								opacity: .5
+							}),
+							drawPoints.map((p, idx) => {
+								const cp = toCanvas(p, size.w, size.h);
+								const firstClose = idx === 0 && drawingKind === "polygon" && drawPoints.length >= FLOOR_POLYGON_VERTICES;
+								return /* @__PURE__ */ jsx(Circle, {
+									x: cp.x,
+									y: cp.y,
+									radius: firstClose ? 7 : 4,
+									fill: firstClose ? DRAW_PREVIEW_STROKE : "#ffffff",
+									stroke: DRAW_PREVIEW_STROKE,
+									strokeWidth: 1.5,
+									opacity: .9
+								}, idx);
+							})
+						] })
+					})
+				]
+			}),
+			isDrawing ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700",
+				children: drawingKind === "line" ? "Click to set the start point, click again to complete the line" : drawingKind === "rect" ? "Click to drop a rectangle, then drag the corner to resize" : drawingKind === "grid" ? "Click to add the grid, then paint cells" : drawPoints.length < FLOOR_POLYGON_VERTICES ? "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."
+			}) : null
+		]
+	});
+}
+var MIN_RECT_DIM = .02;
+/** Float-tolerant rect equality (used to detect controlled-prop catch-up). */
+function rectGeomEqual(a, b) {
+	return Math.abs(a.x - b.x) < 1e-6 && Math.abs(a.y - b.y) < 1e-6 && Math.abs(a.width - b.width) < 1e-6 && Math.abs(a.height - b.height) < 1e-6;
+}
+function RectItem({ item, shape, color, selected, dimmed, editable, isDrawing, size, onSelect, onShapeChange }) {
+	const [override, setOverride] = useState(null);
+	const propGeom = {
+		x: shape.x,
+		y: shape.y,
+		width: shape.width,
+		height: shape.height
+	};
+	useEffect(() => {
+		if (override && rectGeomEqual(propGeom, override)) setOverride(null);
+	}, [
+		shape.x,
+		shape.y,
+		shape.width,
+		shape.height,
+		override
+	]);
+	const geom = override ?? propGeom;
+	const x = geom.x * size.w;
+	const y = geom.y * size.h;
+	const w = geom.width * size.w;
+	const h = geom.height * size.h;
+	const baseOpacity = dimmed ? .35 : selected ? 1 : .85;
+	const commit = (g) => {
+		setOverride(g);
+		onShapeChange(item.id, {
+			kind: "rect",
+			x: g.x,
+			y: g.y,
+			width: g.width,
+			height: g.height
+		});
+	};
+	const dragBoundFunc = (pos) => ({
+		x: Math.max(-x, Math.min(size.w - (x + w), pos.x)),
+		y: Math.max(-y, Math.min(size.h - (y + h), pos.y))
+	});
+	const onBodyDragEnd = (e) => {
+		const node = e.target;
+		const dx = node.x() / size.w;
+		const dy = node.y() / size.h;
+		node.position({
+			x: 0,
+			y: 0
+		});
+		if (dx === 0 && dy === 0) return;
+		const nx = Math.min(Math.max(0, geom.x + dx), Math.max(0, 1 - geom.width));
+		const ny = Math.min(Math.max(0, geom.y + dy), Math.max(0, 1 - geom.height));
+		commit({
+			...geom,
+			x: nx,
+			y: ny
+		});
+	};
+	const onHandleDragMove = (e) => {
+		const node = e.target;
+		const newW = clamp01(node.x() / size.w - geom.x);
+		const newH = clamp01(node.y() / size.h - geom.y);
+		setOverride({
+			...geom,
+			width: Math.max(MIN_RECT_DIM, Math.min(newW, 1 - geom.x)),
+			height: Math.max(MIN_RECT_DIM, Math.min(newH, 1 - geom.y))
+		});
+	};
+	const onHandleDragEnd = (e) => {
+		const node = e.target;
+		const newW = clamp01(node.x() / size.w - geom.x);
+		const newH = clamp01(node.y() / size.h - geom.y);
+		commit({
+			...geom,
+			width: Math.max(MIN_RECT_DIM, Math.min(newW, 1 - geom.x)),
+			height: Math.max(MIN_RECT_DIM, Math.min(newH, 1 - geom.y))
+		});
+	};
+	return /* @__PURE__ */ jsx(Group, {
+		onClick: (e) => {
+			e.cancelBubble = true;
+			if (!isDrawing) onSelect(item.id);
+		},
+		children: /* @__PURE__ */ jsxs(Group, {
+			draggable: editable,
+			dragBoundFunc: editable ? dragBoundFunc : void 0,
+			onDragEnd: editable ? onBodyDragEnd : void 0,
+			onMouseEnter: (e) => {
+				if (!editable) return;
+				const stage = e.target.getStage();
+				if (stage) stage.container().style.cursor = "move";
+			},
+			onMouseLeave: (e) => {
+				if (!editable) return;
+				const stage = e.target.getStage();
+				if (stage) stage.container().style.cursor = isDrawing ? "crosshair" : "default";
+			},
+			children: [
+				/* @__PURE__ */ jsx(Rect, {
+					x,
+					y,
+					width: w,
+					height: h,
+					fill: color + (selected ? FILL_ALPHA_SELECTED : FILL_ALPHA),
+					stroke: color,
+					strokeWidth: selected ? 2.5 : 1.5,
+					opacity: baseOpacity
+				}),
+				item.label ? /* @__PURE__ */ jsx(Text, {
+					x,
+					y: y - 16,
+					text: item.label,
+					fontSize: 12,
+					fill: color,
+					stroke: "#000000",
+					strokeWidth: 3,
+					fillAfterStrokeEnabled: true,
+					fontStyle: "bold",
+					listening: false
+				}) : null,
+				editable ? /* @__PURE__ */ jsx(Circle, {
+					x: x + w,
+					y: y + h,
+					radius: 6,
+					fill: color,
+					stroke: "#ffffff",
+					strokeWidth: 1.5,
+					draggable: true,
+					dragBoundFunc: (pos) => ({
+						x: Math.min(size.w, Math.max(x, pos.x)),
+						y: Math.min(size.h, Math.max(y, pos.y))
+					}),
+					onDragStart: (e) => {
+						e.cancelBubble = true;
+					},
+					onDragMove: onHandleDragMove,
+					onDragEnd: onHandleDragEnd,
+					onMouseEnter: (e) => {
+						const stage = e.target.getStage();
+						if (stage) stage.container().style.cursor = "nwse-resize";
+					},
+					onMouseLeave: (e) => {
+						const stage = e.target.getStage();
+						if (stage) stage.container().style.cursor = "default";
+					}
+				}) : null
+			]
+		})
+	});
+}
+function GridItem({ item, shape, color, dimmed, editable, size, onSelect, paintingRef, paintValueRef, paintedRef, paintCell }) {
+	const { gridWidth, gridHeight, cells } = shape;
+	const cellW = size.w / gridWidth;
+	const cellH = size.h / gridHeight;
+	const total = gridWidth * gridHeight;
+	const opacity = dimmed ? .3 : 1;
+	const onCellDown = (index) => {
+		if (!editable) {
+			onSelect(item.id);
+			return;
+		}
+		const nextValue = cells[index] !== true;
+		paintingRef.current = true;
+		paintValueRef.current = nextValue;
+		paintedRef.current = new Set([index]);
+		paintCell(item.id, shape, index, nextValue);
+	};
+	const onCellEnter = (index) => {
+		if (!paintingRef.current || !editable) return;
+		if (paintedRef.current.has(index)) return;
+		paintedRef.current.add(index);
+		paintCell(item.id, shape, index, paintValueRef.current);
+	};
+	const endPaint = () => {
+		if (!paintingRef.current) return;
+		paintingRef.current = false;
+		paintedRef.current = /* @__PURE__ */ new Set();
+	};
+	return /* @__PURE__ */ jsx(Group, {
+		opacity,
+		onMouseUp: endPaint,
+		onMouseLeave: endPaint,
+		children: Array.from({ length: total }, (_, i) => {
+			const col = i % gridWidth;
+			const row = Math.floor(i / gridWidth);
+			const active = cells[i] === true;
+			return /* @__PURE__ */ jsx(Rect, {
+				x: col * cellW,
+				y: row * cellH,
+				width: cellW,
+				height: cellH,
+				fill: active ? color + FILL_ALPHA_SELECTED : "#ffffff10",
+				stroke: active ? color : "#ffffff40",
+				strokeWidth: .5,
+				onMouseDown: (e) => {
+					e.cancelBubble = true;
+					onCellDown(i);
+				},
+				onMouseEnter: () => onCellEnter(i)
+			}, i);
+		})
+	});
+}
+function PointItem({ item, shape, color, selected, dimmed, editable, isLine, isDrawing, size, effectivePoints, minVertices, maxVertices, isDragging, onSelect, onShapeChange, setDragOverride, setDraggingItemId }) {
+	const pts = flatPoints(effectivePoints, size.w, size.h);
+	const baseOpacity = dimmed ? .35 : selected ? 1 : isLine ? .8 : .85;
+	const commitPoints = (points) => isLine ? {
+		kind: "line",
+		points: [...points]
+	} : {
+		kind: "polygon",
+		points: [...points]
+	};
+	const xs = effectivePoints.map((p) => p.x * size.w);
+	const ys = effectivePoints.map((p) => p.y * size.h);
+	const minX = xs.length > 0 ? Math.min(...xs) : 0;
+	const maxX = xs.length > 0 ? Math.max(...xs) : 0;
+	const minY = ys.length > 0 ? Math.min(...ys) : 0;
+	const maxY = ys.length > 0 ? Math.max(...ys) : 0;
+	const dragBoundFunc = (pos) => ({
+		x: Math.max(-minX, Math.min(size.w - maxX, pos.x)),
+		y: Math.max(-minY, Math.min(size.h - maxY, pos.y))
+	});
+	const onBodyDragEnd = (e) => {
+		const node = e.target;
+		const dx = node.x() / size.w;
+		const dy = node.y() / size.h;
+		node.position({
+			x: 0,
+			y: 0
+		});
+		setDraggingItemId(null);
+		if (dx === 0 && dy === 0) return;
+		const updated = shape.points.map((p) => ({
+			x: p.x + dx,
+			y: p.y + dy
+		}));
+		setDragOverride({
+			itemId: item.id,
+			points: updated
+		});
+		onShapeChange(item.id, commitPoints(updated));
+	};
+	const canRemoveVertex = !isLine && effectivePoints.length > minVertices;
+	const canAddVertex = !isLine && (maxVertices === void 0 || effectivePoints.length < maxVertices);
+	return /* @__PURE__ */ jsxs(Group, {
+		onClick: (e) => {
+			e.cancelBubble = true;
+			if (!isDrawing) onSelect(item.id);
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				draggable: editable,
+				dragBoundFunc: editable ? dragBoundFunc : void 0,
+				onDragStart: editable ? () => setDraggingItemId(item.id) : void 0,
+				onDragEnd: editable ? onBodyDragEnd : void 0,
+				onMouseEnter: (e) => {
+					if (!editable) return;
+					const stage = e.target.getStage();
+					if (stage) stage.container().style.cursor = "move";
+				},
+				onMouseLeave: (e) => {
+					if (!editable) return;
+					const stage = e.target.getStage();
+					if (stage) stage.container().style.cursor = isDrawing ? "crosshair" : "default";
+				},
+				children: [isLine ? /* @__PURE__ */ jsx(Arrow, {
+					points: pts,
+					stroke: color,
+					strokeWidth: selected ? 3 : 2,
+					fill: color,
+					pointerLength: 10,
+					pointerWidth: 8,
+					opacity: baseOpacity
+				}) : /* @__PURE__ */ jsx(Line, {
+					points: pts,
+					closed: true,
+					fill: color + (selected ? FILL_ALPHA_SELECTED : FILL_ALPHA),
+					stroke: color,
+					strokeWidth: selected ? 2.5 : 1.5,
+					opacity: baseOpacity
+				}), item.label && effectivePoints.length > 0 ? (() => {
+					const c = toCanvas({
+						x: effectivePoints.reduce((s, p) => s + p.x, 0) / effectivePoints.length,
+						y: effectivePoints.reduce((s, p) => s + p.y, 0) / effectivePoints.length
+					}, size.w, size.h);
+					const approxWidth = Math.max(40, item.label.length * 11 * .62);
+					return /* @__PURE__ */ jsx(Text, {
+						x: c.x - approxWidth / 2,
+						y: c.y - 7,
+						width: approxWidth,
+						align: "center",
+						text: item.label,
+						fontSize: 12,
+						fill: color,
+						stroke: "#000000",
+						strokeWidth: 3,
+						fillAfterStrokeEnabled: true,
+						fontStyle: "bold",
+						listening: false
+					});
+				})() : null]
+			}),
+			editable && !isDragging && effectivePoints.map((p, idx) => {
+				const cp = toCanvas(p, size.w, size.h);
+				return /* @__PURE__ */ jsx(Circle, {
+					x: cp.x,
+					y: cp.y,
+					radius: 5,
+					fill: color,
+					stroke: "#ffffff",
+					strokeWidth: 1.5,
+					draggable: true,
+					onDragMove: (e) => {
+						const newPt = toNorm({
+							x: e.target.x(),
+							y: e.target.y()
+						}, size.w, size.h);
+						setDragOverride((prev) => {
+							const base = prev && prev.itemId === item.id ? prev.points : shape.points;
+							return {
+								itemId: item.id,
+								points: base.map((pp, i) => i === idx ? newPt : pp)
+							};
+						});
+					},
+					onDragEnd: (e) => {
+						const newPt = toNorm({
+							x: e.target.x(),
+							y: e.target.y()
+						}, size.w, size.h);
+						const updated = shape.points.map((pp, i) => i === idx ? newPt : pp);
+						setDragOverride({
+							itemId: item.id,
+							points: updated
+						});
+						onShapeChange(item.id, commitPoints(updated));
+					},
+					onContextMenu: (e) => {
+						e.evt.preventDefault();
+						e.cancelBubble = true;
+						if (!canRemoveVertex) return;
+						onShapeChange(item.id, commitPoints(shape.points.filter((_, i) => i !== idx)));
+					}
+				}, `pt-${idx}`);
+			}),
+			editable && !isDragging && canAddVertex && effectivePoints.length >= 2 && effectivePoints.map((p, idx) => {
+				const next = effectivePoints[(idx + 1) % effectivePoints.length];
+				const cp = toCanvas({
+					x: (p.x + next.x) / 2,
+					y: (p.y + next.y) / 2
+				}, size.w, size.h);
+				return /* @__PURE__ */ jsx(Circle, {
+					x: cp.x,
+					y: cp.y,
+					radius: 4,
+					fill: "#ffffff",
+					stroke: color,
+					strokeWidth: 1.5,
+					opacity: .6,
+					onMouseEnter: (e) => {
+						const node = e.target;
+						node.to({
+							radius: 6,
+							opacity: 1,
+							duration: .1
+						});
+						const stage = node.getStage();
+						if (stage) stage.container().style.cursor = "copy";
+					},
+					onMouseLeave: (e) => {
+						const node = e.target;
+						node.to({
+							radius: 4,
+							opacity: .6,
+							duration: .1
+						});
+						const stage = node.getStage();
+						if (stage) stage.container().style.cursor = isDrawing ? "crosshair" : "default";
+					},
+					onClick: (e) => {
+						e.cancelBubble = true;
+						onShapeChange(item.id, commitPoints(insertMidpoint(shape.points, idx)));
+					}
+				}, `mid-${idx}`);
+			})
+		]
+	});
+}
+/**
+* Memoised export. The Konva scene is expensive to re-evaluate (many nodes per
+* item + per-item drag-bound closures) and overlay parents re-render on every
+* detection/motion event. Mirrors ZoneCanvas's `memo`.
+*/
+var MaskShapeCanvas = memo(MaskShapeCanvasImpl);
+//#endregion
+export { MaskShapeCanvas };