@camstack/ui-library 1.2.189 → 1.2.191

package/dist/index.cjs

@@ -1191,6 +1191,30 @@ var CircleX = createLucideIcon("circle-x", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Clapperboard = createLucideIcon("clapperboard", [
+	["path", {
+		d: "m12.296 3.464 3.02 3.956",
+		key: "qash78"
+	}],
+	["path", {
+		d: "M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z",
+		key: "1h7j8b"
+	}],
+	["path", {
+		d: "M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
+		key: "4lm6w1"
+	}],
+	["path", {
+		d: "m6.18 5.276 3.1 3.899",
+		key: "zjj9t3"
+	}]
+]);
+/**
+* @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 Clock = createLucideIcon("clock", [["circle", {
 	cx: "12",
 	cy: "12",
@@ -7183,6 +7207,8 @@ var useValveGetStatus = trpc.valve.getStatus.useQuery;
 var useVibrationGetStatus = trpc.vibration.getStatus.useQuery;
 /** Generated alias around `trpc.videoclips.listClips.useQuery`. */
 var useVideoclipsListClips = trpc.videoclips.listClips.useQuery;
+/** Generated alias around `trpc.videoclips.listSources.useQuery`. */
+var useVideoclipsListSources = trpc.videoclips.listSources.useQuery;
 /** Generated alias around `trpc.videoclips.getClipPlayback.useQuery`. */
 var useVideoclipsGetClipPlayback = trpc.videoclips.getClipPlayback.useQuery;
 /** Generated alias around `trpc.waterHeater.setTargetTemp.useMutation`. */
@@ -17573,396 +17599,2098 @@ function ConsumablesPanel({ deviceId }) {
 	});
 }
 //#endregion
-//#region src/hooks/use-navigation.ts
+//#region src/hooks/use-capability-presence.ts
 /**
-* useNavigation — drive a `navigation` robot camera from the UI.
+* Classify a settled registry answer.
 *
-* The cap's `move` is MOMENTARY: fluid driving is the UI sending a nudge at
-* 1 Hz while a direction is held and ONE `stop` on release, exactly like the
-* robot app's joystick. This hook owns that cadence (`startDrive` /
-* `stopDrive`); the provider forwards each nudge to a single drive write.
+* `null` is "no such capability". A row with an empty `providers` list is a
+* capability that is DECLARED but that no addon supplies — indistinguishable
+* to an operator from not having it, and the panel behind it would have
+* nothing to call. Both are `absent`.
 *
-* Everything else is a plain call plus the data the panel renders from:
-* `features` (which primitives are on), `actions` (the enabled dictionary)
-* and the live `status` slice off the device proxy.
+* Exported for the unit test: the mapping is the whole decision, and it is
+* worth pinning without a React tree around it.
 */
-/** The cadence the robot app drives at while a direction is held. */
-var NAVIGATION_DRIVE_INTERVAL_MS = 1e3;
-var DIRECTION_VECTORS$1 = {
-	forward: {
-		pan: 0,
-		tilt: 1
-	},
-	left: {
-		pan: -1,
-		tilt: 0
-	},
-	right: {
-		pan: 1,
-		tilt: 0
-	},
-	spin: {
-		pan: 0,
-		tilt: -1
-	}
-};
-function isAbsentProvider$1(err) {
-	const message = err instanceof Error ? err.message : String(err);
-	return /not available|no provider|NOT_FOUND|PRECONDITION/i.test(message);
+function classifyCapability(row) {
+	if (row === null) return "absent";
+	return row.providers.length > 0 ? "present" : "absent";
 }
-function useNavigation(trpc, deviceId, hookOptions) {
-	const enabled = hookOptions?.enabled ?? true;
-	const nav = useDeviceProxy(trpc, enabled ? deviceId : null)?.navigation;
-	const status = useDeviceState(trpc, enabled ? deviceId : null, (s) => s.navigation);
-	const [features, setFeatures] = (0, react$1.useState)(null);
-	const [actions, setActions] = (0, react$1.useState)([]);
-	const [busy, setBusy] = (0, react$1.useState)(false);
-	const [error, setError] = (0, react$1.useState)(null);
-	const [driving, setDriving] = (0, react$1.useState)(null);
-	const driveTimer = (0, react$1.useRef)(null);
-	(0, react$1.useEffect)(() => {
-		if (!enabled || !nav) return;
-		let cancelled = false;
-		(async () => {
-			try {
-				const [nextFeatures, nextActions] = await Promise.all([nav.getFeatures({}), nav.listActions({})]);
-				if (cancelled) return;
-				setFeatures(nextFeatures);
-				setActions(nextActions);
-			} catch (err) {
-				if (cancelled || isAbsentProvider$1(err)) return;
-				setError(err instanceof Error ? err.message : String(err));
-			}
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [nav, enabled]);
-	const wrap = (0, react$1.useCallback)(async (fn) => {
-		if (!enabled || !nav) return;
-		setError(null);
-		setBusy(true);
-		try {
-			await fn();
-		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
-		} finally {
-			setBusy(false);
-		}
-	}, [enabled, nav]);
-	const clearTimer = (0, react$1.useCallback)(() => {
-		if (driveTimer.current !== null) {
-			clearInterval(driveTimer.current);
-			driveTimer.current = null;
-		}
-	}, []);
-	const stopDrive = (0, react$1.useCallback)(async () => {
-		clearTimer();
-		setDriving(null);
-		if (!nav) return;
-		await wrap(() => nav.stop({}));
-	}, [
-		clearTimer,
-		nav,
-		wrap
-	]);
-	const startDrive = (0, react$1.useCallback)((direction) => {
-		if (!nav) return;
-		clearTimer();
-		setDriving(direction);
-		const vector = DIRECTION_VECTORS$1[direction];
-		const nudge = () => {
-			nav.move({
-				pan: vector.pan,
-				tilt: vector.tilt
-			}).catch((err) => {
-				setError(err instanceof Error ? err.message : String(err));
-			});
-		};
-		nudge();
-		driveTimer.current = setInterval(nudge, NAVIGATION_DRIVE_INTERVAL_MS);
-	}, [clearTimer, nav]);
-	(0, react$1.useEffect)(() => {
-		return () => {
-			if (driveTimer.current !== null) {
-				clearInterval(driveTimer.current);
-				driveTimer.current = null;
-				nav?.stop({}).catch(() => void 0);
-			}
-		};
-	}, [nav]);
-	const runAction = (0, react$1.useCallback)((actionId) => wrap(async () => nav?.runAction({ actionId })), [nav, wrap]);
-	const playSound = (0, react$1.useCallback)((soundId) => wrap(async () => nav?.playSound({ soundId })), [nav, wrap]);
-	const setLightOn = (0, react$1.useCallback)((on) => wrap(async () => nav?.setLightOn({ on })), [nav, wrap]);
-	const setLightMode = (0, react$1.useCallback)((mode, level) => wrap(async () => nav?.setLightMode(level === void 0 ? { mode } : {
-		mode,
-		level
-	})), [nav, wrap]);
-	const setLightLevel = (0, react$1.useCallback)((level) => wrap(async () => nav?.setLightLevel({ level })), [nav, wrap]);
-	return {
-		features,
-		actions,
-		status: status ?? null,
-		startDrive,
-		stopDrive,
-		runAction,
-		playSound,
-		setLightOn,
-		setLightMode,
-		setLightLevel,
-		busy,
-		error,
-		driving
-	};
+/**
+* Ask the hub's capability registry whether `capabilityName` has a provider.
+*
+* The four states map straight off React Query's `status`, so there is no
+* place for a nullish fallback to turn "no answer" into "no providers" — the
+* exact collapse this hook exists to make unrepresentable.
+*/
+function useCapabilityPresence(capabilityName) {
+	const query = trpc.capabilities.getCapability.useQuery({ name: capabilityName });
+	if (query.status === "pending") return "pending";
+	if (query.status === "error") return "unknown";
+	return classifyCapability(query.data);
 }
 //#endregion
-//#region src/composites/cap-settings/NavigationPanel.tsx
-/** The cap's icon HINTS are lucide names; unknown hints fall back to a spark. */
-var ICONS = {
-	play: Play,
-	pause: Pause,
-	hand: Hand,
-	home: House,
-	bell: Bell,
-	crosshair: Crosshair,
-	"paw-print": PawPrint,
-	footprints: Footprints,
-	droplets: Droplets,
-	"trash-2": Trash2,
-	flashlight: Flashlight,
-	"flashlight-off": FlashlightOff,
-	cat: Cat,
-	dog: Dog,
-	clock: Clock
+//#region ../../node_modules/class-variance-authority/dist/index.mjs
+/**
+* Copyright 2022 Joe Bell. All rights reserved.
+*
+* This file is licensed to you under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with the
+* License. You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations under
+* the License.
+*/ var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var cx = clsx;
+var cva = (base, config) => (props) => {
+	var _config_compoundVariants;
+	if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+	const { variants, defaultVariants } = config;
+	const getVariantClassNames = Object.keys(variants).map((variant) => {
+		const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+		const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+		if (variantProp === null) return null;
+		const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+		return variants[variant][variantKey];
+	});
+	const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+		let [key, value] = param;
+		if (value === void 0) return acc;
+		acc[key] = value;
+		return acc;
+	}, {});
+	return cx(base, getVariantClassNames, config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+		let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+		return Object.entries(compoundVariantOptions).every((param) => {
+			let [key, value] = param;
+			return Array.isArray(value) ? value.includes({
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key]) : {
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key] === value;
+		}) ? [
+			...acc,
+			cvClass,
+			cvClassName
+		] : acc;
+	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
-function iconFor(hint) {
-	return ICONS[hint] ?? Sparkles;
-}
-var DRIVE_BUTTONS = [
-	{
-		direction: "left",
-		label: "Turn left",
-		Icon: RotateCcw
-	},
-	{
-		direction: "forward",
-		label: "Forward",
-		Icon: ArrowUp
-	},
-	{
-		direction: "right",
-		label: "Turn right",
-		Icon: RotateCw
+//#endregion
+//#region src/primitives/badge.tsx
+var badgeVariants = cva("inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5", {
+	variants: {
+		variant: {
+			default: "bg-surface-hover text-foreground",
+			success: "bg-success/15 text-success",
+			warning: "bg-warning/15 text-warning",
+			danger: "bg-danger/15 text-danger",
+			info: "bg-info/15 text-info"
+		},
+		styleVariant: {
+			solid: "",
+			outline: "border bg-transparent"
+		}
 	},
-	{
-		direction: "spin",
-		label: "Turn around",
-		Icon: Undo2
+	defaultVariants: {
+		variant: "default",
+		styleVariant: "solid"
 	}
-];
-var BUTTON = "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground disabled:opacity-50";
-var BUTTON_ON = "bg-success/15 text-success hover:bg-success/25";
-function EntryButton({ entry, disabled, onRun }) {
-	const Glyph = iconFor(entry.icon);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		className: BUTTON,
-		disabled,
-		onClick: () => onRun(entry),
-		title: entry.label,
-		"aria-label": entry.label,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: entry.label })]
-	});
-}
-function NavigationPanel({ deviceId }) {
-	const system = useSystem();
-	const ready = Number.isFinite(deviceId);
-	const nav = useNavigation(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."
-		]
+});
+var Badge = (0, react$1.forwardRef)(({ className, variant, style, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		className: cn(badgeVariants({
+			variant,
+			styleVariant: style
+		}), className),
+		...props
 	});
-	const features = nav.features;
-	const actions = nav.actions.filter((entry) => entry.enabled && entry.kind === "action");
-	const sounds = nav.actions.filter((entry) => entry.enabled && entry.kind === "sound");
-	const status = nav.status;
-	const manual = status?.lightMode === "manual";
-	const run = (entry) => {
-		if (entry.kind === "sound") {
-			if (entry.soundId !== void 0) nav.playSound(entry.soundId);
-			return;
+});
+Badge.displayName = "Badge";
+//#endregion
+//#region src/primitives/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+			secondary: "bg-surface text-foreground hover:bg-surface-hover",
+			ghost: "hover:bg-surface-hover text-foreground-muted",
+			danger: "bg-danger text-white hover:bg-danger/90",
+			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
+		},
+		size: {
+			sm: "h-7 px-2.5 text-xs gap-1.5",
+			md: "h-8 px-3 text-sm gap-2",
+			lg: "h-9 px-4 text-sm gap-2"
 		}
-		nav.runAction(entry.id);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WidgetPanel, {
-		title: "Navigation",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
-		bodyClassName: "p-3 flex flex-col gap-3 overflow-y-auto",
-		children: [
-			status && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-1.5 text-[10px]",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "rounded-full bg-surface-elevated/60 px-2 py-0.5 text-foreground",
-						children: status.mode
-					}),
-					status.following && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "rounded-full bg-info/15 px-2 py-0.5 text-info",
-						children: "following"
-					}),
-					status.flash && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "rounded-full bg-warning/15 px-2 py-0.5 text-warning",
-						children: "light on"
-					})
-				]
-			}),
-			features?.move && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "flex flex-col gap-1.5",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-[10.5px] font-semibold text-foreground",
-						children: "Drive (hold)"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "grid grid-cols-4 gap-1.5",
-						children: DRIVE_BUTTONS.map(({ direction, label, Icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: cn(BUTTON, "justify-center select-none", nav.driving === direction && BUTTON_ON),
-							"aria-label": label,
-							title: label,
-							onPointerDown: () => nav.startDrive(direction),
-							onPointerUp: () => void nav.stopDrive(),
-							onPointerLeave: () => {
-								if (nav.driving === direction) nav.stopDrive();
-							},
-							onPointerCancel: () => void nav.stopDrive(),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
-						}, direction))
-					}),
-					features.stop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: cn(BUTTON, "justify-center"),
-						onClick: () => void nav.stopDrive(),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hand, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Stop" })]
-					})
-				]
-			}),
-			features?.runAction && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-[10.5px] font-semibold text-foreground",
-					children: "Actions"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-1.5",
-					children: actions.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
-						entry,
-						disabled: nav.busy,
-						onRun: run
-					}, entry.id))
-				})]
-			}),
-			features?.playSound && sounds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-[10.5px] font-semibold text-foreground",
-					children: "Sounds"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-1.5",
-					children: sounds.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
-						entry,
-						disabled: nav.busy,
-						onRun: run
-					}, entry.id))
-				})]
-			}),
-			features?.light && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "flex flex-col gap-1.5 border-t border-border/40 pt-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-[10.5px] font-semibold text-foreground",
-						children: "Fill light"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: cn(BUTTON, status?.flash && BUTTON_ON),
-						"aria-pressed": status?.flash === true,
-						disabled: nav.busy,
-						onClick: () => void nav.setLightOn(!(status?.flash === true)),
-						children: [status?.flash ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flashlight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlashlightOff, { className: "h-3.5 w-3.5" }), status?.flash ? "On" : "Off"]
-					})]
-				}), features.lightMode && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-							"aria-label": "Light mode",
-							className: "rounded-md bg-surface-elevated/40 px-2 py-1 text-[10px] text-foreground",
-							value: status?.lightMode ?? "auto",
-							disabled: nav.busy,
-							onChange: (event) => {
-								const mode = event.target.value === "manual" ? "manual" : "auto";
-								nav.setLightMode(mode, mode === "manual" ? status?.lightLevel : void 0);
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-								value: "auto",
-								children: "Auto"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-								value: "manual",
-								children: "Manual"
-							})]
-						}),
-						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "range",
-							"aria-label": "Light level",
-							className: "flex-1",
-							min: _camstack_types.NAVIGATION_LIGHT_LEVEL_MIN,
-							max: _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
-							step: 1,
-							value: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
-							disabled: nav.busy,
-							onChange: (event) => void nav.setLightLevel(Number(event.target.value))
-						}),
-						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-[10px] text-foreground-subtle w-8 text-right",
-							children: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX
-						})
-					]
-				})]
-			}),
-			nav.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-[10px] text-danger",
-				children: nav.error
-			})
-		]
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "sm"
+	}
+});
+var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
 	});
