@camstack/ui-library 1.2.16 → 1.2.18

package/dist/index.cjs

@@ -3680,6 +3680,34 @@ var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
 var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
 /** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
 var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
+/**
+* The tier boundary at which a settings label/value row stops stacking.
+*
+* Below it (L1 — compact) the row is ONE column: label on its own line, value
+* on the next at full width. Above it the row is label-left / value-right as
+* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
+* value beside it; a phone has neither, and the failure mode is not "cramped"
+* but "the value is the part that gets cut" — the one thing the operator
+* opened the page to read.
+*/
+var SETTING_ROW_STACK_BREAKPOINT = "sm";
+/** Outer row: single column at L1, label/value columns from `sm` up. */
+var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
+/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
+var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
+/**
+* Value lane — the value text plus its trailing affordances (copy / reveal).
+* `w-full` at L1 so the value owns the whole row once the label is above it;
+* `sm:flex-1` makes it share the row again from `sm` up.
+*/
+var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
+/**
+* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
+* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
+* desktop form, where the row is wide enough for truncation to be a choice
+* rather than data loss.
+*/
+var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
 /** Section header label (uppercase tracking-wider). */
 var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
 /** Field label inside a row. */
@@ -13225,15 +13253,27 @@ var MOBILE_QUERY = "(max-width: 767px)";
 * so sidebar fans out at the same point grids switch to multi-column.
 */
 var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+/**
+* `matchMedia` is universal in browsers but absent in bare DOM environments.
+* These hooks are called from shared primitives (`DataTable` picks its narrow
+* layout with one), so throwing here takes down the whole page that merely
+* rendered a table. Where the capability is missing, report the desktop
+* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
+*/
+function matchQuery(query) {
+	if (typeof window.matchMedia !== "function") return null;
+	return window.matchMedia(query);
+}
 function subscribeQuery(query) {
 	return (callback) => {
-		const mql = window.matchMedia(query);
+		const mql = matchQuery(query);
+		if (mql === null) return () => {};
 		mql.addEventListener("change", callback);
 		return () => mql.removeEventListener("change", callback);
 	};
 }
 function getSnapshot(query) {
-	return () => window.matchMedia(query).matches;
+	return () => matchQuery(query)?.matches ?? false;
 }
 function getServerSnapshot() {
 	return false;
@@ -13651,18 +13691,75 @@ function Breadcrumb({ items, className }) {
 	});
 }
 //#endregion
+//#region src/composites/data-table-layout.ts
+/**
+* At this many columns and above, `auto` switches a narrow viewport to cards.
+* Three columns still fit a phone at a readable size; four do not.
+*/
+var CARD_MODE_MIN_COLUMNS = 4;
+function resolveTableLayout({ mode, columnCount, isNarrow }) {
+	if (!isNarrow) return "table";
+	if (mode === "scroll") return "table";
+	if (mode === "cards") return "cards";
+	if (columnCount === 0) return "table";
+	return columnCount >= 4 ? "cards" : "table";
+}
+//#endregion
+//#region src/composites/setting-row.tsx
+function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
+	const LabelTag = elements === "description" ? "dt" : "span";
+	const ValueTag = elements === "description" ? "dd" : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-setting-row": "",
+		className: cn(SETTING_ROW, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
+			"data-setting-row-label": "",
+			className: SETTING_ROW_LABEL,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
+			"data-setting-row-value": "",
+			className: SETTING_ROW_VALUE,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-setting-row-value-text": "",
+				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
+				children
+			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center gap-0.5",
+				children: actions
+			})]
+		})]
+	});
+}
+//#endregion
 //#region src/composites/data-table.tsx
 var ALIGN_CLASS = {
 	left: "text-left",
 	right: "text-right",
 	center: "text-center"
 };
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName }) {
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "auto" }) {
+	const isNarrow = useIsMobile();
+	const layout = resolveTableLayout({
+		mode: mobileMode,
+		columnCount: columns.length,
+		isNarrow
+	});
 	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
 		children: emptyMessage
 	});
 	if (rows.length === 0) return null;
+	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-2 ${className ?? ""}`,
+		children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
+			row,
+			rowIndex,
+			columns,
+			bordered,
+			onRowClick,
+			rowClassName
+		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface overflow-x-auto ${className ?? ""}`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
@@ -13707,6 +13804,36 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 		})
 	});
 }
