@camstack/ui-library 1.0.1 → 1.0.3

package/dist/MotionZonesSettings-C1EEbk2V.js

@@ -0,0 +1,438 @@
+import { TEXT_HINT, WidgetPanel, i as createLucideIcon, isAbsentProvider, useDeviceProxy, usePlayerOverlayLayer, useSystem } from "./index.js";
+import { MaskShapeCanvas } from "./MaskShapeCanvas-DI4BY7W2.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Grid2x2 = createLucideIcon("grid-2x2", [
+	["path", {
+		d: "M12 3v18",
+		key: "108xh3"
+	}],
+	["path", {
+		d: "M3 12h18",
+		key: "1i2n21"
+	}],
+	["rect", {
+		x: "3",
+		y: "3",
+		width: "18",
+		height: "18",
+		rx: "2",
+		key: "h1oib"
+	}]
+]);
+//#endregion
+//#region src/composites/cap-settings/MotionZonesSettings.tsx
+/**
+* MotionZonesSettings — management surface for the on-camera
+* `motion-zones` capability. A cap-settings component (ui-library),
+* mounted into the device-detail Config tab via the cap-UI
+* contribution mechanism (the `motion-zones` cap declares a `ui` block).
+*
+* The on-camera motion mask is a SINGLE `grid` region in the shared
+* MaskShape vocabulary (a row-major boolean cell lattice). This component
+* owns its own control panel (Edit toggle, All on / All off / Invert,
+* count, Revert, Save) and paints the editable lattice over the live frame
+* with the shared `MaskShapeCanvas` drawing-plane — registered as a
+* player-overlay layer ONLY while "Edit grid" is toggled on (OFF by
+* default — nothing draws on mount).
+*
+* Detection enable + sensitivity are NOT edited here — they are the
+* camera's on-board motion master switch, owned by the driver's
+* "On-camera motion" settings section. Saving sends a `cells`-only patch
+* (one grid region); enable / sensitivity are left untouched camera-side.
+*
+* ── Resizable input grid (resampled to the camera grid on save) ──────────────
+* The camera's native motion grid (`getOptions().grid`, e.g. 22×18) is the
+* FINEST resolution that round-trips — painting finer than it can't be stored
+* (not reconstructible). So the camera grid is the FLOOR (×1) and the operator
+* picks BIGGER cells: an integer cell-size multiplier (×1/×2/×3) where a UI cell
+* spans an m×m block of camera cells (×2 → quarter as many, ×3 → ninth). The
+* CAMERA grid stays authoritative:
+*   - LOAD: the camera grid is COARSENED into the chosen UI resolution (a UI
+*     cell is `true` if ANY camera cell in its block is painted) so existing
+*     masks display on the bigger-celled surface.
+*   - SAVE: the UI grid is EXPANDED back to camera gridWidth×gridHeight — every
+*     camera cell takes the value of the UI cell whose block covers it.
+* At ×1 both transforms are the identity, so the camera-grid round-trip is
+* exact; at higher multipliers `coarsen(expand(uiCells)) === uiCells`, so an
+* edit made at the chosen resolution survives the round-trip exactly. The
+* component's draft (`uiCells`) lives at the UI resolution; the last-saved truth
+* (`committedCamera`) and every comparison stay anchored to the camera-native
+* grid so `dirty`/Save/Revert math is resolution-independent.
+*/
+var MOTION_ZONES_OVERLAY_ORDER = 110;
+var OVERLAY_ID = "motion-zones";
+var GRID_REGION_ID = 0;
+var GRID_MULTIPLIERS = [
+	1,
+	2,
+	3
+];
+var DEFAULT_MULTIPLIER = 1;
+var BTN_NEUTRAL = "rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors";
+var BTN_PRIMARY = "rounded-md border border-primary/50 bg-primary/15 px-2.5 py-1 text-[11px] font-medium text-primary hover:bg-primary/25 disabled:opacity-40 transition-colors";
+/** Coerce an arbitrary `cells` array to exactly `width*height` booleans. */
+function normaliseCells(cells, width, height) {
+	const total = width * height;
+	const next = new Array(total);
+	for (let i = 0; i < total; i += 1) next[i] = cells[i] === true;
+	return next;
+}
+function cellsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+	return true;
+}
+/** UI-grid dimension for a camera dimension at cell-size multiplier m. */
+function coarseDim(cameraDim, m) {
+	return Math.ceil(cameraDim / m);
+}
+/**
+* Map a camera-grid index to the UI-grid cell that SPATIALLY covers it, by the
+* camera cell's centre (`(c + 0.5)/cameraDim`). Index-based `floor(c/m)` drifts
+* when the camera dim isn't a multiple of m (e.g. 22 ÷ 3) — the painted UI cell
+* no longer lines up with the camera region it masks. The centre map keeps them
+* aligned and is a non-decreasing surjection onto [0, uiDim), so every UI cell
+* owns ≥1 camera cell — which is what makes `coarsen(expand(x)) === x` hold.
+*/
+function cameraToUi(c, cameraDim, uiDim) {
+	return Math.min(uiDim - 1, Math.floor((c + .5) / cameraDim * uiDim));
+}
+/**
+* COARSEN a camera-native grid (cw×ch, row-major) into a coarser UI grid at
+* ceil(cw/m)×ceil(ch/m): a UI cell is `true` if ANY camera cell mapped into it
+* is painted (the inclusive "any" rule — motion masks are inclusive, so a
+* painted sub-region arms the whole bigger cell). At m === 1 this is the
+* identity. Used on LOAD/Revert so an existing camera mask shows up on the
+* chosen (bigger-celled) painting surface.
+*/
+function coarsenCells(cameraCells, cw, ch, m) {
+	const uw = coarseDim(cw, m);
+	const uh = coarseDim(ch, m);
+	const out = new Array(uw * uh).fill(false);
+	for (let cy = 0; cy < ch; cy += 1) {
+		const uy = cameraToUi(cy, ch, uh);
+		for (let cx = 0; cx < cw; cx += 1) {
+			if (cameraCells[cy * cw + cx] !== true) continue;
+			out[uy * uw + cameraToUi(cx, cw, uw)] = true;
+		}
+	}
+	return out;
+}
+/**
+* EXPAND a coarser UI grid at ceil(cw/m)×ceil(ch/m) back to the camera-native
+* grid (cw×ch): every camera cell takes the value of the UI cell that spatially
+* covers it. At m === 1 this is the identity, so the camera-grid round-trip is
+* exact. Used on SAVE, on multiplier changes (to preserve painted area), and to
+* compute `dirty`. Note `coarsen(expand(uiCells)) === uiCells`, so an edit made
+* at the chosen resolution survives the round-trip exactly.
+*/
+function expandCells(uiCells, cw, ch, m) {
+	const uw = coarseDim(cw, m);
+	const uh = coarseDim(ch, m);
+	const out = new Array(cw * ch).fill(false);
+	for (let cy = 0; cy < ch; cy += 1) {
+		const uy = cameraToUi(cy, ch, uh);
+		for (let cx = 0; cx < cw; cx += 1) out[cy * cw + cx] = uiCells[uy * uw + cameraToUi(cx, cw, uw)] === true;
+	}
+	return out;
+}
+function MotionZonesSettings({ deviceId }) {
+	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
+	const [options, setOptions] = useState(null);
+	const [unsupported, setUnsupported] = useState(false);
+	const [uiCells, setUiCells] = useState(null);
+	const [committedCamera, setCommittedCamera] = useState(null);
+	const [multiplier, setMultiplier] = useState(DEFAULT_MULTIPLIER);
+	const [saving, setSaving] = useState(false);
+	const [editing, setEditing] = useState(false);
+	const seededRef = useRef(false);
+	useEffect(() => {
+		if (!dev) return void 0;
+		let cancelled = false;
+		seededRef.current = false;
+		setOptions(null);
+		setUnsupported(false);
+		setUiCells(null);
+		setCommittedCamera(null);
+		setMultiplier(DEFAULT_MULTIPLIER);
+		setEditing(false);
+		(async () => {
+			try {
+				const opts = await dev.motionZones?.getOptions({});
+				if (cancelled) return;
+				if (!opts) throw new Error("device proxy not ready");
+				setOptions(opts);
+				if (seededRef.current) return;
+				const status = await dev.motionZones?.getStatus({});
+				if (cancelled) return;
+				if (!status) throw new Error("device proxy not ready");
+				seededRef.current = true;
+				const region = status.regions.find((r) => r.shape.kind === "grid");
+				const norm = normaliseCells(region ? region.shape.cells : [], opts.grid.width, opts.grid.height);
+				setCommittedCamera(norm);
+				setUiCells(coarsenCells(norm, opts.grid.width, opts.grid.height, DEFAULT_MULTIPLIER));
+			} catch (err) {
+				if (cancelled) return;
+				if (isAbsentProvider(err)) setUnsupported(true);
+				else console.error("Motion Zones load failed", err);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [dev]);
+	const cw = options ? options.grid.width : 0;
+	const ch = options ? options.grid.height : 0;
+	const uiWidth = coarseDim(cw, multiplier);
+	const uiHeight = coarseDim(ch, multiplier);
+	const draftCamera = useMemo(() => uiCells && options ? expandCells(uiCells, cw, ch, multiplier) : null, [
+		uiCells,
+		options,
+		cw,
+		ch,
+		multiplier
+	]);
+	const dirty = useMemo(() => draftCamera !== null && committedCamera !== null && !cellsEqual(draftCamera, committedCamera), [draftCamera, committedCamera]);
+	const activeCount = useMemo(() => draftCamera ? draftCamera.reduce((n, c) => c ? n + 1 : n, 0) : 0, [draftCamera]);
+	const cameraTotal = cw * ch;
+	const uiTotal = uiWidth * uiHeight;
+	const setAll = useCallback((value) => {
+		if (uiTotal > 0) setUiCells(new Array(uiTotal).fill(value));
+	}, [uiTotal]);
+	const invert = useCallback(() => {
+		setUiCells((prev) => prev ? prev.map((c) => !c) : prev);
+	}, []);
+	const revert = useCallback(() => {
+		if (committedCamera && options) setUiCells(coarsenCells(committedCamera, cw, ch, multiplier));
+	}, [
+		committedCamera,
+		options,
+		cw,
+		ch,
+		multiplier
+	]);
+	const changeMultiplier = useCallback((next) => {
+		if (next === multiplier || !options) return;
+		setUiCells((prev) => {
+			if (!prev) {
+				setMultiplier(next);
+				return prev;
+			}
+			const recoarsened = coarsenCells(expandCells(prev, cw, ch, multiplier), cw, ch, next);
+			setMultiplier(next);
+			return recoarsened;
+		});
+	}, [
+		multiplier,
+		options,
+		cw,
+		ch
+	]);
+	const items = useMemo(() => options && uiCells ? [{
+		id: GRID_REGION_ID,
+		shape: {
+			kind: "grid",
+			gridWidth: uiWidth,
+			gridHeight: uiHeight,
+			cells: [...uiCells]
+		}
+	}] : [], [
+		options,
+		uiCells,
+		uiWidth,
+		uiHeight
+	]);
+	const onShapeChange = useCallback((_id, shape) => {
+		if (shape.kind !== "grid") return;
+		setUiCells(shape.cells);
+	}, []);
+	const save = useCallback(async () => {
+		if (!dev || !uiCells || !options) return;
+		setSaving(true);
+		try {
+			const cameraCells = expandCells(uiCells, options.grid.width, options.grid.height, multiplier);
+			const shape = {
+				kind: "grid",
+				gridWidth: options.grid.width,
+				gridHeight: options.grid.height,
+				cells: cameraCells
+			};
+			await dev.motionZones?.setZone({ patch: { regions: [{
+				id: GRID_REGION_ID,
+				enabled: true,
+				shape
+			}] } });
+			const fresh = await dev.motionZones?.getStatus({});
+			if (fresh) {
+				const region = fresh.regions.find((r) => r.shape.kind === "grid");
+				const norm = normaliseCells(region ? region.shape.cells : [], options.grid.width, options.grid.height);
+				setCommittedCamera(norm);
+				setUiCells(coarsenCells(norm, options.grid.width, options.grid.height, multiplier));
+			}
+		} catch (err) {
+			console.error("Motion Zones save failed", err);
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		dev,
+		uiCells,
+		options,
+		multiplier
+	]);
+	usePlayerOverlayLayer(useMemo(() => editing && !unsupported && options && uiCells ? {
+		id: OVERLAY_ID,
+		order: MOTION_ZONES_OVERLAY_ORDER,
+		node: /* @__PURE__ */ jsx(MaskShapeCanvas, {
+			transparent: true,
+			items,
+			supportedShapes: ["grid"],
+			grid: {
+				width: uiWidth,
+				height: uiHeight
+			},
+			selectedId: GRID_REGION_ID,
+			onSelect: () => {},
+			onShapeChange,
+			onDrawComplete: () => {},
+			drawingKind: null
+		})
+	} : null, [
+		editing,
+		unsupported,
+		options,
+		uiCells,
+		items,
+		onShapeChange,
+		uiWidth,
+		uiHeight
+	]));
+	const ready = !unsupported && options !== null && uiCells !== null;
+	if (!dev) return null;
+	return /* @__PURE__ */ jsx(WidgetPanel, {
+		title: "Motion Zones",
+		icon: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3",
+			children: unsupported ? /* @__PURE__ */ jsx("p", {
+				className: `${TEXT_HINT} leading-relaxed`,
+				children: "This camera doesn't expose an on-board motion zones grid."
+			}) : !ready ? /* @__PURE__ */ jsx("p", {
+				className: `${TEXT_HINT} leading-relaxed`,
+				children: "Loading the camera's grid…"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+				className: `${TEXT_HINT} leading-relaxed`,
+				children: [
+					"Toggle ",
+					/* @__PURE__ */ jsx("strong", {
+						className: "text-foreground",
+						children: "Edit grid"
+					}),
+					" to paint the region directly on the live frame, then ",
+					/* @__PURE__ */ jsx("strong", {
+						className: "text-foreground",
+						children: "Save"
+					}),
+					" to push the mask to the camera. Pick a bigger",
+					" ",
+					/* @__PURE__ */ jsx("strong", {
+						className: "text-foreground",
+						children: "Cell size"
+					}),
+					" for quicker, broad-stroke painting — it's resampled to the camera's native ",
+					options.grid.width,
+					"×",
+					options.grid.height,
+					" grid on save (×1 is the finest)."
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setEditing((v) => !v),
+						disabled: saving,
+						"aria-pressed": editing,
+						className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
+						children: editing ? "Done editing" : "Edit grid"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setAll(true),
+						disabled: saving,
+						className: BTN_NEUTRAL,
+						children: "All on"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setAll(false),
+						disabled: saving,
+						className: BTN_NEUTRAL,
+						children: "All off"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: invert,
+						disabled: saving,
+						className: BTN_NEUTRAL,
+						children: "Invert"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 ml-1",
+						role: "group",
+						"aria-label": "Cell size",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `${TEXT_HINT} mr-0.5`,
+							children: "Cell size"
+						}), GRID_MULTIPLIERS.map((m) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => changeMultiplier(m),
+							disabled: saving,
+							"aria-pressed": multiplier === m,
+							title: m === 1 ? `Camera grid ${cw}×${ch} (finest)` : `${coarseDim(cw, m)}×${coarseDim(ch, m)} painting grid · cells ×${m} bigger`,
+							className: multiplier === m ? BTN_PRIMARY : BTN_NEUTRAL,
+							children: ["×", m]
+						}, m))]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: `${TEXT_HINT} ml-1 tabular-nums`,
+						children: [
+							activeCount,
+							" / ",
+							cameraTotal,
+							" cells · ",
+							options.grid.width,
+							"×",
+							options.grid.height,
+							multiplier !== 1 ? ` · paint ${uiWidth}×${uiHeight}` : ""
+						]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: revert,
+						disabled: saving || !dirty,
+						className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+						children: "Revert"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void save(),
+						disabled: saving || !dirty,
+						className: BTN_PRIMARY,
+						children: saving ? "Saving…" : "Save"
+					})
+				]
+			})] })
+		})
+	});
+}
+//#endregion
+export { MotionZonesSettings };