@camstack/ui-library 1.2.190 → 1.2.192

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",
@@ -6383,6 +6407,8 @@ var usePipelineAnalyticsGetTrackMedia = trpc.pipelineAnalytics.getTrackMedia.use
 var usePipelineAnalyticsListTrackMedia = trpc.pipelineAnalytics.listTrackMedia.useQuery;
 /** Generated alias around `trpc.pipelineAnalytics.listEventMedia.useQuery`. */
 var usePipelineAnalyticsListEventMedia = trpc.pipelineAnalytics.listEventMedia.useQuery;
+/** Generated alias around `trpc.pipelineAnalytics.ownersWithMedia.useQuery`. */
+var usePipelineAnalyticsOwnersWithMedia = trpc.pipelineAnalytics.ownersWithMedia.useQuery;
 /** Generated alias around `trpc.pipelineAnalytics.searchObjectEvents.useQuery`. */
 var usePipelineAnalyticsSearchObjectEvents = trpc.pipelineAnalytics.searchObjectEvents.useQuery;
 /** Generated alias around `trpc.pipelineAnalytics.wipeObjectEmbeddings.useMutation`. */
@@ -17605,334 +17631,1630 @@ 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"
-				})]
-			})
-		]
+		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/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))
+//#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/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/composites/cap-settings/recording-timeline-model.ts
+/** Tie-break precedence for a bucket's dominant kind (first wins on equal count). */
+var KIND_PRECEDENCE = [
+	"object",
+	"motion",
+	"audio"
+];
+/**
+* Convert server-side density rows into `DensityBucket[]` for the timeline
+* heatmap. Rows with total === 0 are skipped (defensive; server already omits
+* them). Returns a sparse, ascending-by-index array — EventHeatmap positions
+* each bar by `b.startMs` rather than array index, so gaps are fine.
+*/
+function densityRowsToBuckets(rows, windowFrom, bucketMs) {
+	const buckets = [];
+	for (const row of rows) {
+		const counts = {
+			motion: row.motion,
+			object: row.object,
+			audio: row.audio
+		};
+		const total = counts.motion + counts.object + counts.audio;
+		if (total === 0) continue;
+		const index = Math.floor((row.bucketStart - windowFrom) / bucketMs);
+		let dominant = null;
+		let best = -1;
+		for (const kind of KIND_PRECEDENCE) if (counts[kind] > best) {
+			best = counts[kind];
+			dominant = kind;
+		}
+		buckets.push({
+			index,
+			startMs: row.bucketStart,
+			endMs: row.bucketStart + bucketMs,
+			counts,
+			total,
+			dominant
+		});
+	}
+	return buckets.toSorted((a, b) => a.index - b.index);
+}
+/** Distance from `ms` to the interval `[startMs, endMs]` (0 if inside). */
+function distanceToSpan(ms, span) {
+	if (ms < span.startMs) return span.startMs - ms;
+	if (ms > span.endMs) return ms - span.endMs;
+	return 0;
 }
-//#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.
+* Resolve a playback window for a click at `clickMs` against recorded `spans`.
+* Inside a span → play from the click to that span's end. In a gap / outside →
+* snap to the WHOLE nearest span. No spans → null (nothing to play).
+* `spans` are expected ascending by start (as `mergeAvailabilitySpans` returns).
 */