-}
+});
+Button.displayName = "Button";
 //#endregion
-//#region src/lib/cap-error.ts
+//#region src/primitives/select.tsx
 /**
-* Shared capability-error utilities for the admin UI.
-*
-* The primary export `isAbsentProvider` lets UI components distinguish
-* "this device doesn't have this cap" (expected — hide the widget) from
-* "something went wrong while calling a present cap" (unexpected — surface
-* the error to the operator).
-*
-* Detection strategy (two-tier):
+* A native `<select>` styled to match the rest of the field set.
 *
-*   1. **Typed reason** (preferred): tRPC's errorFormatter augments the
-*      error shape with `data.capRouteReason` when the server throws a
-*      CapRouteError. Read it from `err.data?.capRouteReason` to avoid
-*      brittle string matching.
+* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+* makes it match — and it is also what USED to make a disabled one a lie. A
+* browser greys a disabled control by rendering its own background and text
+* colour; all three of those are overridden here, so a `disabled` dropdown
+* looked exactly like a live one and simply ignored the click. That is the
+* whole of the "the language selector does not open" report of 2026-08-15:
+* the AI section's switch was off, every control under it was correctly inert,
+* and nothing on screen said so.
 *
-*   2. **Substring fallback** (transitional safety): older error paths
-*      that don't carry a typed reason still emit the human-readable
-*      message "provider not available". The fallback is ONLY engaged
-*      when `capRouteReason` is absent — future clean-up can drop it
-*      once every throw site has been migrated.
-*/
-/**
+* `disabled:` classes belong HERE and not on each call site: there are dozens
+* of `<Select disabled>` in this app and the one that gets forgotten is the one
+* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+*/
+var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+			ref,
+			disabled,
+			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			...props,
+			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+//#region src/primitives/skeleton.tsx
+var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
+		...props
+	});
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+//#region src/hooks/use-is-mobile.ts
+var MOBILE_QUERY = "(max-width: 767px)";
+/**
+* Mid breakpoint — below this width the sidebar collapses to an
+* icons-only rail to reclaim canvas space. Above it (and outside
+* mobile) the full sidebar renders. Threshold matches Tailwind `lg`
+* so sidebar fans out at the same point grids switch to multi-column.
+*/
+var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+/**
+* `matchMedia` is universal in browsers but absent in bare DOM environments.
+* These hooks are called from shared primitives (`DataTable` picks its narrow
+* layout with one), so throwing here takes down the whole page that merely
+* rendered a table. Where the capability is missing, report the desktop
+* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
+*/
+function matchQuery(query) {
+	if (typeof window.matchMedia !== "function") return null;
+	return window.matchMedia(query);
+}
+function subscribeQuery(query) {
+	return (callback) => {
+		const mql = matchQuery(query);
+		if (mql === null) return () => {};
+		mql.addEventListener("change", callback);
+		return () => mql.removeEventListener("change", callback);
+	};
+}
+function getSnapshot(query) {
+	return () => matchQuery(query)?.matches ?? false;
+}
+function getServerSnapshot() {
+	return false;
+}
+function useIsMobile() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MOBILE_QUERY), getSnapshot(MOBILE_QUERY), getServerSnapshot);
+}
+/**
+* True when the viewport is in the medium (`md`) Tailwind range —
+* 768px ≤ width < 1024px. Use to drive layouts that should pack denser
+* than full-desktop but more legibly than mobile (e.g. icons-only
+* sidebar rail, narrower stat tiles).
+*/
+function useIsMidWidth() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
+}
+//#endregion
+//#region src/composites/data-table-layout.ts
+/**
+* At this many columns and above, `auto` switches a narrow viewport to cards.
+* Three columns still fit a phone at a readable size; four do not.
+*/
+var CARD_MODE_MIN_COLUMNS = 4;
+function resolveTableLayout({ mode, columnCount, isNarrow }) {
+	if (!isNarrow) return "table";
+	if (mode === "scroll") return "table";
+	if (mode === "cards") return "cards";
+	if (columnCount === 0) return "table";
+	return columnCount >= 4 ? "cards" : "table";
+}
+//#endregion
+//#region src/lib/responsive.ts
+/**
+* Responsive design tokens — three-tier system.
+*
+* The admin-ui targets three width tiers; every component should pick
+* the right token from this file instead of hand-coding breakpoints.
+* Adopting the tokens uniformly is what makes the app feel consistent
+* across operator devices (mobile / tablet / desktop) and what unlocks
+* targeted tuning (e.g. shrink every label by 1px in one place).
+*
+* Tier definitions (Tailwind breakpoints):
+*
+*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
+*     Single column, tight padding, smallest text, icon-only buttons
+*     where labels can be inferred. The operator can still see every
+*     stat / action — no horizontal scroll, no clipped text. The user
+*     directive: "molta informazione in poco spazio quando la width è
+*     bassa."
+*
+*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
+*     2-column grids, side panels become visible, button labels return.
+*     Targets ~768px–1024px viewports — the most common operator sizes.
+*
+*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
+*     4-column grids, generous padding, full-width header text,
+*     side-by-side composite layouts. The operator has elbow room.
+*
+* Conventions:
+*   - **Always start from L1** — the bare class is always the compact
+*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
+*     desktop-first breakpoints; no max-width queries.
+*   - **Token strings are static** — kept as `as const` so callers can
+*     compose them via `cn()` / template literals without running a
+*     class generator at runtime.
+*   - **Pair the token with a comment** — the comment in the file
+*     names every breakpoint it crosses, so a reader can predict the
+*     layout without going to Tailwind docs.
+*/
+/** Container padding for a card-style section (header + body). */
+var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
+/** Header strip inside a card (between border-b lines). */
+var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
+/** Body padding for a card-style section. */
+var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
+/** Gap between cards in a vertical stack. */
+var STACK_GAP = "space-y-3 sm:space-y-4";
+/** Gap between cards in a grid (4 cells / row at lg). */
+var GRID_GAP = "gap-2 sm:gap-3";
+/** Row padding inside a divided list (e.g. InfoRow). */
+var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
+/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
+var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
+/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
+var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
+/** Side-by-side layout that stacks below md (canvas + side panel). */
+var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
+/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
+var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
+/**
+* The tier boundary at which a settings label/value row stops stacking.
+*
+* Below it (L1 — compact) the row is ONE column: label on its own line, value
+* on the next at full width. Above it the row is label-left / value-right as
+* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
+* value beside it; a phone has neither, and the failure mode is not "cramped"
+* but "the value is the part that gets cut" — the one thing the operator
+* opened the page to read.
+*/
+var SETTING_ROW_STACK_BREAKPOINT = "sm";
+/** Outer row: single column at L1, label/value columns from `sm` up. */
+var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
+/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
+var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
+/**
+* Value lane — the value text plus its trailing affordances (copy / reveal).
+* `w-full` at L1 so the value owns the whole row once the label is above it;
+* `sm:flex-1` makes it share the row again from `sm` up.
+*/
+var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
+/**
+* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
+* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
+* desktop form, where the row is wide enough for truncation to be a choice
+* rather than data loss.
+*/
+var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
+/** Section header label (uppercase tracking-wider). */
+var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
+/** Field label inside a row. */
+var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
+/** Sub-label / hint text. */
+var TEXT_HINT = "text-[10px] text-foreground-subtle";
+/** Primary value (a metric, badge, …). */
+var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
+/** Big metric value (StatCard). */
+var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
+/** Default compact button. */
+var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
+/** Primary compact button. */
+var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
+/** Danger compact button. */
+var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
+/** Warning compact button (e.g. cancel-drawing). */
+var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
+/** Compact text/select/number input. */
+var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
+/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
+var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
+var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
+var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
+//#endregion
+//#region src/composites/setting-row.tsx
+function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
+	const LabelTag = elements === "description" ? "dt" : "span";
+	const ValueTag = elements === "description" ? "dd" : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-setting-row": "",
+		className: cn(SETTING_ROW, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
+			"data-setting-row-label": "",
+			className: SETTING_ROW_LABEL,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
+			"data-setting-row-value": "",
+			className: SETTING_ROW_VALUE,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-setting-row-value-text": "",
+				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
+				children
+			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center gap-0.5",
+				children: actions
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/sort-header-button.tsx
+function SortHeaderButton({ label, active, dir, onSort }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: onSort,
+		className: "group/sort inline-flex items-center gap-0.5 hover:text-foreground transition-colors",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), active ? dir === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: cn("h-3 w-3 flex-shrink-0 opacity-0 transition-opacity", "group-hover/sort:opacity-30") })]
+	});
+}
+//#endregion
+//#region src/composites/table-sort.ts
+/**
+* The toggle rule, and the only copy of it.
+*
+* none → asc → desc → none, and a click on a DIFFERENT column starts that
+* column fresh at `asc`. `sameColumn` says whether the clicked column is the
+* one currently sorted; `currentDir` is its direction (`null` when nothing is
+* sorted). Returns the next direction, or `null` for "unsorted".
+*
+* Split out from {@link nextTableSort} so the device list — whose sort state
+* keys columns by `columnId`, not `columnKey` — can reuse the rule without a
+* cast and without a second copy of it.
+*/
+function nextSortDirection(sameColumn, currentDir) {
+	if (!sameColumn || currentDir === null) return "asc";
+	return currentDir === "asc" ? "desc" : null;
+}
+/**
+* Toggle a column's sort on header click: none → asc → desc → none.
+* Clicking a DIFFERENT column starts it fresh at `asc`.
+*/
+function nextTableSort(current, columnKey) {
+	const dir = nextSortDirection(current !== null && current.columnKey === columnKey, current === null ? null : current.dir);
+	return dir === null ? null : {
+		columnKey,
+		dir
+	};
+}
+/**
+* Ascending comparison of two cell values.
+*
+* Numbers compare numerically and strings compare with `localeCompare` — a
+* numeric column must never be ordered as text ("100" before "9"), and a text
+* column must respect the locale's collation. A mixed column (one row a
+* number, another a string) falls back to string comparison of both, which is
+* the only total order available; it is not a shape any caller should build on
+* purpose.
+*
+* `null` is NOT handled here — {@link sortRowsByColumn} pulls it out first,
+* because its placement is direction-independent and a comparator that is
+* multiplied by the direction factor cannot express that.
+*/
+function compareValues(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b));
+}
+/**
+* Return a NEW array of `rows` ordered by `sort`.
+*
+* `valueOf` is the column's `sortValue` — it is called once per row per
+* comparison, so it must be cheap (read a field, do not format a string).
+* `sort === null` ⇒ a fresh shallow copy in the incoming order.
+*/
+function sortRowsByColumn(rows, sort, valueOf) {
+	if (sort === null) return [...rows];
+	const factor = sort.dir === "asc" ? 1 : -1;
+	return rows.toSorted((a, b) => {
+		const av = valueOf(a);
+		const bv = valueOf(b);
+		if (av === null || bv === null) {
+			if (av === bv) return 0;
+			return av === null ? 1 : -1;
+		}
+		return factor * compareValues(av, bv);
+	});
+}
+/** Derive the `<th>` `aria-sort` for `columnKey` from the table's sort state. */
+function ariaSortForColumn(sort, columnKey) {
+	if (sort === null || sort.columnKey !== columnKey) return "none";
+	return sort.dir === "asc" ? "ascending" : "descending";
+}
+//#endregion
+//#region src/composites/data-table.tsx
+/**
+* DataTable — shared responsive table for admin pages.
+*
+* Recipes baked in:
+*   - `overflow-x-auto` wrapper so narrow viewports don't clip the
+*     right edge (the rounded border survives the scroll).
+*   - `min-w-[Npx]` on the inner table so columns don't squash below
+*     readable width before the scroll kicks in.
+*   - `whitespace-nowrap` on headers — column titles never wrap to
+*     two lines (`AUTO-KILL` was the regression that triggered this).
+*   - Themed `bg-surface` + `border-border` so contrast works in both
+*     light and dark themes.
+*
+* Column model: caller supplies `columns: DataColumn<T>[]` and
+* `rows: T[]`. Each column declares `header`, optional `align`,
+* optional `nowrap`, and a `render(row) => ReactNode` that produces
+* the cell content.
+*
+*   <DataTable
+*     columns={[
+*       { key: 'username', header: 'Username', render: (u) => u.username },
+*       { key: 'role',     header: 'Role',     render: (u) => <RoleBadge .../> },
+*       { key: 'actions',  header: '',         align: 'right', render: (u) => <Actions .../> },
+*     ]}
+*     rows={users}
+*     minWidthPx={560}
+*   />
+*
+* If finer header markup is needed, pass `headerRender` instead of
+* `header` (e.g. for a sortable click affordance).
+*
+* ── Narrow viewports ──────────────────────────────────────────────────────
+* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
+* scrolls the columns sideways INSIDE the table — the page body never moves
+* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
+* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
+* `auto` still applies the old column-count rule for a surface that wants it.
+* See `resolveTableLayout`.
+*
+* ── Scrolling the BODY, not the page ──────────────────────────────────────
+* `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
+* with the column header pinned. It is ONE prop, not two, because "this list
+* scrolls internally" and "its header stays visible" are the same decision: a
+* capped table whose header scrolls away is a list of unlabelled cells.
+*
+* Use it wherever the row count is open-ended (rules, targets, delivery
+* history) so the page keeps its own header, filters and actions in view while
+* the operator moves through the rows.
+*/
+/**
+* The default cap for an internally-scrolling table.
+*
+* `60vh` leaves the page header, its filters and its actions on screen at
+* every viewport while still showing ~10 rows — and it is a fraction, so it
+* does not need a breakpoint of its own.
+*/
+var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
+var ALIGN_CLASS = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
+	const isNarrow = useIsMobile();
+	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
+	const layout = resolveTableLayout({
+		mode: mobileMode,
+		columnCount: columns.length,
+		isNarrow
+	});
+	const scrolls = maxBodyHeight !== void 0;
+	const sortedColumn = (0, react$1.useMemo)(() => sort === null ? void 0 : columns.find((col) => col.key === sort.columnKey && col.sortValue !== void 0), [columns, sort]);
+	const sortValue = sortedColumn?.sortValue;
+	const displayRows = (0, react$1.useMemo)(() => sortValue === void 0 ? rows : sortRowsByColumn(rows, sort, sortValue), [
+		rows,
+		sort,
+		sortValue
+	]);
+	const activeSort = sortedColumn === void 0 ? null : sort;
+	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
+		children: emptyMessage
+	});
+	if (rows.length === 0) return null;
+	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
+		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
+			row,
+			rowIndex,
+			columns,
+			bordered,
+			onRowClick,
+			rowClassName
+		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: [
+			"rounded-lg",
+			bordered ? "border border-border" : "",
+			"bg-surface overflow-x-auto",
+			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
+			style: { minWidth: `${minWidthPx}px` },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+				className: "bg-surface",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
+					const align = col.align ?? "left";
+					const nowrap = col.nowrap ?? true;
+					const sortable = col.sortValue !== void 0;
+					const isSorted = activeSort !== null && activeSort.columnKey === col.key;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						"aria-sort": sortable ? ariaSortForColumn(activeSort, col.key) : void 0,
+						title: sortable ? void 0 : col.notSortableReason,
+						className: [
+							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
+							scrolls ? "sticky top-0 z-10" : "",
+							ALIGN_CLASS[align],
+							nowrap ? "whitespace-nowrap" : "",
+							col.width ?? ""
+						].filter(Boolean).join(" "),
+						children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortHeaderButton, {
+							label: col.headerRender ? col.headerRender() : col.header,
+							active: isSorted,
+							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
+							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
+						}) : col.headerRender ? col.headerRender() : col.header
+					}, col.key);
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
+				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
+				const extra = rowClassName?.(row, rowIndex) ?? "";
+				const interactive = onRowClick !== void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
+					children: columns.map((col) => {
+						const align = col.align ?? "left";
+						const nowrap = col.nowrap ?? true;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: [
+								"px-3 py-2 text-foreground border-b border-border",
+								ALIGN_CLASS[align],
+								nowrap ? "whitespace-nowrap" : ""
+							].filter(Boolean).join(" "),
+							children: col.render(row, rowIndex)
+						}, col.key);
+					})
+				}, key);
+			}) })]
+		})
+	});
+}
+/**
+* One row as a card. Columns that carry a plain-text `header` become labelled
+* `SettingRow`s — the label is the column title and the value gets the full
+* card width. Columns with no text header (an actions column, a
+* `headerRender`-only column) have no label to show, so they render as a
+* full-width strip at the foot of the card.
+*/
+function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
+	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
+	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
+	const interactive = onRowClick !== void 0;
+	const extra = rowClassName?.(row, rowIndex) ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-data-table-card": "",
+		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+		className: [
+			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
+			bordered ? "border border-border" : "",
+			interactive ? "cursor-pointer hover:bg-primary/5" : "",
+			extra
+		].filter(Boolean).join(" "),
+		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+			label: col.header,
+			children: col.render(row, rowIndex)
+		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
+			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
+		})]
+	});
+}
+//#endregion
+//#region src/composites/device-list/pagination.tsx
+var NEIGHBORS = 2;
+function computePageButtons(currentPage, totalPages) {
+	if (totalPages <= 1) return [{
+		kind: "page",
+		n: 1
+	}];
+	if (totalPages <= 7) {
+		const all = [];
+		for (let i = 1; i <= totalPages; i++) all.push({
+			kind: "page",
+			n: i
+		});
+		return all;
+	}
+	const result = [];
+	const leftBound = Math.max(2, currentPage - NEIGHBORS);
+	const rightBound = Math.min(totalPages - 1, currentPage + NEIGHBORS);
+	result.push({
+		kind: "page",
+		n: 1
+	});
+	if (leftBound > 2) result.push({
+		kind: "ellipsis",
+		side: "left"
+	});
+	for (let i = leftBound; i <= rightBound; i++) result.push({
+		kind: "page",
+		n: i
+	});
+	if (rightBound < totalPages - 1) result.push({
+		kind: "ellipsis",
+		side: "right"
+	});
+	result.push({
+		kind: "page",
+		n: totalPages
+	});
+	return result;
+}
+function Pagination({ currentPage, totalItems, pageSize, onPageChange, itemNoun = "devices" }) {
+	if (totalItems <= pageSize) return null;
+	const totalPages = Math.ceil(totalItems / pageSize);
+	const startIdx = (currentPage - 1) * pageSize + 1;
+	const endIdx = Math.min(currentPage * pageSize, totalItems);
+	const buttons = computePageButtons(currentPage, totalPages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between gap-4 flex-wrap pt-2 text-[11px] text-foreground-subtle",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+			"Showing ",
+			startIdx,
+			"–",
+			endIdx,
+			" of ",
+			totalItems,
+			" ",
+			itemNoun
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Previous page",
+					disabled: currentPage === 1,
+					onClick: () => onPageChange(currentPage - 1),
+					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { className: "h-3 w-3" })
+				}),
+				buttons.map((b, i) => {
+					if (b.kind === "ellipsis") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "px-1 text-foreground-subtle/60 select-none",
+						children: "…"
+					}, `e-${i}`);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(b.n),
+						className: cn("inline-flex items-center justify-center h-7 min-w-7 px-1.5 rounded border text-[10.5px] font-medium transition-colors", b.n === currentPage ? "border-primary/40 bg-primary/10 text-primary" : "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface-hover"),
+						children: b.n
+					}, `p-${b.n}`);
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Next page",
+					disabled: currentPage === totalPages,
+					onClick: () => onPageChange(currentPage + 1),
+					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3 w-3" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/empty-state.tsx
+function EmptyState({ icon: Icon, title, description, action, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col items-center justify-center gap-3 py-12", className),
+		children: [
+			Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: "h-12 w-12 text-foreground-subtle",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-1 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground-muted text-sm font-medium",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground-subtle text-xs max-w-xs",
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-1",
+				children: action
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/error-box.tsx
+var VARIANT_STYLES$1 = {
+	danger: {
+		box: "border-danger/40 bg-danger/10",
+		icon: "text-danger",
+		title: "text-danger",
+		message: "text-danger"
+	},
+	warning: {
+		box: "border-amber-500/40 bg-amber-500/10",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-700 dark:text-amber-300",
+		message: "text-amber-700 dark:text-amber-300"
+	}
+};
+function ErrorBox({ message, title, onRetry, action, variant = "danger", className }) {
+	const styles = VARIANT_STYLES$1[variant];
+	const Icon = variant === "warning" ? TriangleAlert : CircleAlert;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: cn("flex items-start gap-2.5 rounded border px-3 py-2.5", styles.box, className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: cn("h-4 w-4 mt-0.5 shrink-0", styles.icon),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: cn("text-xs font-semibold", styles.title),
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cn("text-xs break-words", styles.message, title ? "mt-0.5" : ""),
+					children: message
+				})]
+			}),
+			action ?? (onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: onRetry,
+				className: cn("shrink-0 inline-flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium", "border border-current/30 hover:bg-current/10 transition-colors", styles.message),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCw, {
+					className: "h-3 w-3",
+					"aria-hidden": "true"
+				}), "Retry"]
+			}))
+		]
+	});
+}
+//#endregion
+//#region src/contexts/vod-playback.tsx
+/**
+* VodPlayback — shared context coordinating recorded (VOD) playback between a
+* widget/section (the Recording panel) and the hero StreamPanel.
+*
+* A CONTROLLER (the Recording widget) calls `play({ url, label })`; the hero
+* StreamPanel CONSUMES `request` and switches into VOD mode (HLS playback
+* through the hub data-plane) instead of the live WebRTC stream. `clear()`
+* returns the hero to live.
+*
+* Built on `createSharedContext` (NOT a plain `createContext`) so it crosses
+* the Module-Federation boundary: an addon-shipped widget consuming
+* `useVodPlayback()` resolves the SAME provider instance the host mounted —
+* the same mechanism `player-overlays` / `zone-editing` use to let federated
+* widgets (zone-editor, privacy-mask) drive the live player. Consumers used
+* outside a provider get the inert default (no-op), so a StreamPanel mounted
+* on a page without the Recording widget stays live-only without crashing.
+*/
+var VodPlaybackContext = createSharedContext("camstack:vod-playback", {
+	request: null,
+	play: () => {},
+	clear: () => {}
+});
+function VodPlaybackProvider({ children }) {
+	const [request, setRequest] = (0, react$1.useState)(null);
+	const value = (0, react$1.useMemo)(() => ({
+		request,
+		play: (req) => setRequest(req),
+		clear: () => setRequest(null)
+	}), [request]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VodPlaybackContext.Provider, {
+		value,
+		children
+	});
+}
+/** @returns the VOD playback controller (inert no-op outside a provider). */
+function useVodPlayback() {
+	return (0, react$1.useContext)(VodPlaybackContext);
+}
+//#endregion
+//#region src/primitives/card.tsx
+var cardVariants = cva("rounded-lg p-3", {
+	variants: { variant: {
+		flat: "bg-surface",
+		bordered: "bg-surface border border-border"
+	} },
+	defaultVariants: { variant: "bordered" }
+});
+var Card = (0, react$1.forwardRef)(({ className, variant, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cn(cardVariants({ variant }), className),
+		...props
+	});
+});
+Card.displayName = "Card";
+//#endregion
+//#region src/composites/clips/ClipPanel.tsx
+/**
+* The selected clip — what it is, how it plays, and how it is saved.
+*
+* **No second player.** `getClipPlayback` answers `{ playbackUrl, format,
+* served }` and the panel hands it to the SAME hero the recordings timeline
+* drives: `vod.play({ url, format })` → `StreamPanel playbackUrl/playbackFormat`
+* → `HlsVideo`'s `mp4` branch (`video.src`, no hls.js). Building a clip player
+* here is the thing D549 decision 22 exists to refuse.
+*
+* **`format` travels.** An MP4 handed to hls.js is parsed as a manifest and
+* fails, so the format the provider named is forwarded verbatim and never
+* defaulted here.
+*
+* **`served` is shown.** A clip that holds only one twin answers with the one
+* it has, and the surface SAYS so — a missing main twin must never be served
+* silently as if it were the asked-for quality (D549 decision 15). Both ids
+* are already on the row, so changing quality re-asks the hub and never
+* re-searches the camera.
+*
+* **Nothing is appended to the URL.** The route is `access:'authenticated'`
+* and the session cookie authenticates it (D549 decision 22); the same URL is
+* the download.
+*/
+var PROFILES = [
+	"low",
+	"mid",
+	"high"
+];
+function ClipPanel({ deviceId, clip, profile, onProfileChange }) {
+	const vod = useVodPlayback();
+	const playback = useVideoclipsGetClipPlayback({
+		deviceId,
+		clipId: clip.id,
+		profile
+	});
+	const data = playback.data;
+	const label = `${new Date(clip.timeRange.startMs).toLocaleString()} · ${clip.source}`;
+	(0, react$1.useEffect)(() => {
+		if (data === void 0) return;
+		vod.play({
+			url: hubPath(data.playbackUrl),
+			...data.format === void 0 ? {} : { format: data.format },
+			label
+		});
+	}, [data, label]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
+		className: "space-y-2 text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "font-medium text-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mr-1 text-[10px] uppercase tracking-wide text-foreground-subtle",
+					children: "Quality"
+				}), PROFILES.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					variant: option === profile ? "primary" : "secondary",
+					"aria-pressed": option === profile,
+					onClick: () => onProfileChange(option),
+					children: option
+				}, option))]
+			}),
+			playback.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "status",
+					className: "text-xs text-foreground-subtle",
+					children: "Preparing the clip — the file is fetched and muxed once…"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-48" })]
+			}) : playback.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+				title: "This clip could not be prepared",
+				message: playback.error?.message ?? "no reason given"
+			}) : data === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [data.served === void 0 || data.served === profile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+					variant: "warning",
+					message: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						"Served the ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: data.served }),
+						" stream — this clip has no ",
+						profile,
+						" ",
+						"twin."
+					] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+					href: hubPath(data.playbackUrl),
+					download: true,
+					className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:underline",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Download, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}), "Download this clip"]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/clips/clip-tile-media.ts
+/**
+* Why no still exists, in words. Keyed by the provider's own vocabulary so a
+* reason this table does not know still reaches the operator verbatim.
+*/
+var REFUSAL_TEXT = {
+	sleeping: "The camera is asleep — a still would cost a wake",
+	"camera-refused": "The camera refused the still request",
+	"no-keyframe": "No decodable frame inside this window",
+	unsupported: "This source cannot produce stills",
+	"queue-full": "The camera is busy — its still queue is full",
+	"no-catalog-row": "This clip is no longer in the catalog"
+};
+function refusal(reason) {
+	return {
+		kind: "unavailable",
+		reason,
+		text: REFUSAL_TEXT[reason] ?? `Refused: ${reason}`
+	};
+}
+/** What to draw for one clip's tile. */
+function resolveTileMedia(clip) {
+	if (clip.thumbnail !== void 0) return {
+		kind: "vouched",
+		url: clip.thumbnail
+	};
+	if (clip.thumbnailUnavailable !== void 0) return refusal(clip.thumbnailUnavailable.reason);
+	if (clip.thumbnailMint !== void 0) return {
+		kind: "mint",
+		url: clip.thumbnailMint
+	};
+	return {
+		kind: "none",
+		text: "This clip carries no still and offered none"
+	};
+}
+/**
+* A mint that answered 204 — latch its `x-camstack-reason` to this instant.
+*
+* The refusal is about NOW (a full queue, a sleeping camera), so it replaces
+* the offer for as long as the tile is mounted and is not retried behind the
+* operator's back. An unknown reason is shown raw rather than dropped: a
+* firmware inventing a refusal must not become a blank tile.
+*/
+function latchMintRefusal(reason) {
+	return refusal(reason);
+}
+//#endregion
+//#region src/composites/clips/clip-thumbnail-fetch.ts
+/**
+* Asking a `thumbnailMint` route for a still — and hearing its refusal.
+*
+* The route answers **200** with a JPEG or **204** with the reason in
+* `x-camstack-reason` (`queue-full`, `sleeping`, `camera-refused`,
+* `no-keyframe`, `no-catalog-row`). An `<img src>` cannot read that header:
+* a 204 fires `onerror` with nothing to say, turning a named refusal into an
+* anonymous broken tile. So a mint goes through `fetch`.
+*
+* **Nothing is appended to the URL.** Both data-plane routes are registered
+* `access: 'authenticated'` and the hub's `/addon/<id>/<prefix>` proxy takes
+* the session cookie the admin UI sets at login, so the URL is never a
+* credential (D549 decision 22) — it may sit in history or a `Referer` and
+* open nothing.
+*
+* The refusal is about NOW and is LATCHED by the caller: a camera that just
+* said "busy" is not asked again behind the operator's back.
+*/
+/**
+* Ask a mint route for one still.
+*
+* Never rejects: a thrown fetch is a refusal like any other, because a tile
+* that throws is a tile that renders nothing and says nothing — the exact
+* failure this module exists to prevent.
+*/
+async function fetchMintedThumbnail(url, fetcher) {
+	let response;
+	try {
+		response = await fetcher(url, { credentials: "same-origin" });
+	} catch (err) {
+		return latchMintRefusal(err instanceof Error ? err.message : String(err));
+	}
+	if (response.status === 204) return latchMintRefusal(response.headers.get("x-camstack-reason") ?? "no reason given");
+	if (!response.ok) return latchMintRefusal(`HTTP ${String(response.status)}`);
+	try {
+		return {
+			kind: "image",
+			blob: await response.blob()
+		};
+	} catch (err) {
+		return latchMintRefusal(err instanceof Error ? err.message : String(err));
+	}
+}
+//#endregion
+//#region src/composites/clips/ClipTile.tsx
+/**
+* One clip, as a tile.
+*
+* The picture is resolved by `resolveTileMedia` — vouched JPEG, an offer, or
+* the reason there is none (D549 decision 5). An offer is fetched rather than
+* dropped into an `<img src>`, because the route's **204 + x-camstack-reason**
+* is invisible to an `<img>`: it fires `onerror` with nothing to say. The
+* refusal is LATCHED for the life of the tile and never retried behind the
+* operator's back.
+*
+* The row also carries what the camera itself said: its native types, the
+* behaviours beside the class, which storages hold it, and — for a row that
+* is an EVENT sitting inside no file — `playable: false` with its reason
+* (measured: 1 of 29 hub events on 3628). Such a row is SHOWN, never dropped
+* and never offered as playable-then-failing (D549 decision 19).
+*
+* The CHROME is the library's: a `Card` for the tile, `Badge` for every label
+* the camera gave it, `Skeleton` while a mint is in flight. Only the ladder
+* above is this file's own, because only it is a decision.
+*/
+function clockOf(ms) {
+	return new Date(ms).toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+/**
+* Ask a mint route once, and LATCH whatever it says.
+*
+* The offer is memoised on the three fields it is derived from, not rebuilt
+* per render: `resolveTileMedia` returns a fresh object every call, and an
+* effect keyed on that object re-runs on every commit — which, because the
+* effect sets state, is an infinite render loop. It was one here, and it hung
+* the suite rather than failing it.
+*
+* The refusal is latched for the life of the tile: a camera that just said
+* "busy" is not asked again behind the operator's back (D549 decision 5).
+*/
+function useMintedStill(clip) {
+	const offered = (0, react$1.useMemo)(() => resolveTileMedia(clip), [
+		clip.thumbnail,
+		clip.thumbnailMint,
+		clip.thumbnailUnavailable?.reason
+	]);
+	const [latched, setLatched] = (0, react$1.useState)(null);
+	const mintUrl = offered.kind === "mint" ? offered.url : null;
+	(0, react$1.useEffect)(() => {
+		setLatched(null);
+		if (mintUrl === null || typeof fetch !== "function") return void 0;
+		let objectUrl = null;
+		let cancelled = false;
+		(async () => {
+			const answer = await fetchMintedThumbnail(hubPath(mintUrl), fetch);
+			if (cancelled) return;
+			if (answer.kind === "image") {
+				objectUrl = URL.createObjectURL(answer.blob);
+				setLatched({
+					kind: "vouched",
+					url: objectUrl
+				});
+				return;
+			}
+			setLatched(answer);
+		})();
+		return () => {
+			cancelled = true;
+			if (objectUrl !== null) URL.revokeObjectURL(objectUrl);
+		};
+	}, [mintUrl]);
+	return latched ?? offered;
+}
+function ClipTile({ clip, selected, onSelect }) {
+	const media = useMintedStill(clip);
+	const playable = clip.playable !== false;
+	const labels = [...clip.labels ?? [], ...clip.behaviours ?? []];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: () => onSelect(clip),
+		disabled: !playable,
+		"aria-current": selected ? "true" : void 0,
+		className: "block w-full text-left disabled:cursor-not-allowed",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
+			className: `flex gap-3 transition-colors ${selected ? "border-primary" : ""} ${playable ? "hover:bg-surface-hover" : "opacity-70"}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex h-16 w-28 shrink-0 items-center justify-center overflow-hidden rounded bg-surface-hover text-[10px] text-foreground-subtle",
+				children: media.kind === "vouched" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: media.url,
+					alt: "",
+					className: "h-full w-full object-cover"
+				}) : media.kind === "mint" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-full w-full rounded-none" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "px-1 text-center leading-tight",
+					children: media.text
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1 space-y-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-sm font-medium text-foreground",
+						children: clockOf(clip.timeRange.startMs)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-[10px] text-foreground-subtle",
+						children: clip.source
+					}),
+					labels.length === 0 && clip.nativeTypes === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap gap-1",
+						children: [labels.map((label) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							variant: "info",
+							children: label
+						}, `label:${label}`)), (clip.nativeTypes ?? []).map((native) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							style: "outline",
+							children: native
+						}, `native:${native}`))]
+					}),
+					playable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-[11px] text-warning",
+						children: ["Not playable — ", clip.unplayableReason ?? "the source gave no reason"]
+					})
+				]
+			})]
+		})
+	}) });
+}
+//#endregion
+//#region src/composites/clips/clip-day-window.ts
+function pad2(value) {
+	return value < 10 ? `0${String(value)}` : String(value);
+}
+/** Parse `YYYY-MM-DD` into its local-midnight `Date`. */
+function startOfDay(dayId) {
+	const [year, month, day] = dayId.split("-").map((part) => Number(part));
+	return new Date(year ?? 1970, (month ?? 1) - 1, day ?? 1, 0, 0, 0, 0);
+}
+/** The LOCAL calendar day an instant falls in, as `YYYY-MM-DD`. */
+function toDayId(instant) {
+	return `${String(instant.getFullYear())}-${pad2(instant.getMonth() + 1)}-${pad2(instant.getDate())}`;
+}
+/** The half-open local-wall-clock window of one day. */
+function dayWindow$1(dayId) {
+	const start = startOfDay(dayId);
+	const end = startOfDay(dayId);
+	end.setDate(end.getDate() + 1);
+	return {
+		since: start.getTime(),
+		until: end.getTime()
+	};
+}
+/** Walk `days` calendar days from `dayId` — DST-safe, because `Date` does it. */
+function shiftDay(dayId, days) {
+	const moved = startOfDay(dayId);
+	moved.setDate(moved.getDate() + days);
+	return toDayId(moved);
+}
+/**
+* The day, spelled out for the header.
+*
+* An empty list has to say WHICH day it is empty for — "no clips" with no date
+* beside it is the ambiguity this surface exists to remove — so this label is
+* rendered next to every state, not only the populated one.
+*/
+function formatDayLabel(dayId) {
+	return startOfDay(dayId).toLocaleDateString(void 0, {
+		weekday: "short",
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	});
+}
+//#endregion
+//#region src/composites/clips/clip-source-state.ts
+var STATE_COPY = {
+	ok: {
+		headline: "Answering",
+		tone: "ok",
+		answered: true
+	},
+	sleeping: {
+		headline: "Asleep — showing the catalog read while it was awake",
+		tone: "warn",
+		answered: true
+	},
+	unreachable: {
+		headline: "Could not be reached — its clips are missing from this list",
+		tone: "error",
+		answered: false
+	},
+	"no-storage": {
+		headline: "No storage card — this camera keeps nothing of its own",
+		tone: "warn",
+		answered: false
+	},
+	"index-empty": {
+		headline: "The camera's calendar marks these days, and its own index lists nothing",
+		tone: "warn",
+		answered: false
+	}
+};
+/** Turn one source row into the line the picker and the list show. */
+function describeSource(source) {
+	const copy = STATE_COPY[source.availability.state];
+	return {
+		source: source.source,
+		label: source.label,
+		headline: copy.headline,
+		detail: source.availability.reason ?? null,
+		tone: copy.tone,
+		answered: copy.answered
+	};
+}
+var MINUTE_MS$1 = 6e4;
+var HOUR_MS$1 = 36e5;
+var DAY_MS$2 = 864e5;
+/**
+* How old a source's catalog is, or null when it did not say.
+*
+* Null is NOT "now". A source that omits `catalogAsOf` was read live and has
+* no age to show; inventing "just now" for a source that never told us would
+* be the same lie as drawing a cached list as current (D549 decision 13).
+*/
+function formatCatalogAge(catalogAsOf, now) {
+	if (catalogAsOf === void 0) return null;
+	const age = Math.max(0, now - catalogAsOf);
+	if (age < MINUTE_MS$1) return "under a minute ago";
+	if (age < HOUR_MS$1) return `${String(Math.floor(age / MINUTE_MS$1))} min ago`;
+	if (age < DAY_MS$2) return `${String(Math.floor(age / HOUR_MS$1))} h ago`;
+	return `${String(Math.floor(age / DAY_MS$2))} d ago`;
+}
+//#endregion
+//#region src/composites/clips/clip-view-state.ts
+function resolveClipsView(input) {
+	if (input.clipsStatus === "error") return {
+		kind: "failed",
+		message: input.clipsError ?? "The clip list could not be read"
+	};
+	if (input.sourcesStatus === "error" && input.clips.length === 0) return {
+		kind: "failed",
+		message: input.sourcesError ?? "The source list could not be read"
+	};
+	if (input.clipsStatus === "pending" || input.sourcesStatus === "pending") return { kind: "loading" };
+	const notices = input.sources.map(describeSource);
+	const answered = notices.filter((notice) => notice.answered);
+	const silent = notices.filter((notice) => !notice.answered);
+	const clips = input.clips;
+	if (clips.length === 0) return {
+		kind: "empty",
+		dayId: input.dayId,
+		answered,
+		silent,
+		nobodyAnswered: answered.length === 0
+	};
+	return {
+		kind: "listed",
+		clips,
+		answered,
+		silent
+	};
+}
+//#endregion
+//#region src/composites/clips/ClipsSection.tsx
+/**
+* `host/clips-browser` — a camera's clips, from EVERY source it has, as the
+* LAST SECTION of the Recording tab.
+*
+* Mounted by the framework, not by hand: `videoclips.cap.ts` declares
+* `deviceConfig.ui = { kind:'widget', widgetId:'host/clips-browser',
+* tab:'recording', topTab:true, order:100 }` and
+* `deriveDeviceConfigContribution` emits the section (D14). `DeviceDetail.tsx`
+* is not edited — placement is data. Because the admin Recordings page renders
+* every `location:'top-tab'` + `tab:'recording'` section behind its camera
+* picker (`CameraRecordingSettingsSection`), the same declaration puts this on
+* both surfaces with no second wiring.
+*
+* ## Built from the library, not from scratch
+*
+* It shipped as its own top tab made of five bespoke components, and the
+* operator rejected both: *"La UI è orribile, non segue la nostra UI affatto …
+* Io in realtà utilizzerei la stessa tab recordings, lì abbiamo già tutto il
+* necessario, una nuova sezione alla fine per le clips dove possiamo
+* selezionare le source con un multiselect common, non componenti nuovi
+* anonimi."* So every piece of chrome here is a component this repo already
+* has: `Select`, `DataTable`, `EmptyState`, `ErrorBox`, `Pagination`, `Card`,
+* `Badge`, `Button`, `Skeleton`. What the chrome CARRIES is unchanged, and it
+* is the feature:
+*
+*  - **The source list is complete, always.** Every source the camera has,
+*    with its availability and the age of its catalog, whichever provider is
+*    being asked. A source never leaves the table.
+*  - **Nothing is deduped.** A clip held in two storages appears twice, once
+*    per source, and every tile says which (D549).
+*  - **Four states are tellable apart**: loading, empty-with-a-cause,
+*    degraded-per-source, and each silent source in its own words. Every one
+*    of them used to render as "no clips", which is the defect this whole line
+*    of work is about — a camera with no SD card (640) is not quiet, and a
+*    camera whose own index disagrees with its own calendar (618, 6–20
+*    September) is not quiet either.
+*
+* ## The picker WRITES nothing, and there is nothing for it to write
+*
+* A clip source is not enabled or disabled — it EXISTS, because of a
+* configuration that lives somewhere else. The operator put it exactly:
+* *"non è affatto necessario lo stato di abilitato o meno delle sources. Loro
+* vivono lì, ad esempio hksv c'è se la camera è esportata su homekit, reolink
+* la dà di suo così come il camstack."* HKSV is there if the camera is
+* exported to HomeKit; the Reolink source is there because Reolink is that
+* camera's provider; CamStack's is always there. None of that is a decision to
+* make in a clips list, so this surface offers no switch and writes no
+* authority (D557, amended). A directory-wide guard in
+* `clips-section-sources.test.tsx` keeps it that way.
+*
+* ## Why the picker is a SELECT and not a multiselect
+*
+* The operator asked for *"un multiselect common"* while `listClips` still
+* took `sources?: string[]`. It now takes ONE `provider` — *"il get videoclips
+* prendere un provider opzionale, di default va su camstack … l'utilizzatore è
+* uno solo"* — and a multi-pick control over a one-at-a-time argument offers a
+* sum the hub cannot answer. So the control is the shared single-choice one,
+* `Select`: the same component the Recordings page's own camera picker uses,
+* which is what *"segue la nostra UI"* means here. Absent means the camera's
+* BOUND provider, and the option that carries it is labelled with that
+* provider's own sources rather than the word "default".
+*
+* ## One provider is a fleet STATE
+*
+* `listSources` derives from `deviceManager.getBindings`, and today nothing
+* binds `provider-reolink` for `videoclips`, so a real camera answers with one
+* provider. The selector is then inert and SAYS why. An empty or silently
+* single-entry control would read as a defect; the binding store learning to
+* hold several providers for a collection cap is what changes this, and
+* nothing here needs to change with it.
+*/
+/** Newest-first, and bounded: a busy day on 592 lists 546 clips. */
+var CLIP_PAGE_LIMIT = 500;
+/** Tiles per page. The rest are a `Pagination` click away, never dropped. */
+var TILES_PER_PAGE = 60;
+var TONE_BADGE = {
+	ok: "success",
+	warn: "warning",
+	error: "danger"
+};
+var SOURCE_COLUMNS = [
+	{
+		key: "source",
+		header: "Source",
+		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "font-medium text-foreground",
+				children: row.notice.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-[10px] text-foreground-subtle",
+				children: row.notice.source
+			})]
+		})
+	},
+	{
+		key: "state",
+		header: "State",
+		nowrap: false,
+		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			variant: TONE_BADGE[row.notice.tone],
+			children: row.notice.headline
+		})
+	},
+	{
+		key: "reason",
+		header: "Reason",
+		nowrap: false,
+		render: (row) => row.notice.detail === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-foreground-subtle",
+			children: "—"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "break-words",
+			children: row.notice.detail
+		})
+	},
+	{
+		key: "read",
+		header: "Catalog read",
+		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-foreground-subtle",
+			children: row.catalogAge ?? "live"
+		})
+	}
+];
+/** The sources that contributed NOTHING to what is on screen, and why. */
+function SilentSources({ silent }) {
+	if (silent.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+		variant: "warning",
+		title: silent.length === 1 ? "One source contributed nothing to this list" : `${String(silent.length)} sources contributed nothing to this list`,
+		message: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "space-y-1",
+			children: silent.map((notice) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium",
+					children: notice.label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "opacity-70",
+					children: [
+						" (",
+						notice.source,
+						")"
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: notice.headline }),
+				notice.detail === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "opacity-80 break-words",
+					children: notice.detail
+				})
+			] }, notice.source))
+		})
+	});
+}
+function ClipsSection({ deviceId }) {
+	const [dayId, setDayId] = (0, react$1.useState)(() => toDayId(/* @__PURE__ */ new Date()));
+	const [provider, setProvider] = (0, react$1.useState)("");
+	const [page, setPage] = (0, react$1.useState)(1);
+	const [selectedClip, setSelectedClip] = (0, react$1.useState)(null);
+	const [profile, setProfile] = (0, react$1.useState)("low");
+	const presence = useCapabilityPresence("videoclips");
+	const window = (0, react$1.useMemo)(() => dayWindow$1(dayId), [dayId]);
+	const sources = useVideoclipsListSources({ deviceId });
+	const clips = useVideoclipsListClips({
+		deviceId,
+		since: window.since,
+		until: window.until,
+		limit: CLIP_PAGE_LIMIT,
+		...provider === "" ? {} : { provider }
+	});
+	const sourceRows = sources.data ?? [];
+	const view = resolveClipsView({
+		dayId,
+		clipsStatus: clips.status,
+		clips: clips.data ?? [],
+		sourcesStatus: sources.status,
+		sources: sourceRows,
+		...clips.error ? { clipsError: clips.error.message } : {},
+		...sources.error ? { sourcesError: sources.error.message } : {}
+	});
+	const now = Date.now();
+	const options = (0, react$1.useMemo)(() => {
+		const byAddon = /* @__PURE__ */ new Map();
+		for (const row of sourceRows) {
+			const addonId = row.addonId;
+			if (addonId === void 0) continue;
+			const labels = byAddon.get(addonId);
+			if (labels === void 0) byAddon.set(addonId, [row.label]);
+			else labels.push(row.label);
+		}
+		const rest = [...byAddon].map(([value, labels]) => ({
+			value,
+			label: labels.join(" · ")
+		}));
+		const first = rest[0];
+		return [{
+			value: "",
+			label: first === void 0 ? "The camera’s bound provider" : first.label
+		}, ...rest.slice(1)];
+	}, [sourceRows]);
+	const tableRows = (0, react$1.useMemo)(() => sourceRows.map((row) => ({
+		notice: describeSource(row),
+		catalogAge: formatCatalogAge(row.availability.catalogAsOf, now)
+	})), [sourceRows]);
+	const goToDay = (next) => {
+		setDayId(next);
+		setPage(1);
+	};
+	const pick = (next) => {
+		setProvider(next);
+		setPage(1);
+	};
+	if (presence === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "status",
+			className: "text-xs text-foreground-subtle",
+			children: "Asking the registry whether this cluster serves clips…"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-24 w-full" })]
+	});
+	if (presence === "unknown") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+		variant: "warning",
+		title: "Clip sources unknown",
+		message: "The capability registry could not be reached, so whether this camera has clip sources is unknown — not absent."
+	});
+	if (presence === "absent") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "status",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+			icon: Clapperboard,
+			title: "No provider of videoclips in this cluster",
+			description: "Nothing is installed that could list a camera's stored clips."
+		})
+	});
+	const visible = view.kind === "listed" ? view.clips : [];
+	const pageClips = visible.slice((page - 1) * TILES_PER_PAGE, page * TILES_PER_PAGE);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "text-sm font-semibold text-foreground",
+				children: "Clips"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-[11px] text-foreground-subtle",
+				children: "Every source this camera has, side by side — CamStack's own recordings and whatever the camera or an export keeps of its own. A source is listed because it exists, not because it was switched on here; pick sources to narrow the view."
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: "clips-provider",
+						className: "text-[10px] uppercase tracking-wide text-foreground-subtle",
+						children: "Source"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-60",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+							id: "clips-provider",
+							options,
+							value: provider,
+							disabled: options.length < 2,
+							onChange: (e) => pick(e.target.value)
+						})
+					}),
+					options.length < 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[11px] text-foreground-subtle",
+						children: "This camera is bound to one clip provider today."
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ml-auto flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								"aria-label": "Previous day",
+								onClick: () => goToDay(shiftDay(dayId, -1)),
+								children: "‹"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "px-1 text-xs font-medium text-foreground",
+								children: formatDayLabel(dayId)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "ghost",
+								"aria-label": "Next day",
+								onClick: () => goToDay(shiftDay(dayId, 1)),
+								children: "›"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "outline",
+								onClick: () => goToDay(toDayId(/* @__PURE__ */ new Date())),
+								children: "Today"
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				"aria-label": "Clip sources",
+				className: "space-y-1",
+				children: sources.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-16 w-full" }) : tableRows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+					icon: Film,
+					title: "No provider answered for this camera",
+					description: "Nothing claims to hold clips for it."
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
+					columns: SOURCE_COLUMNS,
+					rows: [...tableRows],
+					minWidthPx: 520
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				"aria-label": "Clips",
+				className: "space-y-2",
+				children: view.kind === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "status",
+					className: "text-xs text-foreground-subtle",
+					children: [
+						"Loading clips for ",
+						formatDayLabel(dayId),
+						"…"
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-24 w-full" })] }) : view.kind === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+					title: "The clip list could not be read",
+					message: view.message
+				}) : view.kind === "empty" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "status",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
+						icon: Film,
+						title: view.nobodyAnswered ? `No source could answer for ${formatDayLabel(dayId)}` : `No clips on ${formatDayLabel(dayId)}`,
+						...view.nobodyAnswered ? {} : { description: `Asked ${view.answered.map((notice) => notice.label).join(", ")}.` }
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SilentSources, { silent: view.silent })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SilentSources, { silent: view.silent }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						className: "grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3",
+						children: pageClips.map((clip) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipTile, {
+							clip,
+							selected: selectedClip?.id === clip.id,
+							onSelect: setSelectedClip
+						}, `${clip.source}:${clip.id}`))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pagination, {
+						currentPage: page,
+						totalItems: visible.length,
+						pageSize: TILES_PER_PAGE,
+						onPageChange: setPage,
+						itemNoun: "clips"
+					})
+				] })
+			}),
+			selectedClip === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipPanel, {
+				deviceId,
+				clip: selectedClip,
+				profile,
+				onProfileChange: setProfile
+			})
+		]
+	});
+}
+//#endregion
+//#region src/hooks/use-navigation.ts
+/**
+* useNavigation — drive a `navigation` robot camera from the UI.
+*
+* The cap's `move` is MOMENTARY: fluid driving is the UI sending a nudge at
+* 1 Hz while a direction is held and ONE `stop` on release, exactly like the
+* robot app's joystick. This hook owns that cadence (`startDrive` /
+* `stopDrive`); the provider forwards each nudge to a single drive write.
+*
+* Everything else is a plain call plus the data the panel renders from:
+* `features` (which primitives are on), `actions` (the enabled dictionary)
+* and the live `status` slice off the device proxy.
+*/
+/** The cadence the robot app drives at while a direction is held. */
+var NAVIGATION_DRIVE_INTERVAL_MS = 1e3;
+var DIRECTION_VECTORS$1 = {
+	forward: {
+		pan: 0,
+		tilt: 1
+	},
+	left: {
+		pan: -1,
+		tilt: 0
+	},
+	right: {
+		pan: 1,
+		tilt: 0
+	},
+	spin: {
+		pan: 0,
+		tilt: -1
+	}
+};
+function isAbsentProvider$1(err) {
+	const message = err instanceof Error ? err.message : String(err);
+	return /not available|no provider|NOT_FOUND|PRECONDITION/i.test(message);
+}
+function useNavigation(trpc, deviceId, hookOptions) {
+	const enabled = hookOptions?.enabled ?? true;
+	const nav = useDeviceProxy(trpc, enabled ? deviceId : null)?.navigation;
+	const status = useDeviceState(trpc, enabled ? deviceId : null, (s) => s.navigation);
+	const [features, setFeatures] = (0, react$1.useState)(null);
+	const [actions, setActions] = (0, react$1.useState)([]);
+	const [busy, setBusy] = (0, react$1.useState)(false);
+	const [error, setError] = (0, react$1.useState)(null);
+	const [driving, setDriving] = (0, react$1.useState)(null);
+	const driveTimer = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => {
+		if (!enabled || !nav) return;
+		let cancelled = false;
+		(async () => {
+			try {
+				const [nextFeatures, nextActions] = await Promise.all([nav.getFeatures({}), nav.listActions({})]);
+				if (cancelled) return;
+				setFeatures(nextFeatures);
+				setActions(nextActions);
+			} catch (err) {
+				if (cancelled || isAbsentProvider$1(err)) return;
+				setError(err instanceof Error ? err.message : String(err));
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [nav, enabled]);
+	const wrap = (0, react$1.useCallback)(async (fn) => {
+		if (!enabled || !nav) return;
+		setError(null);
+		setBusy(true);
+		try {
+			await fn();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setBusy(false);
+		}
+	}, [enabled, nav]);
+	const clearTimer = (0, react$1.useCallback)(() => {
+		if (driveTimer.current !== null) {
+			clearInterval(driveTimer.current);
+			driveTimer.current = null;
+		}
+	}, []);
+	const stopDrive = (0, react$1.useCallback)(async () => {
+		clearTimer();
+		setDriving(null);
+		if (!nav) return;
+		await wrap(() => nav.stop({}));
+	}, [
+		clearTimer,
+		nav,
+		wrap
+	]);
+	const startDrive = (0, react$1.useCallback)((direction) => {
+		if (!nav) return;
+		clearTimer();
+		setDriving(direction);
+		const vector = DIRECTION_VECTORS$1[direction];
+		const nudge = () => {
+			nav.move({
+				pan: vector.pan,
+				tilt: vector.tilt
+			}).catch((err) => {
+				setError(err instanceof Error ? err.message : String(err));
+			});
+		};
+		nudge();
+		driveTimer.current = setInterval(nudge, NAVIGATION_DRIVE_INTERVAL_MS);
+	}, [clearTimer, nav]);
+	(0, react$1.useEffect)(() => {
+		return () => {
+			if (driveTimer.current !== null) {
+				clearInterval(driveTimer.current);
+				driveTimer.current = null;
+				nav?.stop({}).catch(() => void 0);
+			}
+		};
+	}, [nav]);
+	const runAction = (0, react$1.useCallback)((actionId) => wrap(async () => nav?.runAction({ actionId })), [nav, wrap]);
+	const playSound = (0, react$1.useCallback)((soundId) => wrap(async () => nav?.playSound({ soundId })), [nav, wrap]);
+	const setLightOn = (0, react$1.useCallback)((on) => wrap(async () => nav?.setLightOn({ on })), [nav, wrap]);
+	const setLightMode = (0, react$1.useCallback)((mode, level) => wrap(async () => nav?.setLightMode(level === void 0 ? { mode } : {
+		mode,
+		level
+	})), [nav, wrap]);
+	const setLightLevel = (0, react$1.useCallback)((level) => wrap(async () => nav?.setLightLevel({ level })), [nav, wrap]);
+	return {
+		features,
+		actions,
+		status: status ?? null,
+		startDrive,
+		stopDrive,
+		runAction,
+		playSound,
+		setLightOn,
+		setLightMode,
+		setLightLevel,
+		busy,
+		error,
+		driving
+	};
+}
+//#endregion
+//#region src/composites/cap-settings/NavigationPanel.tsx
+/** The cap's icon HINTS are lucide names; unknown hints fall back to a spark. */
+var ICONS = {
+	play: Play,
+	pause: Pause,
+	hand: Hand,
+	home: House,
+	bell: Bell,
+	crosshair: Crosshair,
+	"paw-print": PawPrint,
+	footprints: Footprints,
+	droplets: Droplets,
+	"trash-2": Trash2,
+	flashlight: Flashlight,
+	"flashlight-off": FlashlightOff,
+	cat: Cat,
+	dog: Dog,
+	clock: Clock
+};
+function iconFor(hint) {
+	return ICONS[hint] ?? Sparkles;
+}
+var DRIVE_BUTTONS = [
+	{
+		direction: "left",
+		label: "Turn left",
+		Icon: RotateCcw
+	},
+	{
+		direction: "forward",
+		label: "Forward",
+		Icon: ArrowUp
+	},
+	{
+		direction: "right",
+		label: "Turn right",
+		Icon: RotateCw
+	},
+	{
+		direction: "spin",
+		label: "Turn around",
+		Icon: Undo2
+	}
+];
+var BUTTON = "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground disabled:opacity-50";
+var BUTTON_ON = "bg-success/15 text-success hover:bg-success/25";
+function EntryButton({ entry, disabled, onRun }) {
+	const Glyph = iconFor(entry.icon);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: BUTTON,
+		disabled,
+		onClick: () => onRun(entry),
+		title: entry.label,
+		"aria-label": entry.label,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: entry.label })]
+	});
+}
+function NavigationPanel({ deviceId }) {
+	const system = useSystem();
+	const ready = Number.isFinite(deviceId);
+	const nav = useNavigation(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 features = nav.features;
+	const actions = nav.actions.filter((entry) => entry.enabled && entry.kind === "action");
+	const sounds = nav.actions.filter((entry) => entry.enabled && entry.kind === "sound");
+	const status = nav.status;
+	const manual = status?.lightMode === "manual";
+	const run = (entry) => {
+		if (entry.kind === "sound") {
+			if (entry.soundId !== void 0) nav.playSound(entry.soundId);
+			return;
+		}
+		nav.runAction(entry.id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WidgetPanel, {
+		title: "Navigation",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		bodyClassName: "p-3 flex flex-col gap-3 overflow-y-auto",
+		children: [
+			status && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-1.5 text-[10px]",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-surface-elevated/60 px-2 py-0.5 text-foreground",
+						children: status.mode
+					}),
+					status.following && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-info/15 px-2 py-0.5 text-info",
+						children: "following"
+					}),
+					status.flash && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-warning/15 px-2 py-0.5 text-warning",
+						children: "light on"
+					})
+				]
+			}),
+			features?.move && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10.5px] font-semibold text-foreground",
+						children: "Drive (hold)"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-4 gap-1.5",
+						children: DRIVE_BUTTONS.map(({ direction, label, Icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: cn(BUTTON, "justify-center select-none", nav.driving === direction && BUTTON_ON),
+							"aria-label": label,
+							title: label,
+							onPointerDown: () => nav.startDrive(direction),
+							onPointerUp: () => void nav.stopDrive(),
+							onPointerLeave: () => {
+								if (nav.driving === direction) nav.stopDrive();
+							},
+							onPointerCancel: () => void nav.stopDrive(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+						}, direction))
+					}),
+					features.stop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: cn(BUTTON, "justify-center"),
+						onClick: () => void nav.stopDrive(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hand, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Stop" })]
+					})
+				]
+			}),
+			features?.runAction && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10.5px] font-semibold text-foreground",
+					children: "Actions"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: actions.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
+						entry,
+						disabled: nav.busy,
+						onRun: run
+					}, entry.id))
+				})]
+			}),
+			features?.playSound && sounds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10.5px] font-semibold text-foreground",
+					children: "Sounds"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: sounds.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
+						entry,
+						disabled: nav.busy,
+						onRun: run
+					}, entry.id))
+				})]
+			}),
+			features?.light && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5 border-t border-border/40 pt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10.5px] font-semibold text-foreground",
+						children: "Fill light"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: cn(BUTTON, status?.flash && BUTTON_ON),
+						"aria-pressed": status?.flash === true,
+						disabled: nav.busy,
+						onClick: () => void nav.setLightOn(!(status?.flash === true)),
+						children: [status?.flash ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flashlight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlashlightOff, { className: "h-3.5 w-3.5" }), status?.flash ? "On" : "Off"]
+					})]
+				}), features.lightMode && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+							"aria-label": "Light mode",
+							className: "rounded-md bg-surface-elevated/40 px-2 py-1 text-[10px] text-foreground",
+							value: status?.lightMode ?? "auto",
+							disabled: nav.busy,
+							onChange: (event) => {
+								const mode = event.target.value === "manual" ? "manual" : "auto";
+								nav.setLightMode(mode, mode === "manual" ? status?.lightLevel : void 0);
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "auto",
+								children: "Auto"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "manual",
+								children: "Manual"
+							})]
+						}),
+						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "range",
+							"aria-label": "Light level",
+							className: "flex-1",
+							min: _camstack_types.NAVIGATION_LIGHT_LEVEL_MIN,
+							max: _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
+							step: 1,
+							value: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
+							disabled: nav.busy,
+							onChange: (event) => void nav.setLightLevel(Number(event.target.value))
+						}),
+						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-foreground-subtle w-8 text-right",
+							children: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX
+						})
+					]
+				})]
+			}),
+			nav.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-[10px] text-danger",
+				children: nav.error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/lib/cap-error.ts
+/**
+* Shared capability-error utilities for the admin UI.
+*
+* The primary export `isAbsentProvider` lets UI components distinguish
+* "this device doesn't have this cap" (expected — hide the widget) from
+* "something went wrong while calling a present cap" (unexpected — surface
+* the error to the operator).
+*
+* Detection strategy (two-tier):
+*
+*   1. **Typed reason** (preferred): tRPC's errorFormatter augments the
+*      error shape with `data.capRouteReason` when the server throws a
+*      CapRouteError. Read it from `err.data?.capRouteReason` to avoid
+*      brittle string matching.
+*
+*   2. **Substring fallback** (transitional safety): older error paths
+*      that don't carry a typed reason still emit the human-readable
+*      message "provider not available". The fallback is ONLY engaged
+*      when `capRouteReason` is absent — future clean-up can drop it
+*      once every throw site has been migrated.
+*/
+/**
 * Extract the typed `capRouteReason` field from a serialized tRPC error.
 *
 * tRPC client errors typically look like:
@@ -19356,46 +21084,6 @@ function RecordingSettings({ initial, availableProfiles, saving, onSave, sensorC
 	});
 }
 //#endregion
-//#region src/contexts/vod-playback.tsx
-/**
-* VodPlayback — shared context coordinating recorded (VOD) playback between a
-* widget/section (the Recording panel) and the hero StreamPanel.
-*
-* A CONTROLLER (the Recording widget) calls `play({ url, label })`; the hero
-* StreamPanel CONSUMES `request` and switches into VOD mode (HLS playback
-* through the hub data-plane) instead of the live WebRTC stream. `clear()`
-* returns the hero to live.
-*
-* Built on `createSharedContext` (NOT a plain `createContext`) so it crosses
-* the Module-Federation boundary: an addon-shipped widget consuming
-* `useVodPlayback()` resolves the SAME provider instance the host mounted —
-* the same mechanism `player-overlays` / `zone-editing` use to let federated
-* widgets (zone-editor, privacy-mask) drive the live player. Consumers used
-* outside a provider get the inert default (no-op), so a StreamPanel mounted
-* on a page without the Recording widget stays live-only without crashing.
-*/
-var VodPlaybackContext = createSharedContext("camstack:vod-playback", {
-	request: null,
-	play: () => {},
-	clear: () => {}
-});
-function VodPlaybackProvider({ children }) {
-	const [request, setRequest] = (0, react$1.useState)(null);
-	const value = (0, react$1.useMemo)(() => ({
-		request,
-		play: (req) => setRequest(req),
-		clear: () => setRequest(null)
-	}), [request]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VodPlaybackContext.Provider, {
-		value,
-		children
-	});
-}
-/** @returns the VOD playback controller (inert no-op outside a provider). */
-function useVodPlayback() {
-	return (0, react$1.useContext)(VodPlaybackContext);
-}
-//#endregion
 //#region src/lib/recorded-control-protocol.ts
 /** Serialize a command for `RTCDataChannel.send` (matches the server schema). */
 function serializeRecordedCommand(cmd) {
@@ -19732,82 +21420,6 @@ function useScrubController(sink, isPlayerLive = () => false) {
 	};
 }
 //#endregion
-//#region src/composites/empty-state.tsx
-function EmptyState({ icon: Icon, title, description, action, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("flex flex-col items-center justify-center gap-3 py-12", className),
-		children: [
-			Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				className: "h-12 w-12 text-foreground-subtle",
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col items-center gap-1 text-center",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-foreground-muted text-sm font-medium",
-					children: title
-				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-foreground-subtle text-xs max-w-xs",
-					children: description
-				})]
-			}),
-			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-1",
-				children: action
-			})
-		]
-	});
-}
-//#endregion
-//#region src/composites/error-box.tsx
-var VARIANT_STYLES$1 = {
-	danger: {
-		box: "border-danger/40 bg-danger/10",
-		icon: "text-danger",
-		title: "text-danger",
-		message: "text-danger"
-	},
-	warning: {
-		box: "border-amber-500/40 bg-amber-500/10",
-		icon: "text-amber-600 dark:text-amber-400",
-		title: "text-amber-700 dark:text-amber-300",
-		message: "text-amber-700 dark:text-amber-300"
-	}
-};
-function ErrorBox({ message, title, onRetry, action, variant = "danger", className }) {
-	const styles = VARIANT_STYLES$1[variant];
-	const Icon = variant === "warning" ? TriangleAlert : CircleAlert;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		role: "alert",
-		className: cn("flex items-start gap-2.5 rounded border px-3 py-2.5", styles.box, className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				className: cn("h-4 w-4 mt-0.5 shrink-0", styles.icon),
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex-1 min-w-0",
-				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: cn("text-xs font-semibold", styles.title),
-					children: title
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cn("text-xs break-words", styles.message, title ? "mt-0.5" : ""),
-					children: message
-				})]
-			}),
-			action ?? (onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
-				onClick: onRetry,
-				className: cn("shrink-0 inline-flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium", "border border-current/30 hover:bg-current/10 transition-colors", styles.message),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCw, {
-					className: "h-3 w-3",
-					"aria-hidden": "true"
-				}), "Retry"]
-			}))
-		]
-	});
-}
-//#endregion
 //#region src/composites/cap-settings/recording-spans.ts
 /**
 * Merge availability ranges (across every profile) into the union of distinct
@@ -20990,7 +22602,8 @@ var HOST_WIDGETS = {
 	"host/consumables-panel": ConsumablesPanel,
 	"host/ptz-autotrack": AutotrackSection,
 	"host/recording-panel": RecordingPanel,
-	"host/camera-grid-layout": CameraGridLayoutEditor
+	"host/camera-grid-layout": CameraGridLayoutEditor,
+	"host/clips-browser": ClipsSection
 };
 //#endregion
 //#region src/composites/widget-slot.tsx
@@ -25297,92 +26910,6 @@ function AgentStepEditor(props) {
 	});
 }
 //#endregion
-//#region ../../node_modules/class-variance-authority/dist/index.mjs
-/**
-* Copyright 2022 Joe Bell. All rights reserved.
-*
-* This file is licensed to you under the Apache License, Version 2.0
-* (the "License"); you may not use this file except in compliance with the
-* License. You may obtain a copy of the License at
-*
-*   http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations under
-* the License.
-*/ var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-var cx = clsx;
-var cva = (base, config) => (props) => {
-	var _config_compoundVariants;
-	if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-	const { variants, defaultVariants } = config;
-	const getVariantClassNames = Object.keys(variants).map((variant) => {
-		const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-		const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-		if (variantProp === null) return null;
-		const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-		return variants[variant][variantKey];
-	});
-	const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-		let [key, value] = param;
-		if (value === void 0) return acc;
-		acc[key] = value;
-		return acc;
-	}, {});
-	return cx(base, getVariantClassNames, config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-		let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-		return Object.entries(compoundVariantOptions).every((param) => {
-			let [key, value] = param;
-			return Array.isArray(value) ? value.includes({
-				...defaultVariants,
-				...propsWithoutUndefined
-			}[key]) : {
-				...defaultVariants,
-				...propsWithoutUndefined
-			}[key] === value;
-		}) ? [
-			...acc,
-			cvClass,
-			cvClassName
-		] : acc;
-	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
-//#endregion
-//#region src/primitives/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
-	variants: {
-		variant: {
-			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-			secondary: "bg-surface text-foreground hover:bg-surface-hover",
-			ghost: "hover:bg-surface-hover text-foreground-muted",
-			danger: "bg-danger text-white hover:bg-danger/90",
-			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
-		},
-		size: {
-			sm: "h-7 px-2.5 text-xs gap-1.5",
-			md: "h-8 px-3 text-sm gap-2",
-			lg: "h-9 px-4 text-sm gap-2"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "sm"
-	}
-});
-var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref,
-		className: cn(buttonVariants({
-			variant,
-			size
-		}), className),
-		...props
-	});
-});
-Button.displayName = "Button";
-//#endregion
 //#region src/primitives/icon-button.tsx
 var iconButtonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
 	variants: {
@@ -25417,55 +26944,6 @@ var IconButton = (0, react$1.forwardRef)(({ className, variant, size, icon: Icon
 });
 IconButton.displayName = "IconButton";
 //#endregion
-//#region src/primitives/badge.tsx
-var badgeVariants = cva("inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5", {
-	variants: {
-		variant: {
-			default: "bg-surface-hover text-foreground",
-			success: "bg-success/15 text-success",
-			warning: "bg-warning/15 text-warning",
-			danger: "bg-danger/15 text-danger",
-			info: "bg-info/15 text-info"
-		},
-		styleVariant: {
-			solid: "",
-			outline: "border bg-transparent"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		styleVariant: "solid"
-	}
-});
-var Badge = (0, react$1.forwardRef)(({ className, variant, style, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		ref,
-		className: cn(badgeVariants({
-			variant,
-			styleVariant: style
-		}), className),
-		...props
-	});
-});
-Badge.displayName = "Badge";
-//#endregion
-//#region src/primitives/card.tsx
-var cardVariants = cva("rounded-lg p-3", {
-	variants: { variant: {
-		flat: "bg-surface",
-		bordered: "bg-surface border border-border"
-	} },
-	defaultVariants: { variant: "bordered" }
-});
-var Card = (0, react$1.forwardRef)(({ className, variant, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cn(cardVariants({ variant }), className),
-		...props
-	});
-});
-Card.displayName = "Card";
-//#endregion
 //#region src/primitives/label.tsx
 var Label = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -25494,16 +26972,6 @@ var Separator = (0, react$1.forwardRef)(({ className, orientation, ...props }, r
 });
 Separator.displayName = "Separator";
 //#endregion
-//#region src/primitives/skeleton.tsx
-var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
-		...props
-	});
-});
-Skeleton.displayName = "Skeleton";
-//#endregion
 //#region src/primitives/input.tsx
 /**
 * `disabled:opacity-50 disabled:cursor-not-allowed` for the same reason as
@@ -25545,43 +27013,6 @@ var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, ..
 });
 Input.displayName = "Input";
 //#endregion
-//#region src/primitives/select.tsx
-/**
-* A native `<select>` styled to match the rest of the field set.
-*
-* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
-* makes it match — and it is also what USED to make a disabled one a lie. A
-* browser greys a disabled control by rendering its own background and text
-* colour; all three of those are overridden here, so a `disabled` dropdown
-* looked exactly like a live one and simply ignored the click. That is the
-* whole of the "the language selector does not open" report of 2026-08-15:
-* the AI section's switch was off, every control under it was correctly inert,
-* and nothing on screen said so.
-*
-* `disabled:` classes belong HERE and not on each call site: there are dozens
-* of `<Select disabled>` in this app and the one that gets forgotten is the one
-* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
-*/
-var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative w-full",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-			ref,
-			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
-			...props,
-			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
-		})]
-	});
-});
-Select.displayName = "Select";
-//#endregion
 //#region src/primitives/checkbox.tsx
 var Checkbox = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -25870,53 +27301,6 @@ function TooltipContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-//#region src/hooks/use-is-mobile.ts
-var MOBILE_QUERY = "(max-width: 767px)";
-/**
-* Mid breakpoint — below this width the sidebar collapses to an
-* icons-only rail to reclaim canvas space. Above it (and outside
-* mobile) the full sidebar renders. Threshold matches Tailwind `lg`
-* so sidebar fans out at the same point grids switch to multi-column.
-*/
-var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
-/**
-* `matchMedia` is universal in browsers but absent in bare DOM environments.
-* These hooks are called from shared primitives (`DataTable` picks its narrow
-* layout with one), so throwing here takes down the whole page that merely
-* rendered a table. Where the capability is missing, report the desktop
-* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
-*/
-function matchQuery(query) {
-	if (typeof window.matchMedia !== "function") return null;
-	return window.matchMedia(query);
-}
-function subscribeQuery(query) {
-	return (callback) => {
-		const mql = matchQuery(query);
-		if (mql === null) return () => {};
-		mql.addEventListener("change", callback);
-		return () => mql.removeEventListener("change", callback);
-	};
-}
-function getSnapshot(query) {
-	return () => matchQuery(query)?.matches ?? false;
-}
-function getServerSnapshot() {
-	return false;
-}
-function useIsMobile() {
-	return (0, react$1.useSyncExternalStore)(subscribeQuery(MOBILE_QUERY), getSnapshot(MOBILE_QUERY), getServerSnapshot);
-}
-/**
-* True when the viewport is in the medium (`md`) Tailwind range —
-* 768px ≤ width < 1024px. Use to drive layouts that should pack denser
-* than full-desktop but more legibly than mobile (e.g. icons-only
-* sidebar rail, narrower stat tiles).
-*/
-function useIsMidWidth() {
-	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
-}
-//#endregion
 //#region src/primitives/bottom-sheet.tsx
 function BottomSheet({ open, onClose, title, children, className }) {
 	(0, react$1.useEffect)(() => {
@@ -29130,644 +30514,224 @@ function coverageLine(monitor) {
 	return monitor.onUncoveredCondition === "judge-anyway" ? `${parts.join(" · ")} — ${names} judged against the references you do have.` : `${parts.join(" · ")} — optional; checks in ${names} are skipped.`;
 }
 /**
-* The calm sentence for a scene that is sitting the current light out — `null`
-* whenever it is checking normally.
-*
-* Separate from {@link statusLine} because it is not a verdict and must not
-* read like one. A paused scene has not failed, has not lost its flag, and
-* needs nothing from the operator; the only thing worth saying is which light
-* it is waiting out and that it will pick itself back up.
-*/
-function suspensionLine(monitor) {
-	if (monitor.suspendedCondition === null) return null;
-	const light = variantLabel(monitor.suspendedCondition).toLowerCase();
-	return `Paused — nothing was captured in ${light}, so checks are on hold until the light changes back. Capture ${light} if you want it watched around the clock.`;
-}
-var UNAVAILABLE_SENTENCE = {
-	"no-reference-for-condition": "can’t tell — nothing has been captured for this scene yet. Press “Capture daylight” to photograph what normal looks like.",
-	"view-shifted": "can’t tell — the camera view has moved since the reference was captured. Re-capture it.",
-	"no-vision-profile": "can’t tell — the vision model is unreachable, so the change is on hold.",
-	"encoder-model-changed": "can’t tell — the embedding model changed, so the stored references are unreadable. Re-capture them.",
-	"no-snapshot": "can’t tell — this camera did not return a frame."
-};
-/**
-* The one line under a scene's name. It answers, in order: can it judge, what
-* does it say, and how long has it said it.
-*/
-function statusLine(monitor, now) {
-	if (monitor.states.length === 0) return "Not armed yet — capture the initial state to start watching.";
-	if (monitor.verdict === "unknown") return monitor.unavailable !== null ? UNAVAILABLE_SENTENCE[monitor.unavailable] : "can’t tell right now.";
-	const since = monitor.verdict === "diverged" ? monitor.divergedAt : monitor.armedAt;
-	const held = since !== null ? ` for ${humanDuration(Math.max(0, now - since))}` : "";
-	if (monitor.latched) return monitor.verdict === "diverged" ? `CHANGED${held} — press Reset when you have dealt with it.` : `Back to normal, but still flagged as changed${held}. Press Reset to clear it.`;
-	const paused = suspensionLine(monitor);
-	if (paused !== null) return paused;
-	return monitor.verdict === "diverged" ? `CHANGED${held}` : `Normal${held}`;
-}
-/** The badge word. `latched` wins over `verdict`, because the latch is the
-*  thing the operator asked to be told and it outlives the live state.
-*
-*  A scene sitting out an uncovered light reads `Paused`, in the NEUTRAL tone —
-*  never `alarm`, and never the `danger` variant the page maps that to. A
-*  missing IR reference must not be able to paint a red badge on a scene that
-*  is doing exactly what it was configured to do. */
-function badgeFor(monitor) {
-	if (monitor.states.length === 0) return {
-		text: "Not armed",
-		tone: "unknown"
-	};
-	if (monitor.latched) return {
-		text: "Changed",
-		tone: "alarm"
-	};
-	if (monitor.suspendedCondition !== null) return {
-		text: "Paused",
-		tone: "unknown"
-	};
-	if (monitor.verdict === "unknown") return {
-		text: "Can’t tell",
-		tone: "unknown"
-	};
-	return monitor.verdict === "diverged" ? {
-		text: "Changed",
-		tone: "alarm"
-	} : {
-		text: "Normal",
-		tone: "ok"
-	};
-}
-/** A rect covering most of the frame is dominated by weather, sky and parked
-*  cars: the bin is 2 % of the pixels and CLIP will not notice it leaving. The
-*  failure is silent INSENSITIVITY, which is the worst kind — hence a warning
-*  rather than a refusal. */
-var ROI_AREA_WARN_FRACTION = .4;
-function roiTooLarge(roi) {
-	return roi.width * roi.height > ROI_AREA_WARN_FRACTION;
-}
-function humanDuration(ms) {
-	const s = Math.floor(ms / 1e3);
-	if (s < 60) return `${s}s`;
-	const m = Math.floor(s / 60);
-	if (m < 60) return `${m}m`;
-	const h = Math.floor(m / 60);
-	if (h < 48) return `${h}h`;
-	return `${Math.floor(h / 24)}d`;
-}
-//#endregion
-//#region src/composites/code-block.tsx
-function CodeBlock({ children, maxHeight = 300, className }) {
-	const [copied, setCopied] = (0, react$1.useState)(false);
-	const handleCopy = (0, react$1.useCallback)(() => {
-		navigator.clipboard.writeText(children).then(() => {
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2e3);
-		});
-	}, [children]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("relative group", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollArea, {
-			style: { maxHeight },
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children })
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-				icon: copied ? Check : Copy,
-				"aria-label": "Copy code",
-				variant: "ghost",
-				size: "sm",
-				onClick: handleCopy
-			})
-		})]
-	});
-}
-//#endregion
-//#region src/composites/confirm-action-button.tsx
-/**
-* ConfirmActionButton — destructive-action button with a modal confirm.
-*
-* Two-step UX for any operation operators shouldn't trigger by accident:
-* reboot device, restart addon, regenerate token, etc. The trigger is a
-* normal Button that opens a Dialog; confirming runs the async action,
-* the trigger spinner-disables itself for the duration, and the dialog
-* closes on success. Errors surface inline at the dialog's bottom.
-*
-* Generic on `TResult` so callers don't have to discard the return
-* value. Pass an `icon` to render it inside the trigger (e.g. RotateCw
-* for reboot, RefreshCw for restart).
-*/
-function ConfirmActionButton({ label, icon: Icon, title = "Confirm action", description, confirmLabel, triggerVariant = "outline", confirmVariant = "danger", size = "sm", disabled, className, action, onSuccess }) {
-	const [open, setOpen] = (0, react$1.useState)(false);
-	const [running, setRunning] = (0, react$1.useState)(false);
-	const [error, setError] = (0, react$1.useState)(null);
-	const handleConfirm = async () => {
-		setError(null);
-		setRunning(true);
-		try {
-			const result = await action();
-			onSuccess?.(result);
-			setOpen(false);
-		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
-		} finally {
-			setRunning(false);
-		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-		type: "button",
-		variant: triggerVariant,
-		size,
-		disabled,
-		onClick: () => {
-			setError(null);
-			setOpen(true);
-		},
-		className,
-		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), label]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
-		open,
-		onOpenChange: (next) => !running && setOpen(next),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 text-amber-400" }), title]
-			}), typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : description] }),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cn("mt-2 px-3 py-2 rounded border border-danger/40 bg-danger/10", "text-xs text-danger"),
-				children: error
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				type: "button",
-				variant: "ghost",
-				size,
-				disabled: running,
-				onClick: () => setOpen(false),
-				children: "Cancel"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-				type: "button",
-				variant: confirmVariant,
-				size,
-				disabled: running,
-				onClick: () => {
-					handleConfirm();
-				},
-				children: [running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), confirmLabel ?? label]
-			})] })
-		] })
-	})] });
-}
-//#endregion
-//#region src/composites/copy-button.tsx
-/**
-* `CopyButton` — a compact button that copies a string `value` to the
-* clipboard via `navigator.clipboard.writeText`, showing a brief
-* "copied" check state. Addon-agnostic; used wherever a secret / URL
-* needs a one-click copy affordance (export setup panels, etc.).
-*/
-var COPIED_RESET_MS = 2e3;
-function CopyButton({ value, label, srLabel, className, disabled }) {
-	const [copied, setCopied] = (0, react$1.useState)(false);
-	const handleCopy = (0, react$1.useCallback)(() => {
-		if (!value) return;
-		navigator.clipboard.writeText(value).then(() => {
-			setCopied(true);
-			setTimeout(() => setCopied(false), COPIED_RESET_MS);
-		});
-	}, [value]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-		size: "sm",
-		variant: "ghost",
-		type: "button",
-		disabled: disabled || value.length === 0,
-		onClick: handleCopy,
-		className: cn(className),
-		"aria-label": copied ? "Copied" : `Copy ${srLabel ?? label ?? "value"}`,
-		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5 text-success" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" }), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "ml-1",
-			children: copied ? "Copied" : label
-		}) : null]
-	});
-}
-//#endregion
-//#region src/composites/data-table-layout.ts
-/**
-* At this many columns and above, `auto` switches a narrow viewport to cards.
-* Three columns still fit a phone at a readable size; four do not.
-*/
-var CARD_MODE_MIN_COLUMNS = 4;
-function resolveTableLayout({ mode, columnCount, isNarrow }) {
-	if (!isNarrow) return "table";
-	if (mode === "scroll") return "table";
-	if (mode === "cards") return "cards";
-	if (columnCount === 0) return "table";
-	return columnCount >= 4 ? "cards" : "table";
-}
-//#endregion
-//#region src/lib/responsive.ts
-/**
-* Responsive design tokens — three-tier system.
-*
-* The admin-ui targets three width tiers; every component should pick
-* the right token from this file instead of hand-coding breakpoints.
-* Adopting the tokens uniformly is what makes the app feel consistent
-* across operator devices (mobile / tablet / desktop) and what unlocks
-* targeted tuning (e.g. shrink every label by 1px in one place).
-*
-* Tier definitions (Tailwind breakpoints):
-*
-*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
-*     Single column, tight padding, smallest text, icon-only buttons
-*     where labels can be inferred. The operator can still see every
-*     stat / action — no horizontal scroll, no clipped text. The user
-*     directive: "molta informazione in poco spazio quando la width è
-*     bassa."
-*
-*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
-*     2-column grids, side panels become visible, button labels return.
-*     Targets ~768px–1024px viewports — the most common operator sizes.
-*
-*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
-*     4-column grids, generous padding, full-width header text,
-*     side-by-side composite layouts. The operator has elbow room.
-*
-* Conventions:
-*   - **Always start from L1** — the bare class is always the compact
-*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
-*     desktop-first breakpoints; no max-width queries.
-*   - **Token strings are static** — kept as `as const` so callers can
-*     compose them via `cn()` / template literals without running a
-*     class generator at runtime.
-*   - **Pair the token with a comment** — the comment in the file
-*     names every breakpoint it crosses, so a reader can predict the
-*     layout without going to Tailwind docs.
-*/
-/** Container padding for a card-style section (header + body). */
-var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
-/** Header strip inside a card (between border-b lines). */
-var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
-/** Body padding for a card-style section. */
-var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
-/** Gap between cards in a vertical stack. */
-var STACK_GAP = "space-y-3 sm:space-y-4";
-/** Gap between cards in a grid (4 cells / row at lg). */
-var GRID_GAP = "gap-2 sm:gap-3";
-/** Row padding inside a divided list (e.g. InfoRow). */
-var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
-/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
-var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
-/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
-var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
-/** Side-by-side layout that stacks below md (canvas + side panel). */
-var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
-/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
-var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
-/**
-* The tier boundary at which a settings label/value row stops stacking.
-*
-* Below it (L1 — compact) the row is ONE column: label on its own line, value
-* on the next at full width. Above it the row is label-left / value-right as
-* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
-* value beside it; a phone has neither, and the failure mode is not "cramped"
-* but "the value is the part that gets cut" — the one thing the operator
-* opened the page to read.
-*/
-var SETTING_ROW_STACK_BREAKPOINT = "sm";
-/** Outer row: single column at L1, label/value columns from `sm` up. */
-var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
-/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
-var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
-/**
-* Value lane — the value text plus its trailing affordances (copy / reveal).
-* `w-full` at L1 so the value owns the whole row once the label is above it;
-* `sm:flex-1` makes it share the row again from `sm` up.
-*/
-var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
-/**
-* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
-* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
-* desktop form, where the row is wide enough for truncation to be a choice
-* rather than data loss.
-*/
-var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
-/** Section header label (uppercase tracking-wider). */
-var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
-/** Field label inside a row. */
-var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
-/** Sub-label / hint text. */
-var TEXT_HINT = "text-[10px] text-foreground-subtle";
-/** Primary value (a metric, badge, …). */
-var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
-/** Big metric value (StatCard). */
-var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
-/** Default compact button. */
-var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
-/** Primary compact button. */
-var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
-/** Danger compact button. */
-var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
-/** Warning compact button (e.g. cancel-drawing). */
-var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
-/** Compact text/select/number input. */
-var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
-/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
-var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
-var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
-var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
-//#endregion
-//#region src/composites/setting-row.tsx
-function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
-	const LabelTag = elements === "description" ? "dt" : "span";
-	const ValueTag = elements === "description" ? "dd" : "div";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-setting-row": "",
-		className: cn(SETTING_ROW, className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
-			"data-setting-row-label": "",
-			className: SETTING_ROW_LABEL,
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
-			"data-setting-row-value": "",
-			className: SETTING_ROW_VALUE,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-setting-row-value-text": "",
-				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
-				children
-			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex shrink-0 items-center gap-0.5",
-				children: actions
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/composites/sort-header-button.tsx
-function SortHeaderButton({ label, active, dir, onSort }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		onClick: onSort,
-		className: "group/sort inline-flex items-center gap-0.5 hover:text-foreground transition-colors",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), active ? dir === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: cn("h-3 w-3 flex-shrink-0 opacity-0 transition-opacity", "group-hover/sort:opacity-30") })]
-	});
-}
-//#endregion
-//#region src/composites/table-sort.ts
-/**
-* The toggle rule, and the only copy of it.
-*
-* none → asc → desc → none, and a click on a DIFFERENT column starts that
-* column fresh at `asc`. `sameColumn` says whether the clicked column is the
-* one currently sorted; `currentDir` is its direction (`null` when nothing is
-* sorted). Returns the next direction, or `null` for "unsorted".
-*
-* Split out from {@link nextTableSort} so the device list — whose sort state
-* keys columns by `columnId`, not `columnKey` — can reuse the rule without a
-* cast and without a second copy of it.
-*/
-function nextSortDirection(sameColumn, currentDir) {
-	if (!sameColumn || currentDir === null) return "asc";
-	return currentDir === "asc" ? "desc" : null;
-}
-/**
-* Toggle a column's sort on header click: none → asc → desc → none.
-* Clicking a DIFFERENT column starts it fresh at `asc`.
-*/
-function nextTableSort(current, columnKey) {
-	const dir = nextSortDirection(current !== null && current.columnKey === columnKey, current === null ? null : current.dir);
-	return dir === null ? null : {
-		columnKey,
-		dir
-	};
-}
-/**
-* Ascending comparison of two cell values.
-*
-* Numbers compare numerically and strings compare with `localeCompare` — a
-* numeric column must never be ordered as text ("100" before "9"), and a text
-* column must respect the locale's collation. A mixed column (one row a
-* number, another a string) falls back to string comparison of both, which is
-* the only total order available; it is not a shape any caller should build on
-* purpose.
+* The calm sentence for a scene that is sitting the current light out — `null`
+* whenever it is checking normally.
 *
-* `null` is NOT handled here — {@link sortRowsByColumn} pulls it out first,
-* because its placement is direction-independent and a comparator that is
-* multiplied by the direction factor cannot express that.
+* Separate from {@link statusLine} because it is not a verdict and must not
+* read like one. A paused scene has not failed, has not lost its flag, and
+* needs nothing from the operator; the only thing worth saying is which light
+* it is waiting out and that it will pick itself back up.
 */
-function compareValues(a, b) {
-	if (typeof a === "number" && typeof b === "number") return a - b;
-	return String(a).localeCompare(String(b));
+function suspensionLine(monitor) {
+	if (monitor.suspendedCondition === null) return null;
+	const light = variantLabel(monitor.suspendedCondition).toLowerCase();
+	return `Paused — nothing was captured in ${light}, so checks are on hold until the light changes back. Capture ${light} if you want it watched around the clock.`;
 }
+var UNAVAILABLE_SENTENCE = {
+	"no-reference-for-condition": "can’t tell — nothing has been captured for this scene yet. Press “Capture daylight” to photograph what normal looks like.",
+	"view-shifted": "can’t tell — the camera view has moved since the reference was captured. Re-capture it.",
+	"no-vision-profile": "can’t tell — the vision model is unreachable, so the change is on hold.",
+	"encoder-model-changed": "can’t tell — the embedding model changed, so the stored references are unreadable. Re-capture them.",
+	"no-snapshot": "can’t tell — this camera did not return a frame."
+};
 /**
-* Return a NEW array of `rows` ordered by `sort`.
-*
-* `valueOf` is the column's `sortValue` — it is called once per row per
-* comparison, so it must be cheap (read a field, do not format a string).
-* `sort === null` ⇒ a fresh shallow copy in the incoming order.
+* The one line under a scene's name. It answers, in order: can it judge, what
+* does it say, and how long has it said it.
 */
-function sortRowsByColumn(rows, sort, valueOf) {
-	if (sort === null) return [...rows];
-	const factor = sort.dir === "asc" ? 1 : -1;
-	return rows.toSorted((a, b) => {
-		const av = valueOf(a);
-		const bv = valueOf(b);
-		if (av === null || bv === null) {
-			if (av === bv) return 0;
-			return av === null ? 1 : -1;
-		}
-		return factor * compareValues(av, bv);
-	});
+function statusLine(monitor, now) {
+	if (monitor.states.length === 0) return "Not armed yet — capture the initial state to start watching.";
+	if (monitor.verdict === "unknown") return monitor.unavailable !== null ? UNAVAILABLE_SENTENCE[monitor.unavailable] : "can’t tell right now.";
+	const since = monitor.verdict === "diverged" ? monitor.divergedAt : monitor.armedAt;
+	const held = since !== null ? ` for ${humanDuration(Math.max(0, now - since))}` : "";
+	if (monitor.latched) return monitor.verdict === "diverged" ? `CHANGED${held} — press Reset when you have dealt with it.` : `Back to normal, but still flagged as changed${held}. Press Reset to clear it.`;
+	const paused = suspensionLine(monitor);
+	if (paused !== null) return paused;
+	return monitor.verdict === "diverged" ? `CHANGED${held}` : `Normal${held}`;
 }
-/** Derive the `<th>` `aria-sort` for `columnKey` from the table's sort state. */
-function ariaSortForColumn(sort, columnKey) {
-	if (sort === null || sort.columnKey !== columnKey) return "none";
-	return sort.dir === "asc" ? "ascending" : "descending";
+/** The badge word. `latched` wins over `verdict`, because the latch is the
+*  thing the operator asked to be told and it outlives the live state.
+*
+*  A scene sitting out an uncovered light reads `Paused`, in the NEUTRAL tone —
+*  never `alarm`, and never the `danger` variant the page maps that to. A
+*  missing IR reference must not be able to paint a red badge on a scene that
+*  is doing exactly what it was configured to do. */
+function badgeFor(monitor) {
+	if (monitor.states.length === 0) return {
+		text: "Not armed",
+		tone: "unknown"
+	};
+	if (monitor.latched) return {
+		text: "Changed",
+		tone: "alarm"
+	};
+	if (monitor.suspendedCondition !== null) return {
+		text: "Paused",
+		tone: "unknown"
+	};
+	if (monitor.verdict === "unknown") return {
+		text: "Can’t tell",
+		tone: "unknown"
+	};
+	return monitor.verdict === "diverged" ? {
+		text: "Changed",
+		tone: "alarm"
+	} : {
+		text: "Normal",
+		tone: "ok"
+	};
+}
+/** A rect covering most of the frame is dominated by weather, sky and parked
+*  cars: the bin is 2 % of the pixels and CLIP will not notice it leaving. The
+*  failure is silent INSENSITIVITY, which is the worst kind — hence a warning
+*  rather than a refusal. */
+var ROI_AREA_WARN_FRACTION = .4;
+function roiTooLarge(roi) {
+	return roi.width * roi.height > ROI_AREA_WARN_FRACTION;
+}
+function humanDuration(ms) {
+	const s = Math.floor(ms / 1e3);
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m`;
+	const h = Math.floor(m / 60);
+	if (h < 48) return `${h}h`;
+	return `${Math.floor(h / 24)}d`;
 }
 //#endregion
-//#region src/composites/data-table.tsx
+//#region src/composites/code-block.tsx
+function CodeBlock({ children, maxHeight = 300, className }) {
+	const [copied, setCopied] = (0, react$1.useState)(false);
+	const handleCopy = (0, react$1.useCallback)(() => {
+		navigator.clipboard.writeText(children).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		});
+	}, [children]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("relative group", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollArea, {
+			style: { maxHeight },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				icon: copied ? Check : Copy,
+				"aria-label": "Copy code",
+				variant: "ghost",
+				size: "sm",
+				onClick: handleCopy
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/composites/confirm-action-button.tsx
 /**
-* DataTable — shared responsive table for admin pages.
-*
-* Recipes baked in:
-*   - `overflow-x-auto` wrapper so narrow viewports don't clip the
-*     right edge (the rounded border survives the scroll).
-*   - `min-w-[Npx]` on the inner table so columns don't squash below
-*     readable width before the scroll kicks in.
-*   - `whitespace-nowrap` on headers — column titles never wrap to
-*     two lines (`AUTO-KILL` was the regression that triggered this).
-*   - Themed `bg-surface` + `border-border` so contrast works in both
-*     light and dark themes.
-*
-* Column model: caller supplies `columns: DataColumn<T>[]` and
-* `rows: T[]`. Each column declares `header`, optional `align`,
-* optional `nowrap`, and a `render(row) => ReactNode` that produces
-* the cell content.
-*
-*   <DataTable
-*     columns={[
-*       { key: 'username', header: 'Username', render: (u) => u.username },
-*       { key: 'role',     header: 'Role',     render: (u) => <RoleBadge .../> },
-*       { key: 'actions',  header: '',         align: 'right', render: (u) => <Actions .../> },
-*     ]}
-*     rows={users}
-*     minWidthPx={560}
-*   />
-*
-* If finer header markup is needed, pass `headerRender` instead of
-* `header` (e.g. for a sortable click affordance).
-*
-* ── Narrow viewports ──────────────────────────────────────────────────────
-* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
-* scrolls the columns sideways INSIDE the table — the page body never moves
-* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
-* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
-* `auto` still applies the old column-count rule for a surface that wants it.
-* See `resolveTableLayout`.
-*
-* ── Scrolling the BODY, not the page ──────────────────────────────────────
-* `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
-* with the column header pinned. It is ONE prop, not two, because "this list
-* scrolls internally" and "its header stays visible" are the same decision: a
-* capped table whose header scrolls away is a list of unlabelled cells.
+* ConfirmActionButton — destructive-action button with a modal confirm.
 *
-* Use it wherever the row count is open-ended (rules, targets, delivery
-* history) so the page keeps its own header, filters and actions in view while
-* the operator moves through the rows.
-*/
-/**
-* The default cap for an internally-scrolling table.
+* Two-step UX for any operation operators shouldn't trigger by accident:
+* reboot device, restart addon, regenerate token, etc. The trigger is a
+* normal Button that opens a Dialog; confirming runs the async action,
+* the trigger spinner-disables itself for the duration, and the dialog
+* closes on success. Errors surface inline at the dialog's bottom.
 *
-* `60vh` leaves the page header, its filters and its actions on screen at
-* every viewport while still showing ~10 rows — and it is a fraction, so it
-* does not need a breakpoint of its own.
+* Generic on `TResult` so callers don't have to discard the return
+* value. Pass an `icon` to render it inside the trigger (e.g. RotateCw
+* for reboot, RefreshCw for restart).
 */
-var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
-var ALIGN_CLASS = {
-	left: "text-left",
-	right: "text-right",
-	center: "text-center"
-};
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
-	const isNarrow = useIsMobile();
-	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
-	const layout = resolveTableLayout({
-		mode: mobileMode,
-		columnCount: columns.length,
-		isNarrow
-	});
-	const scrolls = maxBodyHeight !== void 0;
-	const sortedColumn = (0, react$1.useMemo)(() => sort === null ? void 0 : columns.find((col) => col.key === sort.columnKey && col.sortValue !== void 0), [columns, sort]);
-	const sortValue = sortedColumn?.sortValue;
-	const displayRows = (0, react$1.useMemo)(() => sortValue === void 0 ? rows : sortRowsByColumn(rows, sort, sortValue), [
-		rows,
-		sort,
-		sortValue
-	]);
-	const activeSort = sortedColumn === void 0 ? null : sort;
-	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
-		children: emptyMessage
-	});
-	if (rows.length === 0) return null;
-	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
-		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
-			row,
-			rowIndex,
-			columns,
-			bordered,
-			onRowClick,
-			rowClassName
-		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rounded-lg",
-			bordered ? "border border-border" : "",
-			"bg-surface overflow-x-auto",
-			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
-			className ?? ""
-		].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
-			style: { minWidth: `${minWidthPx}px` },
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-				className: "bg-surface",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
-					const align = col.align ?? "left";
-					const nowrap = col.nowrap ?? true;
-					const sortable = col.sortValue !== void 0;
-					const isSorted = activeSort !== null && activeSort.columnKey === col.key;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-						"aria-sort": sortable ? ariaSortForColumn(activeSort, col.key) : void 0,
-						title: sortable ? void 0 : col.notSortableReason,
-						className: [
-							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
-							scrolls ? "sticky top-0 z-10" : "",
-							ALIGN_CLASS[align],
-							nowrap ? "whitespace-nowrap" : "",
-							col.width ?? ""
-						].filter(Boolean).join(" "),
-						children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortHeaderButton, {
-							label: col.headerRender ? col.headerRender() : col.header,
-							active: isSorted,
-							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
-							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
-						}) : col.headerRender ? col.headerRender() : col.header
-					}, col.key);
-				}) })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
-				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
-				const extra = rowClassName?.(row, rowIndex) ?? "";
-				const interactive = onRowClick !== void 0;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
-					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
-					children: columns.map((col) => {
-						const align = col.align ?? "left";
-						const nowrap = col.nowrap ?? true;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-							className: [
-								"px-3 py-2 text-foreground border-b border-border",
-								ALIGN_CLASS[align],
-								nowrap ? "whitespace-nowrap" : ""
-							].filter(Boolean).join(" "),
-							children: col.render(row, rowIndex)
-						}, col.key);
-					})
-				}, key);
-			}) })]
-		})
-	});
+function ConfirmActionButton({ label, icon: Icon, title = "Confirm action", description, confirmLabel, triggerVariant = "outline", confirmVariant = "danger", size = "sm", disabled, className, action, onSuccess }) {
+	const [open, setOpen] = (0, react$1.useState)(false);
+	const [running, setRunning] = (0, react$1.useState)(false);
+	const [error, setError] = (0, react$1.useState)(null);
+	const handleConfirm = async () => {
+		setError(null);
+		setRunning(true);
+		try {
+			const result = await action();
+			onSuccess?.(result);
+			setOpen(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setRunning(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+		type: "button",
+		variant: triggerVariant,
+		size,
+		disabled,
+		onClick: () => {
+			setError(null);
+			setOpen(true);
+		},
+		className,
+		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), label]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open,
+		onOpenChange: (next) => !running && setOpen(next),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTitle, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 text-amber-400" }), title]
+			}), typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : description] }),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn("mt-2 px-3 py-2 rounded border border-danger/40 bg-danger/10", "text-xs text-danger"),
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				type: "button",
+				variant: "ghost",
+				size,
+				disabled: running,
+				onClick: () => setOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: confirmVariant,
+				size,
+				disabled: running,
+				onClick: () => {
+					handleConfirm();
+				},
+				children: [running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), confirmLabel ?? label]
+			})] })
+		] })
+	})] });
 }
