@camstack/ui-library 1.2.189 → 1.2.190

package/dist/index.cjs

@@ -7183,6 +7183,8 @@ var useValveGetStatus = trpc.valve.getStatus.useQuery;
 var useVibrationGetStatus = trpc.vibration.getStatus.useQuery;
 /** Generated alias around `trpc.videoclips.listClips.useQuery`. */
 var useVideoclipsListClips = trpc.videoclips.listClips.useQuery;
+/** Generated alias around `trpc.videoclips.listSources.useQuery`. */
+var useVideoclipsListSources = trpc.videoclips.listSources.useQuery;
 /** Generated alias around `trpc.videoclips.getClipPlayback.useQuery`. */
 var useVideoclipsGetClipPlayback = trpc.videoclips.getClipPlayback.useQuery;
 /** Generated alias around `trpc.waterHeater.setTargetTemp.useMutation`. */
@@ -17573,6 +17575,774 @@ function ConsumablesPanel({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-capability-presence.ts
+/**
+* Classify a settled registry answer.
+*
+* `null` is "no such capability". A row with an empty `providers` list is a
+* capability that is DECLARED but that no addon supplies — indistinguishable
+* to an operator from not having it, and the panel behind it would have
+* nothing to call. Both are `absent`.
+*
+* Exported for the unit test: the mapping is the whole decision, and it is
+* worth pinning without a React tree around it.
+*/
+function classifyCapability(row) {
+	if (row === null) return "absent";
+	return row.providers.length > 0 ? "present" : "absent";
+}
+/**
+* Ask the hub's capability registry whether `capabilityName` has a provider.
+*
+* The four states map straight off React Query's `status`, so there is no
+* place for a nullish fallback to turn "no answer" into "no providers" — the
+* exact collapse this hook exists to make unrepresentable.
+*/
+function useCapabilityPresence(capabilityName) {
+	const query = trpc.capabilities.getCapability.useQuery({ name: capabilityName });
+	if (query.status === "pending") return "pending";
+	if (query.status === "error") return "unknown";
+	return classifyCapability(query.data);
+}
+//#endregion
+//#region src/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/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)("div", {
+		className: "space-y-2 rounded-md border border-border p-3 text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Quality"
+				}), PROFILES.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-pressed": option === profile,
+					onClick: () => onProfileChange(option),
+					className: `rounded px-2 py-0.5 text-xs ${option === profile ? "bg-primary text-primary-foreground" : "bg-muted"}`,
+					children: option
+				}, option))]
+			}),
+			playback.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "status",
+				children: "Preparing the clip — the file is fetched and muxed once…"
+			}) : playback.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "alert",
+				children: ["This clip could not be prepared: ", playback.error?.message ?? "no reason given"]
+			}) : data === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [data.served === void 0 || data.served === profile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-xs text-amber-600 dark:text-amber-400",
+					children: [
+						"Served the ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: data.served }),
+						" stream — this clip has no ",
+						profile,
+						" twin."
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: hubPath(data.playbackUrl),
+					download: true,
+					className: "text-xs underline",
+					children: "Download this clip"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/composites/clips/ClipSilentSources.tsx
+function ClipSilentSources({ silent }) {
+	if (silent.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "space-y-1 rounded-md border border-amber-500/40 bg-amber-500/5 p-2 text-xs",
+		children: silent.map((notice) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium",
+				children: notice.label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-muted-foreground",
+				children: [
+					" (",
+					notice.source,
+					")"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: notice.headline }),
+			notice.detail === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground break-words",
+				children: notice.detail
+			})
+		] }, notice.source))
+	});
+}
+//#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
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/clips/clip-tile-media.ts
+/**
+* Why no still exists, in words. Keyed by the provider's own vocabulary so a
+* reason this table does not know still reaches the operator verbatim.
+*/
+var REFUSAL_TEXT = {
+	sleeping: "The camera is asleep — a still would cost a wake",
+	"camera-refused": "The camera refused the still request",
+	"no-keyframe": "No decodable frame inside this window",
+	unsupported: "This source cannot produce stills",
+	"queue-full": "The camera is busy — its still queue is full",
+	"no-catalog-row": "This clip is no longer in the catalog"
+};
+function refusal(reason) {
+	return {
+		kind: "unavailable",
+		reason,
+		text: REFUSAL_TEXT[reason] ?? `Refused: ${reason}`
+	};
+}
+/** What to draw for one clip's tile. */
+function resolveTileMedia(clip) {
+	if (clip.thumbnail !== void 0) return {
+		kind: "vouched",
+		url: clip.thumbnail
+	};
+	if (clip.thumbnailUnavailable !== void 0) return refusal(clip.thumbnailUnavailable.reason);
+	if (clip.thumbnailMint !== void 0) return {
+		kind: "mint",
+		url: clip.thumbnailMint
+	};
+	return {
+		kind: "none",
+		text: "This clip carries no still and offered none"
+	};
+}
+/**
+* A mint that answered 204 — latch its `x-camstack-reason` to this instant.
+*
+* The refusal is about NOW (a full queue, a sleeping camera), so it replaces
+* the offer for as long as the tile is mounted and is not retried behind the
+* operator's back. An unknown reason is shown raw rather than dropped: a
+* firmware inventing a refusal must not become a blank tile.
+*/
+function latchMintRefusal(reason) {
+	return refusal(reason);
+}
+//#endregion
+//#region src/composites/clips/clip-thumbnail-fetch.ts
+/**
+* Asking a `thumbnailMint` route for a still — and hearing its refusal.
+*
+* The route answers **200** with a JPEG or **204** with the reason in
+* `x-camstack-reason` (`queue-full`, `sleeping`, `camera-refused`,
+* `no-keyframe`, `no-catalog-row`). An `<img src>` cannot read that header:
+* a 204 fires `onerror` with nothing to say, turning a named refusal into an
+* anonymous broken tile. So a mint goes through `fetch`.
+*
+* **Nothing is appended to the URL.** Both data-plane routes are registered
+* `access: 'authenticated'` and the hub's `/addon/<id>/<prefix>` proxy takes
+* the session cookie the admin UI sets at login, so the URL is never a
+* credential (D549 decision 22) — it may sit in history or a `Referer` and
+* open nothing.
+*
+* The refusal is about NOW and is LATCHED by the caller: a camera that just
+* said "busy" is not asked again behind the operator's back.
+*/
+/**
+* Ask a mint route for one still.
+*
+* Never rejects: a thrown fetch is a refusal like any other, because a tile
+* that throws is a tile that renders nothing and says nothing — the exact
+* failure this module exists to prevent.
+*/
+async function fetchMintedThumbnail(url, fetcher) {
+	let response;
+	try {
+		response = await fetcher(url, { credentials: "same-origin" });
+	} catch (err) {
+		return latchMintRefusal(err instanceof Error ? err.message : String(err));
+	}
+	if (response.status === 204) return latchMintRefusal(response.headers.get("x-camstack-reason") ?? "no reason given");
+	if (!response.ok) return latchMintRefusal(`HTTP ${String(response.status)}`);
+	try {
+		return {
+			kind: "image",
+			blob: await response.blob()
+		};
+	} catch (err) {
+		return latchMintRefusal(err instanceof Error ? err.message : String(err));
+	}
+}
+//#endregion
+//#region src/composites/clips/ClipTile.tsx
+/**
+* One clip, as a tile.
+*
+* The picture is resolved by `resolveTileMedia` — vouched JPEG, an offer, or
+* the reason there is none (D549 decision 5). An offer is fetched rather than
+* dropped into an `<img src>`, because the route's **204 + x-camstack-reason**
+* is invisible to an `<img>`: it fires `onerror` with nothing to say. The
+* refusal is LATCHED for the life of the tile and never retried behind the
+* operator's back.
+*
+* The row also carries what the camera itself said: its native types, the
+* behaviours beside the class, which storages hold it, and — for a row that
+* is an EVENT sitting inside no file — `playable: false` with its reason
+* (measured: 1 of 29 hub events on 3628). Such a row is SHOWN, never dropped
+* and never offered as playable-then-failing (D549 decision 19).
+*/
+function clockOf(ms) {
+	return new Date(ms).toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+/**
+* Ask a mint route once, and LATCH whatever it says.
+*
+* The offer is memoised on the three fields it is derived from, not rebuilt
+* per render: `resolveTileMedia` returns a fresh object every call, and an
+* effect keyed on that object re-runs on every commit — which, because the
+* effect sets state, is an infinite render loop. It was one here, and it hung
+* the suite rather than failing it.
+*
+* The refusal is latched for the life of the tile: a camera that just said
+* "busy" is not asked again behind the operator's back (D549 decision 5).
+*/
+function useMintedStill(clip) {
+	const offered = (0, react$1.useMemo)(() => resolveTileMedia(clip), [
+		clip.thumbnail,
+		clip.thumbnailMint,
+		clip.thumbnailUnavailable?.reason
+	]);
+	const [latched, setLatched] = (0, react$1.useState)(null);
+	const mintUrl = offered.kind === "mint" ? offered.url : null;
+	(0, react$1.useEffect)(() => {
+		setLatched(null);
+		if (mintUrl === null || typeof fetch !== "function") return void 0;
+		let objectUrl = null;
+		let cancelled = false;
+		(async () => {
+			const answer = await fetchMintedThumbnail(hubPath(mintUrl), fetch);
+			if (cancelled) return;
+			if (answer.kind === "image") {
+				objectUrl = URL.createObjectURL(answer.blob);
+				setLatched({
+					kind: "vouched",
+					url: objectUrl
+				});
+				return;
+			}
+			setLatched(answer);
+		})();
+		return () => {
+			cancelled = true;
+			if (objectUrl !== null) URL.revokeObjectURL(objectUrl);
+		};
+	}, [mintUrl]);
+	return latched ?? offered;
+}
+function ClipTile({ clip, selected, onSelect }) {
+	const media = useMintedStill(clip);
+	const playable = clip.playable !== false;
+	const labels = [...clip.labels ?? [], ...clip.behaviours ?? []];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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"]
+				})
+			]
+		})]
+	}) });
+}
+//#endregion
+//#region src/composites/clips/clip-day-window.ts
+function pad2(value) {
+	return value < 10 ? `0${String(value)}` : String(value);
+}
+/** Parse `YYYY-MM-DD` into its local-midnight `Date`. */
+function startOfDay(dayId) {
+	const [year, month, day] = dayId.split("-").map((part) => Number(part));
+	return new Date(year ?? 1970, (month ?? 1) - 1, day ?? 1, 0, 0, 0, 0);
+}
+/** The LOCAL calendar day an instant falls in, as `YYYY-MM-DD`. */
+function toDayId(instant) {
+	return `${String(instant.getFullYear())}-${pad2(instant.getMonth() + 1)}-${pad2(instant.getDate())}`;
+}
+/** The half-open local-wall-clock window of one day. */
+function dayWindow$1(dayId) {
+	const start = startOfDay(dayId);
+	const end = startOfDay(dayId);
+	end.setDate(end.getDate() + 1);
+	return {
+		since: start.getTime(),
+		until: end.getTime()
+	};
+}
+/** Walk `days` calendar days from `dayId` — DST-safe, because `Date` does it. */
+function shiftDay(dayId, days) {
+	const moved = startOfDay(dayId);
+	moved.setDate(moved.getDate() + days);
+	return toDayId(moved);
+}
+/**
+* The day, spelled out for the header.
+*
+* An empty list has to say WHICH day it is empty for — "no clips" with no date
+* beside it is the ambiguity this surface exists to remove — so this label is
+* rendered next to every state, not only the populated one.
+*/
+function formatDayLabel(dayId) {
+	return startOfDay(dayId).toLocaleDateString(void 0, {
+		weekday: "short",
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	});
+}
+//#endregion
+//#region src/composites/clips/clip-source-state.ts
+var STATE_COPY = {
+	ok: {
+		headline: "Answering",
+		tone: "ok",
+		answered: true
+	},
+	sleeping: {
+		headline: "Asleep — showing the catalog read while it was awake",
+		tone: "warn",
+		answered: true
+	},
+	unreachable: {
+		headline: "Could not be reached — its clips are missing from this list",
+		tone: "error",
+		answered: false
+	},
+	"no-storage": {
+		headline: "No storage card — this camera keeps nothing of its own",
+		tone: "warn",
+		answered: false
+	},
+	"index-empty": {
+		headline: "The camera's calendar marks these days, and its own index lists nothing",
+		tone: "warn",
+		answered: false
+	}
+};
+/** Turn one source row into the line the picker and the list show. */
+function describeSource(source) {
+	const copy = STATE_COPY[source.availability.state];
+	return {
+		source: source.source,
+		label: source.label,
+		headline: copy.headline,
+		detail: source.availability.reason ?? null,
+		tone: copy.tone,
+		answered: copy.answered
+	};
+}
+var MINUTE_MS$1 = 6e4;
+var HOUR_MS$1 = 36e5;
+var DAY_MS$2 = 864e5;
+/**
+* How old a source's catalog is, or null when it did not say.
+*
+* Null is NOT "now". A source that omits `catalogAsOf` was read live and has
+* no age to show; inventing "just now" for a source that never told us would
+* be the same lie as drawing a cached list as current (D549 decision 13).
+*/
+function formatCatalogAge(catalogAsOf, now) {
+	if (catalogAsOf === void 0) return null;
+	const age = Math.max(0, now - catalogAsOf);
+	if (age < MINUTE_MS$1) return "under a minute ago";
+	if (age < HOUR_MS$1) return `${String(Math.floor(age / MINUTE_MS$1))} min ago`;
+	if (age < DAY_MS$2) return `${String(Math.floor(age / HOUR_MS$1))} h ago`;
+	return `${String(Math.floor(age / DAY_MS$2))} d ago`;
+}
+//#endregion
+//#region src/composites/clips/clip-view-state.ts
+/** Keep only the rows of selected sources; an absent selection keeps them all. */
+function applySelection(clips, selected) {
+	if (selected === void 0) return clips;
+	const allowed = new Set(selected);
+	return clips.filter((clip) => allowed.has(clip.source));
+}
+function resolveClipsView(input) {
+	if (input.clipsStatus === "error") return {
+		kind: "failed",
+		message: input.clipsError ?? "The clip list could not be read"
+	};
+	if (input.sourcesStatus === "error" && input.clips.length === 0) return {
+		kind: "failed",
+		message: input.sourcesError ?? "The source list could not be read"
+	};
+	if (input.clipsStatus === "pending" || input.sourcesStatus === "pending") return { kind: "loading" };
+	const notices = input.sources.map(describeSource);
+	const answered = notices.filter((notice) => notice.answered);
+	const silent = notices.filter((notice) => !notice.answered);
+	const clips = applySelection(input.clips, input.selected);
+	if (clips.length === 0) return {
+		kind: "empty",
+		dayId: input.dayId,
+		answered,
+		silent,
+		nobodyAnswered: answered.length === 0
+	};
+	return {
+		kind: "listed",
+		clips,
+		answered,
+		silent
+	};
+}
+//#endregion
+//#region src/composites/clips/ClipsBrowser.tsx
+/**
+* `host/clips-browser` — a camera's clips, from EVERY source it has.
+*
+* 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:
+*
+*  - **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.
+*  - **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.
+*  - **Four states are tellable apart**: loading, empty-with-a-cause,
+*    degraded-per-source, and each silent source in its own words. Every one
+*    of them used to render as "no clips", which is the defect this whole
+*    line of work is about — a camera with no SD card (640) is not quiet, and
+*    a camera whose own index disagrees with its own calendar (618, 6–20
+*    September) is not quiet either.
+*
+* ## 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.
+*/
+/** 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)([]);
+	const [selectedClip, setSelectedClip] = (0, react$1.useState)(null);
+	const [profile, setProfile] = (0, react$1.useState)("low");
+	const presence = useCapabilityPresence("videoclips");
+	const window = (0, react$1.useMemo)(() => dayWindow$1(dayId), [dayId]);
+	const sources = useVideoclipsListSources({ deviceId });
+	const clips = useVideoclipsListClips({
+		deviceId,
+		since: window.since,
+		until: window.until,
+		limit: CLIP_PAGE_LIMIT
+	});
+	const sourceRows = sources.data ?? [];
+	const selected = sourceRows.map((row) => row.source).filter((source) => !hidden.includes(source));
+	const view = resolveClipsView({
+		dayId,
+		clipsStatus: clips.status,
+		clips: clips.data ?? [],
+		sourcesStatus: sources.status,
+		sources: sourceRows,
+		...hidden.length === 0 ? {} : { selected },
+		...clips.error ? { clipsError: clips.error.message } : {},
+		...sources.error ? { sourcesError: sources.error.message } : {}
+	});
+	const now = Date.now();
+	const toggle = (source, next) => setHidden((current) => next ? current.filter((id) => id !== source) : current.includes(source) ? current : [...current, source]);
+	if (presence === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "status",
+		children: "Asking the registry whether this cluster serves clips…"
+	});
+	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 === "absent") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "status",
+		children: [
+			"No provider of ",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: "videoclips" }),
+			" is installed in this cluster."
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		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",
+				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)("button", {
+						type: "button",
+						"aria-label": "Next day",
+						onClick: () => setDayId(shiftDay(dayId, 1)),
+						children: "›"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => setDayId(toDayId(/* @__PURE__ */ new Date())),
+						children: "Today"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				"aria-label": "Clips",
+				children: view.kind === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "status",
+					children: [
+						"Loading clips for ",
+						formatDayLabel(dayId),
+						"…"
+					]
+				}) : view.kind === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "alert",
+					children: ["The clip list could not be read: ", view.message]
+				}) : view.kind === "empty" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "status",
+						children: view.nobodyAnswered ? `No source could answer for ${formatDayLabel(dayId)}.` : `No clips on ${formatDayLabel(dayId)} from ${view.answered.map((notice) => notice.label).join(", ")}.`
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipSilentSources, { silent: view.silent })]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipSilentSources, { silent: view.silent }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						className: "space-y-2",
+						children: view.clips.map((clip) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipTile, {
+							clip,
+							selected: selectedClip?.id === clip.id,
+							onSelect: setSelectedClip
+						}, `${clip.source}:${clip.id}`))
+					})]
+				})
+			}),
+			selectedClip === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipPanel, {
+				deviceId,
+				clip: selectedClip,
+				profile,
+				onProfileChange: setProfile
+			})
+		]
+	});
+}
+//#endregion
 //#region src/hooks/use-navigation.ts
 /**
 * useNavigation — drive a `navigation` robot camera from the UI.
@@ -19356,46 +20126,6 @@ function RecordingSettings({ initial, availableProfiles, saving, onSave, sensorC
 	});
 }
 //#endregion
-//#region src/contexts/vod-playback.tsx
-/**
-* VodPlayback — shared context coordinating recorded (VOD) playback between a
-* widget/section (the Recording panel) and the hero StreamPanel.
-*
-* A CONTROLLER (the Recording widget) calls `play({ url, label })`; the hero
-* StreamPanel CONSUMES `request` and switches into VOD mode (HLS playback
-* through the hub data-plane) instead of the live WebRTC stream. `clear()`
-* returns the hero to live.
-*
-* Built on `createSharedContext` (NOT a plain `createContext`) so it crosses
-* the Module-Federation boundary: an addon-shipped widget consuming
-* `useVodPlayback()` resolves the SAME provider instance the host mounted —
-* the same mechanism `player-overlays` / `zone-editing` use to let federated
-* widgets (zone-editor, privacy-mask) drive the live player. Consumers used
-* outside a provider get the inert default (no-op), so a StreamPanel mounted
-* on a page without the Recording widget stays live-only without crashing.
-*/
-var VodPlaybackContext = createSharedContext("camstack:vod-playback", {
-	request: null,
-	play: () => {},
-	clear: () => {}
-});
-function VodPlaybackProvider({ children }) {
-	const [request, setRequest] = (0, react$1.useState)(null);
-	const value = (0, react$1.useMemo)(() => ({
-		request,
-		play: (req) => setRequest(req),
-		clear: () => setRequest(null)
-	}), [request]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VodPlaybackContext.Provider, {
-		value,
-		children
-	});
-}
-/** @returns the VOD playback controller (inert no-op outside a provider). */
-function useVodPlayback() {
-	return (0, react$1.useContext)(VodPlaybackContext);
-}
-//#endregion
 //#region src/lib/recorded-control-protocol.ts
 /** Serialize a command for `RTCDataChannel.send` (matches the server schema). */
 function serializeRecordedCommand(cmd) {
@@ -20990,7 +21720,8 @@ var HOST_WIDGETS = {
 	"host/consumables-panel": ConsumablesPanel,
 	"host/ptz-autotrack": AutotrackSection,
 	"host/recording-panel": RecordingPanel,
-	"host/camera-grid-layout": CameraGridLayoutEditor
+	"host/camera-grid-layout": CameraGridLayoutEditor,
+	"host/clips-browser": ClipsBrowser
 };
 //#endregion
 //#region src/composites/widget-slot.tsx
@@ -48901,7 +49632,7 @@ function hlsLevelToInfo(level) {
 		name: level.name.length > 0 ? level.name : void 0
 	};
 }
