@camstack/ui-library 1.2.48 → 1.2.50

package/dist/SceneMonitorEditor-BXwXLLch.cjs

@@ -0,0 +1,411 @@
+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 ScanEye = require_index.createLucideIcon("scan-eye", [
+	["path", {
+		d: "M3 7V5a2 2 0 0 1 2-2h2",
+		key: "aa7l1z"
+	}],
+	["path", {
+		d: "M17 3h2a2 2 0 0 1 2 2v2",
+		key: "4qcy5o"
+	}],
+	["path", {
+		d: "M21 17v2a2 2 0 0 1-2 2h-2",
+		key: "6vwrx8"
+	}],
+	["path", {
+		d: "M7 21H5a2 2 0 0 1-2-2v-2",
+		key: "ioqczr"
+	}],
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "1",
+		key: "41hilf"
+	}],
+	["path", {
+		d: "M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0",
+		key: "11ak4c"
+	}]
+]);
+//#endregion
+//#region src/composites/cap-settings/scene-monitor-copy.ts
+/** The lighting variants an operator is asked to capture. The resolver can also
+*  report `night`, `dawn` and `dusk`; those are shown when present but never
+*  demanded, because most installs only ever see day and IR. */
+var SCENE_CAPTURE_VARIANTS = ["day", "ir"];
+var VARIANT_LABEL = {
+	day: "Daylight",
+	ir: "Night (IR)",
+	night: "Night",
+	dawn: "Dawn",
+	dusk: "Dusk"
+};
+function variantLabel(condition) {
+	return VARIANT_LABEL[condition] ?? condition;
+}
+/**
+* "day ✓ · ir ✗ — this scene reports UNKNOWN at night."
+*
+* Converts the silent cross-condition fallback this engine used to have into an
+* operator-visible fact. Without it, a scene with only a daylight reference
+* simply stops answering after sunset and nothing anywhere says why.
+*/
+function coverageLine(monitor) {
+	const covered = new Set(monitor.coveredConditions);
+	const parts = SCENE_CAPTURE_VARIANTS.map((v) => `${variantLabel(v)} ${covered.has(v) ? "✓" : "✗"}`);
+	const extra = [...covered].filter((c) => !SCENE_CAPTURE_VARIANTS.some((v) => v === c));
+	for (const c of extra) parts.push(`${variantLabel(c)} ✓`);
+	const missing = SCENE_CAPTURE_VARIANTS.filter((v) => !covered.has(v));
+	if (missing.length === 0) return parts.join(" · ");
+	return `${parts.join(" · ")} — reports “can’t tell” in ${missing.map((v) => variantLabel(v).toLowerCase()).join(" and ")}`;
+}
+var UNAVAILABLE_SENTENCE = {
+	"no-reference-for-condition": "can’t tell — nothing was captured in this light yet. Use “Capture now” when the camera is in it.",
+	"view-shifted": "can’t tell — the camera view has moved since the reference was captured. Re-capture it.",
+	"no-vision-profile": "can’t tell — the vision model is unreachable, so the change is on hold.",
+	"encoder-model-changed": "can’t tell — the embedding model changed, so the stored references are unreadable. Re-capture them.",
+	"no-snapshot": "can’t tell — this camera did not return a frame."
+};
+/**
+* The one line under a scene's name. It answers, in order: can it judge, what
+* does it say, and how long has it said it.
+*/
+function statusLine(monitor, now) {
+	if (monitor.states.length === 0) return "Not armed yet — capture the initial state to start watching.";
+	if (monitor.verdict === "unknown") return monitor.unavailable !== null ? UNAVAILABLE_SENTENCE[monitor.unavailable] : "can’t tell right now.";
+	const since = monitor.verdict === "diverged" ? monitor.divergedAt : monitor.armedAt;
+	const held = since !== null ? ` for ${humanDuration(Math.max(0, now - since))}` : "";
+	if (monitor.latched) return monitor.verdict === "diverged" ? `CHANGED${held} — press Reset when you have dealt with it.` : `Back to normal, but still flagged as changed${held}. Press Reset to clear it.`;
+	return monitor.verdict === "diverged" ? `CHANGED${held}` : `Normal${held}`;
+}
+/** The badge word. `latched` wins over `verdict`, because the latch is the
+*  thing the operator asked to be told and it outlives the live state. */
+function badgeFor(monitor) {
+	if (monitor.states.length === 0) return {
+		text: "Not armed",
+		tone: "unknown"
+	};
+	if (monitor.latched) return {
+		text: "Changed",
+		tone: "alarm"
+	};
+	if (monitor.verdict === "unknown") return {
+		text: "Can’t tell",
+		tone: "unknown"
+	};
+	return monitor.verdict === "diverged" ? {
+		text: "Changed",
+		tone: "alarm"
+	} : {
+		text: "Normal",
+		tone: "ok"
+	};
+}
+/** A rect covering most of the frame is dominated by weather, sky and parked
+*  cars: the bin is 2 % of the pixels and CLIP will not notice it leaving. The
+*  failure is silent INSENSITIVITY, which is the worst kind — hence a warning
+*  rather than a refusal. */
+var ROI_AREA_WARN_FRACTION = .4;
+function roiTooLarge(roi) {
+	return roi.width * roi.height > ROI_AREA_WARN_FRACTION;
+}
+function humanDuration(ms) {
+	const s = Math.floor(ms / 1e3);
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m`;
+	const h = Math.floor(m / 60);
+	if (h < 48) return `${h}h`;
+	return `${Math.floor(h / 24)}d`;
+}
+//#endregion
+//#region src/composites/cap-settings/SceneMonitorEditor.tsx
+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";
+var BTN_DANGER = "rounded-md border border-danger/50 bg-danger/10 px-2 py-1 text-[11px] font-medium text-danger hover:bg-danger/20 disabled:opacity-40 transition-colors";
+var TONE_CLASS = {
+	alarm: "border-danger/50 bg-danger/15 text-danger",
+	ok: "border-success/50 bg-success/15 text-success",
+	unknown: "border-border bg-surface text-foreground-subtle"
+};
+/** A scene without at least one reference cannot judge anything, so the
+*  similarity threshold only becomes meaningful after the first capture. */
+var DEFAULT_THRESHOLD = .8;
+var DEFAULT_HYSTERESIS = 3;
+function SceneMonitorEditor({ deviceId }) {
+	const dev = require_index.useDeviceProxy$1(require_index.useSystem$1().trpcClient, deviceId);
+	const pushed = require_index.useDeviceStateSlice$1(dev?.state.sceneMonitor);
+	const snapshot = require_index.useDeviceSnapshotImage$1(deviceId, { width: 640 });
+	const [fetched, setFetched] = (0, react.useState)(null);
+	const [unsupported, setUnsupported] = (0, react.useState)(false);
+	const [busy, setBusy] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(null);
+	const [selectedId, setSelectedId] = (0, react.useState)(null);
+	const [drafting, setDrafting] = (0, react.useState)(false);
+	const [draftRoi, setDraftRoi] = (0, react.useState)(null);
+	const [draftLabel, setDraftLabel] = (0, react.useState)("");
+	const mounted = (0, react.useRef)(true);
+	(0, react.useEffect)(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const reload = (0, react.useCallback)(async () => {
+		if (!dev) return;
+		try {
+			const status = await dev.sceneMonitor?.listScenes({});
+			if (!mounted.current) return;
+			if (status) setFetched(status);
+		} catch (err) {
+			if (!mounted.current) return;
+			if (require_index.isAbsentProvider$1(err)) setUnsupported(true);
+			else setError(err instanceof Error ? err.message : String(err));
+		}
+	}, [dev]);
+	(0, react.useEffect)(() => {
+		setFetched(null);
+		setUnsupported(false);
+		setError(null);
+		reload();
+	}, [reload]);
+	const monitors = pushed?.monitors ?? fetched?.monitors ?? [];
+	const now = Date.now();
+	const run = (0, react.useCallback)(async (key, fn) => {
+		setBusy(key);
+		setError(null);
+		try {
+			await fn();
+			await reload();
+		} catch (err) {
+			if (mounted.current) setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			if (mounted.current) setBusy(null);
+		}
+	}, [reload]);
+	const items = (0, react.useMemo)(() => {
+		const existing = monitors.map((m) => ({
+			id: m.id,
+			shape: m.roi,
+			label: m.label,
+			enabled: m.enabled
+		}));
+		return draftRoi !== null ? [...existing, {
+			id: "__draft__",
+			shape: draftRoi,
+			label: "New scene"
+		}] : existing;
+	}, [monitors, draftRoi]);
+	const onShapeChange = (0, react.useCallback)((id, shape) => {
+		if (shape.kind !== "rect") return;
+		if (id === "__draft__") {
+			setDraftRoi(shape);
+			return;
+		}
+		run(`roi-${String(id)}`, async () => dev?.sceneMonitor?.updateScene({
+			monitorId: String(id),
+			patch: { roi: shape }
+		}));
+	}, [dev, run]);
+	const onDrawComplete = (0, react.useCallback)((shape) => {
+		if (shape.kind !== "rect") return;
+		setDraftRoi(shape);
+	}, []);
+	const createScene = (0, react.useCallback)(async () => {
+		if (draftRoi === null || draftLabel.trim().length === 0) return;
+		await run("create", async () => {
+			await dev?.sceneMonitor?.createScene({
+				label: draftLabel.trim(),
+				roi: draftRoi,
+				check: {
+					mode: "similarity",
+					threshold: DEFAULT_THRESHOLD,
+					hysteresisCount: DEFAULT_HYSTERESIS
+				}
+			});
+		});
+		setDraftRoi(null);
+		setDraftLabel("");
+		setDrafting(false);
+	}, [
+		dev,
+		draftRoi,
+		draftLabel,
+		run
+	]);
+	if (!dev) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetPanel, {
+		title: "Scenes",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScanEye, { 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 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `${require_index.TEXT_HINT} leading-relaxed`,
+				children: "Scene monitoring is not available for this camera."
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${require_index.TEXT_HINT} leading-relaxed`,
+					children: "A scene watches one region of this camera and tells you when it stops looking like the picture you captured. Draw a box around the thing you care about — a wheelie bin, a gate, a parking space — then capture what “normal” looks like, in daylight and again at night."
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative overflow-hidden rounded-md border border-border",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MaskShapeCanvas.MaskShapeCanvas, {
+						items,
+						supportedShapes: ["rect"],
+						selectedId: selectedId ?? (draftRoi !== null ? "__draft__" : null),
+						onSelect: (id) => setSelectedId(id === null ? null : String(id)),
+						onShapeChange,
+						onDrawComplete,
+						drawingKind: drafting && draftRoi === null ? "rect" : null,
+						backdrop: snapshot.src !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: snapshot.src,
+							alt: "",
+							className: "h-full w-full object-contain",
+							draggable: false
+						}) : null
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: drafting ? BTN_PRIMARY : BTN_NEUTRAL,
+						"aria-pressed": drafting,
+						onClick: () => {
+							setDrafting((v) => !v);
+							setDraftRoi(null);
+						},
+						disabled: busy !== null,
+						children: drafting ? "Cancel" : "+ New scene"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: BTN_NEUTRAL,
+						onClick: snapshot.refresh,
+						disabled: busy !== null,
+						children: "Refresh frame"
+					})]
+				}),
+				drafting && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-2 rounded-md border border-border bg-surface p-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-[10px] text-foreground-subtle",
+							children: draftRoi === null ? "Click on the frame to drop a box, then drag its corner to fit it around the thing you want watched." : "Name it, then create. You capture what “normal” looks like next."
+						}),
+						draftRoi !== null && roiTooLarge(draftRoi) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-[11px] leading-relaxed text-warning",
+							children: "That box covers most of the frame. A scene that big is dominated by the weather, the sky and passing cars — it will quietly stop noticing the thing you actually care about. Draw it tighter."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								value: draftLabel,
+								onChange: (e) => setDraftLabel(e.target.value),
+								placeholder: "e.g. Immondizia prelevata",
+								className: "flex-1 rounded-md border border-border bg-surface px-2 py-1 text-[12px] text-foreground"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: BTN_PRIMARY,
+								onClick: () => void createScene(),
+								disabled: draftRoi === null || draftLabel.trim().length === 0 || busy !== null,
+								children: "Create"
+							})]
+						})
+					]
+				}),
+				error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-[11px] leading-relaxed text-danger",
+					children: error
+				}),
+				monitors.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${require_index.TEXT_HINT} leading-relaxed`,
+					children: "No scenes on this camera yet."
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "flex flex-col gap-2",
+					children: monitors.map((m) => {
+						const badge = badgeFor(m);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: `flex flex-col gap-1.5 rounded-md border p-2 ${selectedId === m.id ? "border-primary/50" : "border-border"}`,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "flex-1 text-left text-[12px] font-medium text-foreground",
+										onClick: () => setSelectedId(m.id),
+										children: m.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `rounded border px-1.5 py-0.5 text-[10px] font-medium ${TONE_CLASS[badge.tone]}`,
+										children: badge.text
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: `${require_index.TEXT_HINT} leading-relaxed`,
+									children: statusLine(m, now)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: `${require_index.TEXT_HINT} tabular-nums`,
+									children: coverageLine(m)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-wrap items-center gap-1.5",
+									children: [
+										SCENE_CAPTURE_VARIANTS.map((variant) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: BTN_NEUTRAL,
+											disabled: busy !== null,
+											title: `Take a fresh photo now and store it as the ${variantLabel(variant).toLowerCase()} reference`,
+											onClick: () => void run(`cap-${m.id}-${variant}`, async () => dev.sceneMonitor?.captureReference({
+												monitorId: m.id,
+												condition: variant
+											})),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Camera, { className: "mr-1 inline h-3 w-3" }),
+												"Capture ",
+												variantLabel(variant).toLowerCase()
+											]
+										}, variant)),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: BTN_PRIMARY,
+											disabled: busy !== null || m.states.length === 0,
+											title: "Clear the flag and re-photograph what normal looks like right now",
+											onClick: () => void run(`reset-${m.id}`, async () => dev.sceneMonitor?.resetScene({ monitorId: m.id })),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.RotateCcw, { className: "mr-1 inline h-3 w-3" }), "Reset"]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: BTN_NEUTRAL,
+											disabled: busy !== null,
+											onClick: () => void run(`check-${m.id}`, async () => dev.sceneMonitor?.recheckNow({ monitorId: m.id })),
+											children: "Check now"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: BTN_DANGER,
+											disabled: busy !== null,
+											onClick: () => void run(`del-${m.id}`, async () => dev.sceneMonitor?.deleteScene({ monitorId: m.id })),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Trash2, { className: "h-3 w-3" })
+										})
+									]
+								})
+							]
+						}, m.id);
+					})
+				})
+			] })
+		})
+	});
+}
+//#endregion
+exports.SceneMonitorEditor = SceneMonitorEditor;

package/dist/composites/cap-settings/SceneMonitorEditor.d.ts

@@ -0,0 +1,2 @@
+import { CapSettingsComponentProps } from './index';
+export declare function SceneMonitorEditor({ deviceId }: CapSettingsComponentProps): import("react").JSX.Element | null;

package/dist/composites/cap-settings/index.d.ts

@@ -1,13 +1,14 @@
-export { PtzPanel } from './PtzPanel';
-export { ConsumablesPanel } from './ConsumablesPanel';
 export { AutotrackSection } from './AutotrackSection';
+export { ConsumablesPanel } from './ConsumablesPanel';
+export type { MaskShapeCanvasProps, MaskShapeItem } from './MaskShapeCanvas';
+export { MaskShapeCanvas } from './MaskShapeCanvas';
 export { MotionZonesSettings } from './MotionZonesSettings';
 export { PrivacyMaskSettings } from './PrivacyMaskSettings';
+export { PtzPanel } from './PtzPanel';
+export { RecordingBandsEditor } from './RecordingBandsEditor';
 export { RecordingPanel } from './RecordingPanel';
 export { RecordingSettings } from './RecordingSettings';
-export { RecordingBandsEditor } from './RecordingBandsEditor';
-export { MaskShapeCanvas } from './MaskShapeCanvas';
-export type { MaskShapeItem, MaskShapeCanvasProps } from './MaskShapeCanvas';
+export { SceneMonitorEditor } from './SceneMonitorEditor';
 /**
  * Props every cap-settings component receives.
  *

package/dist/composites/cap-settings/scene-monitor-copy.d.ts

@@ -0,0 +1,37 @@
+import { SceneMonitor } from '@camstack/types';
+/** The lighting variants an operator is asked to capture. The resolver can also
+ *  report `night`, `dawn` and `dusk`; those are shown when present but never
+ *  demanded, because most installs only ever see day and IR. */
+export declare const SCENE_CAPTURE_VARIANTS: readonly ["day", "ir"];
+export type SceneCaptureVariant = (typeof SCENE_CAPTURE_VARIANTS)[number];
+export declare const VARIANT_LABEL: Readonly<Record<string, string>>;
+export declare function variantLabel(condition: string): string;
+/**
+ * "day ✓ · ir ✗ — this scene reports UNKNOWN at night."
+ *
+ * Converts the silent cross-condition fallback this engine used to have into an
+ * operator-visible fact. Without it, a scene with only a daylight reference
+ * simply stops answering after sunset and nothing anywhere says why.
+ */
+export declare function coverageLine(monitor: SceneMonitor): string;
+/**
+ * The one line under a scene's name. It answers, in order: can it judge, what
+ * does it say, and how long has it said it.
+ */
+export declare function statusLine(monitor: SceneMonitor, now: number): string;
+/** The badge word. `latched` wins over `verdict`, because the latch is the
+ *  thing the operator asked to be told and it outlives the live state. */
+export declare function badgeFor(monitor: SceneMonitor): {
+    text: string;
+    tone: 'alarm' | 'ok' | 'unknown';
+};
+/** A rect covering most of the frame is dominated by weather, sky and parked
+ *  cars: the bin is 2 % of the pixels and CLIP will not notice it leaving. The
+ *  failure is silent INSENSITIVITY, which is the worst kind — hence a warning
+ *  rather than a refusal. */
+export declare const ROI_AREA_WARN_FRACTION = 0.4;
+export declare function roiTooLarge(roi: {
+    width: number;
+    height: number;
+}): boolean;
+export declare function humanDuration(ms: number): string;