-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}`
+function seekTargetForSpans(clickMs, spans) {
+	if (spans.length === 0) return null;
+	const containing = spans.find((s) => clickMs >= s.startMs && clickMs <= s.endMs);
+	if (containing) return {
+		fromMs: clickMs,
+		toMs: containing.endMs
 	};
+	let nearest = null;
+	let bestDist = Infinity;
+	for (const s of spans) {
+		const d = distanceToSpan(clickMs, s);
+		if (d < bestDist) {
+			bestDist = d;
+			nearest = s;
+		}
+	}
+	return nearest ? {
+		fromMs: nearest.startMs,
+		toMs: nearest.endMs
+	} : null;
 }
-/** 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"
-	};
+/**
+* Position `ms` inside the window `[fromMs, toMs]` as a clamped percentage
+* (0–100). A zero/negative-width window yields 0. Callers use this for `left:`.
+*/
+function pctForMs(ms, fromMs, toMs) {
+	const span = toMs - fromMs;
+	if (span <= 0) return 0;
+	const pct = (ms - fromMs) / span * 100;
+	if (pct < 0) return 0;
+	if (pct > 100) return 100;
+	return pct;
 }
 /**
-* 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.
+* Build a DayWindow for the given calendar `date` using local time.
+* For any day strictly in the past: `fromMs` = local midnight, `toMs` =
+* next local midnight (exactly 24 h).
+* For today (or any future day that contains `nowMs`): `toMs = nowMs` so the
+* window never extends into the future.
 */
-function latchMintRefusal(reason) {
-	return refusal(reason);
+function dayWindow(date, nowMs) {
+	const fromMs = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0).getTime();
+	const nextMidnight = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, 0, 0).getTime();
+	return {
+		fromMs,
+		toMs: Math.max(fromMs, Math.min(nextMidnight, nowMs))
+	};
 }
-//#endregion
-//#region src/composites/clips/clip-thumbnail-fetch.ts
+/** Available zoom levels in ms, from widest (24h) to narrowest (15 min). */
+var ZOOM_LEVELS = [
+	24 * 36e5,
+	12 * 36e5,
+	6 * 36e5,
+	36e5,
+	15 * 6e4
+];
 /**
-* 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.
+* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+* midpoint. On today's timeline the view's right edge is "now", so zooming this
+* way keeps the most recent footage pinned to the right instead of drifting to
+* a midday range that no longer contains now. Panning then moves back/forward.
 *
-* 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.
+* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+* show a wider window than the day holds — e.g. early morning with little
+* elapsed time).
 */
+function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
+	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
+	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
+	return {
+		fromMs: toMs - levelMs,
+		toMs
+	};
+}
 /**
-* 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.
+* Shift `win` by `deltaMs`, preserving width, clamped within `dayBounds`.
 */
-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));
+function panWindow(win, dayBounds, deltaMs) {
+	const width = win.toMs - win.fromMs;
+	let fromMs = win.fromMs + deltaMs;
+	let toMs = win.toMs + deltaMs;
+	if (fromMs < dayBounds.fromMs) {
+		fromMs = dayBounds.fromMs;
+		toMs = fromMs + width;
 	}
-	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));
+	if (toMs > dayBounds.toMs) {
+		toMs = dayBounds.toMs;
+		fromMs = toMs - width;
 	}
+	return {
+		fromMs,
+		toMs
+	};
 }
-//#endregion
-//#region src/composites/clips/ClipTile.tsx
+/** Candidate bucket sizes in ms (coarsest first). */
+var BUCKET_CANDIDATES = [
+	15 * 6e4,
+	5 * 6e4,
+	6e4,
+	3e4,
+	15e3,
+	5e3
+];
 /**
-* 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).
+* Choose a sensible heatmap bucket size for a visible span of `spanMs`,
+* targeting ~96-120 buckets. Always picks from `BUCKET_CANDIDATES`.
 */
-function clockOf(ms) {
-	return new Date(ms).toLocaleTimeString(void 0, {
-		hour: "2-digit",
+function bucketMsForSpan(spanMs) {
+	const targetBucket = spanMs / 100;
+	for (const candidate of BUCKET_CANDIDATES) if (candidate <= targetBucket) return candidate;
+	return BUCKET_CANDIDATES[BUCKET_CANDIDATES.length - 1] ?? 5e3;
+}
+/**
+* Produce `count` evenly-spaced axis ticks spanning [fromMs, toMs].
+* - `pct` is via pctForMs (first=0, last=100).
+* - `label` is a localised HH:MM clock string.
+*/
+function axisTicks(fromMs, toMs, count) {
+	if (count <= 1) return [{
+		pct: 0,
+		label: new Date(fromMs).toLocaleTimeString(void 0, {
+			hour: "2-digit",
+			minute: "2-digit"
+		})
+	}];
+	const ticks = [];
+	for (let i = 0; i < count; i++) {
+		const ms = fromMs + i / (count - 1) * (toMs - fromMs);
+		const pct = pctForMs(ms, fromMs, toMs);
+		const label = new Date(ms).toLocaleTimeString(void 0, {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		ticks.push({
+			pct,
+			label
+		});
+	}
+	return ticks;
+}
+//#endregion
+//#region src/hooks/use-is-mobile.ts
+var MOBILE_QUERY = "(max-width: 767px)";
+/**
+* Mid breakpoint — below this width the sidebar collapses to an
+* icons-only rail to reclaim canvas space. Above it (and outside
+* mobile) the full sidebar renders. Threshold matches Tailwind `lg`
+* so sidebar fans out at the same point grids switch to multi-column.
+*/
+var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+/**
+* `matchMedia` is universal in browsers but absent in bare DOM environments.
+* These hooks are called from shared primitives (`DataTable` picks its narrow
+* layout with one), so throwing here takes down the whole page that merely
+* rendered a table. Where the capability is missing, report the desktop
+* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
+*/
+function matchQuery(query) {
+	if (typeof window.matchMedia !== "function") return null;
+	return window.matchMedia(query);
+}
+function subscribeQuery(query) {
+	return (callback) => {
+		const mql = matchQuery(query);
+		if (mql === null) return () => {};
+		mql.addEventListener("change", callback);
+		return () => mql.removeEventListener("change", callback);
+	};
+}
+function getSnapshot(query) {
+	return () => matchQuery(query)?.matches ?? false;
+}
+function getServerSnapshot() {
+	return false;
+}
+function useIsMobile() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MOBILE_QUERY), getSnapshot(MOBILE_QUERY), getServerSnapshot);
+}
+/**
+* True when the viewport is in the medium (`md`) Tailwind range —
+* 768px ≤ width < 1024px. Use to drive layouts that should pack denser
+* than full-desktop but more legibly than mobile (e.g. icons-only
+* sidebar rail, narrower stat tiles).
+*/
+function useIsMidWidth() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
+}
+//#endregion
+//#region src/composites/data-table-layout.ts
+/**
+* At this many columns and above, `auto` switches a narrow viewport to cards.
+* Three columns still fit a phone at a readable size; four do not.
+*/
+var CARD_MODE_MIN_COLUMNS = 4;
+function resolveTableLayout({ mode, columnCount, isNarrow }) {
+	if (!isNarrow) return "table";
+	if (mode === "scroll") return "table";
+	if (mode === "cards") return "cards";
+	if (columnCount === 0) return "table";
+	return columnCount >= 4 ? "cards" : "table";
+}
+//#endregion
+//#region src/lib/responsive.ts
+/**
+* Responsive design tokens — three-tier system.
+*
+* The admin-ui targets three width tiers; every component should pick
+* the right token from this file instead of hand-coding breakpoints.
+* Adopting the tokens uniformly is what makes the app feel consistent
+* across operator devices (mobile / tablet / desktop) and what unlocks
+* targeted tuning (e.g. shrink every label by 1px in one place).
+*
+* Tier definitions (Tailwind breakpoints):
+*
+*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
+*     Single column, tight padding, smallest text, icon-only buttons
+*     where labels can be inferred. The operator can still see every
+*     stat / action — no horizontal scroll, no clipped text. The user
+*     directive: "molta informazione in poco spazio quando la width è
+*     bassa."
+*
+*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
+*     2-column grids, side panels become visible, button labels return.
+*     Targets ~768px–1024px viewports — the most common operator sizes.
+*
+*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
+*     4-column grids, generous padding, full-width header text,
+*     side-by-side composite layouts. The operator has elbow room.
+*
+* Conventions:
+*   - **Always start from L1** — the bare class is always the compact
+*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
+*     desktop-first breakpoints; no max-width queries.
+*   - **Token strings are static** — kept as `as const` so callers can
+*     compose them via `cn()` / template literals without running a
+*     class generator at runtime.
+*   - **Pair the token with a comment** — the comment in the file
+*     names every breakpoint it crosses, so a reader can predict the
+*     layout without going to Tailwind docs.
+*/
+/** Container padding for a card-style section (header + body). */
+var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
+/** Header strip inside a card (between border-b lines). */
+var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
+/** Body padding for a card-style section. */
+var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
+/** Gap between cards in a vertical stack. */
+var STACK_GAP = "space-y-3 sm:space-y-4";
+/** Gap between cards in a grid (4 cells / row at lg). */
+var GRID_GAP = "gap-2 sm:gap-3";
+/** Row padding inside a divided list (e.g. InfoRow). */
+var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
+/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
+var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
+/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
+var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
+/** Side-by-side layout that stacks below md (canvas + side panel). */
+var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
+/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
+var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
+/**
+* The tier boundary at which a settings label/value row stops stacking.
+*
+* Below it (L1 — compact) the row is ONE column: label on its own line, value
+* on the next at full width. Above it the row is label-left / value-right as
+* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
+* value beside it; a phone has neither, and the failure mode is not "cramped"
+* but "the value is the part that gets cut" — the one thing the operator
+* opened the page to read.
+*/
+var SETTING_ROW_STACK_BREAKPOINT = "sm";
+/** Outer row: single column at L1, label/value columns from `sm` up. */
+var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
+/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
+var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
+/**
+* Value lane — the value text plus its trailing affordances (copy / reveal).
+* `w-full` at L1 so the value owns the whole row once the label is above it;
+* `sm:flex-1` makes it share the row again from `sm` up.
+*/
+var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
+/**
+* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
+* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
+* desktop form, where the row is wide enough for truncation to be a choice
+* rather than data loss.
+*/
+var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
+/** Section header label (uppercase tracking-wider). */
+var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
+/** Field label inside a row. */
+var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
+/** Sub-label / hint text. */
+var TEXT_HINT = "text-[10px] text-foreground-subtle";
+/** Primary value (a metric, badge, …). */
+var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
+/** Big metric value (StatCard). */
+var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
+/** Default compact button. */
+var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
+/** Primary compact button. */
+var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
+/** Danger compact button. */
+var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
+/** Warning compact button (e.g. cancel-drawing). */
+var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
+/** Compact text/select/number input. */
+var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
+/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
+var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
+var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
+var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
+//#endregion
+//#region src/composites/setting-row.tsx
+function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
+	const LabelTag = elements === "description" ? "dt" : "span";
+	const ValueTag = elements === "description" ? "dd" : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-setting-row": "",
+		className: cn(SETTING_ROW, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
+			"data-setting-row-label": "",
+			className: SETTING_ROW_LABEL,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
+			"data-setting-row-value": "",
+			className: SETTING_ROW_VALUE,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-setting-row-value-text": "",
+				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
+				children
+			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center gap-0.5",
+				children: actions
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/sort-header-button.tsx
+function SortHeaderButton({ label, active, dir, onSort }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: onSort,
+		className: "group/sort inline-flex items-center gap-0.5 hover:text-foreground transition-colors",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), active ? dir === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: cn("h-3 w-3 flex-shrink-0 opacity-0 transition-opacity", "group-hover/sort:opacity-30") })]
+	});
+}
+//#endregion
+//#region src/composites/table-sort.ts
+/**
+* The toggle rule, and the only copy of it.
+*
+* none → asc → desc → none, and a click on a DIFFERENT column starts that
+* column fresh at `asc`. `sameColumn` says whether the clicked column is the
+* one currently sorted; `currentDir` is its direction (`null` when nothing is
+* sorted). Returns the next direction, or `null` for "unsorted".
+*
+* Split out from {@link nextTableSort} so the device list — whose sort state
+* keys columns by `columnId`, not `columnKey` — can reuse the rule without a
+* cast and without a second copy of it.
+*/
+function nextSortDirection(sameColumn, currentDir) {
+	if (!sameColumn || currentDir === null) return "asc";
+	return currentDir === "asc" ? "desc" : null;
+}
+/**
+* Toggle a column's sort on header click: none → asc → desc → none.
+* Clicking a DIFFERENT column starts it fresh at `asc`.
+*/
+function nextTableSort(current, columnKey) {
+	const dir = nextSortDirection(current !== null && current.columnKey === columnKey, current === null ? null : current.dir);
+	return dir === null ? null : {
+		columnKey,
+		dir
+	};
+}
+/**
+* Ascending comparison of two cell values.
+*
+* Numbers compare numerically and strings compare with `localeCompare` — a
+* numeric column must never be ordered as text ("100" before "9"), and a text
+* column must respect the locale's collation. A mixed column (one row a
+* number, another a string) falls back to string comparison of both, which is
+* the only total order available; it is not a shape any caller should build on
+* purpose.
+*
+* `null` is NOT handled here — {@link sortRowsByColumn} pulls it out first,
+* because its placement is direction-independent and a comparator that is
+* multiplied by the direction factor cannot express that.
+*/
+function compareValues(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b));
+}
+/**
+* Return a NEW array of `rows` ordered by `sort`.
+*
+* `valueOf` is the column's `sortValue` — it is called once per row per
+* comparison, so it must be cheap (read a field, do not format a string).
+* `sort === null` ⇒ a fresh shallow copy in the incoming order.
+*/
+function sortRowsByColumn(rows, sort, valueOf) {
+	if (sort === null) return [...rows];
+	const factor = sort.dir === "asc" ? 1 : -1;
+	return rows.toSorted((a, b) => {
+		const av = valueOf(a);
+		const bv = valueOf(b);
+		if (av === null || bv === null) {
+			if (av === bv) return 0;
+			return av === null ? 1 : -1;
+		}
+		return factor * compareValues(av, bv);
+	});
+}
+/** Derive the `<th>` `aria-sort` for `columnKey` from the table's sort state. */
+function ariaSortForColumn(sort, columnKey) {
+	if (sort === null || sort.columnKey !== columnKey) return "none";
+	return sort.dir === "asc" ? "ascending" : "descending";
+}
+//#endregion
+//#region src/composites/data-table.tsx
+/**
+* DataTable — shared responsive table for admin pages.
+*
+* Recipes baked in:
+*   - `overflow-x-auto` wrapper so narrow viewports don't clip the
+*     right edge (the rounded border survives the scroll).
+*   - `min-w-[Npx]` on the inner table so columns don't squash below
+*     readable width before the scroll kicks in.
+*   - `whitespace-nowrap` on headers — column titles never wrap to
+*     two lines (`AUTO-KILL` was the regression that triggered this).
+*   - Themed `bg-surface` + `border-border` so contrast works in both
+*     light and dark themes.
+*
+* Column model: caller supplies `columns: DataColumn<T>[]` and
+* `rows: T[]`. Each column declares `header`, optional `align`,
+* optional `nowrap`, and a `render(row) => ReactNode` that produces
+* the cell content.
+*
+*   <DataTable
+*     columns={[
+*       { key: 'username', header: 'Username', render: (u) => u.username },
+*       { key: 'role',     header: 'Role',     render: (u) => <RoleBadge .../> },
+*       { key: 'actions',  header: '',         align: 'right', render: (u) => <Actions .../> },
+*     ]}
+*     rows={users}
+*     minWidthPx={560}
+*   />
+*
+* If finer header markup is needed, pass `headerRender` instead of
+* `header` (e.g. for a sortable click affordance).
+*
+* ── Narrow viewports ──────────────────────────────────────────────────────
+* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
+* scrolls the columns sideways INSIDE the table — the page body never moves
+* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
+* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
+* `auto` still applies the old column-count rule for a surface that wants it.
+* See `resolveTableLayout`.
+*
+* ── Scrolling the BODY, not the page ──────────────────────────────────────
+* `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
+* with the column header pinned. It is ONE prop, not two, because "this list
+* scrolls internally" and "its header stays visible" are the same decision: a
+* capped table whose header scrolls away is a list of unlabelled cells.
+*
+* Use it wherever the row count is open-ended (rules, targets, delivery
+* history) so the page keeps its own header, filters and actions in view while
+* the operator moves through the rows.
+*/
+/**
+* The default cap for an internally-scrolling table.
+*
+* `60vh` leaves the page header, its filters and its actions on screen at
+* every viewport while still showing ~10 rows — and it is a fraction, so it
+* does not need a breakpoint of its own.
+*/
+var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
+var ALIGN_CLASS = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
+	const isNarrow = useIsMobile();
+	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
+	const layout = resolveTableLayout({
+		mode: mobileMode,
+		columnCount: columns.length,
+		isNarrow
+	});
+	const scrolls = maxBodyHeight !== void 0;
+	const sortedColumn = (0, react$1.useMemo)(() => sort === null ? void 0 : columns.find((col) => col.key === sort.columnKey && col.sortValue !== void 0), [columns, sort]);
+	const sortValue = sortedColumn?.sortValue;
+	const displayRows = (0, react$1.useMemo)(() => sortValue === void 0 ? rows : sortRowsByColumn(rows, sort, sortValue), [
+		rows,
+		sort,
+		sortValue
+	]);
+	const activeSort = sortedColumn === void 0 ? null : sort;
+	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
+		children: emptyMessage
+	});
+	if (rows.length === 0) return null;
+	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
+		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
+			row,
+			rowIndex,
+			columns,
+			bordered,
+			onRowClick,
+			rowClassName
+		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: [
+			"rounded-lg",
+			bordered ? "border border-border" : "",
+			"bg-surface overflow-x-auto",
+			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
+			style: { minWidth: `${minWidthPx}px` },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+				className: "bg-surface",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
+					const align = col.align ?? "left";
+					const nowrap = col.nowrap ?? true;
+					const sortable = col.sortValue !== void 0;
+					const isSorted = activeSort !== null && activeSort.columnKey === col.key;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						"aria-sort": sortable ? ariaSortForColumn(activeSort, col.key) : void 0,
+						title: sortable ? void 0 : col.notSortableReason,
+						className: [
+							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
+							scrolls ? "sticky top-0 z-10" : "",
+							ALIGN_CLASS[align],
+							nowrap ? "whitespace-nowrap" : "",
+							col.width ?? ""
+						].filter(Boolean).join(" "),
+						children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortHeaderButton, {
+							label: col.headerRender ? col.headerRender() : col.header,
+							active: isSorted,
+							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
+							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
+						}) : col.headerRender ? col.headerRender() : col.header
+					}, col.key);
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
+				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
+				const extra = rowClassName?.(row, rowIndex) ?? "";
+				const interactive = onRowClick !== void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
+					children: columns.map((col) => {
+						const align = col.align ?? "left";
+						const nowrap = col.nowrap ?? true;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: [
+								"px-3 py-2 text-foreground border-b border-border",
+								ALIGN_CLASS[align],
+								nowrap ? "whitespace-nowrap" : ""
+							].filter(Boolean).join(" "),
+							children: col.render(row, rowIndex)
+						}, col.key);
+					})
+				}, key);
+			}) })]
+		})
+	});
+}
+/**
+* One row as a card. Columns that carry a plain-text `header` become labelled
+* `SettingRow`s — the label is the column title and the value gets the full
+* card width. Columns with no text header (an actions column, a
+* `headerRender`-only column) have no label to show, so they render as a
+* full-width strip at the foot of the card.
+*/
+function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
+	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
+	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
+	const interactive = onRowClick !== void 0;
+	const extra = rowClassName?.(row, rowIndex) ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-data-table-card": "",
+		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+		className: [
+			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
+			bordered ? "border border-border" : "",
+			interactive ? "cursor-pointer hover:bg-primary/5" : "",
+			extra
+		].filter(Boolean).join(" "),
+		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+			label: col.header,
+			children: col.render(row, rowIndex)
+		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
+			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
+		})]
+	});
+}
+//#endregion
+//#region src/composites/device-list/pagination.tsx
+var NEIGHBORS = 2;
+function computePageButtons(currentPage, totalPages) {
+	if (totalPages <= 1) return [{
+		kind: "page",
+		n: 1
+	}];
+	if (totalPages <= 7) {
+		const all = [];
+		for (let i = 1; i <= totalPages; i++) all.push({
+			kind: "page",
+			n: i
+		});
+		return all;
+	}
+	const result = [];
+	const leftBound = Math.max(2, currentPage - NEIGHBORS);
+	const rightBound = Math.min(totalPages - 1, currentPage + NEIGHBORS);
+	result.push({
+		kind: "page",
+		n: 1
+	});
+	if (leftBound > 2) result.push({
+		kind: "ellipsis",
+		side: "left"
+	});
+	for (let i = leftBound; i <= rightBound; i++) result.push({
+		kind: "page",
+		n: i
+	});
+	if (rightBound < totalPages - 1) result.push({
+		kind: "ellipsis",
+		side: "right"
+	});
+	result.push({
+		kind: "page",
+		n: totalPages
+	});
+	return result;
+}
+function Pagination({ currentPage, totalItems, pageSize, onPageChange, itemNoun = "devices" }) {
+	if (totalItems <= pageSize) return null;
+	const totalPages = Math.ceil(totalItems / pageSize);
+	const startIdx = (currentPage - 1) * pageSize + 1;
+	const endIdx = Math.min(currentPage * pageSize, totalItems);
+	const buttons = computePageButtons(currentPage, totalPages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between gap-4 flex-wrap pt-2 text-[11px] text-foreground-subtle",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+			"Showing ",
+			startIdx,
+			"–",
+			endIdx,
+			" of ",
+			totalItems,
+			" ",
+			itemNoun
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Previous page",
+					disabled: currentPage === 1,
+					onClick: () => onPageChange(currentPage - 1),
+					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { className: "h-3 w-3" })
+				}),
+				buttons.map((b, i) => {
+					if (b.kind === "ellipsis") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "px-1 text-foreground-subtle/60 select-none",
+						children: "…"
+					}, `e-${i}`);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(b.n),
+						className: cn("inline-flex items-center justify-center h-7 min-w-7 px-1.5 rounded border text-[10.5px] font-medium transition-colors", b.n === currentPage ? "border-primary/40 bg-primary/10 text-primary" : "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface-hover"),
+						children: b.n
+					}, `p-${b.n}`);
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Next page",
+					disabled: currentPage === totalPages,
+					onClick: () => onPageChange(currentPage + 1),
+					className: cn("inline-flex items-center justify-center h-7 w-7 rounded border border-border bg-surface text-foreground-subtle", "hover:text-foreground hover:bg-surface-hover transition-colors", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-surface"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3 w-3" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/empty-state.tsx
+function EmptyState({ icon: Icon, title, description, action, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col items-center justify-center gap-3 py-12", className),
+		children: [
+			Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: "h-12 w-12 text-foreground-subtle",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-1 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground-muted text-sm font-medium",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground-subtle text-xs max-w-xs",
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-1",
+				children: action
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/error-box.tsx
+var VARIANT_STYLES$1 = {
+	danger: {
+		box: "border-danger/40 bg-danger/10",
+		icon: "text-danger",
+		title: "text-danger",
+		message: "text-danger"
+	},
+	warning: {
+		box: "border-amber-500/40 bg-amber-500/10",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-700 dark:text-amber-300",
+		message: "text-amber-700 dark:text-amber-300"
+	}
+};
+function ErrorBox({ message, title, onRetry, action, variant = "danger", className }) {
+	const styles = VARIANT_STYLES$1[variant];
+	const Icon = variant === "warning" ? TriangleAlert : CircleAlert;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: cn("flex items-start gap-2.5 rounded border px-3 py-2.5", styles.box, className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: cn("h-4 w-4 mt-0.5 shrink-0", styles.icon),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: cn("text-xs font-semibold", styles.title),
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cn("text-xs break-words", styles.message, title ? "mt-0.5" : ""),
+					children: message
+				})]
+			}),
+			action ?? (onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: onRetry,
+				className: cn("shrink-0 inline-flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium", "border border-current/30 hover:bg-current/10 transition-colors", styles.message),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshCw, {
+					className: "h-3 w-3",
+					"aria-hidden": "true"
+				}), "Retry"]
+			}))
+		]
+	});
+}
+//#endregion
+//#region src/composites/cap-settings/EventHeatmap.tsx
+var KIND_BG = {
+	motion: "bg-emerald-500",
+	object: "bg-violet-500",
+	audio: "bg-orange-500"
+};
+function EventHeatmap({ windowFrom, windowTo, buckets, selectedIndex, onSelectBucket }) {
+	const peak = buckets.reduce((m, b) => Math.max(m, b.total), 0);
+	const firstBucket = buckets[0];
+	const bucketWidthPct = firstBucket ? pctForMs(firstBucket.endMs, windowFrom, windowTo) - pctForMs(firstBucket.startMs, windowFrom, windowTo) : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative h-6 rounded bg-background/40",
+		children: buckets.map((b) => {
+			if (b.total === 0 || b.dominant === null) return null;
+			const heightPct = peak > 0 ? Math.max(15, b.total / peak * 100) : 0;
+			const left = pctForMs(b.startMs, windowFrom, windowTo);
+			const selected = b.index === selectedIndex;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-testid": "heatmap-bar",
+				title: `${new Date(b.startMs).toLocaleTimeString(void 0, {
+					hour: "2-digit",
+					minute: "2-digit"
+				})} · motion ${b.counts.motion} · object ${b.counts.object}`,
+				onClick: () => onSelectBucket(b.index),
+				className: `absolute bottom-0 rounded-t-sm transition-opacity ${KIND_BG[b.dominant]} ${selected ? "opacity-100 ring-1 ring-amber-400" : "opacity-80 hover:opacity-100"}`,
+				style: {
+					left: `${left}%`,
+					width: `${Math.max(.6, bucketWidthPct)}%`,
+					height: `${heightPct}%`
+				}
+			}, b.index);
+		})
+	});
+}
+//#endregion
+//#region src/composites/cap-settings/TimelineControls.tsx
+/** Format a Date as "YYYY-MM-DD" for <input type="date">. */
+function formatDateInput(date) {
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+/** Parse "YYYY-MM-DD" from <input type="date"> into a local-midnight Date. */
+function parseDateInput(value) {
+	const parts = value.split("-");
+	const y = parts[0] !== void 0 ? parseInt(parts[0], 10) : NaN;
+	const m = parts[1] !== void 0 ? parseInt(parts[1], 10) : NaN;
+	const d = parts[2] !== void 0 ? parseInt(parts[2], 10) : NaN;
+	if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
+	return new Date(y, m - 1, d);
+}
+/**
+* Date selector + prev/next pan + zoom-in / zoom-out buttons for the recording
+* timeline. Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on
+* the view's RIGHT edge — so on today's timeline "now" stays pinned to the right
+* instead of drifting to a midday range. The ◀ / ▶ buttons step the visible
+* window earlier/later within the day (the discoverable equivalent of the
+* horizontal wheel-pan wired in RecordingTimeline), so a zoomed-in day can be
+* navigated back and forth without a mouse wheel.
+*/
+function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
+	const handleDateChange = (e) => {
+		const parsed = parseDateInput(e.target.value);
+		if (parsed !== null) onDayChange(parsed);
+	};
+	const viewSpan = view.toMs - view.fromMs;
+	const currentLevelIdx = (() => {
+		let best = 0;
+		let bestDiff = Infinity;
+		for (let i = 0; i < ZOOM_LEVELS.length; i++) {
+			const level = ZOOM_LEVELS[i];
+			if (level === void 0) continue;
+			const diff = Math.abs(level - viewSpan);
+			if (diff < bestDiff) {
+				bestDiff = diff;
+				best = i;
+			}
+		}
+		return best;
+	})();
+	const rightEdgeMs = view.toMs;
+	const handleZoomIn = () => {
+		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
+		if (nextLevel === void 0) return;
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
+	};
+	const handleZoomOut = () => {
+		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
+		if (nextLevel === void 0) return;
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
+	};
+	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
+	const canZoomOut = currentLevelIdx > 0;
+	const panStepMs = Math.max(1, Math.round(viewSpan * .9));
+	const canPanPrev = view.fromMs > dayBounds.fromMs;
+	const canPanNext = view.toMs < dayBounds.toMs;
+	const handlePanPrev = () => {
+		onViewChange(panWindow(view, dayBounds, -panStepMs));
+	};
+	const handlePanNext = () => {
+		onViewChange(panWindow(view, dayBounds, panStepMs));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "date",
+				value: formatDateInput(day),
+				max: formatDateInput(/* @__PURE__ */ new Date()),
+				onChange: handleDateChange,
+				className: "rounded border border-border bg-background px-2 py-0.5 text-[11px] text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
+				"aria-label": "Select recording day"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ml-auto flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handlePanPrev,
+						disabled: !canPanPrev,
+						title: "Earlier (pan back)",
+						"aria-label": "Pan earlier",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handlePanNext,
+						disabled: !canPanNext,
+						title: "Later (pan forward)",
+						"aria-label": "Pan later",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "mx-0.5 h-3 w-px bg-border",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleZoomOut,
+						disabled: !canZoomOut,
+						title: "Zoom out",
+						"aria-label": "Zoom out",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { size: 13 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleZoomIn,
+						disabled: !canZoomIn,
+						title: "Zoom in",
+						"aria-label": "Zoom in",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { size: 13 })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[9px] text-foreground-subtle",
+				children: zoomLabel(viewSpan)
+			})
+		]
+	});
+}
+function zoomLabel(spanMs) {
+	const h = spanMs / 36e5;
+	if (h >= 24) return "24h";
+	if (h >= 1) return `${Math.round(h)}h`;
+	const m = spanMs / 6e4;
+	return `${Math.round(m)}m`;
+}
+//#endregion
+//#region src/composites/clips/ClipBandBar.tsx
+/**
+* The clips section's timebar — the recording section's own controls, driving
+* a clip list instead of a player (D564).
+*
+* *"Possiamo utilizzare lo stesso componente della sezione recording con la
+* timebar dove selezionare un periodo e mostrare le clip solo di quella banda
+* selezionata, espandibile."* — the operator, 2026-09-20. So this is not a
+* second timebar: it is `TimelineControls` and `EventHeatmap`, the two pieces
+* `RecordingTimeline` is itself built from, over the same
+* `recording-timeline-model` (`dayWindow`, `panWindow`,
+* `zoomWindowAnchoredRight`, `bucketMsForSpan`, `axisTicks`). One
+* implementation, one model, two surfaces.
+*
+* ## What it does NOT take from the recording timeline
+*
+* `CoverageTrack` stays behind. There it is the seek surface — a click drives
+* the hero player through the `camstack-control` channel or an HLS VOD
+* request. A copy here would either be a dead bar or a SECOND thing claiming
+* to move the playhead, and two components holding two ideas of the same
+* position is the defect this repo keeps paying for. The clips section plays a
+* clip through `ClipPanel`, which is its own, already-shipped path.
+*
+* ## This component is presentational
+*
+* It holds no state. The day, the visible window and the picked bucket all
+* live in `ClipsSection`, because that is where the band is turned into the
+* `listClips` argument — a bar that kept its own copy of the selection would
+* be the second authority again, one component down.
+*/
+/**
+* How many ms one pixel of horizontal wheel delta pans.
+*
+* The same calibration `RecordingTimeline` uses — a standard wheel tick
+* (~100 px of `deltaX`) pans ~30 min. Two timebars that panned at different
+* rates would read as two different controls.
+*/
+var PAN_MS_PER_PX$1 = 18e3 / 100;
+function ClipBandBar({ day, onDayChange, view, dayBounds, onViewChange, buckets, selectedBucketIndex, onSelectBucket, densityLoading }) {
+	const trackAreaRef = (0, react$1.useRef)(null);
+	const handleWheel = (0, react$1.useCallback)((e) => {
+		const deltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.shiftKey ? e.deltaY : 0;
+		if (deltaX === 0) return;
+		e.preventDefault();
+		onViewChange(panWindow(view, dayBounds, deltaX * PAN_MS_PER_PX$1));
+	}, [
+		view,
+		dayBounds,
+		onViewChange
+	]);
+	const ticks = axisTicks(view.fromMs, view.toMs, 5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineControls, {
+			day,
+			onDayChange,
+			view,
+			dayBounds,
+			onViewChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: trackAreaRef,
+			onWheel: handleWheel,
+			className: "space-y-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
+					children: "Events · density"
+				}),
+				densityLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-6 animate-pulse rounded bg-background/40" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EventHeatmap, {
+					windowFrom: view.fromMs,
+					windowTo: view.toMs,
+					buckets,
+					selectedIndex: selectedBucketIndex,
+					onSelectBucket
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative h-3",
+					children: ticks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "absolute -translate-x-1/2 text-[9px] text-foreground-subtle",
+						style: { left: `${String(tick.pct)}%` },
+						children: tick.label
+					}, tick.pct))
+				})
+			]
+		})]
+	});
+}
+//#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/lib/format-duration.ts
+/**
+* How long something lasted, the way this product says it.
+*
+* Promoted verbatim from `composites/cap-settings/RecordingPanel.tsx`, which
+* had been the only place answering this question about MEDIA. It is now the
+* only place, so a clip's length and a recording's retention read the same.
+*
+* Two other private formatters stay where they are, on purpose:
+* `config-form-field.tsx` formats a config VALUE (sub-second `ms`, `—` for a
+* value that is not a number), and `scene-monitor-copy.ts`'s `humanDuration`
+* is deliberately single-unit and coarse for a sentence. Neither is a media
+* length, and folding them in here would change what they say.
+*/
+function formatDurationMs(ms) {
+	const totalSec = Math.round(ms / 1e3);
+	const h = Math.floor(totalSec / 3600);
+	const m = Math.floor(totalSec % 3600 / 60);
+	const s = totalSec % 60;
+	if (h > 0) return `${h}h ${m}m`;
+	if (m > 0) return `${m}m ${s}s`;
+	return `${s}s`;
+}
+//#endregion
+//#region src/composites/clips/clip-tile-media.ts
+/**
+* Why no still exists, in words, keyed by the refusal CODE.
+*
+* A code this table does not know falls back to the provider's own prose, so a
+* firmware inventing a refusal reaches the operator rather than becoming a
+* blank tile.
+*/
+var REFUSAL_TEXT = {
+	sleeping: () => "The camera is asleep — a still would cost a wake",
+	"camera-refused": (reason) => `The camera refused — ${reason}`,
+	"no-keyframe": () => "No decodable frame inside this window",
+	unsupported: () => "This source cannot produce stills",
+	"queue-full": () => "Waiting for the camera — its still queue is full",
+	"camera-backoff": () => "The camera is resting after refusing — trying again shortly",
+	"no-catalog-row": () => "This clip is no longer in the catalog",
+	"unknown-device": () => "This camera is not served here",
+	"uid-missing": () => "The camera’s id is not known yet"
+};
+function wordsFor(code, reason) {
+	const known = code === void 0 ? void 0 : REFUSAL_TEXT[code];
+	return known === void 0 ? reason : known(reason);
+}
+function refusal(reason, code) {
+	return {
+		kind: "unavailable",
+		reason,
+		text: wordsFor(code, 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, 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 204, as something the tile can draw.
+*
+* `deferred` is the ONLY answer that comes back, and only because the server
+* said so. Everything else — an unknown disposition, an absent one, a code
+* this build has never heard of — is final, so the failure mode of a
+* vocabulary that moves is a tile that stops early, never one that asks for
+* ever.
+*/
+function describeRefusal(headers) {
+	if (headers.disposition === "deferred") return {
+		kind: "deferred",
+		reason: headers.reason,
+		text: wordsFor(headers.code, headers.reason),
+		retryAfterMs: headers.retryAfterMs ?? null
+	};
+	return refusal(headers.reason, headers.code);
+}
+//#endregion
+//#region src/composites/clips/clip-thumbnail-fetch.ts
+/**
+* Asking a `thumbnailMint` route for a still — and hearing what it says.
+*
+* The route answers **200** with a JPEG or **204** with a refusal. An
+* `<img src>` cannot read a 204's headers: it 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.
+*
+* ## Three headers, one of which decides everything (D563)
+*
+* `x-camstack-reason-code` is the token the tile keys its words on,
+* `x-camstack-reason` is the camera's own prose, and
+* `x-camstack-disposition` says whether to come back. This module reads them;
+* it does not classify them. A response with no disposition — every
+* provider-reolink build before D563 — is FINAL, which is precisely the
+* behaviour that shipped.
+*
+* A thrown fetch is DEFERRED: nothing refused anything, one request lost a
+* race, and a tile that goes permanently blank for that is the same defect
+* with a different cause.
+*/
+/**
+* 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 deferredNetworkFailure(err);
+	}
+	if (response.status === 204) return describeRefusal(refusalHeadersOf(response));
+	if (!response.ok) return describeRefusal({
+		code: void 0,
+		reason: `HTTP ${String(response.status)}`,
+		disposition: void 0
+	});
+	try {
+		return {
+			kind: "image",
+			blob: await response.blob()
+		};
+	} catch (err) {
+		return deferredNetworkFailure(err);
+	}
+}
+function refusalHeadersOf(response) {
+	const retryAfter = response.headers.get("retry-after");
+	const seconds = retryAfter === null ? NaN : Number(retryAfter);
+	return {
+		code: response.headers.get(_camstack_types.CLIP_STILL_REASON_CODE_HEADER) ?? void 0,
+		reason: response.headers.get(_camstack_types.CLIP_STILL_REASON_HEADER) ?? "no reason given",
+		disposition: response.headers.get(_camstack_types.CLIP_STILL_DISPOSITION_HEADER) ?? void 0,
+		retryAfterMs: Number.isFinite(seconds) && seconds > 0 ? seconds * 1e3 : null
+	};
+}
+function deferredNetworkFailure(err) {
+	return describeRefusal({
+		code: void 0,
+		reason: err instanceof Error ? err.message : String(err),
+		disposition: "deferred"
+	});
+}
+/** First wait, doubling from there. */
+var STILL_RETRY_BASE_MS = 4e3;
+/** No single wait is longer than this, whatever the server hints. */
+var STILL_RETRY_MAX_WAIT_MS = 3e4;
+/** ±25 %: enough to break a synchronised herd, not enough to stop being a
+*  schedule. */
+var JITTER_FRACTION = .25;
+/** The next wait, or `null` when the budget is spent. */
+function planStillRetry(input) {
+	if (input.attempt >= 4 || input.attempt < 0) return null;
+	const curve = STILL_RETRY_BASE_MS * 2 ** input.attempt;
+	const chosen = Math.max(curve, input.serverHintMs ?? 0);
+	const bounded = Math.min(chosen, STILL_RETRY_MAX_WAIT_MS);
+	const jitter = 1 + (input.random() * 2 - 1) * JITTER_FRACTION;
+	return { waitMs: Math.round(bounded * jitter) };
+}
+//#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.
+* Ask a mint route, and come back only for the answers that say to.
 *
 * 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
@@ -17940,8 +19262,12 @@ function clockOf(ms) {
 * 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).
+* A FINAL refusal is latched for the life of the tile: a camera that just said
+* "asleep" is not asked again behind the operator's back. A DEFERRED one is
+* not a refusal at all — the still is queued — so the tile keeps showing
+* loading and re-asks on `planStillRetry`'s bounded, jittered schedule. When
+* that budget runs out the deferred answer becomes what the tile SAYS, so the
+* end state is words, never a blank box and never another request (D563).
 */
 function useMintedStill(clip) {
 	const offered = (0, react$1.useMemo)(() => resolveTileMedia(clip), [
@@ -17956,7 +19282,8 @@ function useMintedStill(clip) {
 		if (mintUrl === null || typeof fetch !== "function") return void 0;
 		let objectUrl = null;
 		let cancelled = false;
-		(async () => {
+		let timer;
+		const ask = async (attempt) => {
 			const answer = await fetchMintedThumbnail(hubPath(mintUrl), fetch);
 			if (cancelled) return;
 			if (answer.kind === "image") {
@@ -17967,10 +19294,31 @@ function useMintedStill(clip) {
 				});
 				return;
 			}
-			setLatched(answer);
-		})();
+			if (answer.kind !== "deferred") {
+				setLatched(answer);
+				return;
+			}
+			const plan = planStillRetry({
+				attempt,
+				serverHintMs: answer.retryAfterMs,
+				random: Math.random
+			});
+			if (plan === null) {
+				setLatched({
+					kind: "unavailable",
+					reason: answer.reason,
+					text: answer.text
+				});
+				return;
+			}
+			timer = setTimeout(() => {
+				ask(attempt + 1);
+			}, plan.waitMs);
+		};
+		ask(0);
 		return () => {
 			cancelled = true;
+			if (timer !== void 0) clearTimeout(timer);
 			if (objectUrl !== null) URL.revokeObjectURL(objectUrl);
 		};
 	}, [mintUrl]);
@@ -17980,51 +19328,90 @@ 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" || media.kind === "deferred" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					role: "status",
+					"aria-label": media.kind === "mint" ? "Loading the still" : media.text,
+					className: "h-full w-full",
+					children: /* @__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.jsxs)("div", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm font-medium text-foreground",
+							children: clockOf(clip.timeRange.startMs)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[11px] text-foreground-subtle",
+							children: clip.inProgress === true ? "Recording…" : formatDurationMs(clip.timeRange.endMs - clip.timeRange.startMs)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-[10px] text-foreground-subtle",
+						children: clip.source
+					}),
+					labels.length === 0 && clip.nativeTypes === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap gap-1",
+						children: [labels.map((label) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							variant: "info",
+							children: label
+						}, `label:${label}`)), (clip.nativeTypes ?? []).map((native) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+							style: "outline",
+							children: native
+						}, `native:${native}`))]
+					}),
+					playable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-[11px] text-warning",
+						children: ["Not playable — ", clip.unplayableReason ?? "the source gave no reason"]
+					})
+				]
+			})]
+		})
 	}) });
 }
 //#endregion
 //#region src/composites/clips/clip-day-window.ts
+/**
+* LOCAL calendar-day arithmetic for the clips browser.
+*
+* The browser no longer NAVIGATES days — it follows a band selected on the
+* recording timebar (D564) — but the local day survived the move as the unit
+* the COST is counted in: a Reolink search is clamped to one camera-local day
+* per call, so `clip-band.ts` counts a band's local days to decide whether it
+* may be asked for. The window builder this file used to own went with the day
+* picker; `recording-timeline-model.ts`'s `dayWindow(date, nowMs)` is the one
+* that builds windows now, and one directory holding two functions of that
+* name was the confusion worth deleting.
+*
+* Two properties are pinned by spec because both are invisible until they are
+* wrong:
+*
+*  - Deriving the day in UTC shifts every band by the browser's offset, and an
+*    operator in Berlin would see a 22:00 clip filed under the next day.
+*  - Walking days by adding 86 400 000 ms repeats or skips a calendar day
+*    across a DST change. The walk goes through `Date`'s own day arithmetic.
+*
+* A day id is `YYYY-MM-DD` — it orders lexicographically, which is what lets
+* the band's day walk terminate on a comparison rather than on a count.
+*/
 function pad2(value) {
 	return value < 10 ? `0${String(value)}` : String(value);
 }
@@ -18037,16 +19424,6 @@ function startOfDay(dayId) {
 function toDayId(instant) {
 	return `${String(instant.getFullYear())}-${pad2(instant.getMonth() + 1)}-${pad2(instant.getDate())}`;
 }
-/** The half-open local-wall-clock window of one day. */
-function dayWindow$1(dayId) {
-	const start = startOfDay(dayId);
-	const end = startOfDay(dayId);
-	end.setDate(end.getDate() + 1);
-	return {
-		since: start.getTime(),
-		until: end.getTime()
-	};
-}
 /** Walk `days` calendar days from `dayId` — DST-safe, because `Date` does it. */
 function shiftDay(dayId, days) {
 	const moved = startOfDay(dayId);
@@ -18054,11 +19431,12 @@ function shiftDay(dayId, days) {
 	return toDayId(moved);
 }
 /**
-* The day, spelled out for the header.
+* The day, spelled out — the calendar half of a band's label.
 *
-* An empty list has to say WHICH day it is empty for — "no clips" with no date
-* beside it is the ambiguity this surface exists to remove — so this label is
-* rendered next to every state, not only the populated one.
+* An empty list has to say WHICH period it is empty for; "no clips" with no
+* date beside it is the ambiguity this surface exists to remove. `formatBandLabel`
+* puts the times around it, and every state renders the result, not only the
+* populated one.
 */
 function formatDayLabel(dayId) {
 	return startOfDay(dayId).toLocaleDateString(void 0, {
@@ -18068,6 +19446,77 @@ function formatDayLabel(dayId) {
 		day: "numeric"
 	});
 }
+/** Defensive ceiling on the day walk so an inverted band can never loop. */
+var MAX_WALK_DAYS = 366;
+/**
+* How many LOCAL calendar days the half-open band touches.
+*
+* The end instant is exclusive, so a band that ends exactly at the next local
+* midnight is one day, not two — otherwise every whole-day band would report
+* double what it costs.
+*/
+function localDaysInBand(band) {
+	const lastInstant = Math.max(band.fromMs, band.toMs - 1);
+	const endDay = toDayId(new Date(lastInstant));
+	let cursor = toDayId(new Date(band.fromMs));
+	let days = 0;
+	while (cursor <= endDay && days < MAX_WALK_DAYS) {
+		days += 1;
+		cursor = shiftDay(cursor, 1);
+	}
+	return days;
+}
+/** Whether this band may be asked for, and what it costs, in one value. */
+function planClipBand(band) {
+	const localDays = localDaysInBand(band);
+	if (localDays > 2) return {
+		kind: "too-wide",
+		band,
+		localDays,
+		maxLocalDays: 2
+	};
+	return {
+		kind: "askable",
+		band,
+		localDays
+	};
+}
+/**
+* The band for the current selection: the picked bucket, or — when nothing is
+* picked — the whole visible window.
+*
+* "Nothing picked means everything visible" is safe here and only here,
+* because the visible window is itself bounded by the timebar. It is never
+* "everything the camera holds" (D382's unstated ask).
+*/
+function bandForSelection(view, bucket) {
+	if (bucket === null) return {
+		fromMs: view.fromMs,
+		toMs: view.toMs
+	};
+	return {
+		fromMs: Math.max(bucket.startMs, view.fromMs),
+		toMs: Math.min(bucket.endMs, view.toMs)
+	};
+}
+function formatTime$2(instant) {
+	return new Date(instant).toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+/**
+* The band, spelled out.
+*
+* Every state renders it — an empty list has to say WHICH period it is empty
+* for, the same rule the day label carried before the band replaced it.
+*/
+function formatBandLabel(band) {
+	const fromDay = toDayId(new Date(band.fromMs));
+	const toDay = toDayId(new Date(Math.max(band.fromMs, band.toMs - 1)));
+	if (fromDay === toDay) return `${formatDayLabel(fromDay)}, ${formatTime$2(band.fromMs)} – ${formatTime$2(band.toMs)}`;
+	return `${formatDayLabel(fromDay)} ${formatTime$2(band.fromMs)} – ${formatDayLabel(toDay)} ${formatTime$2(band.toMs)}`;
+}
 //#endregion
 //#region src/composites/clips/clip-source-state.ts
 var STATE_COPY = {
@@ -18129,13 +19578,13 @@ 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.plan.kind === "too-wide") return {
+		kind: "refused",
+		band: input.plan.band,
+		localDays: input.plan.localDays,
+		maxLocalDays: input.plan.maxLocalDays
+	};
 	if (input.clipsStatus === "error") return {
 		kind: "failed",
 		message: input.clipsError ?? "The clip list could not be read"
@@ -18148,10 +19597,10 @@ 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,
+		band: input.plan.band,
 		answered,
 		silent,
 		nobodyAnswered: answered.length === 0
@@ -18164,174 +19613,415 @@ 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 period comes from the recording section's timebar, not a day picker
+*
+* It shipped with its own `‹ day ›` pair and the operator replaced it the same
+* way he replaced the chrome: *"Possiamo utilizzare lo stesso componente della
+* sezione recording con la timebar dove selezionare un periodo e mostrare le
+* clip solo di quella banda selezionata, espandibile."* So the list follows a
+* BAND (D564) — `TimelineControls` for the day, the zoom and the pan,
+* `EventHeatmap` for picking a narrower window out of it, both of them the
+* pieces `RecordingTimeline` is itself built from, over the same
+* `recording-timeline-model`. Three things that are decisions, not details:
+*
+*  - **The band lives HERE, once.** `ClipBandBar` is presentational. Two
+*    components holding two ideas of the selected period is the defect this
+*    repo keeps paying for, and the period is what the query is made of.
+*  - **`CoverageTrack` stayed behind**, because there it is the seek surface
+*    that moves the hero player's playhead. A copy here would be a dead bar or
+*    a second claimant on that position.
+*  - **A band is asked for only if it is affordable.** `clip-band.ts` counts
+*    the LOCAL days it touches — the camera's own search is clamped to one per
+*    call, and a day listing is 4.3–6.0 s on 592 — and refuses past the bound
+*    by name rather than asking and rendering whichever days answered.
+*
+* ## 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 }) {
-	const [dayId, setDayId] = (0, react$1.useState)(() => toDayId(/* @__PURE__ */ new Date()));
-	const [hidden, setHidden] = (0, react$1.useState)([]);
+/** 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 [day, setDay] = (0, react$1.useState)(() => /* @__PURE__ */ new Date());
+	const [view, setView] = (0, react$1.useState)(() => dayWindow(/* @__PURE__ */ new Date(), Date.now()));
+	const [selectedBucket, setSelectedBucket] = (0, react$1.useState)(null);
+	const [provider, setProvider] = (0, react$1.useState)("");
+	const [page, setPage] = (0, react$1.useState)(1);
 	const [selectedClip, setSelectedClip] = (0, react$1.useState)(null);
 	const [profile, setProfile] = (0, react$1.useState)("low");
 	const presence = useCapabilityPresence("videoclips");
-	const window = (0, react$1.useMemo)(() => dayWindow$1(dayId), [dayId]);
+	const dayBounds = (0, react$1.useMemo)(() => dayWindow(day, Date.now()), [day]);
+	const bucketMs = bucketMsForSpan(view.toMs - view.fromMs);
+	const density = usePipelineAnalyticsGetEventDensity({
+		deviceId,
+		since: view.fromMs,
+		until: view.toMs,
+		bucketMs
+	});
+	const buckets = (0, react$1.useMemo)(() => densityRowsToBuckets(density.data ?? [], view.fromMs, bucketMs), [
+		density.data,
+		view.fromMs,
+		bucketMs
+	]);
+	const selected = selectedBucket === null ? void 0 : buckets.find((b) => b.index === selectedBucket);
+	const band = (0, react$1.useMemo)(() => bandForSelection(view, selected === void 0 ? null : {
+		startMs: selected.startMs,
+		endMs: selected.endMs
+	}), [view, selected]);
+	const plan = planClipBand(band);
 	const sources = useVideoclipsListSources({ deviceId });
 	const clips = useVideoclipsListClips({
 		deviceId,
-		since: window.since,
-		until: window.until,
-		limit: CLIP_PAGE_LIMIT
-	});
+		since: band.fromMs,
+		until: band.toMs,
+		limit: CLIP_PAGE_LIMIT,
+		...provider === "" ? {} : { provider }
+	}, { enabled: plan.kind === "askable" });
 	const sourceRows = sources.data ?? [];
-	const selected = sourceRows.map((row) => row.source).filter((source) => !hidden.includes(source));
-	const view = resolveClipsView({
-		dayId,
+	const clipsView = resolveClipsView({
+		plan,
 		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]);
+	(0, react$1.useEffect)(() => {
+		setPage(1);
+	}, [band.fromMs, band.toMs]);
+	const handleDayChange = (next) => {
+		setDay(next);
+		setView(dayWindow(next, Date.now()));
+		setSelectedBucket(null);
+	};
+	const handleViewChange = (next) => {
+		setView(next);
+		setSelectedBucket(null);
+	};
+	const handleSelectBucket = (index) => {
+		setSelectedBucket((current) => current === index ? null : index);
+	};
+	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 = clipsView.kind === "listed" ? clipsView.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.jsx)("p", {
+					className: "mt-1 text-[11px] text-foreground-subtle",
+					children: "The list follows the period selected on the timebar below — the recording section's own control. Zoom out to widen it, pan or pick a day to move it, click a density bar to narrow it to that window."
+				})
+			] }),
+			/* @__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)("span", {
+							className: "px-1 text-xs font-medium text-foreground",
+							children: formatBandLabel(band)
+						}), selectedBucket === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							variant: "outline",
+							onClick: () => setSelectedBucket(null),
+							children: "Expand to the visible window"
+						})]
 					})
 				]
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipBandBar, {
+				day,
+				onDayChange: handleDayChange,
+				view,
+				dayBounds,
+				onViewChange: handleViewChange,
+				buckets,
+				selectedBucketIndex: selectedBucket,
+				onSelectBucket: handleSelectBucket,
+				densityLoading: density.status === "pending"
+			}),
+			/* @__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: clipsView.kind === "refused" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+					variant: "warning",
+					title: "That period is too wide to list",
+					message: `${formatBandLabel(clipsView.band)} covers ${String(clipsView.localDays)} local days, and a clip listing is asked one local day at a time — at most ${String(clipsView.maxLocalDays)}. Nothing was asked for; narrow the band and the list follows it.`
+				}) : clipsView.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),
+						formatBandLabel(band),
 						"…"
 					]
-				}) : 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" })] }) : clipsView.kind === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+					title: "The clip list could not be read",
+					message: clipsView.message
+				}) : clipsView.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: clipsView.nobodyAnswered ? `No source could answer for ${formatBandLabel(clipsView.band)}` : `No clips in ${formatBandLabel(clipsView.band)}`,
+						...clipsView.nobodyAnswered ? {} : { description: `Asked ${clipsView.answered.map((notice) => notice.label).join(", ")}.` }
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SilentSources, { silent: clipsView.silent })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SilentSources, { silent: clipsView.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 +22152,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
@@ -20587,201 +22201,6 @@ function formatBytes(bytes) {
 	return `${value >= 100 ? Math.round(value).toString() : value.toFixed(1)} ${unit}`;
 }
 //#endregion
-//#region src/composites/cap-settings/recording-timeline-model.ts
-/** Tie-break precedence for a bucket's dominant kind (first wins on equal count). */
-var KIND_PRECEDENCE = [
-	"object",
-	"motion",
-	"audio"
-];
-/**
-* Convert server-side density rows into `DensityBucket[]` for the timeline
-* heatmap. Rows with total === 0 are skipped (defensive; server already omits
-* them). Returns a sparse, ascending-by-index array — EventHeatmap positions
-* each bar by `b.startMs` rather than array index, so gaps are fine.
-*/
-function densityRowsToBuckets(rows, windowFrom, bucketMs) {
-	const buckets = [];
-	for (const row of rows) {
-		const counts = {
-			motion: row.motion,
-			object: row.object,
-			audio: row.audio
-		};
-		const total = counts.motion + counts.object + counts.audio;
-		if (total === 0) continue;
-		const index = Math.floor((row.bucketStart - windowFrom) / bucketMs);
-		let dominant = null;
-		let best = -1;
-		for (const kind of KIND_PRECEDENCE) if (counts[kind] > best) {
-			best = counts[kind];
-			dominant = kind;
-		}
-		buckets.push({
-			index,
-			startMs: row.bucketStart,
-			endMs: row.bucketStart + bucketMs,
-			counts,
-			total,
-			dominant
-		});
-	}
-	return buckets.toSorted((a, b) => a.index - b.index);
-}
-/** Distance from `ms` to the interval `[startMs, endMs]` (0 if inside). */
-function distanceToSpan(ms, span) {
-	if (ms < span.startMs) return span.startMs - ms;
-	if (ms > span.endMs) return ms - span.endMs;
-	return 0;
-}
-/**
-* Resolve a playback window for a click at `clickMs` against recorded `spans`.
-* Inside a span → play from the click to that span's end. In a gap / outside →
-* snap to the WHOLE nearest span. No spans → null (nothing to play).
-* `spans` are expected ascending by start (as `mergeAvailabilitySpans` returns).
-*/
-function seekTargetForSpans(clickMs, spans) {
-	if (spans.length === 0) return null;
-	const containing = spans.find((s) => clickMs >= s.startMs && clickMs <= s.endMs);
-	if (containing) return {
-		fromMs: clickMs,
-		toMs: containing.endMs
-	};
-	let nearest = null;
-	let bestDist = Infinity;
-	for (const s of spans) {
-		const d = distanceToSpan(clickMs, s);
-		if (d < bestDist) {
-			bestDist = d;
-			nearest = s;
-		}
-	}
-	return nearest ? {
-		fromMs: nearest.startMs,
-		toMs: nearest.endMs
-	} : null;
-}
-/**
-* Position `ms` inside the window `[fromMs, toMs]` as a clamped percentage
-* (0–100). A zero/negative-width window yields 0. Callers use this for `left:`.
-*/
-function pctForMs(ms, fromMs, toMs) {
-	const span = toMs - fromMs;
-	if (span <= 0) return 0;
-	const pct = (ms - fromMs) / span * 100;
-	if (pct < 0) return 0;
-	if (pct > 100) return 100;
-	return pct;
-}
-/**
-* Build a DayWindow for the given calendar `date` using local time.
-* For any day strictly in the past: `fromMs` = local midnight, `toMs` =
-* next local midnight (exactly 24 h).
-* For today (or any future day that contains `nowMs`): `toMs = nowMs` so the
-* window never extends into the future.
-*/
-function dayWindow(date, nowMs) {
-	const fromMs = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0).getTime();
-	const nextMidnight = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, 0, 0).getTime();
-	return {
-		fromMs,
-		toMs: Math.max(fromMs, Math.min(nextMidnight, nowMs))
-	};
-}
-/** Available zoom levels in ms, from widest (24h) to narrowest (15 min). */
-var ZOOM_LEVELS = [
-	24 * 36e5,
-	12 * 36e5,
-	6 * 36e5,
-	36e5,
-	15 * 6e4
-];
-/**
-* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
-* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
-* midpoint. On today's timeline the view's right edge is "now", so zooming this
-* way keeps the most recent footage pinned to the right instead of drifting to
-* a midday range that no longer contains now. Panning then moves back/forward.
-*
-* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
-* show a wider window than the day holds — e.g. early morning with little
-* elapsed time).
-*/
-function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
-	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
-	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
-	return {
-		fromMs: toMs - levelMs,
-		toMs
-	};
-}
-/**
-* Shift `win` by `deltaMs`, preserving width, clamped within `dayBounds`.
-*/
-function panWindow(win, dayBounds, deltaMs) {
-	const width = win.toMs - win.fromMs;
-	let fromMs = win.fromMs + deltaMs;
-	let toMs = win.toMs + deltaMs;
-	if (fromMs < dayBounds.fromMs) {
-		fromMs = dayBounds.fromMs;
-		toMs = fromMs + width;
-	}
-	if (toMs > dayBounds.toMs) {
-		toMs = dayBounds.toMs;
-		fromMs = toMs - width;
-	}
-	return {
-		fromMs,
-		toMs
-	};
-}
-/** Candidate bucket sizes in ms (coarsest first). */
-var BUCKET_CANDIDATES = [
-	15 * 6e4,
-	5 * 6e4,
-	6e4,
-	3e4,
-	15e3,
-	5e3
-];
-/**
-* Choose a sensible heatmap bucket size for a visible span of `spanMs`,
-* targeting ~96-120 buckets. Always picks from `BUCKET_CANDIDATES`.
-*/
-function bucketMsForSpan(spanMs) {
-	const targetBucket = spanMs / 100;
-	for (const candidate of BUCKET_CANDIDATES) if (candidate <= targetBucket) return candidate;
-	return BUCKET_CANDIDATES[BUCKET_CANDIDATES.length - 1] ?? 5e3;
-}
-/**
-* Produce `count` evenly-spaced axis ticks spanning [fromMs, toMs].
-* - `pct` is via pctForMs (first=0, last=100).
-* - `label` is a localised HH:MM clock string.
-*/
-function axisTicks(fromMs, toMs, count) {
-	if (count <= 1) return [{
-		pct: 0,
-		label: new Date(fromMs).toLocaleTimeString(void 0, {
-			hour: "2-digit",
-			minute: "2-digit"
-		})
-	}];
-	const ticks = [];
-	for (let i = 0; i < count; i++) {
-		const ms = fromMs + i / (count - 1) * (toMs - fromMs);
-		const pct = pctForMs(ms, fromMs, toMs);
-		const label = new Date(ms).toLocaleTimeString(void 0, {
-			hour: "2-digit",
-			minute: "2-digit"
-		});
-		ticks.push({
-			pct,
-			label
-		});
-	}
-	return ticks;
-}
-//#endregion
 //#region src/composites/cap-settings/CoverageTrack.tsx
 function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek, onScrubStart, onScrubMove, onScrubEnd }) {
 	const [hoverInfo, setHoverInfo] = (0, react$1.useState)(null);
@@ -20892,42 +22311,6 @@ function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek, onScru
 	});
 }
 //#endregion
