@camstack/ui-library 1.0.1 → 1.0.3

package/dist/PrivacyMaskSettings-yC-UPYPg.cjs

@@ -0,0 +1,384 @@
+const require_index = require("./index.cjs");
+const require_MaskShapeCanvas = require("./MaskShapeCanvas-BByN3jvt.cjs");
+let react = require("react");
+let react_jsx_runtime = require("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 Hexagon = require_index.createLucideIcon("hexagon", [["path", {
+	d: "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",
+	key: "yt0hxn"
+}]]);
+//#endregion
+//#region src/composites/cap-settings/PrivacyMaskSettings.tsx
+/**
+* PrivacyMaskSettings — management surface for the on-camera
+* `privacy-mask` capability.
+*
+* The cap was reshaped from a boolean cell-grid into a SHAPE model: up to
+* `maxRegions` zones, each a rectangle or a free polygon (normalized 0..1
+* of the camera frame). This component owns the draft zone list and edits
+* it via the shared `MaskShapeCanvas` drawing-plane, painted over the live
+* frame only while editing.
+*
+* Structure:
+*   - The editable SHAPES are painted over the live frame by the shared
+*     `MaskShapeCanvas`, registered as a player-overlay layer ONLY while
+*     "Edit mask" is toggled on (OFF by default — nothing draws on mount).
+*   - Every CONTROL lives in the panel: edit-mode toggle, master enable,
+*     Add rect / Add polygon (gated by `supportedShapes` + `maxRegions`,
+*     they arm the canvas' draw mode), active-count display, Revert, Save.
+*
+* Registered as host widget `host/privacy-mask-grid` (see
+* `widgets/host-widgets.ts`) so the D14 device-config cap framework mounts
+* it on the Image tab. Self-gates with `isAbsentProvider` to a friendly
+* "not supported" message when the camera has no privacy-mask cap.
+*/
+var PRIVACY_MASK_OVERLAY_ORDER = 120;
+var OVERLAY_ID = "privacy-mask";
+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";
+/** Narrow the full MaskShape union to a privacy-mask shape (rect|polygon). */
+function toPrivacyMaskShape(shape) {
+	if (shape.kind === "rect" || shape.kind === "polygon") return shape;
+	return null;
+}
+/** Next free 0-based integer id not already used by a draft region. */
+function nextRegionId(regions) {
+	const used = new Set(regions.map((r) => r.id));
+	let id = 0;
+	while (used.has(id)) id += 1;
+	return id;
+}
+/** Structural equality for a draft vs. committed region list (order-sensitive). */
+function regionsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (JSON.stringify(a[i]) !== JSON.stringify(b[i])) return false;
+	return true;
+}
+function PrivacyMaskSettings({ deviceId }) {
+	const dev = require_index.useDeviceProxy$1(require_index.useSystem$1().trpcClient, deviceId);
+	const [options, setOptions] = (0, react.useState)(null);
+	const [unsupported, setUnsupported] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [committed, setCommitted] = (0, react.useState)(null);
+	const [saving, setSaving] = (0, react.useState)(false);
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [selectedId, setSelectedId] = (0, react.useState)(null);
+	const [drawingKind, setDrawingKind] = (0, react.useState)(null);
+	const seededRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!dev) return void 0;
+		let cancelled = false;
+		seededRef.current = false;
+		setOptions(null);
+		setUnsupported(false);
+		setDraft(null);
+		setCommitted(null);
+		setEditing(false);
+		setSelectedId(null);
+		setDrawingKind(null);
+		(async () => {
+			try {
+				const opts = await dev.privacyMask?.getOptions({});
+				if (cancelled) return;
+				if (!opts) throw new Error("device proxy not ready");
+				setOptions(opts);
+				if (seededRef.current) return;
+				const status = await dev.privacyMask?.getStatus({});
+				if (cancelled) return;
+				if (!status) throw new Error("device proxy not ready");
+				seededRef.current = true;
+				const seed = {
+					enabled: status.enabled,
+					regions: status.regions
+				};
+				setCommitted(seed);
+				setDraft(seed);
+			} catch (err) {
+				if (cancelled) return;
+				if (require_index.isAbsentProvider$1(err)) setUnsupported(true);
+				else console.error("Privacy Mask load failed", err);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [dev]);
+	const dirty = (0, react.useMemo)(() => draft !== null && committed !== null && (draft.enabled !== committed.enabled || !regionsEqual(draft.regions, committed.regions)), [draft, committed]);
+	const activeCount = draft ? draft.regions.length : 0;
+	const maxRegions = options ? options.maxRegions : 0;
+	const maxRegionsRef = (0, react.useRef)(0);
+	(0, react.useEffect)(() => {
+		maxRegionsRef.current = maxRegions;
+	}, [maxRegions]);
+	const atCapacity = maxRegions > 0 && activeCount >= maxRegions;
+	const toggleEnabled = (0, react.useCallback)(() => {
+		setDraft((prev) => prev ? {
+			...prev,
+			enabled: !prev.enabled
+		} : prev);
+	}, []);
+	const onSelect = (0, react.useCallback)((id) => {
+		setSelectedId(typeof id === "number" ? id : null);
+	}, []);
+	const items = (0, react.useMemo)(() => draft ? draft.regions.map((r) => ({
+		id: r.id,
+		shape: r.shape,
+		enabled: r.enabled,
+		label: `Zone ${String(r.id)}`
+	})) : [], [draft]);
+	const onShapeChange = (0, react.useCallback)((id, shape) => {
+		const next = toPrivacyMaskShape(shape);
+		if (!next) return;
+		setDraft((prev) => prev ? {
+			...prev,
+			regions: prev.regions.map((r) => r.id === id ? {
+				...r,
+				shape: next
+			} : r)
+		} : prev);
+	}, []);
+	const onDrawComplete = (0, react.useCallback)((shape) => {
+		const next = toPrivacyMaskShape(shape);
+		if (!next) return;
+		setDrawingKind(null);
+		setDraft((prev) => {
+			if (!prev) return prev;
+			const limit = maxRegionsRef.current;
+			if (limit > 0 && prev.regions.length >= limit) return prev;
+			const id = nextRegionId(prev.regions);
+			const region = {
+				id,
+				enabled: true,
+				shape: next
+			};
+			setSelectedId(id);
+			return {
+				...prev,
+				regions: [...prev.regions, region]
+			};
+		});
+	}, []);
+	const armDraw = (0, react.useCallback)((kind) => {
+		setEditing(true);
+		setSelectedId(null);
+		setDrawingKind(kind);
+	}, []);
+	const selectRegion = (0, react.useCallback)((id) => {
+		setEditing(true);
+		setDrawingKind(null);
+		setSelectedId(id);
+	}, []);
+	const deleteRegion = (0, react.useCallback)((id) => {
+		setSelectedId((cur) => cur === id ? null : cur);
+		setDraft((prev) => prev ? {
+			...prev,
+			regions: prev.regions.filter((r) => r.id !== id)
+		} : prev);
+	}, []);
+	const revert = (0, react.useCallback)(() => {
+		setDrawingKind(null);
+		setSelectedId(null);
+		if (committed) setDraft({
+			enabled: committed.enabled,
+			regions: committed.regions
+		});
+	}, [committed]);
+	const save = (0, react.useCallback)(async () => {
+		if (!dev || !draft) return;
+		setSaving(true);
+		try {
+			await dev.privacyMask?.setMask({ patch: {
+				enabled: draft.enabled,
+				regions: [...draft.regions]
+			} });
+			const fresh = await dev.privacyMask?.getStatus({});
+			if (fresh) {
+				const norm = {
+					enabled: fresh.enabled,
+					regions: fresh.regions
+				};
+				setCommitted(norm);
+				setDraft(norm);
+			}
+		} catch (err) {
+			console.error("Privacy Mask save failed", err);
+		} finally {
+			setSaving(false);
+		}
+	}, [dev, draft]);
+	const toggleEditing = (0, react.useCallback)(() => {
+		setEditing((v) => {
+			if (v) {
+				setDrawingKind(null);
+				setSelectedId(null);
+			}
+			return !v;
+		});
+	}, []);
+	const supportedShapes = options?.supportedShapes ?? [];
+	require_index.usePlayerOverlayLayer((0, react.useMemo)(() => editing && !unsupported && options && draft ? {
+		id: OVERLAY_ID,
+		order: PRIVACY_MASK_OVERLAY_ORDER,
+		node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MaskShapeCanvas.MaskShapeCanvas, {
+			transparent: true,
+			items,
+			supportedShapes,
+			polygonVertices: options.polygonVertices,
+			selectedId,
+			onSelect,
+			onShapeChange,
+			onDrawComplete,
+			drawingKind
+		})
+	} : null, [
+		editing,
+		unsupported,
+		options,
+		draft,
+		items,
+		supportedShapes,
+		selectedId,
+		onSelect,
+		onShapeChange,
+		onDrawComplete,
+		drawingKind
+	]));
+	const supportsRect = options?.supportedShapes.includes("rect") ?? false;
+	const supportsPolygon = options?.supportedShapes.includes("polygon") ?? false;
+	const noShapes = options !== null && (options.maxRegions <= 0 || options.supportedShapes.length === 0);
+	const ready = !unsupported && !noShapes && options !== null && draft !== null;
+	if (!dev) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetPanel, {
+		title: "Privacy Mask",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.EyeOff, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-col gap-3",
+			children: unsupported || noShapes ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `${require_index.TEXT_HINT} leading-relaxed`,
+				children: "This camera doesn't support an on-board privacy mask."
+			}) : !ready ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `${require_index.TEXT_HINT} leading-relaxed`,
+				children: "Loading the camera's privacy mask…"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: `${require_index.TEXT_HINT} leading-relaxed`,
+					children: [
+						"Toggle ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+							className: "text-foreground",
+							children: "Edit mask"
+						}),
+						" to draw blanked-out zones on the live frame, then ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+							className: "text-foreground",
+							children: "Save"
+						}),
+						" to push them to the camera. Drag a rectangle to move, its corner to resize; drag polygon vertices, click an edge midpoint to add one, or right-click a vertex to remove it."
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: toggleEditing,
+							disabled: saving,
+							"aria-pressed": editing,
+							className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
+							children: editing ? "Done editing" : "Edit mask"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: toggleEnabled,
+							disabled: saving,
+							"aria-pressed": draft.enabled,
+							className: draft.enabled ? BTN_PRIMARY : BTN_NEUTRAL,
+							children: draft.enabled ? "Mask on" : "Mask off"
+						}),
+						supportsRect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => armDraw("rect"),
+							disabled: saving || atCapacity,
+							"aria-pressed": drawingKind === "rect",
+							className: drawingKind === "rect" ? BTN_PRIMARY : BTN_NEUTRAL,
+							title: atCapacity ? "Maximum zones reached" : "Add a rectangle zone",
+							children: "+ Rect"
+						}),
+						supportsPolygon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => armDraw("polygon"),
+							disabled: saving || atCapacity,
+							"aria-pressed": drawingKind === "polygon",
+							className: drawingKind === "polygon" ? BTN_PRIMARY : BTN_NEUTRAL,
+							title: atCapacity ? "Maximum zones reached" : "Add a polygon zone",
+							children: "+ Polygon"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: `${require_index.TEXT_HINT} ml-1 tabular-nums`,
+							children: [
+								activeCount,
+								" / ",
+								maxRegions,
+								" zones"
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => void save(),
+							disabled: saving || !dirty,
+							className: BTN_PRIMARY,
+							children: saving ? "Saving…" : "Save"
+						})
+					]
+				}),
+				activeCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-1",
+					children: draft.regions.map((r) => {
+						const selected = selectedId === r.id;
+						const ShapeIcon = r.shape.kind === "polygon" ? Hexagon : require_index.Square;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `flex items-center gap-2 rounded-md border px-2 py-1 transition-colors ${selected ? "border-primary/50 bg-primary/10" : "border-border bg-surface"}`,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								onClick: () => selectRegion(r.id),
+								disabled: saving,
+								className: "flex flex-1 items-center gap-2 text-left text-[11px] font-medium text-foreground-subtle hover:text-foreground disabled:opacity-40 transition-colors",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShapeIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Zone ", r.id] }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground-faint capitalize",
+										children: r.shape.kind
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								onClick: () => deleteRegion(r.id),
+								disabled: saving,
+								"aria-label": `Delete zone ${String(r.id)}`,
+								title: "Delete zone",
+								className: "inline-flex h-6 w-6 items-center justify-center rounded border border-border bg-surface text-foreground-subtle hover:border-red-400/40 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-40 transition-colors",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Trash2, { className: "h-3.5 w-3.5" })
+							})]
+						}, r.id);
+					})
+				}) : null
+			] })
+		})
+	});
+}
+//#endregion
+exports.PrivacyMaskSettings = PrivacyMaskSettings;

package/dist/composites/index.d.ts

@@ -118,6 +118,10 @@ export { WidgetSlot } from './widget-slot';
 export type { WidgetSlotProps } from './widget-slot';
 export { ScopePicker, validateScopes } from './scope-picker';
 export type { ScopeAccess } from './scope-picker';
-export { PtzPanel, ConsumablesPanel, AutotrackSection, MotionZonesSettings, MaskShapeCanvas, RecordingPanel, } from './cap-settings';
-export type { CapSettingsComponentProps, MaskShapeItem, MaskShapeCanvasProps } from './cap-settings';
+export { PtzPanel } from './cap-settings/PtzPanel';
+export { ConsumablesPanel } from './cap-settings/ConsumablesPanel';
+export { AutotrackSection } from './cap-settings/AutotrackSection';
+export { RecordingPanel } from './cap-settings/RecordingPanel';
+export type { CapSettingsComponentProps } from './cap-settings/index';
+export type { MaskShapeItem, MaskShapeCanvasProps } from './cap-settings/MaskShapeCanvas';
 export * from './widget-panel.js';