@camstack/ui-library 1.2.190 → 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",
@@ -17605,360 +17629,1114 @@ function useCapabilityPresence(capabilityName) {
 	return classifyCapability(query.data);
 }
 //#endregion
-//#region src/contexts/vod-playback.tsx
+//#region ../../node_modules/class-variance-authority/dist/index.mjs
 /**
-* VodPlayback — shared context coordinating recorded (VOD) playback between a
-* widget/section (the Recording panel) and the hero StreamPanel.
+* Copyright 2022 Joe Bell. All rights reserved.
 *
-* 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.
+* 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
 *
-* 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: () => {}
+*   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/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"
+	}
 });
-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
+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
 	});
-}
-/** @returns the VOD playback controller (inert no-op outside a provider). */
-function useVodPlayback() {
-	return (0, react$1.useContext)(VodPlaybackContext);
-}
+});
+Badge.displayName = "Badge";
 //#endregion
-//#region src/composites/clips/ClipPanel.tsx
+//#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/select.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.
+* A native `<select>` styled to match the rest of the field set.
 *
-* **`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.
+* `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.
 *
-* **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.
+* `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 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]);
+var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-2 rounded-md border border-border p-3 text-sm",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "font-medium",
-				children: label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-xs text-muted-foreground",
-					children: "Quality"
-				}), PROFILES.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-pressed": option === profile,
-					onClick: () => onProfileChange(option),
-					className: `rounded px-2 py-0.5 text-xs ${option === profile ? "bg-primary text-primary-foreground" : "bg-muted"}`,
-					children: option
-				}, option))]
-			}),
-			playback.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				role: "status",
-				children: "Preparing the clip — the file is fetched and muxed once…"
-			}) : playback.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				role: "alert",
-				children: ["This clip could not be prepared: ", playback.error?.message ?? "no reason given"]
-			}) : data === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-1",
-				children: [data.served === void 0 || data.served === profile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "text-xs text-amber-600 dark:text-amber-400",
-					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.jsx)("a", {
-					href: hubPath(data.playbackUrl),
-					download: true,
-					className: "text-xs underline",
-					children: "Download this clip"
-				})]
-			})
-		]
-	});
-}
-//#endregion
-//#region src/composites/clips/ClipSilentSources.tsx
-function ClipSilentSources({ silent }) {
-	if (silent.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-		className: "space-y-1 rounded-md border border-amber-500/40 bg-amber-500/5 p-2 text-xs",
-		children: silent.map((notice) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-medium",
-				children: notice.label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-muted-foreground",
-				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: "text-muted-foreground break-words",
-				children: notice.detail
-			})
-		] }, notice.source))
+		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/composites/clips/ClipSourceRow.tsx
-var TONE_CLASS = {
-	ok: "text-emerald-600 dark:text-emerald-400",
-	warn: "text-amber-600 dark:text-amber-400",
-	error: "text-rose-600 dark:text-rose-400"
-};
-function ClipSourceRow({ notice, catalogAge, checked, onToggle }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: "flex items-start gap-2 py-1.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			type: "checkbox",
-			className: "mt-1",
-			checked,
-			"aria-label": `Show ${notice.label}`,
-			onChange: (e) => onToggle(notice.source, e.target.checked)
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-wrap items-baseline gap-x-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-medium",
-							children: notice.label
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-xs text-muted-foreground",
-							children: notice.source
-						}),
-						catalogAge === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "text-xs text-muted-foreground",
-							children: ["read ", catalogAge]
-						})
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: `text-xs ${TONE_CLASS[notice.tone]}`,
-					children: notice.headline
-				}),
-				notice.detail === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-xs text-muted-foreground break-words",
-					children: notice.detail
-				})
-			]
-		})]
+//#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/composites/clips/clip-tile-media.ts
+//#region src/hooks/use-is-mobile.ts
+var MOBILE_QUERY = "(max-width: 767px)";
 /**
-* 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.
+* 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 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}`
-	};
+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);
 }
-/** 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"
+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);
+}
 /**
-* 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.
+* 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 latchMintRefusal(reason) {
-	return refusal(reason);
+function useIsMidWidth() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
 }
 //#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.
-*/
+//#region src/composites/data-table-layout.ts
 /**
-* 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.
+* 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.
 */
-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));
-	}
+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/composites/clips/ClipTile.tsx
+//#region src/lib/responsive.ts
 /**
-* One clip, as a tile.
+* Responsive design tokens — three-tier system.
 *
-* 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 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).
 *
-* 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).
-*/
-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.
+* Tier definitions (Tailwind breakpoints):
 *
-* 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.
+*   • **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."
 *