-//#region src/composites/cap-settings/EventHeatmap.tsx
-var KIND_BG = {
-	motion: "bg-emerald-500",
-	object: "bg-violet-500",
-	audio: "bg-orange-500"
-};
-function EventHeatmap({ windowFrom, windowTo, buckets, selectedIndex, onSelectBucket }) {
-	const peak = buckets.reduce((m, b) => Math.max(m, b.total), 0);
-	const firstBucket = buckets[0];
-	const bucketWidthPct = firstBucket ? pctForMs(firstBucket.endMs, windowFrom, windowTo) - pctForMs(firstBucket.startMs, windowFrom, windowTo) : 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "relative h-6 rounded bg-background/40",
-		children: buckets.map((b) => {
-			if (b.total === 0 || b.dominant === null) return null;
-			const heightPct = peak > 0 ? Math.max(15, b.total / peak * 100) : 0;
-			const left = pctForMs(b.startMs, windowFrom, windowTo);
-			const selected = b.index === selectedIndex;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				"data-testid": "heatmap-bar",
-				title: `${new Date(b.startMs).toLocaleTimeString(void 0, {
-					hour: "2-digit",
-					minute: "2-digit"
-				})} · motion ${b.counts.motion} · object ${b.counts.object}`,
-				onClick: () => onSelectBucket(b.index),
-				className: `absolute bottom-0 rounded-t-sm transition-opacity ${KIND_BG[b.dominant]} ${selected ? "opacity-100 ring-1 ring-amber-400" : "opacity-80 hover:opacity-100"}`,
-				style: {
-					left: `${left}%`,
-					width: `${Math.max(.6, bucketWidthPct)}%`,
-					height: `${heightPct}%`
-				}
-			}, b.index);
-		})
-	});
-}
-//#endregion
 //#region src/composites/cap-settings/event-thumb.tsx
 function EventThumb({ mediaUrl, kind }) {
 	const [failed, setFailed] = (0, react$1.useState)(false);
@@ -21052,142 +22435,6 @@ function EventBucketStrip({ clips, loading, busyKey, onPlay, enabledKinds, onTog
 	});
 }
 //#endregion
