@camstack/ui-library 1.2.173 → 1.2.174

package/dist/index.cjs

@@ -2045,6 +2045,30 @@ var Gauge = createLucideIcon("gauge", [["path", {
 * 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"
+	}]
+]);
+/**
+* @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 GripHorizontal = createLucideIcon("grip-horizontal", [
 	["circle", {
 		cx: "12",
@@ -6599,6 +6623,12 @@ var usePtzGoHome = trpc.ptz.goHome.useMutation;
 var usePtzGetHomePreset = trpc.ptz.getHomePreset.useQuery;
 /** Generated alias around `trpc.ptz.setHomePreset.useMutation`. */
 var usePtzSetHomePreset = trpc.ptz.setHomePreset.useMutation;
+/** Generated alias around `trpc.ptz.captureHomeHere.useMutation`. */
+var usePtzCaptureHomeHere = trpc.ptz.captureHomeHere.useMutation;
+/** Generated alias around `trpc.ptz.getHomeReturnSeconds.useQuery`. */
+var usePtzGetHomeReturnSeconds = trpc.ptz.getHomeReturnSeconds.useQuery;
+/** Generated alias around `trpc.ptz.setHomeReturnSeconds.useMutation`. */
+var usePtzSetHomeReturnSeconds = trpc.ptz.setHomeReturnSeconds.useMutation;
 /** Generated alias around `trpc.ptz.getPosition.useQuery`. */
 var usePtzGetPosition = trpc.ptz.getPosition.useQuery;
 /** Generated alias around `trpc.ptz.setAutofocus.useMutation`. */