+/**
+* One row as a card. Columns that carry a plain-text `header` become labelled
+* `SettingRow`s — the label is the column title and the value gets the full
+* card width. Columns with no text header (an actions column, a
+* `headerRender`-only column) have no label to show, so they render as a
+* full-width strip at the foot of the card.
+*/
+function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
+	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
+	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
+	const interactive = onRowClick !== void 0;
+	const extra = rowClassName?.(row, rowIndex) ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-data-table-card": "",
+		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+		className: [
+			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
+			bordered ? "border border-border" : "",
+			interactive ? "cursor-pointer hover:bg-primary/5" : "",
+			extra
+		].filter(Boolean).join(" "),
+		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+			label: col.header,
+			children: col.render(row, rowIndex)
+		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
+			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
+		})]
+	});
+}
 //#endregion
 //#region src/composites/slide-over-panel.tsx
 /**
@@ -15839,18 +15966,21 @@ function StatCard({ value, label, trend, className }) {
 }
 //#endregion
 //#region src/composites/key-value-list.tsx
+/**
+* A `<dl>` of label/value rows. Layout (including the L1 stacking) is owned by
+* `SettingRow`; this composite only supplies the description-list semantics.
+*
+* The rows used to be `flex items-center h-7` with a `w-1/3` term, so a label
+* could neither wrap nor stack: on a phone it took a third of the width and
+* the value took whatever was left.
+*/
 function KeyValueList({ items, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
 		className: cn("flex flex-col", className),
-		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center h-7",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-				className: "text-foreground-subtle text-xs w-1/3 shrink-0",
-				children: item.key
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-				className: "text-foreground text-xs",
-				children: item.value
-			})]
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+			elements: "description",
+			label: item.key,
+			children: item.value
 		}, item.key))
 	});
 }
@@ -16218,7 +16348,8 @@ function DeviceGrid({ children, minCardWidth = 220, gap = 3, className }) {
 *   longest). So as the viewport shrinks the HIGHEST-priority-number column
 *   drops first.
 *
-*     name           (0) — never hidden; sticky left, always visible
+*     name           (0) — never hidden; pinned left from `md` up (see
+*                          `NAME_COLUMN_PIN_CLASS`), scrolls below it
 *     previewActions (1) — never hidden; carries the live control + status dot
 *     icon           (2) — integration badge; rendered INSIDE the name cell,
 *                          not a standalone column, so it has no breakpoint
@@ -16270,7 +16401,7 @@ function columnsForContext(ctx) {
 }
 /**
 * Lower number = higher priority (kept longest as width shrinks). `name` = 0
-* (sticky, never dropped); `previewActions` = 1 (always visible). The optional
+* (never dropped); `previewActions` = 1 (always visible). The optional
 * columns drop in REVERSE priority order as width shrinks — highest number
 * (`type`) hides first, then `features`. `icon` is a name-cell badge, not a
 * standalone column. See `COLUMN_BREAKPOINT_CLASS` for the derived classes.
@@ -16306,6 +16437,14 @@ var COLUMN_BREAKPOINT_CLASS = {
 	type: "hidden lg:table-cell",
 	manufacturer: "hidden xl:table-cell"
 };
+/** Pin classes for the NAME `<th>`/`<td>` — never unconditional. */
+var NAME_COLUMN_PIN_CLASS = "md:sticky md:left-0 md:z-[1]";
+/**
+* NAME column width. Narrower below the pin breakpoint so NAME + Preview fit a
+* phone viewport without a horizontal scroll at all; the roomier desktop width
+* returns with the pin.
+*/
+var NAME_COLUMN_WIDTH_CLASS = "w-44 max-w-[11rem] md:w-64 md:max-w-[16rem]";
 //#endregion
 //#region src/composites/device-list/hardware.ts
 var MANUFACTURER_KEY = "manufacturer";
@@ -19382,6 +19521,10 @@ var useSettingsStoreInsert = trpc.settingsStore.insert.useMutation;
 var useSettingsStoreUpdate = trpc.settingsStore.update.useMutation;
 /** Generated alias around `trpc.settingsStore.delete.useMutation`. */
 var useSettingsStoreDelete = trpc.settingsStore.delete.useMutation;
+/** Generated alias around `trpc.settingsStore.deleteWhere.useMutation`. */
+var useSettingsStoreDeleteWhere = trpc.settingsStore.deleteWhere.useMutation;
+/** Generated alias around `trpc.settingsStore.updateWhere.useMutation`. */
+var useSettingsStoreUpdateWhere = trpc.settingsStore.updateWhere.useMutation;
 /** Generated alias around `trpc.settingsStore.count.useQuery`. */
 var useSettingsStoreCount = trpc.settingsStore.count.useQuery;
 /** Generated alias around `trpc.settingsStore.histogram.useQuery`. */
