@camstack/ui-library 1.2.50 → 1.2.51

package/dist/SceneMonitorEditor-CfSrNccC.cjs

@@ -0,0 +1,281 @@
+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");
+//#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)("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 && require_index.roiTooLarge$1(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 = require_index.badgeFor$1(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: require_index.statusLine$1(m, now)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: `${require_index.TEXT_HINT} tabular-nums`,
+								children: require_index.coverageLine$1(m)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap items-center gap-1.5",
+								children: [
+									require_index.SCENE_CAPTURE_VARIANTS$1.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 ${require_index.variantLabel$1(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 ",
+											require_index.variantLabel$1(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/SceneMonitorEditor-D5BNWAM_.js

@@ -0,0 +1,281 @@
+import { SCENE_CAPTURE_VARIANTS, TEXT_HINT, badgeFor, coverageLine, isAbsentProvider, o as Camera, r as RotateCcw, roiTooLarge, statusLine, t as Trash2, useDeviceProxy, useDeviceSnapshotImage, useDeviceStateSlice, useSystem, variantLabel } 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";
+//#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 = useDeviceProxy(useSystem().trpcClient, deviceId);
+	const pushed = useDeviceStateSlice(dev?.state.sceneMonitor);
+	const snapshot = useDeviceSnapshotImage(deviceId, { width: 640 });
+	const [fetched, setFetched] = useState(null);
+	const [unsupported, setUnsupported] = useState(false);
+	const [busy, setBusy] = useState(null);
+	const [error, setError] = useState(null);
+	const [selectedId, setSelectedId] = useState(null);
+	const [drafting, setDrafting] = useState(false);
+	const [draftRoi, setDraftRoi] = useState(null);
+	const [draftLabel, setDraftLabel] = useState("");
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const reload = 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 (isAbsentProvider(err)) setUnsupported(true);
+			else setError(err instanceof Error ? err.message : String(err));
+		}
+	}, [dev]);
+	useEffect(() => {
+		setFetched(null);
+		setUnsupported(false);
+		setError(null);
+		reload();
+	}, [reload]);
+	const monitors = pushed?.monitors ?? fetched?.monitors ?? [];
+	const now = Date.now();
+	const run = 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 = 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 = 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 = useCallback((shape) => {
+		if (shape.kind !== "rect") return;
+		setDraftRoi(shape);
+	}, []);
+	const createScene = 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__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: unsupported ? /* @__PURE__ */ jsx("p", {
+			className: `${TEXT_HINT} leading-relaxed`,
+			children: "Scene monitoring is not available for this camera."
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("p", {
+				className: `${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__ */ jsx("div", {
+				className: "relative overflow-hidden rounded-md border border-border",
+				children: /* @__PURE__ */ jsx(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__ */ jsx("img", {
+						src: snapshot.src,
+						alt: "",
+						className: "h-full w-full object-contain",
+						draggable: false
+					}) : null
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ 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__ */ jsx("button", {
+					type: "button",
+					className: BTN_NEUTRAL,
+					onClick: snapshot.refresh,
+					disabled: busy !== null,
+					children: "Refresh frame"
+				})]
+			}),
+			drafting && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 rounded-md border border-border bg-surface p-2",
+				children: [
+					/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ 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__ */ jsx("button", {
+							type: "button",
+							className: BTN_PRIMARY,
+							onClick: () => void createScene(),
+							disabled: draftRoi === null || draftLabel.trim().length === 0 || busy !== null,
+							children: "Create"
+						})]
+					})
+				]
+			}),
+			error !== null && /* @__PURE__ */ jsx("p", {
+				className: "text-[11px] leading-relaxed text-danger",
+				children: error
+			}),
+			monitors.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: `${TEXT_HINT} leading-relaxed`,
+				children: "No scenes on this camera yet."
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-2",
+				children: monitors.map((m) => {
+					const badge = badgeFor(m);
+					return /* @__PURE__ */ jsxs("li", {
+						className: `flex flex-col gap-1.5 rounded-md border p-2 ${selectedId === m.id ? "border-primary/50" : "border-border"}`,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "flex-1 text-left text-[12px] font-medium text-foreground",
+									onClick: () => setSelectedId(m.id),
+									children: m.label
+								}), /* @__PURE__ */ jsx("span", {
+									className: `rounded border px-1.5 py-0.5 text-[10px] font-medium ${TONE_CLASS[badge.tone]}`,
+									children: badge.text
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: `${TEXT_HINT} leading-relaxed`,
+								children: statusLine(m, now)
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: `${TEXT_HINT} tabular-nums`,
+								children: coverageLine(m)
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-center gap-1.5",
+								children: [
+									SCENE_CAPTURE_VARIANTS.map((variant) => /* @__PURE__ */ 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__ */ jsx(Camera, { className: "mr-1 inline h-3 w-3" }),
+											"Capture ",
+											variantLabel(variant).toLowerCase()
+										]
+									}, variant)),
+									/* @__PURE__ */ 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__ */ jsx(RotateCcw, { className: "mr-1 inline h-3 w-3" }), "Reset"]
+									}),
+									/* @__PURE__ */ 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__ */ 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__ */ jsx(Trash2, { className: "h-3 w-3" })
+									})
+								]
+							})
+						]
+					}, m.id);
+				})
+			})
+		] })
+	});
+}
+//#endregion
+export { SceneMonitorEditor };

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

@@ -1,2 +1,43 @@
-import { CapSettingsComponentProps } from './index';
-export declare function SceneMonitorEditor({ deviceId }: CapSettingsComponentProps): import("react").JSX.Element | null;
+/**
+ * SceneMonitorEditor — the per-camera half of the Scenes surface.
+ *
+ * **Imported directly, not resolved as a widget.** It briefly lived behind the
+ * host widget `host/scene-monitor-editor`, mounted as a "Scenes" tab on one
+ * camera's detail page. That put a standing question about the property ("is
+ * the bin still out") one camera deep, where the operator's actual question —
+ * "which of my scenes have tripped" — could not be asked at all. The overview
+ * is now the top-level `/scenes` page; this component is what that page opens
+ * once a camera is chosen, in a dialog. The widget id and its `deviceConfig`
+ * declaration are both gone, in the same commit, because
+ * `scripts/check-host-widget-resolves.ts` checks both directions.
+ *
+ * It renders BARE — no `WidgetPanel` — because its only caller supplies a
+ * dialog header, and two stacked titles read as a layout bug.
+ *
+ * ## The flow, in the order the operator meets it
+ *
+ * 1. **Draw a region on the still frame.** A rect over a SNAPSHOT, not the live
+ *    player: a scene is defined against a photograph, and drawing on a moving
+ *    picture makes it impossible to see whether the box actually contains the
+ *    bin. The editor starts in draw mode and warns above ~40 % of the frame,
+ *    because a full-frame scene is dominated by weather, sky and parked cars —
+ *    it will not work, and it will look broken rather than misconfigured.
+ * 2. **Capture the initial state, per lighting variant.** Two buttons, Daylight
+ *    and Night (IR), each forcing a fresh snapshot. The variant is DETECTED
+ *    from the frame and shown rather than asked; the buttons exist so the
+ *    operator can say "capture this as the night reference" while standing
+ *    outside at 22:00.
+ * 3. **Read the coverage line.** "Daylight ✓ · Night (IR) ✗ — reports 'can't
+ *    tell' in night (ir)". This feature's failure mode is silence that reads as
+ *    "nothing has happened", and that one line is the difference between a
+ *    five-minute fix and a session of guessing.
+ * 4. **Reset.** Clears the flag AND re-captures the baseline for the current
+ *    light, because the bin never goes back in exactly the same spot.
+ *
+ * Live state arrives through the cap's `status.kind: 'push'` runtime slice, so
+ * the card updates itself without polling.
+ */
+export interface SceneMonitorEditorProps {
+    readonly deviceId: number;
+}
+export declare function SceneMonitorEditor({ deviceId }: SceneMonitorEditorProps): import("react").JSX.Element | null;