@@ -16231,6 +16261,611 @@ function AutotrackSection({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-devices.ts
+/**
+* useDevices / useDevice — reactive sync-mirror reads.
+*
+* Both hooks hand out `DeviceProxy` references straight out of the
+* `System` mirror. The mirror keeps device + binding caches warm via
+* the `device.registered/unregistered/bindings-changed` event stream,
+* so re-renders are driven by lifecycle pushes — no React Query
+* round-trip and no `refetch` plumbing needed at the caller side.
+*
+* The hooks defensively read once on mount and assume the System has
+* been `init()`ed by the host app — calls before the warm-boot
+* completes simply return an empty array / null and re-render once
+* the registered listeners fire.
+*/
+/**
+* Reactive list of devices matching the optional filter set. Returns a
+* stable array reference between updates so consumers passing it as a
+* prop don't tear down memoized children.
+*/
+function useDevices(filters) {
+	const system = useSystem();
+	const filtersKey = (0, react$1.useMemo)(() => filters ? JSON.stringify(filters) : "", [filters]);
+	const [devices, setDevices] = (0, react$1.useState)(() => system.listDevices(filters));
+	(0, react$1.useEffect)(() => {
+		const refresh = () => {
+			setDevices(system.listDevices(filters));
+		};
+		refresh();
+		let unsubAdded = null;
+		let unsubRemoved = null;
+		try {
+			unsubAdded = system.onDeviceAdded(refresh);
+			unsubRemoved = system.onDeviceRemoved(refresh);
+		} catch {}
+		const unsubConn = system.subscribeConnectionEvents((state) => {
+			if (state === "connected") refresh();
+		});
+		return () => {
+			unsubAdded?.();
+			unsubRemoved?.();
+			unsubConn();
+		};
+	}, [
+		system,
+		filters,
+		filtersKey
+	]);
+	return devices;
+}
+/**
+* Single-device variant. Returns `null` until the device is in the
+* mirror; re-renders when the device is removed (back to `null`) or
+* added.
+*/
+function useDevice(deviceId) {
+	const system = useSystem();
+	const [device, setDevice] = (0, react$1.useState)(() => deviceId === null ? null : system.getDevice(deviceId));
+	(0, react$1.useEffect)(() => {
+		if (deviceId === null) {
+			setDevice(null);
+			return;
+		}
+		const refresh = () => {
+			setDevice(system.getDevice(deviceId));
+		};
+		refresh();
+		let unsubAdded = null;
+		let unsubRemoved = null;
+		try {
+			unsubAdded = system.onDeviceAdded(refresh);
+			unsubRemoved = system.onDeviceRemoved(refresh);
+		} catch {}
+		const unsubConn = system.subscribeConnectionEvents((state) => {
+			if (state === "connected") refresh();
+		});
+		return () => {
+			unsubAdded?.();
+			unsubRemoved?.();
+			unsubConn();
+		};
+	}, [system, deviceId]);
+	return device;
+}
+//#endregion
+//#region src/hooks/use-device-snapshot.ts
+/**
+* useDeviceSnapshotImage — a device's snapshot as a plain image URL.
+*
+* ## What this used to do, and why it stopped
+*
+* It fetched `dev.snapshot.getSnapshot()` over tRPC and returned
+* `data:image/jpeg;base64,…`. That put a full camera capture — up to 4 K,
+* measured at 758 KB average per camera on the live hub — through the msgpack
+* WebSocket plane, base64-inflated by a third, and then held it in the
+* react-query heap for 24 h per device. The device list rendered it into a
+* **28 × 28 px `<img>`**.
+*
+* It also did not do what it appeared to do. `snapshot.getSnapshot` scoped to a
+* device routes to the NATIVE provider, not the snapshot wrapper, so it bypassed
+* the wrapper's cache, coalescing and stale-while-revalidate entirely: probed
+* live, a `force:true` call returned a fresh 1.05 MB JPEG in 0.55 s while the
+* wrapper's `lastCapturedAt` for that camera did not move. Two snapshot paths,
+* different behaviour, and only one of them maintained the cache the other one
+* reported on.
+*
+* ## What it does now
+*
+* Returns the same URL the viewer uses: `/addon/snapshot/media/<id>.jpg?w=<n>`,
+* served by the wrapper over the HTTP data plane. Relative and same-origin, so
+* the admin UI's `camstack_session` cookie authenticates it — the endpoint is
+* `access: 'authenticated'`, which accepts either a Bearer header or that
+* cookie, and a bare `<img>` can only send the cookie. This is the same
+* mechanism the native `<video>` fallback in `hls-video.tsx` already relies on.
+*
+* Caching is now the browser's, which is the point: `ETag` +
+* `Cache-Control: private, max-age=<device maxAgeS>` means a repeat render is a
+* cache hit and a revalidation is a 0-byte 304. No JS heap, no msgpack, no
+* base64. Nothing to configure — unlike `expo-image` on native, browsers
+* revalidate a stale URL rather than treating it as immutable, so the URL stays
+* stable and does NOT need a version parameter.
+*/
+/** The hub-proxied path prefix for the snapshot image data plane, composed
+*  below on `baseUrl` or, for the same-origin case, on the page's mount. */
+var SNAPSHOT_MEDIA_PATH = "/addon/snapshot/media";
+function useDeviceSnapshotImage(deviceId, options = {}) {
+	const { width, baseUrl } = options;
+	const [refreshNonce, setRefreshNonce] = (0, react$1.useState)(0);
+	return {
+		src: (0, react$1.useMemo)(() => {
+			if (deviceId === null || deviceId <= 0) return null;
+			const base = baseUrl !== void 0 ? baseUrl.replace(/\/+$/, "") : routerBasename();
+			const params = new URLSearchParams();
+			if (width !== void 0 && Number.isInteger(width) && width > 0) params.set("w", String(width));
+			if (refreshNonce > 0) {
+				params.set("force", "1");
+				params.set("r", String(refreshNonce));
+			}
+			const query = params.toString();
+			return `${base}${SNAPSHOT_MEDIA_PATH}/${String(deviceId)}.jpg${query.length > 0 ? `?${query}` : ""}`;
+		}, [
+			deviceId,
+			width,
+			baseUrl,
+			refreshNonce
+		]),
+		loading: false,
+		refresh: (0, react$1.useCallback)(() => {
+			setRefreshNonce((n) => n + 1);
+		}, [])
+	};
+}
+//#endregion
+//#region src/composites/cap-settings/camera-grid-layout.ts
+/** Smallest rectangle the editor will produce — ffmpeg refuses a zero-area crop. */
+var MIN_EXTENT = .02;
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function readRect(value) {
+	if (!isRecord(value)) return null;
+	const { x, y, width, height } = value;
+	if (typeof x !== "number" || typeof y !== "number" || typeof width !== "number" || typeof height !== "number") return null;
+	if (x < 0 || y < 0 || width <= 0 || height <= 0) return null;
+	if (x + width > 1 || y + height > 1) return null;
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+function readCell(value) {
+	if (!isRecord(value)) return null;
+	const deviceId = value["deviceId"];
+	if (typeof deviceId !== "number" || !Number.isInteger(deviceId)) return null;
+	const source = readRect(value["source"]);
+	const cell = readRect(value["cell"]);
+	if (source === null || cell === null) return null;
+	return {
+		deviceId,
+		source,
+		cell
+	};
+}
+/** Parse the `getGridForDevice` reply. See {@link GridLayoutReadOutcome}. */
+function parseGridView(raw) {
+	if (!isRecord(raw) || !("grid" in raw)) return "unreadable";
+	const grid = raw["grid"];
+	if (grid === null) return null;
+	if (!isRecord(grid)) return "unreadable";
+	const { instanceId, deviceId, name, width, height, fps, cells } = grid;
+	if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells)) return "unreadable";
+	const parsed = [];
+	for (const entry of cells) {
+		const cell = readCell(entry);
+		if (cell === null) return "unreadable";
+		parsed.push(cell);
+	}
+	return {
+		instanceId,
+		deviceId,
+		name,
+		width,
+		height,
+		fps,
+		cells: parsed
+	};
+}
+/**
+* Keep a rectangle inside the unit square.
+*
+* The addon THROWS on a rectangle that falls outside — a silently clipped
+* picture is worse than a refusal — so the editor must never hand it one.
+*/
+function clampNormalizedRect(rect) {
+	const width = Math.min(1, Math.max(MIN_EXTENT, rect.width));
+	const height = Math.min(1, Math.max(MIN_EXTENT, rect.height));
+	return {
+		x: Math.min(1 - width, Math.max(0, rect.x)),
+		y: Math.min(1 - height, Math.max(0, rect.y)),
+		width,
+		height
+	};
+}
+/** Drag: translate by a normalized delta, clamped. */
+function moveNormalizedRect(rect, dx, dy) {
+	return clampNormalizedRect({
+		...rect,
+		x: rect.x + dx,
+		y: rect.y + dy
+	});
+}
+/** Resize from the bottom-right corner: the origin stays put. */
+function resizeNormalizedRect(rect, dw, dh) {
+	return clampNormalizedRect({
+		...rect,
+		width: rect.width + dw,
+		height: rect.height + dh
+	});
+}
+//#endregion
+//#region src/composites/cap-settings/CameraGridLayoutEditor.tsx
+/**
+* The camera-grid layout editor.
+*
+* A grid's geometry is the one thing a DERIVED settings form cannot express: a
+* generated form renders "cell 1 source = 592, cell 1 crop x = 0.25, cell 1 crop
+* width = 0.5…" and nobody can hold a picture in their head from that. So the
+* geometry gets a widget — the canvas, drawn at the grid's own aspect ratio,
+* with the cells on it — while the knobs that ARE ordinary fields (the name,
+* the canvas size, the frame rate) sit beside it in the same panel.
+*
+* Every rectangle in here is NORMALIZED [0,1], on both sides: the crop taken
+* out of a source, and the cell it lands in. That is how the addon stores them
+* (a source camera can change resolution, and a stored pixel rectangle would
+* quietly start cutting the wrong region), so the editor speaks the same
+* language rather than converting at the boundary.
+*
+* The preview is the source cameras' own snapshots, positioned by CSS from the
+* SAME normalized numbers that will become the ffmpeg `crop`/`overlay`. It costs
+* the server nothing and it is wrong in exactly the ways the real composition
+* would be wrong.
+*/
+var ADDON_ID = "camera-grid";
+var FULL_FRAME = {
+	x: 0,
+	y: 0,
+	width: 1,
+	height: 1
+};
+var MAX_CELLS = 16;
+/** Hoisted so `useDevices` does not re-subscribe on every render. */
+var CAMERA_FILTER = { type: _camstack_types.DeviceType.Camera };
+function CameraGridLayoutEditor({ deviceId }) {
+	const system = useSystem();
+	const cameras = (0, react$1.useMemo)(() => system.listDeviceInfos(CAMERA_FILTER), [system, useDevices(CAMERA_FILTER)]);
+	const [loaded, setLoaded] = (0, react$1.useState)(void 0);
+	const [draft, setDraft] = (0, react$1.useState)(null);
+	const [saving, setSaving] = (0, react$1.useState)(false);
+	const [saveError, setSaveError] = (0, react$1.useState)(null);
+	const [selected, setSelected] = (0, react$1.useState)(0);
+	const [drag, setDrag] = (0, react$1.useState)(null);
+	const reload = (0, react$1.useCallback)(async () => {
+		const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
+			addonId: ADDON_ID,
+			action: "getGridForDevice",
+			input: { deviceId }
+		}));
+		setLoaded(outcome);
+		setDraft(outcome === null || outcome === "unreadable" ? null : outcome);
+	}, [system, deviceId]);
+	(0, react$1.useEffect)(() => {
+		reload().catch(() => {
+			setLoaded("unreadable");
+		});
+	}, [reload]);
+	const save = (0, react$1.useCallback)(async () => {
+		if (draft === null) return;
+		setSaving(true);
+		setSaveError(null);
+		try {
+			const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
+				addonId: ADDON_ID,
+				action: "saveGridLayout",
+				input: {
+					deviceId,
+					name: draft.name,
+					width: draft.width,
+					height: draft.height,
+					fps: draft.fps,
+					cells: draft.cells.map((cell) => ({ ...cell }))
+				}
+			}));
+			if (outcome !== null && outcome !== "unreadable") {
+				setLoaded(outcome);
+				setDraft(outcome);
+			}
+		} catch (error) {
+			setSaveError(error instanceof Error ? error.message : String(error));
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		system,
+		deviceId,
+		draft
+	]);
+	const patchCell = (0, react$1.useCallback)((index, patch) => {
+		setDraft((prev) => prev === null ? prev : {
+			...prev,
+			cells: prev.cells.map((cell, i) => i === index ? {
+				...cell,
+				...patch
+			} : cell)
+		});
+	}, []);
+	const canvasAspect = (0, react$1.useMemo)(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
+	if (loaded === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
+		title: "Grid layout",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 text-[10.5px] text-foreground-subtle",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }), " Loading the layout…"]
+		})
+	});
+	if (loaded === "unreadable") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
+		title: "Grid layout",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 text-[10.5px] text-danger",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleAlert, { className: "h-3 w-3" }), "The Camera Grids addon did not answer, so this layout is unknown — not empty."]
+		})
+	});
+	if (loaded === null || draft === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
+		title: "Grid layout",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-[10.5px] text-foreground-subtle",
+			children: "This camera is not a grid."
+		})
+	});
+	const onPointerMove = (event) => {
+		if (drag === null) return;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return;
+		const dx = (event.clientX - drag.startX) / bounds.width;
+		const dy = (event.clientY - drag.startY) / bounds.height;
+		patchCell(drag.index, { cell: drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRect(drag.origin, dx, dy) });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
+		title: "Grid layout",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
+		headerRight: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			disabled: saving,
+			onClick: () => void save(),
+			className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
+			children: [saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, { className: "h-3 w-3" }), "Save"]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-3",
+			children: [
+				saveError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 text-[10.5px] text-danger",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleAlert, { className: "h-3 w-3" }),
+						" ",
+						saveError
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
+					style: { aspectRatio: String(canvasAspect) },
+					onPointerMove,
+					onPointerUp: () => {
+						setDrag(null);
+					},
+					onPointerLeave: () => {
+						setDrag(null);
+					},
+					children: [draft.cells.map((cell, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCellBox, {
+						cell,
+						selected: index === selected,
+						onSelect: () => {
+							setSelected(index);
+						},
+						onDragStart: (mode, event) => {
+							setSelected(index);
+							setDrag({
+								index,
+								mode,
+								startX: event.clientX,
+								startY: event.clientY,
+								origin: cell.cell
+							});
+						}
+					}, `${String(cell.deviceId)}-${String(index)}`)), draft.cells.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "absolute inset-0 flex items-center justify-center text-[10.5px] text-foreground-subtle",
+						children: "No cells yet — add one below."
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-4 gap-2 text-[10.5px]",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+							label: "Width",
+							value: draft.width,
+							onChange: (width) => {
+								setDraft({
+									...draft,
+									width
+								});
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+							label: "Height",
+							value: draft.height,
+							onChange: (height) => {
+								setDraft({
+									...draft,
+									height
+								});
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+							label: "FPS",
+							value: draft.fps,
+							onChange: (fps) => {
+								setDraft({
+									...draft,
+									fps
+								});
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							disabled: draft.cells.length >= MAX_CELLS,
+							onClick: () => {
+								const first = cameras.find((camera) => camera.id !== deviceId);
+								if (!first) return;
+								setDraft({
+									...draft,
+									cells: [...draft.cells, {
+										deviceId: first.id,
+										source: FULL_FRAME,
+										cell: clampNormalizedRect({
+											x: .1,
+											y: .1,
+											width: .4,
+											height: .4
+										})
+									}]
+								});
+								setSelected(draft.cells.length);
+							},
+							className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
+						})
+					]
+				}),
+				draft.cells[selected] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellInspector, {
+					cell: draft.cells[selected],
+					index: selected,
+					cameras: cameras.filter((camera) => camera.id !== deviceId),
+					onChange: (patch) => {
+						patchCell(selected, patch);
+					},
+					onRemove: () => {
+						setDraft({
+							...draft,
+							cells: draft.cells.filter((_, i) => i !== selected)
+						});
+						setSelected(0);
+					}
+				})
+			]
+		})
+	});
+}
+function GridCellBox({ cell, selected, onSelect, onDragStart }) {
+	const { src } = useDeviceSnapshotImage(cell.deviceId, { width: 640 });
+	const backgroundSize = `${String(100 / cell.source.width)}% ${String(100 / cell.source.height)}%`;
+	const backgroundPosition = cell.source.width >= 1 && cell.source.height >= 1 ? "center" : `${String(cell.source.x / Math.max(1e-6, 1 - cell.source.width) * 100)}% ${String(cell.source.y / Math.max(1e-6, 1 - cell.source.height) * 100)}%`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "presentation",
+		onPointerDown: (event) => {
+			onSelect();
+			onDragStart("move", event);
+		},
+		className: `absolute cursor-move border ${selected ? "border-accent" : "border-border/60"}`,
+		style: {
+			left: `${String(cell.cell.x * 100)}%`,
+			top: `${String(cell.cell.y * 100)}%`,
+			width: `${String(cell.cell.width * 100)}%`,
+			height: `${String(cell.cell.height * 100)}%`,
+			backgroundImage: src === null ? void 0 : `url(${src})`,
+			backgroundSize,
+			backgroundPosition,
+			backgroundRepeat: "no-repeat"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "presentation",
+			onPointerDown: (event) => {
+				event.stopPropagation();
+				onDragStart("resize", event);
+			},
+			className: "absolute -bottom-1 -right-1 h-2.5 w-2.5 cursor-se-resize bg-accent"
+		})
+	});
+}
+function CellInspector({ cell, index, cameras, onChange, onRemove }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2 rounded border border-border p-2 text-[10.5px]",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "uppercase text-foreground-subtle",
+					children: ["Cell ", index + 1]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onRemove,
+					className: "text-danger",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-3 w-3" })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w-16 text-foreground-subtle",
+					children: "Source"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					value: String(cell.deviceId),
+					onChange: (event) => {
+						onChange({ deviceId: Number(event.target.value) });
+					},
+					className: "flex-1 rounded border border-border bg-transparent px-1 py-0.5",
+					children: cameras.map((camera) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: String(camera.id),
+						children: camera.name
+					}, camera.id))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid grid-cols-4 gap-2",
+				children: [
+					"x",
+					"y",
+					"width",
+					"height"
+				].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
+					label: `Crop ${key}`,
+					value: Math.round(cell.source[key] * 100) / 100,
+					step: .01,
+					onChange: (next) => {
+						onChange({ source: clampNormalizedRect({
+							...cell.source,
+							[key]: next
+						}) });
+					}
+				}, key))
+			})
+		]
+	});
+}
+function LabelledNumber({ label, value, step = 1, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-foreground-subtle",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "number",
+			step,
+			value,
+			onChange: (event) => {
+				const next = Number(event.target.value);
+				if (Number.isFinite(next)) onChange(next);
+			},
+			className: "rounded border border-border bg-transparent px-1 py-0.5"
+		})]
+	});
+}
+//#endregion
 //#region src/hooks/use-device-proxy.ts
 /**
 * useDeviceProxy — canonical React entry point for a device.
@@ -17003,6 +17638,7 @@ function usePTZ(trpc, deviceId, hookOptions) {
 	const ptz = useDeviceProxy(trpc, enabled ? deviceId : null)?.ptz;
 	const [presets, setPresets] = (0, react$1.useState)([]);
 	const [homePreset, setHomePresetState] = (0, react$1.useState)(null);
+	const [homeReturnSeconds, setHomeReturnState] = (0, react$1.useState)(null);
 	const [options, setOptions] = (0, react$1.useState)(null);
 	const [busy, setBusy] = (0, react$1.useState)(false);
 	const [error, setError] = (0, react$1.useState)(null);
@@ -17024,6 +17660,15 @@ function usePTZ(trpc, deviceId, hookOptions) {
 			setError(err instanceof Error ? err.message : String(err));
 		}
 	}, [ptz, enabled]);
+	const refreshHomeReturn = (0, react$1.useCallback)(async () => {
+		if (!enabled || !ptz) return;
+		try {
+			setHomeReturnState(await ptz.getHomeReturnSeconds({}));
+		} catch (err) {
+			if (isAbsentProvider(err)) return;
+			setHomeReturnState(null);
+		}
+	}, [ptz, enabled]);
 	const refreshOptions = (0, react$1.useCallback)(async () => {
 		if (!enabled || !ptz) return;
 		try {
@@ -17037,10 +17682,12 @@ function usePTZ(trpc, deviceId, hookOptions) {
 		refreshPresets();
 		refreshOptions();
 		refreshHomePreset();
+		refreshHomeReturn();
 	}, [
 		refreshPresets,
 		refreshOptions,
-		refreshHomePreset
+		refreshHomePreset,
+		refreshHomeReturn
 	]);
 	const wrap = (0, react$1.useCallback)(async (fn) => {
 		if (!enabled || !ptz) return void 0;
@@ -17125,6 +17772,25 @@ function usePTZ(trpc, deviceId, hookOptions) {
 			wrap,
 			refreshHomePreset
 		]),
+		captureHomeHere: (0, react$1.useCallback)(async () => {
+			if (!ptz) return;
+			await wrap(() => ptz.captureHomeHere({}));
+			await refreshHomePreset();
+		}, [
+			ptz,
+			wrap,
+			refreshHomePreset
+		]),
+		homeReturnSeconds,
+		setHomeReturnSeconds: (0, react$1.useCallback)(async (seconds) => {
+			if (!ptz) return;
+			await wrap(() => ptz.setHomeReturnSeconds({ seconds }));
+			await refreshHomeReturn();
+		}, [
+			ptz,
+			wrap,
+			refreshHomeReturn
+		]),
 		goToPreset: (0, react$1.useCallback)(async (presetId) => {
 			if (!ptz) return;
 			await wrap(() => ptz.goToPreset({ presetId }));
@@ -17186,58 +17852,102 @@ function usePTZ(trpc, deviceId, hookOptions) {
 //#endregion
 //#region src/composites/cap-settings/HomePresetPicker.tsx
 /**
-* Which preset `ptz.goHome` targets on this camera.
+* Where "Home" sends this camera, and how it is set.
 *
-* This exists because the vendor "convention" was wrong on every camera of
-* this fleet. Three providers each hardcoded a slot — reolink 0, hikvision
-* '1', amcrest 1 — and measured on 2026-09-17 those slots held "stanza",
-* "Credenza" and "Preset1": the operator's own presets, not a home. Two of the
-* three swallowed the failure, so a head that never moved looked exactly like a
-* head that went home.
+* ## Why this exists at all
 *
-* Four things can be true, and the picker renders each differently:
+* The vendor "convention" was wrong on every camera of this fleet. Three
+* providers each hardcoded a slot — reolink 0, hikvision '1', amcrest 1 — and
+* measured on 2026-09-17 those slots held "stanza", "Credenza" and "Preset1":
+* the operator's own presets, not a home. Two of the three swallowed the
+* failure, so a head that never moved looked exactly like one that went home.
 *
-*   `native`   — the camera homes WITHOUT a preset (ONVIF moves to the PTZ
-*                origin). Nothing to pick, so no control is shown.
-*   `firmware` — the camera named a preset `fn: 'home'` itself (Hikvision's
-*                "Back to origin"). Preselected, and the operator may override.
+* ## The mistake this component made first
+*
+* Its first version rendered NOTHING for `source: 'native'`, with a comment
+* saying "the camera homes natively; there is no preset to choose". That is
+* true for ONVIF, whose home is the fixed PTZ origin. It was written hours
+* before we learned that Reolink's native home is a GUARD POINT — a stored
+* position, settable, with its own idle-return timer — so the control was
+* hidden from the one vendor that most needed it. A comment that is right about
+* one case and read as covering all of them is exactly the leftover that reads
+* as verification.
+*
+* ## What each state offers now
+*
+*   `native`   — no preset to pick, but "Set home here" and, where the camera
+*                has one, the idle-return delay.
+*   `firmware` — the camera named its own home (Hikvision's "Back to origin").
+*                Preselected; the operator may override.
 *   `operator` — pinned here.
-*   `none`     — `goHome` REFUSES. Said out loud, because a disabled feature
-*                must never look like a broken one.
+*   `none`     — Home REFUSES, and the UI says so. A disabled feature must
+*                never look like a broken one (D62).
 */