@@ -29433,7 +29576,7 @@ function DeviceItemTableRow(props) {
 		className: cn("group cursor-pointer hover:bg-surface-hover transition-colors", !hasChildren && "border-b border-border-subtle/40", isAccessoryRow && "bg-foreground-subtle/[0.03]", rowSelected && "bg-primary/10", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-				className: cn("sticky left-0 z-[1] py-1.5 align-middle pr-2 transition-colors", rowSelected ? "bg-primary/10 group-hover:bg-surface-hover" : isAccessoryRow ? "bg-surface-subtle group-hover:bg-surface-hover" : "bg-surface group-hover:bg-surface-hover", "w-64 max-w-[16rem] min-w-0 overflow-hidden", INDENT_CLASS[indentLevel]),
+				className: cn(NAME_COLUMN_PIN_CLASS, "py-1.5 align-middle pr-2 transition-colors", rowSelected ? "bg-primary/10 group-hover:bg-surface-hover" : isAccessoryRow ? "bg-surface-subtle group-hover:bg-surface-hover" : "bg-surface group-hover:bg-surface-hover", NAME_COLUMN_WIDTH_CLASS, "min-w-0 overflow-hidden", INDENT_CLASS[indentLevel]),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-1.5",
 					children: [selection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -30436,7 +30579,7 @@ function TableLayout({ rows, accessoriesByParent, autoExpandedParents, devices,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 						"aria-sort": ariaSortFor(sort, "name"),
-						className: "sticky left-0 z-[1] bg-surface text-left px-2 py-2 text-[9.5px] font-medium uppercase tracking-wider text-foreground-subtle w-64 max-w-[16rem]",
+						className: cn(NAME_COLUMN_PIN_CLASS, NAME_COLUMN_WIDTH_CLASS, "bg-surface text-left px-2 py-2 text-[9.5px] font-medium uppercase tracking-wider text-foreground-subtle"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableHeaderButton, {
 							columnId: "name",
 							label: "Name",
@@ -35086,15 +35229,14 @@ var MODES = [
 		label: "Continuous"
 	}
 ];
-function RecordingSettings({ initial, saving, onSave, onRegenerateStrips, regeneratingStrips }) {
+function RecordingSettings({ initial, saving, onSave }) {
 	const [tab, setTab] = (0, react$1.useState)(isAdvancedConfig(initial) ? "advanced" : "base");
 	const [base, setBase] = (0, react$1.useState)(formStateFromConfig(initial));
 	const [bands, setBands] = (0, react$1.useState)([...initial.bands]);
 	const [common, setCommon] = (0, react$1.useState)({
 		profiles: initial.profiles,
 		segmentSeconds: initial.segmentSeconds,
-		retention: initial.retention,
-		stripsEnabled: initial.stripsEnabled
+		retention: initial.retention
 	});
 	const ret = common.retention ?? {};
 	const setRet = (patch) => setCommon({
@@ -35132,8 +35274,7 @@ function RecordingSettings({ initial, saving, onSave, onRegenerateStrips, regene
 		const shared = {
 			profiles: common.profiles ? [...common.profiles] : void 0,
 			segmentSeconds: common.segmentSeconds,
-			retention: common.retention,
-			...common.stripsEnabled === void 0 ? {} : { stripsEnabled: common.stripsEnabled }
+			retention: common.retention
 		};
 		if (tab === "base") onSave({
 			...configFromFormState({
@@ -35285,65 +35426,37 @@ function RecordingSettings({ initial, saving, onSave, onRegenerateStrips, regene
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-wrap items-center gap-4 text-xs",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-foreground-subtle",
-							children: "Profiles:"
-						}), PROFILES.map((p) => {
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								onClick: () => toggleProfile(p),
-								className: `rounded px-2 py-1 ${common.profiles == null || common.profiles.includes(p) ? "bg-primary text-primary-foreground" : "bg-surface-hover text-foreground-subtle"}`,
-								children: p
-							}, p);
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "flex items-center gap-1",
-						children: [
-							"Segment",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "number",
-								min: 1,
-								value: common.segmentSeconds ?? "",
-								placeholder: "default",
-								onChange: (e) => setCommon({
-									...common,
-									segmentSeconds: numOrUndef(e.target.value)
-								}),
-								className: "w-16 rounded-md border border-border bg-background px-1 py-1 text-xs"
-							}),
-							"s"
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: common.stripsEnabled === true,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-foreground-subtle",
+						children: "Profiles:"
+					}), PROFILES.map((p) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => toggleProfile(p),
+							className: `rounded px-2 py-1 ${common.profiles == null || common.profiles.includes(p) ? "bg-primary text-primary-foreground" : "bg-surface-hover text-foreground-subtle"}`,
+							children: p
+						}, p);
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "flex items-center gap-1",
+					children: [
+						"Segment",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "number",
+							min: 1,
+							value: common.segmentSeconds ?? "",
+							placeholder: "default",
 							onChange: (e) => setCommon({
 								...common,
-								stripsEnabled: e.target.checked
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-foreground-subtle",
-							children: "Scrub thumbnail strips"
-						})]
-					}),
-					onRegenerateStrips ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: onRegenerateStrips,
-						disabled: regeneratingStrips === true,
-						className: "rounded-md border border-border bg-surface-hover px-2 py-1 text-xs text-foreground-subtle transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-						children: regeneratingStrips === true ? "Regenerating…" : "Regenerate strips"
-					}) : null
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-[11px] text-foreground-subtle",
-				children: "OPT-IN: save every keyframe of the low recording as a JPEG strip for fluid fast scrubbing. Costs disk (a derived cache, reclaimed with the footage). Regenerate clears and rebuilds the recent days from the segments already on disk."
+								segmentSeconds: numOrUndef(e.target.value)
+							}),
+							className: "w-16 rounded-md border border-border bg-background px-1 py-1 text-xs"
+						}),
+						"s"
+					]
+				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-foreground-subtle",
@@ -36592,14 +36705,6 @@ function RecordingPanel({ deviceId }) {
 	const configQuery = useRecordingGetDeviceConfig({ deviceId });
 	const setConfig = useRecordingSetDeviceConfig();
 	const rescanStorage = useRecordingRescanStorage();
-	const customAction = useAddonsCustom();
-	const regenerateStrips = (0, react$1.useCallback)(() => {
-		customAction.mutate({
-			addonId: "recorder",
-			action: "regenerateStrips",
-			input: { deviceId }
-		});
-	}, [customAction, deviceId]);
 	const saveConfig = (config) => {
 		setConfig.mutate({
 			deviceId,
@@ -36641,9 +36746,7 @@ function RecordingPanel({ deviceId }) {
 			children: resolvedConfig ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecordingSettings, {
 				initial: resolvedConfig,
 				saving: setConfig.isPending,
-				onSave: saveConfig,
-				onRegenerateStrips: regenerateStrips,
-				regeneratingStrips: customAction.isPending
+				onSave: saveConfig
 			}, JSON.stringify(resolvedConfig)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-1 py-2 text-xs text-foreground-subtle",
 				children: "Loading settings…"
@@ -38979,9 +39082,9 @@ function ObjectArrayField({ field }) {
 				className: "rounded-md border border-border bg-surface-subtle px-3 py-2 text-xs text-foreground-subtle",
 				children: field.emptyMessage ?? "No entries"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rounded-md border border-border overflow-hidden",
+				className: "rounded-md border border-border overflow-x-auto",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-					className: "w-full text-xs",
+					className: "w-full min-w-[28rem] text-xs",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 						className: "bg-surface-subtle border-b border-border",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: field.columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
@@ -40208,6 +40311,31 @@ function DetectionBoxes({ detections, frameWidth, frameHeight }) {
 	}) });
 }
 //#endregion
+//#region src/composites/reconnect-schedule.ts
+/** Exponential backoff, ±20% jitter, bounded attempts. The bound exists so a
+*  permanently-dead stream stops consuming signaling; the EXHAUSTED action is
+*  the caller's cue to surface a hard error (never to go silent). */
+var RECONNECT_POLICY = {
+	baseDelayMs: 1500,
+	maxDelayMs: 15e3,
+	maxAttempts: 40
+};
+/**
+* Decide what attempt number `attempt` (0-based) should do. `random` is the
+* jitter source (unit interval), injectable for tests.
+*/
+function nextReconnectAction(attempt, random = Math.random) {
+	if (attempt >= RECONNECT_POLICY.maxAttempts) return {
+		kind: "exhausted",
+		attempts: attempt
+	};
+	const base = Math.min(RECONNECT_POLICY.maxDelayMs, RECONNECT_POLICY.baseDelayMs * 2 ** attempt);
+	return {
+		kind: "retry",
+		delayMs: Math.round(base * (.8 + random() * .4))
+	};
+}
+//#endregion
 //#region src/composites/camera-stream-player.tsx
 /**
 * Silence (or restore) a live WebRTC stream FOR REAL.
@@ -40270,11 +40398,8 @@ function computeClientHints(container) {
 	}
 	return hints;
 }
-var RECONNECT_BASE_DELAY_MS = 1500;
-var RECONNECT_MAX_DELAY_MS = 15e3;
-var MAX_RECONNECT_ATTEMPTS = 40;
 var FIRST_FRAME_TIMEOUT_MS = 8e3;
-function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, onConnectTiming, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
+function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, onConnectTiming, className = "", onStateChange, onError, onReconnectAttempt, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel, onVideoElement }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const containerRef = (0, react$1.useRef)(null);
 	const pcRef = (0, react$1.useRef)(null);
@@ -40290,6 +40415,14 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 	*  consumer, without re-creating the connect callback on every render. */
 	const onControlChannelRef = (0, react$1.useRef)(onControlChannel);
 	onControlChannelRef.current = onControlChannel;
+	/** Same pattern for the video-element handle: delivered once on mount, null
+	*  on unmount — the ref keeps the latest consumer without re-running. */
+	const onVideoElementRef = (0, react$1.useRef)(onVideoElement);
+	onVideoElementRef.current = onVideoElement;
+	(0, react$1.useEffect)(() => {
+		onVideoElementRef.current?.(videoRef.current);
+		return () => onVideoElementRef.current?.(null);
+	}, []);
 	/** The live session being polled for `pendingRenegotiation` (client-offer). */
 	const activeSessionIdRef = (0, react$1.useRef)(null);
 	/** Timer for the session-state (renegotiation) poll loop. */
@@ -40678,6 +40811,8 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 									iceConnectedMs: timing.iceConnectedMs,
 									firstTrackMs: timing.firstTrackMs
 								});
+								reportHardErrorRef.current("no decoded frame after connect");
+								scheduleReconnect();
 							}, FIRST_FRAME_TIMEOUT_MS);
 						}
 					}