-function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQualityOptions, selectedLevel = -1 }) {
+function HlsVideo({ url, format = "hls", authToken, posterUrl, autoPlay = true, className, onQualityOptions, selectedLevel = -1 }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const hlsRef = (0, react$1.useRef)(null);
 	const [error, setError] = (0, react$1.useState)(null);
@@ -48914,6 +49645,23 @@ function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQua
 		onQualityOptions?.([]);
 		const onPlaying = () => setLoading(false);
 		video.addEventListener("playing", onPlaying);
+		if (format === "mp4") {
+			video.src = url;
+			const onLoaded = () => {
+				if (autoPlay) video.play().catch(() => {});
+			};
+			const onFailed = () => setError("Could not load this clip.");
+			video.addEventListener("loadedmetadata", onLoaded);
+			video.addEventListener("error", onFailed);
+			onQualityOptions?.([]);
+			return () => {
+				video.removeEventListener("loadedmetadata", onLoaded);
+				video.removeEventListener("error", onFailed);
+				video.removeEventListener("playing", onPlaying);
+				video.removeAttribute("src");
+				video.load();
+			};
+		}
 		if (!("MediaSource" in window) && video.canPlayType("application/vnd.apple.mpegurl")) {
 			video.src = url;
 			const onLoaded = () => {
@@ -48976,6 +49724,7 @@ function HlsVideo({ url, authToken, posterUrl, autoPlay = true, className, onQua
 		};
 	}, [
 		url,
+		format,
 		authToken,
 		autoPlay,
 		onQualityOptions
@@ -51119,7 +51868,7 @@ function ImageOffIcon({ className }) {
 		]
 	});
 }
-function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
+function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, getSessionDebug, playbackUrl, playbackFormat, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, stationaryObjects, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
 	const registeredButtons = usePlayerToolbarButtons();
 	const recordedPlayback = useRecordedPlayback();
 	const [isPlaying, setIsPlaying] = (0, react$1.useState)(autoPlay);
@@ -51420,6 +52169,7 @@ function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIce
 				className: "aspect-video relative",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HlsVideo, {
 					url: playbackUrl,
+					...playbackFormat ? { format: playbackFormat } : {},
 					authToken: playbackAuthToken ?? null,
 					onQualityOptions: handleVodQualityOptions,
 					selectedLevel: vodLevel,
@@ -52796,6 +53546,7 @@ exports.badgeFor$1 = badgeFor;
 exports.buildStepTreeFromSchema = buildStepTreeFromSchema;
 exports.childEntityId = childEntityId;
 exports.childListName = childListName;
+exports.classifyCapability = classifyCapability;
 exports.cn = cn;
 exports.columnsForContext = columnsForContext;
 exports.containerChildToRef = containerChildToRef;
@@ -53034,6 +53785,7 @@ exports.useCameraStreamsGetCameraStreams = useCameraStreamsGetCameraStreams;
 exports.useCameraStreamsGetProfileRtspEntries = useCameraStreamsGetProfileRtspEntries;
 exports.useCameraStreamsGetRtspEntries = useCameraStreamsGetRtspEntries;
 exports.useCameraStreamsPickStream = useCameraStreamsPickStream;
+exports.useCapabilityPresence = useCapabilityPresence;
 exports.useCarbonMonoxideGetStatus = useCarbonMonoxideGetStatus;
 exports.useClimateControlGetStatus = useClimateControlGetStatus;
 exports.useClimateControlSetFanMode = useClimateControlSetFanMode;
@@ -53987,6 +54739,7 @@ exports.useValveStop = useValveStop;
 exports.useVibrationGetStatus = useVibrationGetStatus;
 exports.useVideoclipsGetClipPlayback = useVideoclipsGetClipPlayback;
 exports.useVideoclipsListClips = useVideoclipsListClips;
+exports.useVideoclipsListSources = useVideoclipsListSources;
 exports.useVodPlayback = useVodPlayback;
 exports.useWaterHeaterGetStatus = useWaterHeaterGetStatus;
 exports.useWaterHeaterSetAway = useWaterHeaterSetAway;