+var SELECT_CLASS$2 = "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50";
 function HomePresetPicker({ controls }) {
-	const { homePreset, presets, setHomePreset, busy } = controls;
+	const { homePreset, presets, setHomePreset, captureHomeHere, homeReturnSeconds, setHomeReturnSeconds, busy } = controls;
 	const [saving, setSaving] = (0, react$1.useState)(false);
 	if (homePreset === null) return null;
-	if (homePreset.source === "native") return null;
-	const value = homePreset.presetId ?? "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: "flex flex-col gap-1 px-2 pt-2",
+	const disabled = busy || saving;
+	const run = (action) => {
+		setSaving(true);
+		action().finally(() => setSaving(false));
+	};
+	const explanation = homePreset.source === "native" ? "This camera stores its own home position. “Set home here” pins it to where the camera is pointing now." : homePreset.source === "firmware" ? "Taken from the camera, which names this preset as its home." : homePreset.source === "none" ? "Nothing is set, so Home refuses rather than moving to an arbitrary preset." : "Pinned here. Clear it to fall back to the camera’s own home.";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2 px-2 pt-2",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] font-medium text-foreground-subtle",
-				children: "Home preset"
+			homePreset.source !== "native" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] font-medium text-foreground-subtle",
+					children: "Home preset"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					value: homePreset.presetId ?? "",
+					disabled,
+					onChange: (e) => {
+						const next = e.target.value === "" ? null : e.target.value;
+						run(() => setHomePreset(next));
+					},
+					className: SELECT_CLASS$2,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: "",
+						children: "Not set — Home is refused"
+					}), presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+						value: preset.id,
+						children: [preset.name || preset.id, preset.fn === "home" ? " (camera’s own home)" : ""]
+					}, preset.id))]
+				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-				value,
-				disabled: busy || saving,
-				onChange: (e) => {
-					const next = e.target.value === "" ? null : e.target.value;
-					setSaving(true);
-					setHomePreset(next).finally(() => setSaving(false));
-				},
-				className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-					value: "",
-					children: "Not set — Home is refused"
-				}), presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-					value: preset.id,
-					children: [preset.name || preset.id, preset.fn === "home" ? " (camera’s own home)" : ""]
-				}, preset.id))]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled,
+				onClick: () => run(() => captureHomeHere()),
+				className: "self-start rounded-md border border-border px-2 py-1 text-[11px] text-foreground hover:bg-primary/10 disabled:opacity-50",
+				children: "Set home here"
+			}),
+			homeReturnSeconds !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] font-medium text-foreground-subtle",
+					children: "Return home after (s)"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "number",
+					min: 0,
+					max: 3600,
+					defaultValue: homeReturnSeconds,
+					disabled,
+					onBlur: (e) => {
+						const next = Number(e.target.value);
+						if (!Number.isFinite(next) || next === homeReturnSeconds) return;
+						run(() => setHomeReturnSeconds(Math.round(next)));
+					},
+					className: SELECT_CLASS$2
+				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-[10px] text-foreground-subtle",
-				children: homePreset.source === "firmware" ? "Taken from the camera, which names this preset as its home." : homePreset.source === "none" ? "Nothing is set, so Home refuses rather than moving to an arbitrary preset." : "Pinned here. Clear it to fall back to the camera’s own home."
+				children: explanation
 			})
 		]
 	});