@@ -40946,17 +41081,32 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 	]);
 	const connect = useClientOffer ? connectClientOffer : useServerOffer ? connectServerOffer : connectWhep;
 	const connectRef = (0, react$1.useRef)(() => {});
+	const onReconnectAttemptRef = (0, react$1.useRef)(onReconnectAttempt);
+	onReconnectAttemptRef.current = onReconnectAttempt;
+	const reportHardErrorRef = (0, react$1.useRef)(() => {});
+	reportHardErrorRef.current = (msg) => {
+		console.warn("[WebRTC] hard error", {
+			streamKey,
+			msg
+		});
+		setErrorMessage(msg);
+		onError?.(msg);
+		updateState("error");
+	};
 	connectRef.current = connect;
 	const scheduleReconnect = (0, react$1.useCallback)(() => {
 		if (!mountedRef.current) return;
-		if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) return;
 		const attempt = reconnectAttemptsRef.current;
+		const action = nextReconnectAction(attempt);
+		onReconnectAttemptRef.current?.(action);
+		if (action.kind === "exhausted") {
+			reportHardErrorRef.current(`reconnect attempts exhausted (${action.attempts})`);
+			return;
+		}
 		reconnectAttemptsRef.current += 1;
-		const base = Math.min(RECONNECT_MAX_DELAY_MS, RECONNECT_BASE_DELAY_MS * 2 ** attempt);
-		const delay = Math.round(base * (.8 + Math.random() * .4));
 		reconnectTimerRef.current = setTimeout(() => {
 			if (mountedRef.current) connectRef.current();
-		}, delay);
+		}, action.delayMs);
 	}, []);
 	(0, react$1.useEffect)(() => {
 		mountedRef.current = true;
@@ -41337,7 +41487,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				children: statsText
 			}),
 			overlay,