+//#endregion
+//#region src/composites/copy-button.tsx
 /**
-* One row as a card. Columns that carry a plain-text `header` become labelled
-* `SettingRow`s — the label is the column title and the value gets the full
-* card width. Columns with no text header (an actions column, a
-* `headerRender`-only column) have no label to show, so they render as a
-* full-width strip at the foot of the card.
+* `CopyButton` — a compact button that copies a string `value` to the
+* clipboard via `navigator.clipboard.writeText`, showing a brief
+* "copied" check state. Addon-agnostic; used wherever a secret / URL
+* needs a one-click copy affordance (export setup panels, etc.).
 */
-function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
-	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
-	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
-	const interactive = onRowClick !== void 0;
-	const extra = rowClassName?.(row, rowIndex) ?? "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-data-table-card": "",
-		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
-		className: [
-			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
-			bordered ? "border border-border" : "",
-			interactive ? "cursor-pointer hover:bg-primary/5" : "",
-			extra
-		].filter(Boolean).join(" "),
-		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-			label: col.header,
-			children: col.render(row, rowIndex)
-		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
-			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
-		})]
+var COPIED_RESET_MS = 2e3;
+function CopyButton({ value, label, srLabel, className, disabled }) {
+	const [copied, setCopied] = (0, react$1.useState)(false);
+	const handleCopy = (0, react$1.useCallback)(() => {
+		if (!value) return;
+		navigator.clipboard.writeText(value).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), COPIED_RESET_MS);
+		});
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+		size: "sm",
+		variant: "ghost",
+		type: "button",
+		disabled: disabled || value.length === 0,
+		onClick: handleCopy,
+		className: cn(className),
+		"aria-label": copied ? "Copied" : `Copy ${srLabel ?? label ?? "value"}`,
+		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5 text-success" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" }), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "ml-1",
+			children: copied ? "Copied" : label
+		}) : null]
 	});
 }
 //#endregion