@@ -19806,13 +20516,14 @@ function RecordingPanel({ deviceId }) {
 *  `type:'widget'` ConfigField. `WidgetSlot` resolves these BEFORE the
 *  Module-Federation `WidgetRegistry`. ids are namespaced `host/<name>`. */
 var HOST_WIDGETS = {
-	"host/motion-zones-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings }))),
+	"host/motion-zones-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BK9R9NIr.cjs")).then((m) => ({ default: m.MotionZonesSettings }))),
 	"host/privacy-mask-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-DfZAFg32.cjs")).then((m) => ({ default: m.PrivacyMaskSettings }))),
 	"host/ptz-panel": PtzPanel,
 	"host/navigation-panel": NavigationPanel,
 	"host/consumables-panel": ConsumablesPanel,
 	"host/ptz-autotrack": AutotrackSection,
-	"host/recording-panel": RecordingPanel
+	"host/recording-panel": RecordingPanel,
+	"host/camera-grid-layout": CameraGridLayoutEditor
 };
 //#endregion
 //#region src/composites/widget-slot.tsx
@@ -43262,74 +43973,6 @@ function useDeviceNetworkLink(trpc, deviceId) {
 	return useDeviceState(trpc, deviceId, (s) => s.networkLink) ?? null;
 }
 //#endregion