-			!stillImg && state === "connecting" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			showControls && !stillImg && state === "connecting" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "absolute inset-0 z-10 transform-gpu flex flex-col items-center justify-center bg-black/70 gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					className: "h-6 w-6 text-white/60 animate-spin",
@@ -41359,7 +41509,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					children: "Connecting…"
 				})]
 			}),
-			!stillImg && (state === "error" || state === "disconnected") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			showControls && !stillImg && (state === "error" || state === "disconnected") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "absolute inset-0 z-10 transform-gpu flex flex-col items-center justify-center bg-black/70 gap-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -41384,7 +41534,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					})
 				]
 			}),
-			stillImg && (state === "connecting" || state === "disconnected") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			showControls && stillImg && (state === "connecting" || state === "disconnected") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "absolute top-2 left-2 z-10 transform-gpu flex h-6 w-6 items-center justify-center rounded-full bg-black/55",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					className: "h-3.5 w-3.5 text-white/90 animate-spin",
@@ -41403,7 +41553,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					})
 				})
 			}),
-			stillImg && state === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			showControls && stillImg && state === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				onClick: handleReconnect,
 				title: errorMessage || "Reconnect",
 				className: "absolute top-2 left-2 z-10 transform-gpu flex h-6 w-6 items-center justify-center rounded-full bg-black/55 text-white/90 hover:bg-black/75 transition-colors",