@@ -45825,99 +46789,6 @@ function fuzzyMatch(query, target) {
 	return normalizeForSearch(target).includes(nq);
 }
 //#endregion
-//#region src/composites/device-list/pagination.tsx
-var NEIGHBORS = 2;
-function computePageButtons(currentPage, totalPages) {
-	if (totalPages <= 1) return [{
-		kind: "page",
-		n: 1
-	}];
-	if (totalPages <= 7) {
-		const all = [];
-		for (let i = 1; i <= totalPages; i++) all.push({
-			kind: "page",
-			n: i
-		});
-		return all;
-	}
-	const result = [];
-	const leftBound = Math.max(2, currentPage - NEIGHBORS);
-	const rightBound = Math.min(totalPages - 1, currentPage + NEIGHBORS);
-	result.push({
-		kind: "page",
-		n: 1
-	});
-	if (leftBound > 2) result.push({
-		kind: "ellipsis",
-		side: "left"
-	});
-	for (let i = leftBound; i <= rightBound; i++) result.push({
-		kind: "page",
-		n: i
-	});
-	if (rightBound < totalPages - 1) result.push({
-		kind: "ellipsis",
-		side: "right"
-	});
-	result.push({
-		kind: "page",
-		n: totalPages
-	});
-	return result;
-}
-function Pagination({ currentPage, totalItems, pageSize, onPageChange, itemNoun = "devices" }) {
-	if (totalItems <= pageSize) return null;
-	const totalPages = Math.ceil(totalItems / pageSize);
-	const startIdx = (currentPage - 1) * pageSize + 1;
-	const endIdx = Math.min(currentPage * pageSize, totalItems);
-	const buttons = computePageButtons(currentPage, totalPages);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-between gap-4 flex-wrap pt-2 text-[11px] text-foreground-subtle",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-			"Showing ",
-			startIdx,
-			"–",
-			endIdx,
-			" of ",
-			totalItems,
-			" ",
-			itemNoun
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "inline-flex items-center gap-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-label": "Previous page",
-					disabled: currentPage === 1,
-					onClick: () => onPageChange(currentPage - 1),
-					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { className: "h-3 w-3" })
-				}),
-				buttons.map((b, i) => {
-					if (b.kind === "ellipsis") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "px-1 text-foreground-subtle/60 select-none",
-						children: "…"
-					}, `e-${i}`);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => onPageChange(b.n),
-						className: cn("inline-flex items-center justify-center h-7 min-w-7 px-1.5 rounded border text-[10.5px] font-medium transition-colors", b.n === currentPage ? "border-primary/40 bg-primary/10 text-primary" : "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface-hover"),
-						children: b.n
-					}, `p-${b.n}`);
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-label": "Next page",
-					disabled: currentPage === totalPages,
-					onClick: () => onPageChange(currentPage + 1),
-					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3 w-3" })
-				})
-			]
-		})]
-	});
-}
-//#endregion
 //#region src/composites/device-list/multi-select.tsx
 /**
 * Compact multi-select dropdown — a single chip-sized trigger ("Label · N")
@@ -48901,7 +49772,7 @@ function hlsLevelToInfo(level) {
 		name: level.name.length > 0 ? level.name : void 0
 	};
 }
-function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQualityOptions, selectedLevel = -1 }) {
+function HlsVideo({ url, format = "hls", authToken, posterUrl, autoPlay = true, className, onQualityOptions, selectedLevel = -1 }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const hlsRef = (0, react$1.useRef)(null);
 	const [error, setError] = (0, react$1.useState)(null);
@@ -48914,6 +49785,23 @@ function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQua
 		onQualityOptions?.([]);
 		const onPlaying = () => setLoading(false);
 		video.addEventListener("playing", onPlaying);
+		if (format === "mp4") {
+			video.src = url;
+			const onLoaded = () => {
+				if (autoPlay) video.play().catch(() => {});
+			};
+			const onFailed = () => setError("Could not load this clip.");
+			video.addEventListener("loadedmetadata", onLoaded);
+			video.addEventListener("error", onFailed);
+			onQualityOptions?.([]);
+			return () => {
+				video.removeEventListener("loadedmetadata", onLoaded);
+				video.removeEventListener("error", onFailed);
+				video.removeEventListener("playing", onPlaying);
+				video.removeAttribute("src");
+				video.load();
+			};
+		}
 		if (!("MediaSource" in window) && video.canPlayType("application/vnd.apple.mpegurl")) {
 			video.src = url;
 			const onLoaded = () => {
@@ -48976,6 +49864,7 @@ function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQua
 		};
 	}, [
 		url,
+		format,
 		authToken,
 		autoPlay,
 		onQualityOptions
@@ -51119,7 +52008,7 @@ function ImageOffIcon({ className }) {
 		]
 	});
 }
-function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
+function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackFormat, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
 	const registeredButtons = usePlayerToolbarButtons();
 	const recordedPlayback = useRecordedPlayback();
 	const [isPlaying, setIsPlaying] = (0, react$1.useState)(autoPlay);
@@ -51420,6 +52309,7 @@ function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIce
 				className: "aspect-video relative",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HlsVideo, {
 					url: playbackUrl,
+					...playbackFormat ? { format: playbackFormat } : {},
 					authToken: playbackAuthToken ?? null,
 					onQualityOptions: handleVodQualityOptions,
 					selectedLevel: vodLevel,
@@ -52796,6 +53686,7 @@ exports.badgeFor$1 = badgeFor;
 exports.buildStepTreeFromSchema = buildStepTreeFromSchema;
 exports.childEntityId = childEntityId;
 exports.childListName = childListName;
+exports.classifyCapability = classifyCapability;
 exports.cn = cn;
 exports.columnsForContext = columnsForContext;
 exports.containerChildToRef = containerChildToRef;
@@ -53034,6 +53925,7 @@ exports.useCameraStreamsGetCameraStreams = useCameraStreamsGetCameraStreams;
 exports.useCameraStreamsGetProfileRtspEntries = useCameraStreamsGetProfileRtspEntries;
 exports.useCameraStreamsGetRtspEntries = useCameraStreamsGetRtspEntries;
 exports.useCameraStreamsPickStream = useCameraStreamsPickStream;
+exports.useCapabilityPresence = useCapabilityPresence;
 exports.useCarbonMonoxideGetStatus = useCarbonMonoxideGetStatus;
 exports.useClimateControlGetStatus = useClimateControlGetStatus;
 exports.useClimateControlSetFanMode = useClimateControlSetFanMode;
@@ -53987,6 +54879,7 @@ exports.useValveStop = useValveStop;
 exports.useVibrationGetStatus = useVibrationGetStatus;
 exports.useVideoclipsGetClipPlayback = useVideoclipsGetClipPlayback;
 exports.useVideoclipsListClips = useVideoclipsListClips;
+exports.useVideoclipsListSources = useVideoclipsListSources;
 exports.useVodPlayback = useVodPlayback;
 exports.useWaterHeaterGetStatus = useWaterHeaterGetStatus;
 exports.useWaterHeaterSetAway = useWaterHeaterSetAway;