-//#region src/hooks/use-device-snapshot.ts
-/**
-* useDeviceSnapshotImage — a device's snapshot as a plain image URL.
-*
-* ## What this used to do, and why it stopped
-*
-* It fetched `dev.snapshot.getSnapshot()` over tRPC and returned
-* `data:image/jpeg;base64,…`. That put a full camera capture — up to 4 K,
-* measured at 758 KB average per camera on the live hub — through the msgpack
-* WebSocket plane, base64-inflated by a third, and then held it in the
-* react-query heap for 24 h per device. The device list rendered it into a
-* **28 × 28 px `<img>`**.
-*
-* It also did not do what it appeared to do. `snapshot.getSnapshot` scoped to a
-* device routes to the NATIVE provider, not the snapshot wrapper, so it bypassed
-* the wrapper's cache, coalescing and stale-while-revalidate entirely: probed
-* live, a `force:true` call returned a fresh 1.05 MB JPEG in 0.55 s while the
-* wrapper's `lastCapturedAt` for that camera did not move. Two snapshot paths,
-* different behaviour, and only one of them maintained the cache the other one
-* reported on.
-*
-* ## What it does now
-*
-* Returns the same URL the viewer uses: `/addon/snapshot/media/<id>.jpg?w=<n>`,
-* served by the wrapper over the HTTP data plane. Relative and same-origin, so
-* the admin UI's `camstack_session` cookie authenticates it — the endpoint is
-* `access: 'authenticated'`, which accepts either a Bearer header or that
-* cookie, and a bare `<img>` can only send the cookie. This is the same
-* mechanism the native `<video>` fallback in `hls-video.tsx` already relies on.
-*
-* Caching is now the browser's, which is the point: `ETag` +
-* `Cache-Control: private, max-age=<device maxAgeS>` means a repeat render is a
-* cache hit and a revalidation is a 0-byte 304. No JS heap, no msgpack, no
-* base64. Nothing to configure — unlike `expo-image` on native, browsers
-* revalidate a stale URL rather than treating it as immutable, so the URL stays
-* stable and does NOT need a version parameter.
-*/
-/** The hub-proxied path prefix for the snapshot image data plane, composed
-*  below on `baseUrl` or, for the same-origin case, on the page's mount. */
-var SNAPSHOT_MEDIA_PATH = "/addon/snapshot/media";
-function useDeviceSnapshotImage(deviceId, options = {}) {
-	const { width, baseUrl } = options;
-	const [refreshNonce, setRefreshNonce] = (0, react$1.useState)(0);
-	return {
-		src: (0, react$1.useMemo)(() => {
-			if (deviceId === null || deviceId <= 0) return null;
-			const base = baseUrl !== void 0 ? baseUrl.replace(/\/+$/, "") : routerBasename();
-			const params = new URLSearchParams();
-			if (width !== void 0 && Number.isInteger(width) && width > 0) params.set("w", String(width));
-			if (refreshNonce > 0) {
-				params.set("force", "1");
-				params.set("r", String(refreshNonce));
-			}
-			const query = params.toString();
-			return `${base}${SNAPSHOT_MEDIA_PATH}/${String(deviceId)}.jpg${query.length > 0 ? `?${query}` : ""}`;
-		}, [
-			deviceId,
-			width,
-			baseUrl,
-			refreshNonce
-		]),
-		loading: false,
-		refresh: (0, react$1.useCallback)(() => {
-			setRefreshNonce((n) => n + 1);
-		}, [])
-	};
-}
-//#endregion
 //#region src/composites/hover-zoom-image.tsx
 /**
 * <HoverZoomImage> — a small thumbnail that expands into a floating
@@ -50466,91 +51109,6 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 	};
 }
 //#endregion
-//#region src/hooks/use-devices.ts
-/**
-* useDevices / useDevice — reactive sync-mirror reads.
-*
-* Both hooks hand out `DeviceProxy` references straight out of the
-* `System` mirror. The mirror keeps device + binding caches warm via
-* the `device.registered/unregistered/bindings-changed` event stream,
-* so re-renders are driven by lifecycle pushes — no React Query
-* round-trip and no `refetch` plumbing needed at the caller side.
-*
-* The hooks defensively read once on mount and assume the System has
-* been `init()`ed by the host app — calls before the warm-boot
-* completes simply return an empty array / null and re-render once
-* the registered listeners fire.
-*/
-/**
-* Reactive list of devices matching the optional filter set. Returns a
-* stable array reference between updates so consumers passing it as a
-* prop don't tear down memoized children.
-*/
-function useDevices(filters) {
-	const system = useSystem();
-	const filtersKey = (0, react$1.useMemo)(() => filters ? JSON.stringify(filters) : "", [filters]);
-	const [devices, setDevices] = (0, react$1.useState)(() => system.listDevices(filters));
-	(0, react$1.useEffect)(() => {
-		const refresh = () => {
-			setDevices(system.listDevices(filters));
-		};
-		refresh();
-		let unsubAdded = null;
-		let unsubRemoved = null;
-		try {
-			unsubAdded = system.onDeviceAdded(refresh);
-			unsubRemoved = system.onDeviceRemoved(refresh);
-		} catch {}
-		const unsubConn = system.subscribeConnectionEvents((state) => {
-			if (state === "connected") refresh();
-		});
-		return () => {
-			unsubAdded?.();
-			unsubRemoved?.();
-			unsubConn();
-		};
-	}, [
-		system,
-		filters,
-		filtersKey
-	]);
-	return devices;
-}
-/**
-* Single-device variant. Returns `null` until the device is in the
-* mirror; re-renders when the device is removed (back to `null`) or
-* added.
-*/
-function useDevice(deviceId) {
-	const system = useSystem();
-	const [device, setDevice] = (0, react$1.useState)(() => deviceId === null ? null : system.getDevice(deviceId));
-	(0, react$1.useEffect)(() => {
-		if (deviceId === null) {
-			setDevice(null);
-			return;
-		}
-		const refresh = () => {
-			setDevice(system.getDevice(deviceId));
-		};
-		refresh();
-		let unsubAdded = null;
-		let unsubRemoved = null;
-		try {
-			unsubAdded = system.onDeviceAdded(refresh);
-			unsubRemoved = system.onDeviceRemoved(refresh);
-		} catch {}
-		const unsubConn = system.subscribeConnectionEvents((state) => {
-			if (state === "connected") refresh();
-		});
-		return () => {
-			unsubAdded?.();
-			unsubRemoved?.();
-			unsubConn();
-		};
-	}, [system, deviceId]);
-	return device;
-}
-//#endregion
 //#region src/hooks/use-doorbell-events.ts
 /**
 * useDoorbellEvents — subscribe to doorbell.onPressed across the cluster.
@@ -50815,7 +51373,7 @@ function mirror(input) {
 *  Render inside `<Suspense>` at all call sites. */
 var MaskShapeCanvas = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MaskShapeCanvas-BByN3jvt.cjs")).then((m) => ({ default: m.MaskShapeCanvas })));
 /** Lazy-wrapped `MotionZonesSettings` — code-split off the main bundle. */