@@ -42517,7 +42667,7 @@ function StreamBrokerSelector({ deviceId, value, onChange, disabled, label, clas
 * needs a one-click copy affordance (export setup panels, etc.).
 */
 var COPIED_RESET_MS = 2e3;
-function CopyButton({ value, label, className, disabled }) {
+function CopyButton({ value, label, srLabel, className, disabled }) {
 	const [copied, setCopied] = (0, react$1.useState)(false);
 	const handleCopy = (0, react$1.useCallback)(() => {
 		if (!value) return;
@@ -42533,7 +42683,7 @@ function CopyButton({ value, label, className, disabled }) {
 		disabled: disabled || value.length === 0,
 		onClick: handleCopy,
 		className: cn(className),
-		"aria-label": copied ? "Copied" : `Copy ${label ?? "value"}`,
+		"aria-label": copied ? "Copied" : `Copy ${srLabel ?? label ?? "value"}`,
 		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5 text-success" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" }), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "ml-1",
 			children: copied ? "Copied" : label
@@ -42602,35 +42752,30 @@ function capitaliseLinkState(state) {
 /**
 * A single label/value row in the Setup section. `secret` rows mask the
 * value behind a reveal toggle; every row gets a copy button.
+*
+* Layout — including the L1 stack that keeps a long token readable on a phone
+* — is owned by the shared `<SettingRow>`; this component only decides what
+* the value and the affordances are.
 */
 function SetupFieldRow({ field }) {
 	const [revealed, setRevealed] = (0, react$1.useState)(false);
 	const isSecret = field.secret === true;
 	const displayValue = isSecret && !revealed ? "•".repeat(Math.min(field.value.length, 24)) : field.value;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 py-1.5",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[11px] text-foreground-subtle w-32 shrink-0",
-				children: field.label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex-1 min-w-0 truncate font-mono text-xs text-foreground",
-				children: displayValue || "—"
-			}),
-			isSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-				size: "sm",
-				variant: "ghost",
-				type: "button",
-				"aria-label": revealed ? "Hide value" : "Reveal value",
-				onClick: () => setRevealed((v) => !v),
-				children: revealed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Eye, { className: "h-3.5 w-3.5" })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
-				value: field.value,
-				label: field.label
-			})
-		]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+		label: field.label,
+		valueClassName: "font-mono",
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			size: "sm",
+			variant: "ghost",
+			type: "button",
+			"aria-label": revealed ? "Hide value" : "Reveal value",
+			onClick: () => setRevealed((v) => !v),
+			children: revealed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Eye, { className: "h-3.5 w-3.5" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+			value: field.value,
+			srLabel: field.label
+		})] }),
+		children: displayValue || "—"
 	});
 }
 /**
@@ -46736,6 +46881,112 @@ function useDeviceDetections(trpc, deviceId) {
 	};
 }
 //#endregion
+//#region src/hooks/turn-server-cache.ts
+/** Short enough that rotated credentials are picked up promptly. */
+var DEFAULT_FRESH_TTL_MS = 5 * 6e4;
+/** Half of the shortest provider credential lifetime in the fleet (24 h). */
+var DEFAULT_STALE_CAP_MS = 720 * 6e4;
+var DEFAULT_STORAGE_KEY = "camstack:turn-servers:v1";
+function defaultStorage() {
+	const g = globalThis;
+	try {
+		return g.localStorage ?? null;
+	} catch {
+		return null;
+	}
+}
+/** Type guard for a persisted entry — storage content is external data. */
+function isCacheEntry(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const v = value;
+	if (typeof v.fetchedAt !== "number" || !Array.isArray(v.servers)) return false;
+	return v.servers.every((s) => {
+		if (typeof s !== "object" || s === null) return false;
+		const srv = s;
+		if (!(typeof srv.urls === "string" || Array.isArray(srv.urls) && srv.urls.every((u) => typeof u === "string"))) return false;
+		if (srv.username !== void 0 && typeof srv.username !== "string") return false;
+		if (srv.credential !== void 0 && typeof srv.credential !== "string") return false;
+		return true;
+	});
+}
+var TurnServerCache = class {
+	freshTtlMs;
+	staleCapMs;
+	storage;
+	now;
+	storageKey;
+	/** Keyed on the caller's tRPC client object (stable per connected system). */
+	memory = /* @__PURE__ */ new WeakMap();
+	/** In-flight fetch per key — concurrent callers share one round trip. */
+	inflight = /* @__PURE__ */ new WeakMap();
+	constructor(options = {}) {
+		this.freshTtlMs = options.freshTtlMs ?? DEFAULT_FRESH_TTL_MS;
+		this.staleCapMs = options.staleCapMs ?? DEFAULT_STALE_CAP_MS;
+		this.storage = "storage" in options ? options.storage ?? null : defaultStorage();
+		this.now = options.now ?? (() => Date.now());
+		this.storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
+	}
+	/**
+	* Resolve the ICE servers for `key`, fetching via `fetch` only when no
+	* fresh-enough entry exists. Never rejects: a failed fetch resolves to the
+	* stale entry when one exists, else `undefined`.
+	*/
+	async getOrFetch(key, fetch) {
+		const at = this.now();
+		const entry = this.memory.get(key) ?? this.readStorage();
+		if (entry) {
+			const age = at - entry.fetchedAt;
+			if (age < this.freshTtlMs) return entry.servers;
+			if (age < this.staleCapMs) {
+				this.startFetch(key, fetch, entry);
+				return entry.servers;
+			}
+		}
+		return this.startFetch(key, fetch, entry);
+	}
+	startFetch(key, fetch, stale) {
+		const pending = this.inflight.get(key);
+		if (pending) return pending;
+		const run = (async () => {
+			try {
+				const servers = await fetch();
+				if (servers.length > 0) {
+					const entry = {
+						servers,
+						fetchedAt: this.now()
+					};
+					this.memory.set(key, entry);
+					this.writeStorage(entry);
+				}
+				return servers;
+			} catch {
+				return stale?.servers;
+			}
+		})().finally(() => {
+			this.inflight.delete(key);
+		});
+		this.inflight.set(key, run);
+		return run;
+	}
+	readStorage() {
+		if (!this.storage) return void 0;
+		try {
+			const raw = this.storage.getItem(this.storageKey);
+			if (raw === null) return void 0;
+			const parsed = JSON.parse(raw);
+			return isCacheEntry(parsed) ? parsed : void 0;
+		} catch {
+			return;
+		}
+	}
+	writeStorage(entry) {
+		if (!this.storage) return;
+		try {
+			this.storage.setItem(this.storageKey, JSON.stringify(entry));
+		} catch {}
+	}
+};
+//#endregion
 //#region src/hooks/use-device-webrtc.ts
 /**
 * useDeviceWebrtc — WebRTC signaling hook for device-scoped streaming.
@@ -46753,15 +47004,16 @@ function useDeviceDetections(trpc, deviceId) {
 * @param deviceId - numeric device ID (null = disabled)
 * @param pollIntervalMs - how often to refresh profile slots (default: 5000)
 */