-* 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).
+*   • **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.
 */
-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;
+/** 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({
@@ -17980,47 +18758,52 @@ 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.jsxs)("button", {
+	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: `flex w-full gap-3 rounded-md border p-2 text-left ${selected ? "border-primary" : "border-border"} ${playable ? "" : "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-muted text-[10px] text-muted-foreground",
-			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)("span", { children: "minting…" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "px-1 text-center",
-				children: media.text
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0 flex-1",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "font-medium",
-					children: clockOf(clip.timeRange.startMs)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-xs text-muted-foreground",
-					children: clip.source
-				}),
-				labels.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-xs",
-					children: labels.join(" · ")
-				}),
-				clip.nativeTypes === void 0 || clip.nativeTypes.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-[10px] text-muted-foreground",
-					children: clip.nativeTypes.join(", ")
-				}),
-				playable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "text-xs text-amber-600 dark:text-amber-400",
-					children: ["Not playable — ", clip.unplayableReason ?? "the source gave no reason"]
+		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
@@ -18129,12 +18912,6 @@ function formatCatalogAge(catalogAsOf, now) {
 }
 //#endregion
 //#region src/composites/clips/clip-view-state.ts
-/** Keep only the rows of selected sources; an absent selection keeps them all. */
-function applySelection(clips, selected) {
-	if (selected === void 0) return clips;
-	const allowed = new Set(selected);
-	return clips.filter((clip) => allowed.has(clip.source));
-}
 function resolveClipsView(input) {
 	if (input.clipsStatus === "error") return {
 		kind: "failed",
@@ -18148,7 +18925,7 @@ function resolveClipsView(input) {
 	const notices = input.sources.map(describeSource);
 	const answered = notices.filter((notice) => notice.answered);
 	const silent = notices.filter((notice) => !notice.answered);
-	const clips = applySelection(input.clips, input.selected);
+	const clips = input.clips;
 	if (clips.length === 0) return {
 		kind: "empty",
 		dayId: input.dayId,
@@ -18164,56 +18941,166 @@ function resolveClipsView(input) {
 	};
 }
 //#endregion
-//#region src/composites/clips/ClipsBrowser.tsx
+//#region src/composites/clips/ClipsSection.tsx
 /**
-* `host/clips-browser` — a camera's clips, from EVERY source it has.
+* `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:'clips', topTab:true }` and `deriveDeviceConfigContribution` emits the
-* section (D14). `DeviceDetail.tsx` is not edited — placement is data, and
-* `device-config-widget-wrapped-binding.spec.ts` pins that the derive works
-* for this cap's WRAPPED binding entry, which no shipped widget cap had
-* exercised before.
-*
-* ## What it shows, and why every part of it exists
-*
-* A camera's clips live in several places at once — the analytics visit log,
-* the camera's own SD card, a hub's storage — and the operator asked for all
-* of them side by side, never one hidden behind another (D549 decision 2). So:
+* 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. Unticking one hides its
-*    ROWS; the source itself never leaves the list.
+*    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 row says which. That is stated as a consequence in
-*    D549 so it is not "fixed" later.
+*    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
+*    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.
 *
-* ## What the picker WRITES — nothing
-*
-* The tick boxes are the cap's own `sources` view filter, forwarded to
-* `listClips`, and they persist nothing. The persistent authority for turning
-* a source off for a camera is `deviceManager.setWrapperActive`, whose deny
-* set is keyed by **addon id** (D556 decision 3) — and one addon serves TWO
-* sources of a hub child (`native:reolink:onboard` and `native:reolink:hub`,
-* both `provider-reolink`). Wiring a per-SOURCE tick box to a per-ADDON
-* authority would make "hide the hub's event view" silently mean "turn off
-* both Reolink sources": a switch that does something other than what it says,
-* which is worse than no switch (D62). The gap and its fix are recorded in
-* ADR 557; until a source row names its own provider, this surface offers the
-* filter it can honour and no second store.
+* ## 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;
-function ClipsBrowser({ deviceId }) {
+/** 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 [hidden, setHidden] = (0, react$1.useState)([]);
+	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");
@@ -18223,115 +19110,186 @@ function ClipsBrowser({ deviceId }) {
 		deviceId,
 		since: window.since,
 		until: window.until,
-		limit: CLIP_PAGE_LIMIT
+		limit: CLIP_PAGE_LIMIT,
+		...provider === "" ? {} : { provider }
 	});
 	const sourceRows = sources.data ?? [];
-	const selected = sourceRows.map((row) => row.source).filter((source) => !hidden.includes(source));
 	const view = resolveClipsView({
 		dayId,
 		clipsStatus: clips.status,
 		clips: clips.data ?? [],
 		sourcesStatus: sources.status,
 		sources: sourceRows,
-		...hidden.length === 0 ? {} : { selected },
 		...clips.error ? { clipsError: clips.error.message } : {},
 		...sources.error ? { sourcesError: sources.error.message } : {}
 	});
 	const now = Date.now();
-	const toggle = (source, next) => setHidden((current) => next ? current.filter((id) => id !== source) : current.includes(source) ? current : [...current, source]);
-	if (presence === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "status",
-		children: "Asking the registry whether this cluster serves clips…"
+	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)("div", {
-		role: "alert",
-		children: "The capability registry could not be reached, so whether this camera has clip sources is unknown — not absent."
+	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.jsxs)("div", {
+	if (presence === "absent") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "status",
-		children: [
-			"No provider of ",
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: "videoclips" }),
-			" is installed in this cluster."
-		]
+		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-4",
+		className: "space-y-3",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				"aria-label": "Clip sources",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "text-sm font-semibold",
-					children: "Sources"
-				}), sources.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "status",
-					children: "Loading this camera's clip sources…"
-				}) : sourceRows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "status",
-					children: "No provider answered for this camera — nothing claims to hold clips for it."
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: sourceRows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipSourceRow, {
-					notice: describeSource(row),
-					catalogAge: formatCatalogAge(row.availability.catalogAsOf, now),
-					checked: !hidden.includes(row.source),
-					onToggle: toggle
-				}, row.source)) })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				"aria-label": "Day",
-				className: "flex items-center gap-2",
+			/* @__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)("button", {
-						type: "button",
-						"aria-label": "Previous day",
-						onClick: () => setDayId(shiftDay(dayId, -1)),
-						children: "‹"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "font-medium",
-						children: formatDayLabel(dayId)
+					/* @__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)("button", {
-						type: "button",
-						"aria-label": "Next day",
-						onClick: () => setDayId(shiftDay(dayId, 1)),
-						children: "›"
+					/* @__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)
+						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => setDayId(toDayId(/* @__PURE__ */ new Date())),
-						children: "Today"
+					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",
-				children: view.kind === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				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),
 						"…"
 					]