-var MotionZonesSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings })));
+var MotionZonesSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BK9R9NIr.cjs")).then((m) => ({ default: m.MotionZonesSettings })));
 /** Lazy-wrapped `SceneMonitorEditor` — code-split off the main bundle for the
 *  same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
 *  inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
@@ -50946,6 +51504,7 @@ exports.FormField = FormField$1;
 exports.GRID_GAP = GRID_GAP;
 exports.GRID_PAIRED = GRID_PAIRED;
 exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
+exports.Grid2x2 = Grid2x2;
 exports.GripTrack = GripTrack;
 exports.GroupedModelSelector = GroupedModelSelector;
 exports.HOST_WIDGETS = HOST_WIDGETS;
@@ -52025,9 +52584,11 @@ exports.usePtzAutotrackGetSettings = usePtzAutotrackGetSettings;
 exports.usePtzAutotrackGetStatus = usePtzAutotrackGetStatus;
 exports.usePtzAutotrackSetEnabled = usePtzAutotrackSetEnabled;
 exports.usePtzAutotrackSetSettings = usePtzAutotrackSetSettings;
+exports.usePtzCaptureHomeHere = usePtzCaptureHomeHere;
 exports.usePtzContinuousMove = usePtzContinuousMove;
 exports.usePtzDeletePreset = usePtzDeletePreset;
 exports.usePtzGetHomePreset = usePtzGetHomePreset;
+exports.usePtzGetHomeReturnSeconds = usePtzGetHomeReturnSeconds;
 exports.usePtzGetOptions = usePtzGetOptions;
 exports.usePtzGetPosition = usePtzGetPosition;
 exports.usePtzGetPresets = usePtzGetPresets;
@@ -52038,6 +52599,7 @@ exports.usePtzMove = usePtzMove;
 exports.usePtzSavePreset = usePtzSavePreset;
 exports.usePtzSetAutofocus = usePtzSetAutofocus;
 exports.usePtzSetHomePreset = usePtzSetHomePreset;
+exports.usePtzSetHomeReturnSeconds = usePtzSetHomeReturnSeconds;
 exports.usePtzStop = usePtzStop;
 exports.useRebootReboot = useRebootReboot;
 exports.useRecordedPlayback = useRecordedPlayback;