-/** TTL for the TURN/STUN credential cache. Short enough that rotated creds
-*  are picked up promptly, long enough to cover a connect + several profile
-*  switches without re-paying the fetch. */
-var TURN_CACHE_TTL_MS = 5 * 6e4;
-/** Keyed on the caller's trpc client object (stable per connected system —
-*  NOT on `trpc.turnProvider`, which is a proxy minted fresh on every property
-*  access), so two admin tabs pointed at different hubs never cross-serve
-*  credentials. An unstable key degrades to a cache miss, never to wrong creds. */
-var turnServersCache = /* @__PURE__ */ new WeakMap();
+/** Module-level TURN/STUN credential cache. Keyed on the caller's trpc client
+*  object (stable per connected system — NOT on `trpc.turnProvider`, which is
+*  a proxy minted fresh on every property access), so two admin tabs pointed
+*  at different hubs never cross-serve credentials from the memory layer; the
+*  storage layer is per-origin, and the page's origin IS the hub. Coalesces
+*  concurrent fetches (the mount prefetch and the connect's own call used to
+*  race into TWO round trips) and persists across page loads so a fresh embed
+*  page — one per camera open on native — finds warm credentials instead of
+*  re-paying the measured 0.2–3.6 s serialized fetch. See turn-server-cache.ts. */
+var turnServersCache = new TurnServerCache();
 function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 	const [remoteStreams, setRemoteStreams] = (0, react$1.useState)([]);
 	(0, react$1.useEffect)(() => {
@@ -46830,25 +47082,17 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
 		};
 	}, [deviceId, remoteStreams]);
 	const getIceServers = (0, react$1.useCallback)(async () => {
-		if (!trpc.turnProvider) return void 0;
-		const cached = turnServersCache.get(trpc);
-		if (cached && Date.now() - cached.fetchedAt < TURN_CACHE_TTL_MS) return cached.servers;
-		try {
-			const mapped = (await trpc.turnProvider.getTurnServers.query()).map((s) => {
+		const provider = trpc.turnProvider;
+		if (!provider) return void 0;
+		return turnServersCache.getOrFetch(trpc, async () => {
+			return (await provider.getTurnServers.query()).map((s) => {
 				return {
 					urls: typeof s.urls === "string" ? s.urls : [...s.urls],
 					...s.username !== void 0 ? { username: s.username } : {},
 					...s.credential !== void 0 ? { credential: s.credential } : {}
 				};
 			});
-			turnServersCache.set(trpc, {
-				servers: mapped,
-				fetchedAt: Date.now()
-			});
-			return mapped;
-		} catch {
-			return cached?.servers;
-		}
+		});
 	}, [trpc]);
 	(0, react$1.useEffect)(() => {
 		getIceServers();
@@ -47244,6 +47488,7 @@ exports.BrightnessPanel = BrightnessPanel;
 exports.Button = Button;
 exports.ButtonControl = ButtonControl;
 exports.ButtonHeroCard = ButtonHeroCard;
+exports.CARD_MODE_MIN_COLUMNS = CARD_MODE_MIN_COLUMNS;
 exports.CENTER = CENTER;
 exports.CHIP_ACTIVE = CHIP_ACTIVE;
 exports.CHIP_BASE = CHIP_BASE;
@@ -47395,6 +47640,7 @@ exports.PrivacyMaskSettings = PrivacyMaskSettings;
 exports.ProviderBadge = ProviderBadge;
 exports.PtzPanel = PtzPanel;
 exports.QrCode = QrCode;
+exports.RECONNECT_POLICY = RECONNECT_POLICY;
 exports.RECORDED_PLAYBACK_MODES = RECORDED_PLAYBACK_MODES;
 exports.RIGHT = RIGHT;
 exports.ROLE_DESCRIPTOR = ROLE_DESCRIPTOR;
@@ -47405,6 +47651,11 @@ exports.ResponseLog = ResponseLog;
 exports.SECTION_BODY = SECTION_BODY;
 exports.SECTION_CARD = SECTION_CARD;
 exports.SECTION_HEADER = SECTION_HEADER;
+exports.SETTING_ROW = SETTING_ROW;
+exports.SETTING_ROW_LABEL = SETTING_ROW_LABEL;
+exports.SETTING_ROW_STACK_BREAKPOINT = SETTING_ROW_STACK_BREAKPOINT;
+exports.SETTING_ROW_VALUE = SETTING_ROW_VALUE;
+exports.SETTING_ROW_VALUE_TEXT = SETTING_ROW_VALUE_TEXT;
 exports.SPLIT_PANEL_OUTER = SPLIT_PANEL_OUTER;
 exports.SPLIT_PANEL_SIDE = SPLIT_PANEL_SIDE;
 exports.STACK_GAP = STACK_GAP;
@@ -47417,6 +47668,7 @@ exports.SensorHeroCard = SensorHeroCard;
 exports.SensorInlineControl = SensorInlineControl;
 exports.SensorValueAtom = SensorValueAtom;
 exports.Separator = Separator;
+exports.SettingRow = SettingRow;
 exports.Sidebar = Sidebar;
 exports.SidebarItem = SidebarItem;
 exports.Skeleton = Skeleton;
@@ -47522,6 +47774,7 @@ exports.metadataEntries = metadataEntries;
 exports.metadataString = metadataString;
 exports.mirror = mirror;
 exports.mountAddonPage = mountAddonPage;
+exports.nextReconnectAction = nextReconnectAction;
 exports.nextSort = nextSort;
 exports.normalizeForSearch = normalizeForSearch;
 exports.overrideEntityIdFromLink = overrideEntityIdFromLink;
@@ -47535,6 +47788,7 @@ exports.resolveEventKindIcon = resolveEventKindIcon;
 exports.resolvePrimaryChild = resolvePrimaryChild;
 exports.resolveSensorDisplay = resolveSensorDisplay;
 exports.resolveStepDefaultModel = resolveStepDefaultModel;
+exports.resolveTableLayout = resolveTableLayout;
 exports.scrubReducer = scrubReducer;
 exports.selectedDeviceOptions = selectedDeviceOptions;
 exports.serializeRecordedCommand = serializeRecordedCommand;
@@ -48286,6 +48540,7 @@ exports.useServerManagementRollbackServerUpdate = useServerManagementRollbackSer
 exports.useSettingsStoreCount = useSettingsStoreCount;
 exports.useSettingsStoreDeclareCollection = useSettingsStoreDeclareCollection;
 exports.useSettingsStoreDelete = useSettingsStoreDelete;
+exports.useSettingsStoreDeleteWhere = useSettingsStoreDeleteWhere;
 exports.useSettingsStoreGet = useSettingsStoreGet;
 exports.useSettingsStoreHistogram = useSettingsStoreHistogram;
 exports.useSettingsStoreInsert = useSettingsStoreInsert;
@@ -48293,6 +48548,7 @@ exports.useSettingsStoreIsEmpty = useSettingsStoreIsEmpty;
 exports.useSettingsStoreQuery = useSettingsStoreQuery;
 exports.useSettingsStoreSet = useSettingsStoreSet;
 exports.useSettingsStoreUpdate = useSettingsStoreUpdate;
+exports.useSettingsStoreUpdateWhere = useSettingsStoreUpdateWhere;
 exports.useSmokeGetStatus = useSmokeGetStatus;
 exports.useSnapshotApplyDeviceSettingsPatch = useSnapshotApplyDeviceSettingsPatch;
 exports.useSnapshotGetDeviceLiveContribution = useSnapshotGetDeviceLiveContribution;