@camstack/ui-library 1.2.191 → 1.2.193

package/dist/index.cjs

@@ -6407,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`. */
@@ -17794,6 +17796,201 @@ var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 });
 Skeleton.displayName = "Skeleton";
 //#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/hooks/use-is-mobile.ts
 var MOBILE_QUERY = "(max-width: 767px)";
 /**
@@ -18430,6 +18627,266 @@ function ErrorBox({ message, title, onRetry, action, variant = "danger", classNa
 	});
 }
 //#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
@@ -18588,24 +19045,58 @@ function ClipPanel({ deviceId, clip, profile, onProfileChange }) {
 	});
 }
 //#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 provider's own vocabulary so a
-* reason this table does not know still reaches the operator verbatim.
+* 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": "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"
+	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 refusal(reason) {
+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: REFUSAL_TEXT[reason] ?? `Refused: ${reason}`
+		text: wordsFor(code, reason)
 	};
 }
 /** What to draw for one clip's tile. */
@@ -18614,7 +19105,7 @@ function resolveTileMedia(clip) {
 		kind: "vouched",
 		url: clip.thumbnail
 	};
-	if (clip.thumbnailUnavailable !== void 0) return refusal(clip.thumbnailUnavailable.reason);
+	if (clip.thumbnailUnavailable !== void 0) return refusal(clip.thumbnailUnavailable.reason, clip.thumbnailUnavailable.reason);
 	if (clip.thumbnailMint !== void 0) return {
 		kind: "mint",
 		url: clip.thumbnailMint
@@ -18625,26 +19116,32 @@ function resolveTileMedia(clip) {
 	};
 }
 /**
-* A mint that answered 204 — latch its `x-camstack-reason` to this instant.
+* A 204, as something the tile can draw.
 *
-* 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.
+* `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 latchMintRefusal(reason) {
-	return refusal(reason);
+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 its refusal.
+* Asking a `thumbnailMint` route for a still — and hearing what it says.
 *
-* 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`.
+* 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
@@ -18652,8 +19149,18 @@ function latchMintRefusal(reason) {
 * credential (D549 decision 22) — it may sit in history or a `Referer` and
 * open nothing.
 *
-* The refusal is about NOW and is LATCHED by the caller: a camera that just
-* said "busy" is not asked again behind the operator's back.
+* ## 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.
@@ -18667,19 +19174,56 @@ async function fetchMintedThumbnail(url, fetcher) {
 	try {
 		response = await fetcher(url, { credentials: "same-origin" });
 	} catch (err) {
-		return latchMintRefusal(err instanceof Error ? err.message : String(err));
+		return deferredNetworkFailure(err);
 	}
-	if (response.status === 204) return latchMintRefusal(response.headers.get("x-camstack-reason") ?? "no reason given");
-	if (!response.ok) return latchMintRefusal(`HTTP ${String(response.status)}`);
+	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 latchMintRefusal(err instanceof Error ? err.message : String(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
 /**
@@ -18710,7 +19254,7 @@ function clockOf(ms) {
 	});
 }
 /**
-* 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
@@ -18718,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), [
@@ -18734,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") {
@@ -18745,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]);
@@ -18772,16 +19342,27 @@ function ClipTile({ clip, selected, onSelect }) {
 					src: media.url,
 					alt: "",
 					className: "h-full w-full object-cover"
-				}) : media.kind === "mint" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-full w-full rounded-none" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				}) : 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.jsx)("div", {
-						className: "text-sm font-medium text-foreground",
-						children: clockOf(clip.timeRange.startMs)
+					/* @__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",
@@ -18808,6 +19389,29 @@ function ClipTile({ clip, selected, onSelect }) {
 }
 //#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);
 }
@@ -18820,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);
@@ -18837,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, {
@@ -18851,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 = {
@@ -18913,6 +19579,12 @@ function formatCatalogAge(catalogAsOf, now) {
 //#endregion
 //#region src/composites/clips/clip-view-state.ts
 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"
@@ -18921,14 +19593,21 @@ function resolveClipsView(input) {
 		kind: "failed",
 		message: input.sourcesError ?? "The source list could not be read"
 	};
-	if (input.clipsStatus === "pending" || input.sourcesStatus === "pending") return { kind: "loading" };
 	const notices = input.sources.map(describeSource);
 	const answered = notices.filter((notice) => notice.answered);
 	const silent = notices.filter((notice) => !notice.answered);
 	const clips = input.clips;
+	if (input.provider === null && input.sourcesStatus === "success") return {
+		kind: "empty",
+		band: input.plan.band,
+		answered,
+		silent,
+		nobodyAnswered: true
+	};
+	if (input.clipsStatus === "pending" || input.sourcesStatus === "pending") return { kind: "loading" };
 	if (clips.length === 0) return {
 		kind: "empty",
-		dayId: input.dayId,
+		band: input.plan.band,
 		answered,
 		silent,
 		nobodyAnswered: answered.length === 0
@@ -18979,6 +19658,28 @@ function resolveClipsView(input) {
 *    camera whose own index disagrees with its own calendar (618, 6–20
 *    September) is not quiet either.
 *
+* ## 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
@@ -18995,23 +19696,34 @@ function resolveClipsView(input) {
 * ## 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".
+* took `sources?: string[]`. It now takes ONE `provider` —
+* *"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.
+*
+* ## The control's value is ALWAYS what the query carries
+*
+* There is no "default" option and no empty value. This section used to send
+* no `provider` at all until the operator chose, because the cap documented
+* absence as "the device's bound provider, which is CamStack on every camera".
+* No code implemented that: measured on device 592 (2026-09-20, bound to
+* `recorder` AND `provider-reolink`) a bare `listClips` with `limit: 3`
+* answered SIX rows — three per source, merged — while the default option read
+* "CamStack recordings". The label named one thing and the query asked two.
+*
+* Naming a provider is now required (D554 amended), and the default is this surface's
+* to make: the FIRST source the camera lists, shown selected in the control, so
+* what is on screen and what was asked are the same fact. A camera that lists
+* no source is asked NOTHING — the query never fires and the body says nobody
+* answered, rather than spinning against a question with no addressee.
 *
 * ## 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.
+* `listSources` derives from `deviceManager.getBindings`. A camera bound to one
+* provider makes the selector inert, and it SAYS why: an empty or silently
+* single-entry control would read as a defect.
 */
 /** Newest-first, and bounded: a busy day on 592 lists 546 clips. */
 var CLIP_PAGE_LIMIT = 500;
@@ -19098,24 +19810,54 @@ function SilentSources({ silent }) {
 	});
 }
 function ClipsSection({ deviceId }) {
-	const [dayId, setDayId] = (0, react$1.useState)(() => toDayId(/* @__PURE__ */ new Date()));
+	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 sourceRows = sources.data ?? [];
+	/**
+	* The provider the list is ASKED of: the operator's pick, else the first
+	* source the camera lists. Empty only while the camera has no source at all
+	* — and then nothing is asked, because there is nobody to ask.
+	*/
+	const askedProvider = (0, react$1.useMemo)(() => {
+		if (provider !== "") return provider;
+		return sourceRows.find((row) => row.addonId !== void 0)?.addonId ?? "";
+	}, [provider, sourceRows]);
 	const clips = useVideoclipsListClips({
 		deviceId,
-		since: window.since,
-		until: window.until,
+		since: band.fromMs,
+		until: band.toMs,
 		limit: CLIP_PAGE_LIMIT,
-		...provider === "" ? {} : { provider }
-	});
-	const sourceRows = sources.data ?? [];
-	const view = resolveClipsView({
-		dayId,
+		provider: askedProvider
+	}, { enabled: plan.kind === "askable" && askedProvider !== "" });
+	const clipsView = resolveClipsView({
+		plan,
+		provider: askedProvider === "" ? null : askedProvider,
 		clipsStatus: clips.status,
 		clips: clips.data ?? [],
 		sourcesStatus: sources.status,
@@ -19133,23 +19875,29 @@ function ClipsSection({ deviceId }) {
 			if (labels === void 0) byAddon.set(addonId, [row.label]);
 			else labels.push(row.label);
 		}
-		const rest = [...byAddon].map(([value, labels]) => ({
+		return [...byAddon].map(([value, labels]) => ({
 			value,
 			label: labels.join(" · ")
 		}));
-		const first = rest[0];
-		return [{
-			value: "",
-			label: first === void 0 ? "The camera’s bound provider" : first.label
-		}, ...rest.slice(1)];
 	}, [sourceRows]);
 	const tableRows = (0, react$1.useMemo)(() => sourceRows.map((row) => ({
 		notice: describeSource(row),
 		catalogAge: formatCatalogAge(row.availability.catalogAsOf, now)
 	})), [sourceRows]);
-	const goToDay = (next) => {
-		setDayId(next);
+	(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);
@@ -19176,18 +19924,25 @@ function ClipsSection({ deviceId }) {
 			description: "Nothing is installed that could list a camera's stored clips."
 		})
 	});
-	const visible = view.kind === "listed" ? view.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-3",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: "text-sm font-semibold text-foreground",
-				children: "Clips"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "mt-1 text-[11px] text-foreground-subtle",
-				children: "Every source this camera has, side by side — CamStack's own recordings and whatever the camera or an export keeps of its own. A source is listed because it exists, not because it was switched on here; pick sources to narrow the view."
-			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { 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: [
@@ -19201,7 +19956,7 @@ function ClipsSection({ deviceId }) {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
 							id: "clips-provider",
 							options,
-							value: provider,
+							value: askedProvider,
 							disabled: options.length < 2,
 							onChange: (e) => pick(e.target.value)
 						})
@@ -19212,32 +19967,28 @@ function ClipsSection({ deviceId }) {
 					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ml-auto flex items-center gap-1",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-								variant: "ghost",
-								"aria-label": "Previous day",
-								onClick: () => goToDay(shiftDay(dayId, -1)),
-								children: "‹"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "px-1 text-xs font-medium text-foreground",
-								children: formatDayLabel(dayId)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-								variant: "ghost",
-								"aria-label": "Next day",
-								onClick: () => goToDay(shiftDay(dayId, 1)),
-								children: "›"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-								variant: "outline",
-								onClick: () => goToDay(toDayId(/* @__PURE__ */ new Date())),
-								children: "Today"
-							})
-						]
+						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",
@@ -19254,26 +20005,30 @@ function ClipsSection({ deviceId }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 				"aria-label": "Clips",
 				className: "space-y-2",
-				children: view.kind === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				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),
 						"…"
 					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-24 w-full" })] }) : view.kind === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, {
+				}), /* @__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: view.message
-				}) : view.kind === "empty" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					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: view.nobodyAnswered ? `No source could answer for ${formatDayLabel(dayId)}` : `No clips on ${formatDayLabel(dayId)}`,
-						...view.nobodyAnswered ? {} : { description: `Asked ${view.answered.map((notice) => notice.label).join(", ")}.` }
+						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: view.silent })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SilentSources, { silent: view.silent }),
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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, {
@@ -21469,201 +22224,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);
@@ -21774,42 +22334,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);
@@ -21934,142 +22458,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",
@@ -22465,15 +22853,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 });
@@ -22573,7 +22952,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)
 							})
 						]
 					}),
@@ -54450,6 +54829,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;