-//#region src/composites/cap-settings/TimelineControls.tsx
-/** Format a Date as "YYYY-MM-DD" for <input type="date">. */
-function formatDateInput(date) {
-	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-}
-/** Parse "YYYY-MM-DD" from <input type="date"> into a local-midnight Date. */
-function parseDateInput(value) {
-	const parts = value.split("-");
-	const y = parts[0] !== void 0 ? parseInt(parts[0], 10) : NaN;
-	const m = parts[1] !== void 0 ? parseInt(parts[1], 10) : NaN;
-	const d = parts[2] !== void 0 ? parseInt(parts[2], 10) : NaN;
-	if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
-	return new Date(y, m - 1, d);
-}
-/**
-* Date selector + prev/next pan + zoom-in / zoom-out buttons for the recording
-* timeline. Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on
-* the view's RIGHT edge — so on today's timeline "now" stays pinned to the right
-* instead of drifting to a midday range. The ◀ / ▶ buttons step the visible
-* window earlier/later within the day (the discoverable equivalent of the
-* horizontal wheel-pan wired in RecordingTimeline), so a zoomed-in day can be
-* navigated back and forth without a mouse wheel.
-*/
-function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
-	const handleDateChange = (e) => {
-		const parsed = parseDateInput(e.target.value);
-		if (parsed !== null) onDayChange(parsed);
-	};
-	const viewSpan = view.toMs - view.fromMs;
-	const currentLevelIdx = (() => {
-		let best = 0;
-		let bestDiff = Infinity;
-		for (let i = 0; i < ZOOM_LEVELS.length; i++) {
-			const level = ZOOM_LEVELS[i];
-			if (level === void 0) continue;
-			const diff = Math.abs(level - viewSpan);
-			if (diff < bestDiff) {
-				bestDiff = diff;
-				best = i;
-			}
-		}
-		return best;
-	})();
-	const rightEdgeMs = view.toMs;
-	const handleZoomIn = () => {
-		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
-		if (nextLevel === void 0) return;
-		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
-	};
-	const handleZoomOut = () => {
-		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
-		if (nextLevel === void 0) return;
-		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
-	};
-	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
-	const canZoomOut = currentLevelIdx > 0;
-	const panStepMs = Math.max(1, Math.round(viewSpan * .9));
-	const canPanPrev = view.fromMs > dayBounds.fromMs;
-	const canPanNext = view.toMs < dayBounds.toMs;
-	const handlePanPrev = () => {
-		onViewChange(panWindow(view, dayBounds, -panStepMs));
-	};
-	const handlePanNext = () => {
-		onViewChange(panWindow(view, dayBounds, panStepMs));
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: "date",
-				value: formatDateInput(day),
-				max: formatDateInput(/* @__PURE__ */ new Date()),
-				onChange: handleDateChange,
-				className: "rounded border border-border bg-background px-2 py-0.5 text-[11px] text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
-				"aria-label": "Select recording day"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "ml-auto flex items-center gap-1",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handlePanPrev,
-						disabled: !canPanPrev,
-						title: "Earlier (pan back)",
-						"aria-label": "Pan earlier",
-						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { size: 14 })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handlePanNext,
-						disabled: !canPanNext,
-						title: "Later (pan forward)",
-						"aria-label": "Pan later",
-						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { size: 14 })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "mx-0.5 h-3 w-px bg-border",
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleZoomOut,
-						disabled: !canZoomOut,
-						title: "Zoom out",
-						"aria-label": "Zoom out",
-						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { size: 13 })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleZoomIn,
-						disabled: !canZoomIn,
-						title: "Zoom in",
-						"aria-label": "Zoom in",
-						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { size: 13 })
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[9px] text-foreground-subtle",
-				children: zoomLabel(viewSpan)
-			})
-		]
-	});
-}
-function zoomLabel(spanMs) {
-	const h = spanMs / 36e5;
-	if (h >= 24) return "24h";
-	if (h >= 1) return `${Math.round(h)}h`;
-	const m = spanMs / 6e4;
-	return `${Math.round(m)}m`;
-}
-//#endregion
 //#region src/composites/cap-settings/RecordingTimeline.tsx
 var ALL_KINDS = [
 	"motion",
@@ -21583,15 +22830,6 @@ function RecordingTimeline({ deviceId }) {
 //#endregion
 //#region src/composites/cap-settings/RecordingPanel.tsx
 var DAY_MS$1 = 1440 * 60 * 1e3;
-function formatDuration$1(ms) {
-	const totalSec = Math.round(ms / 1e3);
-	const h = Math.floor(totalSec / 3600);
-	const m = Math.floor(totalSec % 3600 / 60);
-	const s = totalSec % 60;
-	if (h > 0) return `${h}h ${m}m`;
-	if (m > 0) return `${m}m ${s}s`;
-	return `${s}s`;
-}
 function RecordingPanel({ deviceId }) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const statusQuery = useRecordingGetStatus({ deviceId });
@@ -21691,7 +22929,7 @@ function RecordingPanel({ deviceId }) {
 								label: "Recorded (24h)",
 								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Clock, { className: "h-3.5 w-3.5" }),
 								footer: `${ranges.length} segment range${ranges.length === 1 ? "" : "s"}`,
-								children: availabilityQuery.isLoading ? "…" : formatDuration$1(recordedMs)
+								children: availabilityQuery.isLoading ? "…" : formatDurationMs(recordedMs)
 							})
 						]
 					}),
@@ -21721,7 +22959,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 +27266,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 +27300,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 +27328,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 +27369,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 +27657,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 +30864,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 +47145,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")
@@ -54310,6 +54806,7 @@ exports.usePipelineAnalyticsListRetrainStaging = usePipelineAnalyticsListRetrain
 exports.usePipelineAnalyticsListSummaries = usePipelineAnalyticsListSummaries;
 exports.usePipelineAnalyticsListTrackMedia = usePipelineAnalyticsListTrackMedia;
 exports.usePipelineAnalyticsListTracks = usePipelineAnalyticsListTracks;
+exports.usePipelineAnalyticsOwnersWithMedia = usePipelineAnalyticsOwnersWithMedia;
 exports.usePipelineAnalyticsPauseForStorageMigration = usePipelineAnalyticsPauseForStorageMigration;
 exports.usePipelineAnalyticsProposeRetrainAnnotations = usePipelineAnalyticsProposeRetrainAnnotations;
 exports.usePipelineAnalyticsPruneEvents = usePipelineAnalyticsPruneEvents;