-				}) : view.kind === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					role: "alert",
-					children: ["The clip list could not be read: ", view.message]
-				}) : view.kind === "empty" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "status",
-						children: view.nobodyAnswered ? `No source could answer for ${formatDayLabel(dayId)}.` : `No clips on ${formatDayLabel(dayId)} from ${view.answered.map((notice) => notice.label).join(", ")}.`
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipSilentSources, { silent: view.silent })]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipSilentSources, { silent: view.silent }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-						className: "space-y-2",
-						children: view.clips.map((clip) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipTile, {
+				}), /* @__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,
@@ -20462,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
@@ -21721,7 +22603,7 @@ var HOST_WIDGETS = {
 	"host/ptz-autotrack": AutotrackSection,
 	"host/recording-panel": RecordingPanel,
 	"host/camera-grid-layout": CameraGridLayoutEditor,
-	"host/clips-browser": ClipsBrowser
+	"host/clips-browser": ClipsSection
 };
 //#endregion
 //#region src/composites/widget-slot.tsx
@@ -26028,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: {
@@ -26148,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", {
@@ -26225,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
@@ -26276,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", {
@@ -26601,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)(() => {
@@ -29855,650 +30508,230 @@ function coverageLine(monitor) {
 	const extra = [...covered].filter((c) => !SCENE_CAPTURE_VARIANTS.some((v) => v === c));
 	for (const c of extra) parts.push(`${variantLabel(c)} ✓`);
 	const missing = SCENE_CAPTURE_VARIANTS.filter((v) => !covered.has(v));
-	if (missing.length === 0) return parts.join(" · ");
-	if (covered.size === 0) return `${parts.join(" · ")} — nothing captured yet, so this scene is not watching.`;
-	const names = missing.map((v) => variantLabel(v).toLowerCase()).join(" and ");
-	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
-	};
+	if (missing.length === 0) return parts.join(" · ");
+	if (covered.size === 0) return `${parts.join(" · ")} — nothing captured yet, so this scene is not watching.`;
+	const names = missing.map((v) => variantLabel(v).toLowerCase()).join(" and ");
+	return monitor.onUncoveredCondition === "judge-anyway" ? `${parts.join(" · ")} — ${names} judged against the references you do have.` : `${parts.join(" · ")} — optional; checks in ${names} are skipped.`;
 }
 /**
-* 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
@@ -46556,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")