@camstack/ui-library 1.2.48 → 1.2.50

package/dist/index.cjs

@@ -13119,6 +13119,10 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 		* header, tab strip, footer — stays put at every height. The dialog
 		* keeps its own padding either way, so `sheet-on-mobile`'s
 		* safe-area bottom padding still applies to the footer.
+		*
+		* `body` also takes a DEFINITE height below `md` — see the
+		* `scroll: 'body'` compound variants. That is not a style choice; the
+		* flex chain does not resolve without it on iOS Safari.
 		*/
 		scroll: {
 			content: "overflow-y-auto",
@@ -13144,6 +13148,16 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 			placement: "sheet-on-mobile",
 			width: "lg",
 			class: "md:w-[calc(100vw-2rem)] md:max-w-lg"
+		},
+		{
+			scroll: "body",
+			placement: "sheet-on-mobile",
+			class: "h-[92dvh] md:h-auto"
+		},
+		{
+			scroll: "body",
+			placement: "center",
+			class: "h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))] md:h-auto"
 		}
 	],
 	defaultVariants: {
@@ -13197,6 +13211,12 @@ function DialogHeader({ className, ...props }) {
 * footer out of the dialog instead of scrolling — the exact failure this
 * variant exists to remove. Anything sticky INSIDE a dialog body pins against
 * this element, since it is the scroll container.
+*
+* It only bounds a scroll area if every ancestor up to the dialog has a
+* resolved height. `DialogContent` supplies the top of that chain (see the
+* `scroll: 'body'` compound variants); an intermediate wrapper between them —
+* a `<Tabs>` that owns the tab strip, say — must carry `flex-1 min-h-0` too,
+* or it collapses and takes the body with it.
 */
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -35142,255 +35162,6 @@ function useContextSafe(ctx) {
 	return (0, react$1.useContext)(ctx);
 }
 //#endregion
-//#region src/composites/widget-panel.tsx
-function WidgetPanel({ title, icon, headerRight, collapsible = false, defaultOpen = true, bodyClassName = "p-3", children }) {
-	const [open, setOpen] = (0, react$1.useState)(defaultOpen);
-	const showBody = !collapsible || open;
-	const headerInner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-foreground",
-		children: [icon, title]
-	}), collapsible ? open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : headerRight] });
-	const headerClass = `px-4 py-2 flex items-center justify-between ${showBody ? "border-b border-border" : ""}`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "rounded-lg border border-border bg-surface overflow-hidden",
-		children: [collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			onClick: () => setOpen((v) => !v),
-			className: `w-full text-left ${headerClass}`,
-			children: headerInner
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: headerClass,
-			children: headerInner
-		}), showBody ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: bodyClassName,
-			children
-		}) : null]
-	});
-}
-function WidgetMetricCard({ label, icon, children, footer }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "rounded-md border border-border/60 bg-background/40 px-3 py-2",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mb-1 flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
-				children: [icon, label]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-sm font-medium text-foreground",
-				children
-			}),
-			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-0.5 text-[10px] text-foreground-subtle",
-				children: footer
-			}) : null
-		]
-	});
-}
-//#endregion
-//#region src/composites/cap-settings/PtzPanel.tsx
-/**
-* PtzPanel — live pan/tilt/zoom controls for the `ptz` capability. A
-* cap-settings component (ui-library), mounted as a cap-contributed
-* top-level device-detail tab via the cap-UI contribution mechanism
-* (the `ptz` cap declares `ui: { tab: 'ptz', kind: 'static', ... }`).
-*
-* Consolidates the former admin-ui `PTZPanelContent`: `usePTZ` drives
-* the controls, `PTZOverlay` renders them (`mode='panel'`), and an
-* Autofocus toggle is shown only when `getOptions().hasAutofocus`.
-* Autotrack is its own cap-UI contribution (`ptz-autotrack`), mounted
-* independently by the contribution mechanism — not nested here.
-*/
-/** Autofocus toggle — only mounted when `hasAutofocus`. Reads the cap's
-*  `getStatus().autofocus` and drives `setAutofocus`. */
-function AutofocusToggle({ deviceId }) {
-	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
-	const [enabled, setEnabled] = (0, react$1.useState)(null);
-	const [busy, setBusy] = (0, react$1.useState)(false);
-	(0, react$1.useEffect)(() => {
-		if (!dev) return void 0;
-		let cancelled = false;
-		(async () => {
-			try {
-				const status = await dev.ptz?.getStatus({});
-				if (cancelled || !status) return;
-				setEnabled(status.autofocus);
-			} catch {}
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [dev]);
-	const toggle = (0, react$1.useCallback)(async () => {
-		if (!dev?.ptz || enabled === null) return;
-		setBusy(true);
-		try {
-			const next = !enabled;
-			await dev.ptz.setAutofocus({ enabled: next });
-			setEnabled(next);
-		} catch (err) {
-			console.error("ptz.setAutofocus failed", err);
-		} finally {
-			setBusy(false);
-		}
-	}, [dev, enabled]);
-	if (enabled === null) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-between border-t border-border/40 mt-2 pt-2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-[10.5px] font-semibold text-foreground",
-			children: "Autofocus"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			onClick: () => void toggle(),
-			disabled: busy,
-			"aria-pressed": enabled,
-			className: `flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${enabled ? "bg-success/15 text-success hover:bg-success/25" : "bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground"} disabled:opacity-50`,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${enabled ? "bg-success" : "bg-foreground-subtle/40"}` }), enabled ? "On" : "Off"]
-		})]
-	});
-}
-function PtzPanel({ deviceId }) {
-	const system = useSystem();
-	const ready = Number.isFinite(deviceId);
-	const controls = usePTZ(system.trpcClient, ready ? deviceId : 0, { enabled: ready });
-	if (!ready) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-center h-full text-[11px] text-foreground-subtle italic",
-		children: [
-			"Device #",
-			deviceId,
-			" not loaded."
-		]
-	});
-	const hasAutofocus = controls.options?.hasAutofocus === true;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WidgetPanel, {
-		title: "PTZ",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Move, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
-		bodyClassName: "p-3 flex flex-col overflow-y-auto",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PTZOverlay, {
-			controls,
-			mode: "panel"
-		}), hasAutofocus && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutofocusToggle, { deviceId })]
-	});
-}
-//#endregion
-//#region src/composites/cap-settings/ConsumablesPanel.tsx
-/**
-* ConsumablesPanel — maintenance-items surface for the generic
-* `consumables` capability. A cap-settings component (ui-library),
-* mounted as a cap-contributed top-level device-detail tab via the
-* cap-UI contribution mechanism (the `consumables` cap declares
-* `ui: { kind:'widget', widgetId:'host/consumables-panel', tab:'consumables', topTab:true, ... }`).
-*
-* Reads the cap's pushed runtime-state slice via `useDeviceCapability`
-* and renders one row per item: a fill bar + percentage when `level` is
-* known, else an `ok`/`replace` status pill when `status` is known, else
-* a muted em-dash. A per-item "Replaced" button calls `cap.reset` when
-* the item is `resettable`. The cap is inert until a provider sets
-* items — an empty list renders a muted placeholder.
-*/
-/** Remaining-life % at or below this is treated as a warning. */
-var LOW_LEVEL_THRESHOLD = 15;
-function isLowOrReplace(item) {
-	return item.status === "replace" || item.level !== null && item.level <= LOW_LEVEL_THRESHOLD;
-}
-/** Format a ms-epoch as a compact local date for the "replaced" hint. */
-function formatResetAt(ms) {
-	try {
-		return new Date(ms).toLocaleDateString(void 0, {
-			year: "numeric",
-			month: "short",
-			day: "numeric"
-		});
-	} catch {
-		return "";
-	}
-}
-function ConsumableRow({ item, busy, canReset, onReset }) {
-	const warn = isLowOrReplace(item);
-	const barColor = warn ? "bg-warning" : "bg-success";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex flex-col gap-1.5 rounded-md border p-3 ${warn ? "border-warning/40 bg-warning/5" : "border-border/40 bg-surface-elevated/30"}`,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: `text-xs font-semibold ${warn ? "text-warning" : "text-foreground"}`,
-					children: item.label
-				}), item.resettable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onReset(item.key),
-					disabled: busy || !canReset,
-					className: "rounded-md border border-border bg-surface px-2 py-0.5 text-[10px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-					children: "Replaced"
-				})]
-			}),
-			item.level !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "h-1.5 flex-1 overflow-hidden rounded-full bg-surface-elevated/60",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `h-full rounded-full ${barColor} transition-all`,
-						style: { width: `${Math.max(0, Math.min(100, item.level))}%` }
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
-					children: [Math.round(item.level), "%"]
-				})]
-			}) : item.status !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${item.status === "replace" ? "bg-warning/15 text-warning" : "bg-success/15 text-success"}`,
-				children: item.status === "replace" ? "Replace" : "OK"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] text-foreground-subtle",
-				children: "—"
-			}),
-			item.lastResetAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-[10px] text-foreground-subtle",
-				children: ["Replaced ", formatResetAt(item.lastResetAt)]
-			})
-		]
-	});
-}
-function ConsumablesPanel({ deviceId }) {
-	const system = useSystem();
-	const ready = Number.isFinite(deviceId);
-	const { cap, slice, available } = useDeviceCapability({
-		trpc: system.trpcClient,
-		deviceId: ready ? deviceId : null,
-		cap: (d) => d.consumables,
-		slice: (d) => d.state.consumables
-	});
-	const [busyKey, setBusyKey] = (0, react$1.useState)(null);
-	const onReset = (0, react$1.useCallback)(async (key) => {
-		if (!cap) return;
-		setBusyKey(key);
-		try {
-			await cap.reset({ key });
-		} catch (err) {
-			console.error("consumables.reset failed", err);
-		} finally {
-			setBusyKey(null);
-		}
-	}, [cap]);
-	const items = slice?.items ?? [];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
-		title: "Consumables",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gauge, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
-		bodyClassName: "p-3 overflow-y-auto",
-		children: items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-[11px] text-foreground-subtle italic leading-relaxed",
-			children: "No consumables reported."
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-col gap-2",
-			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableRow, {
-				item,
-				busy: busyKey === item.key,
-				canReset: available,
-				onReset: (key) => void onReset(key)
-			}, item.key))
-		})
-	});
-}
-//#endregion
 //#region src/hooks/use-device-autotrack.ts
 /**
 * `useDeviceAutotrack` — typed wrapper around the `ptz-autotrack` cap.
@@ -35449,6 +35220,51 @@ function useDeviceAutotrack(deviceId) {
 	};
 }
 //#endregion
+//#region src/composites/widget-panel.tsx
+function WidgetPanel({ title, icon, headerRight, collapsible = false, defaultOpen = true, bodyClassName = "p-3", children }) {
+	const [open, setOpen] = (0, react$1.useState)(defaultOpen);
+	const showBody = !collapsible || open;
+	const headerInner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-foreground",
+		children: [icon, title]
+	}), collapsible ? open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : headerRight] });
+	const headerClass = `px-4 py-2 flex items-center justify-between ${showBody ? "border-b border-border" : ""}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rounded-lg border border-border bg-surface overflow-hidden",
+		children: [collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: () => setOpen((v) => !v),
+			className: `w-full text-left ${headerClass}`,
+			children: headerInner
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: headerClass,
+			children: headerInner
+		}), showBody ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: bodyClassName,
+			children
+		}) : null]
+	});
+}
+function WidgetMetricCard({ label, icon, children, footer }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rounded-md border border-border/60 bg-background/40 px-3 py-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-1 flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-foreground-subtle",
+				children: [icon, label]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-sm font-medium text-foreground",
+				children
+			}),
+			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-0.5 text-[10px] text-foreground-subtle",
+				children: footer
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region src/composites/cap-settings/AutotrackSection.tsx
 /**
 * Autotrack settings card — rendered inside the PTZ panel when the
@@ -35601,6 +35417,210 @@ function AutotrackSection({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/composites/cap-settings/ConsumablesPanel.tsx
+/**
+* ConsumablesPanel — maintenance-items surface for the generic
+* `consumables` capability. A cap-settings component (ui-library),
+* mounted as a cap-contributed top-level device-detail tab via the
+* cap-UI contribution mechanism (the `consumables` cap declares
+* `ui: { kind:'widget', widgetId:'host/consumables-panel', tab:'consumables', topTab:true, ... }`).
+*
+* Reads the cap's pushed runtime-state slice via `useDeviceCapability`
+* and renders one row per item: a fill bar + percentage when `level` is
+* known, else an `ok`/`replace` status pill when `status` is known, else
+* a muted em-dash. A per-item "Replaced" button calls `cap.reset` when
+* the item is `resettable`. The cap is inert until a provider sets
+* items — an empty list renders a muted placeholder.
+*/
+/** Remaining-life % at or below this is treated as a warning. */
+var LOW_LEVEL_THRESHOLD = 15;
+function isLowOrReplace(item) {
+	return item.status === "replace" || item.level !== null && item.level <= LOW_LEVEL_THRESHOLD;
+}
+/** Format a ms-epoch as a compact local date for the "replaced" hint. */
+function formatResetAt(ms) {
+	try {
+		return new Date(ms).toLocaleDateString(void 0, {
+			year: "numeric",
+			month: "short",
+			day: "numeric"
+		});
+	} catch {
+		return "";
+	}
+}
+function ConsumableRow({ item, busy, canReset, onReset }) {
+	const warn = isLowOrReplace(item);
+	const barColor = warn ? "bg-warning" : "bg-success";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex flex-col gap-1.5 rounded-md border p-3 ${warn ? "border-warning/40 bg-warning/5" : "border-border/40 bg-surface-elevated/30"}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-xs font-semibold ${warn ? "text-warning" : "text-foreground"}`,
+					children: item.label
+				}), item.resettable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onReset(item.key),
+					disabled: busy || !canReset,
+					className: "rounded-md border border-border bg-surface px-2 py-0.5 text-[10px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
+					children: "Replaced"
+				})]
+			}),
+			item.level !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "h-1.5 flex-1 overflow-hidden rounded-full bg-surface-elevated/60",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `h-full rounded-full ${barColor} transition-all`,
+						style: { width: `${Math.max(0, Math.min(100, item.level))}%` }
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
+					children: [Math.round(item.level), "%"]
+				})]
+			}) : item.status !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${item.status === "replace" ? "bg-warning/15 text-warning" : "bg-success/15 text-success"}`,
+				children: item.status === "replace" ? "Replace" : "OK"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-foreground-subtle",
+				children: "—"
+			}),
+			item.lastResetAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-[10px] text-foreground-subtle",
+				children: ["Replaced ", formatResetAt(item.lastResetAt)]
+			})
+		]
+	});
+}
+function ConsumablesPanel({ deviceId }) {
+	const system = useSystem();
+	const ready = Number.isFinite(deviceId);
+	const { cap, slice, available } = useDeviceCapability({
+		trpc: system.trpcClient,
+		deviceId: ready ? deviceId : null,
+		cap: (d) => d.consumables,
+		slice: (d) => d.state.consumables
+	});
+	const [busyKey, setBusyKey] = (0, react$1.useState)(null);
+	const onReset = (0, react$1.useCallback)(async (key) => {
+		if (!cap) return;
+		setBusyKey(key);
+		try {
+			await cap.reset({ key });
+		} catch (err) {
+			console.error("consumables.reset failed", err);
+		} finally {
+			setBusyKey(null);
+		}
+	}, [cap]);
+	const items = slice?.items ?? [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
+		title: "Consumables",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gauge, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		bodyClassName: "p-3 overflow-y-auto",
+		children: items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-[11px] text-foreground-subtle italic leading-relaxed",
+			children: "No consumables reported."
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-col gap-2",
+			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableRow, {
+				item,
+				busy: busyKey === item.key,
+				canReset: available,
+				onReset: (key) => void onReset(key)
+			}, item.key))
+		})
+	});
+}
+//#endregion
+//#region src/composites/cap-settings/PtzPanel.tsx
+/**
+* PtzPanel — live pan/tilt/zoom controls for the `ptz` capability. A
+* cap-settings component (ui-library), mounted as a cap-contributed
+* top-level device-detail tab via the cap-UI contribution mechanism
+* (the `ptz` cap declares `ui: { tab: 'ptz', kind: 'static', ... }`).
+*
+* Consolidates the former admin-ui `PTZPanelContent`: `usePTZ` drives
+* the controls, `PTZOverlay` renders them (`mode='panel'`), and an
+* Autofocus toggle is shown only when `getOptions().hasAutofocus`.
+* Autotrack is its own cap-UI contribution (`ptz-autotrack`), mounted
+* independently by the contribution mechanism — not nested here.
+*/
+/** Autofocus toggle — only mounted when `hasAutofocus`. Reads the cap's
+*  `getStatus().autofocus` and drives `setAutofocus`. */
+function AutofocusToggle({ deviceId }) {
+	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
+	const [enabled, setEnabled] = (0, react$1.useState)(null);
+	const [busy, setBusy] = (0, react$1.useState)(false);
+	(0, react$1.useEffect)(() => {
+		if (!dev) return void 0;
+		let cancelled = false;
+		(async () => {
+			try {
+				const status = await dev.ptz?.getStatus({});
+				if (cancelled || !status) return;
+				setEnabled(status.autofocus);
+			} catch {}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [dev]);
+	const toggle = (0, react$1.useCallback)(async () => {
+		if (!dev?.ptz || enabled === null) return;
+		setBusy(true);
+		try {
+			const next = !enabled;
+			await dev.ptz.setAutofocus({ enabled: next });
+			setEnabled(next);
+		} catch (err) {
+			console.error("ptz.setAutofocus failed", err);
+		} finally {
+			setBusy(false);
+		}
+	}, [dev, enabled]);
+	if (enabled === null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between border-t border-border/40 mt-2 pt-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10.5px] font-semibold text-foreground",
+			children: "Autofocus"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: () => void toggle(),
+			disabled: busy,
+			"aria-pressed": enabled,
+			className: `flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${enabled ? "bg-success/15 text-success hover:bg-success/25" : "bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground"} disabled:opacity-50`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-1.5 rounded-full ${enabled ? "bg-success" : "bg-foreground-subtle/40"}` }), enabled ? "On" : "Off"]
+		})]
+	});
+}
+function PtzPanel({ deviceId }) {
+	const system = useSystem();
+	const ready = Number.isFinite(deviceId);
+	const controls = usePTZ(system.trpcClient, ready ? deviceId : 0, { enabled: ready });
+	if (!ready) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center h-full text-[11px] text-foreground-subtle italic",
+		children: [
+			"Device #",
+			deviceId,
+			" not loaded."
+		]
+	});
+	const hasAutofocus = controls.options?.hasAutofocus === true;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WidgetPanel, {
+		title: "PTZ",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Move, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		bodyClassName: "p-3 flex flex-col overflow-y-auto",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PTZOverlay, {
+			controls,
+			mode: "panel"
+		}), hasAutofocus && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutofocusToggle, { deviceId })]
+	});
+}
+//#endregion
 //#region src/composites/cap-settings/recording-config-form.ts
 /** Every weekday — the `days` of a band that covers the whole week. */
 var ALL_WEEKDAYS = [
@@ -37507,12 +37527,17 @@ function RecordingPanel({ deviceId }) {
 		})]
 	});
 }
+//#endregion
+//#region src/widgets/host-widgets.ts
+var MotionZonesSettingsLazy = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings })));
+var SceneMonitorEditorLazy = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./SceneMonitorEditor-BXwXLLch.cjs")).then((m) => ({ default: m.SceneMonitorEditor })));
 /** Host widgets — ui-library React components embeddable as a
 *  `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": MotionZonesSettingsLazy,
 	"host/privacy-mask-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-Oo7gyB4E.cjs")).then((m) => ({ default: m.PrivacyMaskSettings }))),
+	"host/scene-monitor-editor": SceneMonitorEditorLazy,
 	"host/ptz-panel": PtzPanel,
 	"host/consumables-panel": ConsumablesPanel,
 	"host/ptz-autotrack": AutotrackSection,
@@ -48562,6 +48587,7 @@ exports.COMMIT_DEDUPE_TOLERANCE_MS = COMMIT_DEDUPE_TOLERANCE_MS;
 exports.COMMIT_DEDUPE_WINDOW_MS = COMMIT_DEDUPE_WINDOW_MS;
 exports.CONTROL_CAP_NAMES = CONTROL_CAP_NAMES;
 exports.CONTROL_FILLS = CONTROL_FILLS;
+exports.Camera = Camera;
 exports.CameraStreamPlayer = CameraStreamPlayer;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
@@ -48713,6 +48739,7 @@ exports.RadialGauge = RadialGauge;
 exports.RecordedPlaybackProvider = RecordedPlaybackProvider;
 exports.RecordingPanel = RecordingPanel;
 exports.ResponseLog = ResponseLog;
+exports.RotateCcw = RotateCcw;
 exports.SECTION_BODY = SECTION_BODY;
 exports.SECTION_CARD = SECTION_CARD;
 exports.SECTION_HEADER = SECTION_HEADER;
@@ -49193,12 +49220,14 @@ exports.useDeviceProxy = useDeviceProxy;
 exports.useDeviceProxy$1 = useDeviceProxy;
 exports.useDeviceSnapshot = useDeviceSnapshot;
 exports.useDeviceSnapshotImage = useDeviceSnapshotImage;
+exports.useDeviceSnapshotImage$1 = useDeviceSnapshotImage;
 exports.useDeviceState = useDeviceState;
 exports.useDeviceStateGetAllSnapshots = useDeviceStateGetAllSnapshots;
 exports.useDeviceStateGetCapSlice = useDeviceStateGetCapSlice;
 exports.useDeviceStateGetSnapshot = useDeviceStateGetSnapshot;
 exports.useDeviceStateSetCapSlice = useDeviceStateSetCapSlice;
 exports.useDeviceStateSlice = useDeviceStateSlice;
+exports.useDeviceStateSlice$1 = useDeviceStateSlice;
 exports.useDeviceStatusGetStatus = useDeviceStatusGetStatus;
 exports.useDeviceWebrtc = useDeviceWebrtc;
 exports.useDevices = useDevices;