@camstack/ui-library 1.2.193 → 1.2.195

package/dist/index.cjs

@@ -7213,6 +7213,8 @@ var useVideoclipsListClips = trpc.videoclips.listClips.useQuery;
 var useVideoclipsListSources = trpc.videoclips.listSources.useQuery;
 /** Generated alias around `trpc.videoclips.getClipPlayback.useQuery`. */
 var useVideoclipsGetClipPlayback = trpc.videoclips.getClipPlayback.useQuery;
+/** Generated alias around `trpc.videoclips.readClipBytes.useQuery`. */
+var useVideoclipsReadClipBytes = trpc.videoclips.readClipBytes.useQuery;
 /** Generated alias around `trpc.waterHeater.setTargetTemp.useMutation`. */
 var useWaterHeaterSetTargetTemp = trpc.waterHeater.setTargetTemp.useMutation;
 /** Generated alias around `trpc.waterHeater.setOperationMode.useMutation`. */
@@ -17684,38 +17686,6 @@ var cva = (base, config) => (props) => {
 	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
 //#endregion
-//#region src/primitives/badge.tsx
-var badgeVariants = cva("inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5", {
-	variants: {
-		variant: {
-			default: "bg-surface-hover text-foreground",
-			success: "bg-success/15 text-success",
-			warning: "bg-warning/15 text-warning",
-			danger: "bg-danger/15 text-danger",
-			info: "bg-info/15 text-info"
-		},
-		styleVariant: {
-			solid: "",
-			outline: "border bg-transparent"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		styleVariant: "solid"
-	}
-});
-var Badge = (0, react$1.forwardRef)(({ className, variant, style, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		ref,
-		className: cn(badgeVariants({
-			variant,
-			styleVariant: style
-		}), className),
-		...props
-	});
-});
-Badge.displayName = "Badge";
-//#endregion
 //#region src/primitives/button.tsx
 var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
 	variants: {
@@ -17991,473 +17961,6 @@ function axisTicks(fromMs, toMs, count) {
 	return ticks;
 }
 //#endregion
-//#region src/hooks/use-is-mobile.ts
-var MOBILE_QUERY = "(max-width: 767px)";
-/**
-* Mid breakpoint — below this width the sidebar collapses to an
-* icons-only rail to reclaim canvas space. Above it (and outside
-* mobile) the full sidebar renders. Threshold matches Tailwind `lg`
-* so sidebar fans out at the same point grids switch to multi-column.
-*/
-var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
-/**
-* `matchMedia` is universal in browsers but absent in bare DOM environments.
-* These hooks are called from shared primitives (`DataTable` picks its narrow
-* layout with one), so throwing here takes down the whole page that merely
-* rendered a table. Where the capability is missing, report the desktop
-* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
-*/
-function matchQuery(query) {
-	if (typeof window.matchMedia !== "function") return null;
-	return window.matchMedia(query);
-}
-function subscribeQuery(query) {
-	return (callback) => {
-		const mql = matchQuery(query);
-		if (mql === null) return () => {};
-		mql.addEventListener("change", callback);
-		return () => mql.removeEventListener("change", callback);
-	};
-}
-function getSnapshot(query) {
-	return () => matchQuery(query)?.matches ?? false;
-}
-function getServerSnapshot() {
-	return false;
-}
-function useIsMobile() {
-	return (0, react$1.useSyncExternalStore)(subscribeQuery(MOBILE_QUERY), getSnapshot(MOBILE_QUERY), getServerSnapshot);
-}
-/**
-* True when the viewport is in the medium (`md`) Tailwind range —
-* 768px ≤ width < 1024px. Use to drive layouts that should pack denser
-* than full-desktop but more legibly than mobile (e.g. icons-only
-* sidebar rail, narrower stat tiles).
-*/
-function useIsMidWidth() {
-	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
-}
-//#endregion
-//#region src/composites/data-table-layout.ts
-/**
-* At this many columns and above, `auto` switches a narrow viewport to cards.
-* Three columns still fit a phone at a readable size; four do not.
-*/
-var CARD_MODE_MIN_COLUMNS = 4;
-function resolveTableLayout({ mode, columnCount, isNarrow }) {
-	if (!isNarrow) return "table";
-	if (mode === "scroll") return "table";
-	if (mode === "cards") return "cards";
-	if (columnCount === 0) return "table";
-	return columnCount >= 4 ? "cards" : "table";
-}
-//#endregion
-//#region src/lib/responsive.ts
-/**
-* Responsive design tokens — three-tier system.
-*
-* The admin-ui targets three width tiers; every component should pick
-* the right token from this file instead of hand-coding breakpoints.
-* Adopting the tokens uniformly is what makes the app feel consistent
-* across operator devices (mobile / tablet / desktop) and what unlocks
-* targeted tuning (e.g. shrink every label by 1px in one place).
-*
-* Tier definitions (Tailwind breakpoints):
-*
-*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
-*     Single column, tight padding, smallest text, icon-only buttons
-*     where labels can be inferred. The operator can still see every
-*     stat / action — no horizontal scroll, no clipped text. The user
-*     directive: "molta informazione in poco spazio quando la width è
-*     bassa."
-*
-*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
-*     2-column grids, side panels become visible, button labels return.
-*     Targets ~768px–1024px viewports — the most common operator sizes.
-*
-*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
-*     4-column grids, generous padding, full-width header text,
-*     side-by-side composite layouts. The operator has elbow room.
-*
-* Conventions:
-*   - **Always start from L1** — the bare class is always the compact
-*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
-*     desktop-first breakpoints; no max-width queries.
-*   - **Token strings are static** — kept as `as const` so callers can
-*     compose them via `cn()` / template literals without running a
-*     class generator at runtime.
-*   - **Pair the token with a comment** — the comment in the file
-*     names every breakpoint it crosses, so a reader can predict the
-*     layout without going to Tailwind docs.
-*/
-/** Container padding for a card-style section (header + body). */
-var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
-/** Header strip inside a card (between border-b lines). */
-var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
-/** Body padding for a card-style section. */
-var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
-/** Gap between cards in a vertical stack. */
-var STACK_GAP = "space-y-3 sm:space-y-4";
-/** Gap between cards in a grid (4 cells / row at lg). */
-var GRID_GAP = "gap-2 sm:gap-3";
-/** Row padding inside a divided list (e.g. InfoRow). */
-var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
-/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
-var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
-/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
-var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
-/** Side-by-side layout that stacks below md (canvas + side panel). */
-var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
-/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
-var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
-/**
-* The tier boundary at which a settings label/value row stops stacking.
-*
-* Below it (L1 — compact) the row is ONE column: label on its own line, value
-* on the next at full width. Above it the row is label-left / value-right as
-* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
-* value beside it; a phone has neither, and the failure mode is not "cramped"
-* but "the value is the part that gets cut" — the one thing the operator
-* opened the page to read.
-*/
-var SETTING_ROW_STACK_BREAKPOINT = "sm";
-/** Outer row: single column at L1, label/value columns from `sm` up. */
-var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
-/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
-var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
-/**
-* Value lane — the value text plus its trailing affordances (copy / reveal).
-* `w-full` at L1 so the value owns the whole row once the label is above it;
-* `sm:flex-1` makes it share the row again from `sm` up.
-*/
-var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
-/**
-* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
-* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
-* desktop form, where the row is wide enough for truncation to be a choice
-* rather than data loss.
-*/
-var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
-/** Section header label (uppercase tracking-wider). */
-var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
-/** Field label inside a row. */
-var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
-/** Sub-label / hint text. */
-var TEXT_HINT = "text-[10px] text-foreground-subtle";
-/** Primary value (a metric, badge, …). */
-var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
-/** Big metric value (StatCard). */
-var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
-/** Default compact button. */
-var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
-/** Primary compact button. */
-var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
-/** Danger compact button. */
-var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
-/** Warning compact button (e.g. cancel-drawing). */
-var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
-/** Compact text/select/number input. */
-var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
-/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
-var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
-var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
-var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
-//#endregion
-//#region src/composites/setting-row.tsx
-function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
-	const LabelTag = elements === "description" ? "dt" : "span";
-	const ValueTag = elements === "description" ? "dd" : "div";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-setting-row": "",
-		className: cn(SETTING_ROW, className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
-			"data-setting-row-label": "",
-			className: SETTING_ROW_LABEL,
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
-			"data-setting-row-value": "",
-			className: SETTING_ROW_VALUE,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-setting-row-value-text": "",
-				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
-				children
-			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex shrink-0 items-center gap-0.5",
-				children: actions
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/composites/sort-header-button.tsx
-function SortHeaderButton({ label, active, dir, onSort }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		onClick: onSort,
-		className: "group/sort inline-flex items-center gap-0.5 hover:text-foreground transition-colors",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), active ? dir === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: cn("h-3 w-3 flex-shrink-0 opacity-0 transition-opacity", "group-hover/sort:opacity-30") })]
-	});
-}
-//#endregion
-//#region src/composites/table-sort.ts
-/**
-* The toggle rule, and the only copy of it.
-*
-* none → asc → desc → none, and a click on a DIFFERENT column starts that
-* column fresh at `asc`. `sameColumn` says whether the clicked column is the
-* one currently sorted; `currentDir` is its direction (`null` when nothing is
-* sorted). Returns the next direction, or `null` for "unsorted".
-*
-* Split out from {@link nextTableSort} so the device list — whose sort state
-* keys columns by `columnId`, not `columnKey` — can reuse the rule without a
-* cast and without a second copy of it.
-*/
-function nextSortDirection(sameColumn, currentDir) {
-	if (!sameColumn || currentDir === null) return "asc";
-	return currentDir === "asc" ? "desc" : null;
-}
-/**
-* Toggle a column's sort on header click: none → asc → desc → none.
-* Clicking a DIFFERENT column starts it fresh at `asc`.
-*/
-function nextTableSort(current, columnKey) {
-	const dir = nextSortDirection(current !== null && current.columnKey === columnKey, current === null ? null : current.dir);
-	return dir === null ? null : {
-		columnKey,
-		dir
-	};
-}
-/**
-* Ascending comparison of two cell values.
-*
-* Numbers compare numerically and strings compare with `localeCompare` — a
-* numeric column must never be ordered as text ("100" before "9"), and a text
-* column must respect the locale's collation. A mixed column (one row a
-* number, another a string) falls back to string comparison of both, which is
-* the only total order available; it is not a shape any caller should build on
-* purpose.
-*
-* `null` is NOT handled here — {@link sortRowsByColumn} pulls it out first,
-* because its placement is direction-independent and a comparator that is
-* multiplied by the direction factor cannot express that.
-*/
-function compareValues(a, b) {
-	if (typeof a === "number" && typeof b === "number") return a - b;
-	return String(a).localeCompare(String(b));
-}
-/**
-* Return a NEW array of `rows` ordered by `sort`.
-*
-* `valueOf` is the column's `sortValue` — it is called once per row per
-* comparison, so it must be cheap (read a field, do not format a string).
-* `sort === null` ⇒ a fresh shallow copy in the incoming order.
-*/
-function sortRowsByColumn(rows, sort, valueOf) {
-	if (sort === null) return [...rows];
-	const factor = sort.dir === "asc" ? 1 : -1;
-	return rows.toSorted((a, b) => {
-		const av = valueOf(a);
-		const bv = valueOf(b);
-		if (av === null || bv === null) {
-			if (av === bv) return 0;
-			return av === null ? 1 : -1;
-		}
-		return factor * compareValues(av, bv);
-	});
-}
-/** Derive the `<th>` `aria-sort` for `columnKey` from the table's sort state. */
-function ariaSortForColumn(sort, columnKey) {
-	if (sort === null || sort.columnKey !== columnKey) return "none";
-	return sort.dir === "asc" ? "ascending" : "descending";
-}
-//#endregion
-//#region src/composites/data-table.tsx
-/**
-* DataTable — shared responsive table for admin pages.
-*
-* Recipes baked in:
-*   - `overflow-x-auto` wrapper so narrow viewports don't clip the
-*     right edge (the rounded border survives the scroll).
-*   - `min-w-[Npx]` on the inner table so columns don't squash below
-*     readable width before the scroll kicks in.
-*   - `whitespace-nowrap` on headers — column titles never wrap to
-*     two lines (`AUTO-KILL` was the regression that triggered this).
-*   - Themed `bg-surface` + `border-border` so contrast works in both
-*     light and dark themes.
-*
-* Column model: caller supplies `columns: DataColumn<T>[]` and
-* `rows: T[]`. Each column declares `header`, optional `align`,
-* optional `nowrap`, and a `render(row) => ReactNode` that produces
-* the cell content.
-*
-*   <DataTable
-*     columns={[
-*       { key: 'username', header: 'Username', render: (u) => u.username },
-*       { key: 'role',     header: 'Role',     render: (u) => <RoleBadge .../> },
-*       { key: 'actions',  header: '',         align: 'right', render: (u) => <Actions .../> },
-*     ]}
-*     rows={users}
-*     minWidthPx={560}
-*   />
-*
-* If finer header markup is needed, pass `headerRender` instead of
-* `header` (e.g. for a sortable click affordance).
-*
-* ── Narrow viewports ──────────────────────────────────────────────────────
-* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
-* scrolls the columns sideways INSIDE the table — the page body never moves
-* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
-* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
-* `auto` still applies the old column-count rule for a surface that wants it.
-* See `resolveTableLayout`.
-*
-* ── Scrolling the BODY, not the page ──────────────────────────────────────
-* `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
-* with the column header pinned. It is ONE prop, not two, because "this list
-* scrolls internally" and "its header stays visible" are the same decision: a
-* capped table whose header scrolls away is a list of unlabelled cells.
-*
-* Use it wherever the row count is open-ended (rules, targets, delivery
-* history) so the page keeps its own header, filters and actions in view while
-* the operator moves through the rows.
-*/
-/**
-* The default cap for an internally-scrolling table.
-*
-* `60vh` leaves the page header, its filters and its actions on screen at
-* every viewport while still showing ~10 rows — and it is a fraction, so it
-* does not need a breakpoint of its own.
-*/
-var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
-var ALIGN_CLASS = {
-	left: "text-left",
-	right: "text-right",
-	center: "text-center"
-};
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
-	const isNarrow = useIsMobile();
-	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
-	const layout = resolveTableLayout({
-		mode: mobileMode,
-		columnCount: columns.length,
-		isNarrow
-	});
-	const scrolls = maxBodyHeight !== void 0;
-	const sortedColumn = (0, react$1.useMemo)(() => sort === null ? void 0 : columns.find((col) => col.key === sort.columnKey && col.sortValue !== void 0), [columns, sort]);
-	const sortValue = sortedColumn?.sortValue;
-	const displayRows = (0, react$1.useMemo)(() => sortValue === void 0 ? rows : sortRowsByColumn(rows, sort, sortValue), [
-		rows,
-		sort,
-		sortValue
-	]);
-	const activeSort = sortedColumn === void 0 ? null : sort;
-	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
-		children: emptyMessage
-	});
-	if (rows.length === 0) return null;
-	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
-		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
-			row,
-			rowIndex,
-			columns,
-			bordered,
-			onRowClick,
-			rowClassName
-		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: [
-			"rounded-lg",
-			bordered ? "border border-border" : "",
-			"bg-surface overflow-x-auto",
-			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
-			className ?? ""
-		].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
-			style: { minWidth: `${minWidthPx}px` },
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-				className: "bg-surface",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
-					const align = col.align ?? "left";
-					const nowrap = col.nowrap ?? true;
-					const sortable = col.sortValue !== void 0;
-					const isSorted = activeSort !== null && activeSort.columnKey === col.key;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-						"aria-sort": sortable ? ariaSortForColumn(activeSort, col.key) : void 0,
-						title: sortable ? void 0 : col.notSortableReason,
-						className: [
-							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
-							scrolls ? "sticky top-0 z-10" : "",
-							ALIGN_CLASS[align],
-							nowrap ? "whitespace-nowrap" : "",
-							col.width ?? ""
-						].filter(Boolean).join(" "),
-						children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortHeaderButton, {
-							label: col.headerRender ? col.headerRender() : col.header,
-							active: isSorted,
-							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
-							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
-						}) : col.headerRender ? col.headerRender() : col.header
-					}, col.key);
-				}) })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
-				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
-				const extra = rowClassName?.(row, rowIndex) ?? "";
-				const interactive = onRowClick !== void 0;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
-					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
-					children: columns.map((col) => {
-						const align = col.align ?? "left";
-						const nowrap = col.nowrap ?? true;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-							className: [
-								"px-3 py-2 text-foreground border-b border-border",
-								ALIGN_CLASS[align],
-								nowrap ? "whitespace-nowrap" : ""
-							].filter(Boolean).join(" "),
-							children: col.render(row, rowIndex)
-						}, col.key);
-					})
-				}, key);
-			}) })]
-		})
-	});
-}
-/**
-* One row as a card. Columns that carry a plain-text `header` become labelled
-* `SettingRow`s — the label is the column title and the value gets the full
-* card width. Columns with no text header (an actions column, a
-* `headerRender`-only column) have no label to show, so they render as a
-* full-width strip at the foot of the card.
-*/
-function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
-	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
-	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
-	const interactive = onRowClick !== void 0;
-	const extra = rowClassName?.(row, rowIndex) ?? "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-data-table-card": "",
-		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
-		className: [
-			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
-			bordered ? "border border-border" : "",
-			interactive ? "cursor-pointer hover:bg-primary/5" : "",
-			extra
-		].filter(Boolean).join(" "),
-		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-			label: col.header,
-			children: col.render(row, rowIndex)
-		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
-			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
-		})]
-	});
-}
-//#endregion
 //#region src/composites/device-list/pagination.tsx
 var NEIGHBORS = 2;
 function computePageButtons(currentPage, totalPages) {
@@ -19045,6 +18548,38 @@ function ClipPanel({ deviceId, clip, profile, onProfileChange }) {
 	});
 }
 //#endregion
+//#region src/primitives/badge.tsx
+var badgeVariants = cva("inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5", {
+	variants: {
+		variant: {
+			default: "bg-surface-hover text-foreground",
+			success: "bg-success/15 text-success",
+			warning: "bg-warning/15 text-warning",
+			danger: "bg-danger/15 text-danger",
+			info: "bg-info/15 text-info"
+		},
+		styleVariant: {
+			solid: "",
+			outline: "border bg-transparent"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		styleVariant: "solid"
+	}
+});
+var Badge = (0, react$1.forwardRef)(({ className, variant, style, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		className: cn(badgeVariants({
+			variant,
+			styleVariant: style
+		}), className),
+		...props
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
 //#region src/lib/format-duration.ts
 /**
 * How long something lasted, the way this product says it.
@@ -19558,24 +19093,6 @@ function describeSource(source) {
 		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
 function resolveClipsView(input) {
@@ -19729,56 +19246,6 @@ function resolveClipsView(input) {
 var CLIP_PAGE_LIMIT = 500;
 /** Tiles per page. The rest are a `Pagination` click away, never dropped. */
 var TILES_PER_PAGE = 60;
-var TONE_BADGE = {
-	ok: "success",
-	warn: "warning",
-	error: "danger"
-};
-var SOURCE_COLUMNS = [
-	{
-		key: "source",
-		header: "Source",
-		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "font-medium text-foreground",
-				children: row.notice.label
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-[10px] text-foreground-subtle",
-				children: row.notice.source
-			})]
-		})
-	},
-	{
-		key: "state",
-		header: "State",
-		nowrap: false,
-		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
-			variant: TONE_BADGE[row.notice.tone],
-			children: row.notice.headline
-		})
-	},
-	{
-		key: "reason",
-		header: "Reason",
-		nowrap: false,
-		render: (row) => row.notice.detail === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-foreground-subtle",
-			children: "—"
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "break-words",
-			children: row.notice.detail
-		})
-	},
-	{
-		key: "read",
-		header: "Catalog read",
-		render: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-foreground-subtle",
-			children: row.catalogAge ?? "live"
-		})
-	}
-];
 /** The sources that contributed NOTHING to what is on screen, and why. */
 function SilentSources({ silent }) {
 	if (silent.length === 0) return null;
@@ -19865,7 +19332,6 @@ function ClipsSection({ deviceId }) {
 		...clips.error ? { clipsError: clips.error.message } : {},
 		...sources.error ? { sourcesError: sources.error.message } : {}
 	});
-	const now = Date.now();
 	const options = (0, react$1.useMemo)(() => {
 		const byAddon = /* @__PURE__ */ new Map();
 		for (const row of sourceRows) {
@@ -19880,10 +19346,6 @@ function ClipsSection({ deviceId }) {
 			label: labels.join(" · ")
 		}));
 	}, [sourceRows]);
-	const tableRows = (0, react$1.useMemo)(() => sourceRows.map((row) => ({
-		notice: describeSource(row),
-		catalogAge: formatCatalogAge(row.availability.catalogAsOf, now)
-	})), [sourceRows]);
 	(0, react$1.useEffect)(() => {
 		setPage(1);
 	}, [band.fromMs, band.toMs]);
@@ -19989,19 +19451,6 @@ function ClipsSection({ deviceId }) {
 				onSelectBucket: handleSelectBucket,
 				densityLoading: density.status === "pending"
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-				"aria-label": "Clip sources",
-				className: "space-y-1",
-				children: sources.status === "pending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { className: "h-16 w-full" }) : tableRows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
-					icon: Film,
-					title: "No provider answered for this camera",
-					description: "Nothing claims to hold clips for it."
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
-					columns: SOURCE_COLUMNS,
-					rows: [...tableRows],
-					minWidthPx: 520
-				})
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 				"aria-label": "Clips",
 				className: "space-y-2",
@@ -27680,6 +27129,53 @@ function TooltipContent({ className, children, ...props }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-is-mobile.ts
+var MOBILE_QUERY = "(max-width: 767px)";
+/**
+* Mid breakpoint — below this width the sidebar collapses to an
+* icons-only rail to reclaim canvas space. Above it (and outside
+* mobile) the full sidebar renders. Threshold matches Tailwind `lg`
+* so sidebar fans out at the same point grids switch to multi-column.
+*/
+var MID_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+/**
+* `matchMedia` is universal in browsers but absent in bare DOM environments.
+* These hooks are called from shared primitives (`DataTable` picks its narrow
+* layout with one), so throwing here takes down the whole page that merely
+* rendered a table. Where the capability is missing, report the desktop
+* layout — a widescreen rendering is wrong-looking; a crashed page is gone.
+*/
+function matchQuery(query) {
+	if (typeof window.matchMedia !== "function") return null;
+	return window.matchMedia(query);
+}
+function subscribeQuery(query) {
+	return (callback) => {
+		const mql = matchQuery(query);
+		if (mql === null) return () => {};
+		mql.addEventListener("change", callback);
+		return () => mql.removeEventListener("change", callback);
+	};
+}
+function getSnapshot(query) {
+	return () => matchQuery(query)?.matches ?? false;
+}
+function getServerSnapshot() {
+	return false;
+}
+function useIsMobile() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MOBILE_QUERY), getSnapshot(MOBILE_QUERY), getServerSnapshot);
+}
+/**
+* True when the viewport is in the medium (`md`) Tailwind range —
+* 768px ≤ width < 1024px. Use to drive layouts that should pack denser
+* than full-desktop but more legibly than mobile (e.g. icons-only
+* sidebar rail, narrower stat tiles).
+*/
+function useIsMidWidth() {
+	return (0, react$1.useSyncExternalStore)(subscribeQuery(MID_QUERY), getSnapshot(MID_QUERY), getServerSnapshot);
+}
+//#endregion
 //#region src/primitives/bottom-sheet.tsx
 function BottomSheet({ open, onClose, title, children, className }) {
 	(0, react$1.useEffect)(() => {
@@ -31114,6 +30610,426 @@ function CopyButton({ value, label, srLabel, className, disabled }) {
 	});
 }
 //#endregion
+//#region src/composites/data-table-layout.ts
+/**
+* At this many columns and above, `auto` switches a narrow viewport to cards.
+* Three columns still fit a phone at a readable size; four do not.
+*/
+var CARD_MODE_MIN_COLUMNS = 4;
+function resolveTableLayout({ mode, columnCount, isNarrow }) {
+	if (!isNarrow) return "table";
+	if (mode === "scroll") return "table";
+	if (mode === "cards") return "cards";
+	if (columnCount === 0) return "table";
+	return columnCount >= 4 ? "cards" : "table";
+}
+//#endregion
+//#region src/lib/responsive.ts
+/**
+* Responsive design tokens — three-tier system.
+*
+* The admin-ui targets three width tiers; every component should pick
+* the right token from this file instead of hand-coding breakpoints.
+* Adopting the tokens uniformly is what makes the app feel consistent
+* across operator devices (mobile / tablet / desktop) and what unlocks
+* targeted tuning (e.g. shrink every label by 1px in one place).
+*
+* Tier definitions (Tailwind breakpoints):
+*
+*   • **L1 — Compact** (`< 640px`, default = mobile portrait)
+*     Single column, tight padding, smallest text, icon-only buttons
+*     where labels can be inferred. The operator can still see every
+*     stat / action — no horizontal scroll, no clipped text. The user
+*     directive: "molta informazione in poco spazio quando la width è
+*     bassa."
+*
+*   • **L2 — Standard** (`sm` — `640–1023px`, tablet + small laptop)
+*     2-column grids, side panels become visible, button labels return.
+*     Targets ~768px–1024px viewports — the most common operator sizes.
+*
+*   • **L3 — Spacious** (`lg+` — `≥ 1024px`, desktop)
+*     4-column grids, generous padding, full-width header text,
+*     side-by-side composite layouts. The operator has elbow room.
+*
+* Conventions:
+*   - **Always start from L1** — the bare class is always the compact
+*     variant, then `sm:` adds room at 640px, `lg:` at 1024px. No
+*     desktop-first breakpoints; no max-width queries.
+*   - **Token strings are static** — kept as `as const` so callers can
+*     compose them via `cn()` / template literals without running a
+*     class generator at runtime.
+*   - **Pair the token with a comment** — the comment in the file
+*     names every breakpoint it crosses, so a reader can predict the
+*     layout without going to Tailwind docs.
+*/
+/** Container padding for a card-style section (header + body). */
+var SECTION_CARD = "rounded-lg border border-border bg-surface overflow-hidden";
+/** Header strip inside a card (between border-b lines). */
+var SECTION_HEADER = "border-b border-border px-3 sm:px-4 py-1.5 sm:py-2";
+/** Body padding for a card-style section. */
+var SECTION_BODY = "p-2 sm:p-3 lg:p-4";
+/** Gap between cards in a vertical stack. */
+var STACK_GAP = "space-y-3 sm:space-y-4";
+/** Gap between cards in a grid (4 cells / row at lg). */
+var GRID_GAP = "gap-2 sm:gap-3";
+/** Row padding inside a divided list (e.g. InfoRow). */
+var LIST_ROW = "px-3 sm:px-4 py-1.5 sm:py-2";
+/** 1-up at L1, 2-up at L2, 4-up at L3 — quick-stat row. */
+var GRID_QUICK_STATS = "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4";
+/** 1-up at L1, 2-up at L2+ — paired panels (motion + detection rules). */
+var GRID_PAIRED = "grid grid-cols-1 lg:grid-cols-2";
+/** Side-by-side layout that stacks below md (canvas + side panel). */
+var SPLIT_PANEL_OUTER = "flex flex-col-reverse md:flex-row";
+/** Sidebar narrow lane in a SPLIT_PANEL_OUTER layout. */
+var SPLIT_PANEL_SIDE = "w-full md:w-44 lg:w-52 md:flex-shrink-0 border-b md:border-b-0 md:border-l border-border";
+/**
+* The tier boundary at which a settings label/value row stops stacking.
+*
+* Below it (L1 — compact) the row is ONE column: label on its own line, value
+* on the next at full width. Above it the row is label-left / value-right as
+* before. The two-column form needs `SETTING_ROW_LABEL`'s lane plus a readable
+* value beside it; a phone has neither, and the failure mode is not "cramped"
+* but "the value is the part that gets cut" — the one thing the operator
+* opened the page to read.
+*/
+var SETTING_ROW_STACK_BREAKPOINT = "sm";
+/** Outer row: single column at L1, label/value columns from `sm` up. */
+var SETTING_ROW = "flex min-w-0 flex-col gap-0.5 py-1.5 sm:flex-row sm:items-center";
+/** Label lane. Full width (and free to wrap) at L1; a fixed lane from `sm` up. */
+var SETTING_ROW_LABEL = "min-w-0 text-[11px] leading-tight text-foreground-subtle sm:w-32 sm:shrink-0 sm:pr-2";
+/**
+* Value lane — the value text plus its trailing affordances (copy / reveal).
+* `w-full` at L1 so the value owns the whole row once the label is above it;
+* `sm:flex-1` makes it share the row again from `sm` up.
+*/
+var SETTING_ROW_VALUE = "flex w-full min-w-0 items-center gap-1 sm:flex-1";
+/**
+* The value text itself. `break-all` lets an opaque token (a key, a URL) wrap
+* at L1 instead of being cut mid-word; `sm:truncate` restores the single-line
+* desktop form, where the row is wide enough for truncation to be a choice
+* rather than data loss.
+*/
+var SETTING_ROW_VALUE_TEXT = "min-w-0 break-all text-xs text-foreground sm:truncate";
+/** Section header label (uppercase tracking-wider). */
+var TEXT_SECTION_LABEL = "text-[10px] sm:text-[11px] font-semibold text-foreground uppercase tracking-wider";
+/** Field label inside a row. */
+var TEXT_FIELD_LABEL = "text-[11px] sm:text-xs text-foreground";
+/** Sub-label / hint text. */
+var TEXT_HINT = "text-[10px] text-foreground-subtle";
+/** Primary value (a metric, badge, …). */
+var TEXT_VALUE = "text-[11px] sm:text-xs font-medium text-foreground";
+/** Big metric value (StatCard). */
+var TEXT_METRIC = "text-base sm:text-lg font-semibold leading-tight text-foreground";
+/** Default compact button. */
+var BTN_COMPACT = "inline-flex items-center justify-center gap-1 rounded border border-border bg-surface px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40";
+/** Primary compact button. */
+var BTN_COMPACT_PRIMARY = "inline-flex items-center justify-center gap-1 rounded border border-primary/40 bg-primary/15 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-primary hover:bg-primary/25 transition-colors disabled:opacity-40";
+/** Danger compact button. */
+var BTN_COMPACT_DANGER = "inline-flex items-center justify-center gap-1 rounded border border-danger/40 bg-danger/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40";
+/** Warning compact button (e.g. cancel-drawing). */
+var BTN_COMPACT_WARNING = "inline-flex items-center justify-center gap-1 rounded border border-warning/40 bg-warning/10 px-1.5 py-0.5 sm:px-2 sm:py-1 text-[10px] sm:text-[11px] font-medium text-warning hover:bg-warning/20 transition-colors disabled:opacity-40";
+/** Compact text/select/number input. */
+var INPUT_COMPACT = "w-full rounded border border-border bg-background px-1.5 py-0.5 sm:px-2 sm:py-1 text-[11px] sm:text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none";
+/** Chip-style toggle (zone / class selectors in ZoneRulesEditor). */
+var CHIP_BASE = "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors";
+var CHIP_ACTIVE = "border-primary/50 bg-primary/15 text-primary";
+var CHIP_INACTIVE = "border-border bg-surface text-foreground-subtle hover:bg-surface-hover";
+//#endregion
+//#region src/composites/setting-row.tsx
+function SettingRow({ label, children, actions, elements = "plain", className, valueClassName }) {
+	const LabelTag = elements === "description" ? "dt" : "span";
+	const ValueTag = elements === "description" ? "dd" : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-setting-row": "",
+		className: cn(SETTING_ROW, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelTag, {
+			"data-setting-row-label": "",
+			className: SETTING_ROW_LABEL,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueTag, {
+			"data-setting-row-value": "",
+			className: SETTING_ROW_VALUE,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-setting-row-value-text": "",
+				className: cn(SETTING_ROW_VALUE_TEXT, valueClassName),
+				children
+			}), actions !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 items-center gap-0.5",
+				children: actions
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/composites/sort-header-button.tsx
+function SortHeaderButton({ label, active, dir, onSort }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: onSort,
+		className: "group/sort inline-flex items-center gap-0.5 hover:text-foreground transition-colors",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), active ? dir === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 flex-shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUp, { className: cn("h-3 w-3 flex-shrink-0 opacity-0 transition-opacity", "group-hover/sort:opacity-30") })]
+	});
+}
+//#endregion
+//#region src/composites/table-sort.ts
+/**
+* The toggle rule, and the only copy of it.
+*
+* none → asc → desc → none, and a click on a DIFFERENT column starts that
+* column fresh at `asc`. `sameColumn` says whether the clicked column is the
+* one currently sorted; `currentDir` is its direction (`null` when nothing is
+* sorted). Returns the next direction, or `null` for "unsorted".
+*
+* Split out from {@link nextTableSort} so the device list — whose sort state
+* keys columns by `columnId`, not `columnKey` — can reuse the rule without a
+* cast and without a second copy of it.
+*/
+function nextSortDirection(sameColumn, currentDir) {
+	if (!sameColumn || currentDir === null) return "asc";
+	return currentDir === "asc" ? "desc" : null;
+}
+/**
+* Toggle a column's sort on header click: none → asc → desc → none.
+* Clicking a DIFFERENT column starts it fresh at `asc`.
+*/
+function nextTableSort(current, columnKey) {
+	const dir = nextSortDirection(current !== null && current.columnKey === columnKey, current === null ? null : current.dir);
+	return dir === null ? null : {
+		columnKey,
+		dir
+	};
+}
+/**
+* Ascending comparison of two cell values.
+*
+* Numbers compare numerically and strings compare with `localeCompare` — a
+* numeric column must never be ordered as text ("100" before "9"), and a text
+* column must respect the locale's collation. A mixed column (one row a
+* number, another a string) falls back to string comparison of both, which is
+* the only total order available; it is not a shape any caller should build on
+* purpose.
+*
+* `null` is NOT handled here — {@link sortRowsByColumn} pulls it out first,
+* because its placement is direction-independent and a comparator that is
+* multiplied by the direction factor cannot express that.
+*/
+function compareValues(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b));
+}
+/**
+* Return a NEW array of `rows` ordered by `sort`.
+*
+* `valueOf` is the column's `sortValue` — it is called once per row per
+* comparison, so it must be cheap (read a field, do not format a string).
+* `sort === null` ⇒ a fresh shallow copy in the incoming order.
+*/
+function sortRowsByColumn(rows, sort, valueOf) {
+	if (sort === null) return [...rows];
+	const factor = sort.dir === "asc" ? 1 : -1;
+	return rows.toSorted((a, b) => {
+		const av = valueOf(a);
+		const bv = valueOf(b);
+		if (av === null || bv === null) {
+			if (av === bv) return 0;
+			return av === null ? 1 : -1;
+		}
+		return factor * compareValues(av, bv);
+	});
+}
+/** Derive the `<th>` `aria-sort` for `columnKey` from the table's sort state. */
+function ariaSortForColumn(sort, columnKey) {
+	if (sort === null || sort.columnKey !== columnKey) return "none";
+	return sort.dir === "asc" ? "ascending" : "descending";
+}
+//#endregion
+//#region src/composites/data-table.tsx
+/**
+* DataTable — shared responsive table for admin pages.
+*
+* Recipes baked in:
+*   - `overflow-x-auto` wrapper so narrow viewports don't clip the
+*     right edge (the rounded border survives the scroll).
+*   - `min-w-[Npx]` on the inner table so columns don't squash below
+*     readable width before the scroll kicks in.
+*   - `whitespace-nowrap` on headers — column titles never wrap to
+*     two lines (`AUTO-KILL` was the regression that triggered this).
+*   - Themed `bg-surface` + `border-border` so contrast works in both
+*     light and dark themes.
+*
+* Column model: caller supplies `columns: DataColumn<T>[]` and
+* `rows: T[]`. Each column declares `header`, optional `align`,
+* optional `nowrap`, and a `render(row) => ReactNode` that produces
+* the cell content.
+*
+*   <DataTable
+*     columns={[
+*       { key: 'username', header: 'Username', render: (u) => u.username },
+*       { key: 'role',     header: 'Role',     render: (u) => <RoleBadge .../> },
+*       { key: 'actions',  header: '',         align: 'right', render: (u) => <Actions .../> },
+*     ]}
+*     rows={users}
+*     minWidthPx={560}
+*   />
+*
+* If finer header markup is needed, pass `headerRender` instead of
+* `header` (e.g. for a sortable click affordance).
+*
+* ── Narrow viewports ──────────────────────────────────────────────────────
+* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
+* scrolls the columns sideways INSIDE the table — the page body never moves
+* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
+* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
+* `auto` still applies the old column-count rule for a surface that wants it.
+* See `resolveTableLayout`.
+*
+* ── Scrolling the BODY, not the page ──────────────────────────────────────
+* `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
+* with the column header pinned. It is ONE prop, not two, because "this list
+* scrolls internally" and "its header stays visible" are the same decision: a
+* capped table whose header scrolls away is a list of unlabelled cells.
+*
+* Use it wherever the row count is open-ended (rules, targets, delivery
+* history) so the page keeps its own header, filters and actions in view while
+* the operator moves through the rows.
+*/
+/**
+* The default cap for an internally-scrolling table.
+*
+* `60vh` leaves the page header, its filters and its actions on screen at
+* every viewport while still showing ~10 rows — and it is a fraction, so it
+* does not need a breakpoint of its own.
+*/
+var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
+var ALIGN_CLASS = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
+	const isNarrow = useIsMobile();
+	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
+	const layout = resolveTableLayout({
+		mode: mobileMode,
+		columnCount: columns.length,
+		isNarrow
+	});
+	const scrolls = maxBodyHeight !== void 0;
+	const sortedColumn = (0, react$1.useMemo)(() => sort === null ? void 0 : columns.find((col) => col.key === sort.columnKey && col.sortValue !== void 0), [columns, sort]);
+	const sortValue = sortedColumn?.sortValue;
+	const displayRows = (0, react$1.useMemo)(() => sortValue === void 0 ? rows : sortRowsByColumn(rows, sort, sortValue), [
+		rows,
+		sort,
+		sortValue
+	]);
+	const activeSort = sortedColumn === void 0 ? null : sort;
+	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
+		children: emptyMessage
+	});
+	if (rows.length === 0) return null;
+	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
+		children: displayRows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
+			row,
+			rowIndex,
+			columns,
+			bordered,
+			onRowClick,
+			rowClassName
+		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: [
+			"rounded-lg",
+			bordered ? "border border-border" : "",
+			"bg-surface overflow-x-auto",
+			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
+			style: { minWidth: `${minWidthPx}px` },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+				className: "bg-surface",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columns.map((col) => {
+					const align = col.align ?? "left";
+					const nowrap = col.nowrap ?? true;
+					const sortable = col.sortValue !== void 0;
+					const isSorted = activeSort !== null && activeSort.columnKey === col.key;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+						"aria-sort": sortable ? ariaSortForColumn(activeSort, col.key) : void 0,
+						title: sortable ? void 0 : col.notSortableReason,
+						className: [
+							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
+							scrolls ? "sticky top-0 z-10" : "",
+							ALIGN_CLASS[align],
+							nowrap ? "whitespace-nowrap" : "",
+							col.width ?? ""
+						].filter(Boolean).join(" "),
+						children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortHeaderButton, {
+							label: col.headerRender ? col.headerRender() : col.header,
+							active: isSorted,
+							dir: isSorted && activeSort !== null ? activeSort.dir : "asc",
+							onSort: () => setSort((prev) => nextTableSort(prev, col.key))
+						}) : col.headerRender ? col.headerRender() : col.header
+					}, col.key);
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: displayRows.map((row, rowIndex) => {
+				const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
+				const extra = rowClassName?.(row, rowIndex) ?? "";
+				const interactive = onRowClick !== void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
+					children: columns.map((col) => {
+						const align = col.align ?? "left";
+						const nowrap = col.nowrap ?? true;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: [
+								"px-3 py-2 text-foreground border-b border-border",
+								ALIGN_CLASS[align],
+								nowrap ? "whitespace-nowrap" : ""
+							].filter(Boolean).join(" "),
+							children: col.render(row, rowIndex)
+						}, col.key);
+					})
+				}, key);
+			}) })]
+		})
+	});
+}
+/**
+* One row as a card. Columns that carry a plain-text `header` become labelled
+* `SettingRow`s — the label is the column title and the value gets the full
+* card width. Columns with no text header (an actions column, a
+* `headerRender`-only column) have no label to show, so they render as a
+* full-width strip at the foot of the card.
+*/
+function DataTableCard({ row, rowIndex, columns, bordered, onRowClick, rowClassName }) {
+	const labelled = columns.filter((col) => col.header !== void 0 && col.header !== "");
+	const unlabelled = columns.filter((col) => col.header === void 0 || col.header === "");
+	const interactive = onRowClick !== void 0;
+	const extra = rowClassName?.(row, rowIndex) ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-data-table-card": "",
+		onClick: interactive ? () => onRowClick(row, rowIndex) : void 0,
+		className: [
+			"rounded-lg bg-surface px-3 py-1.5 divide-y divide-border-subtle",
+			bordered ? "border border-border" : "",
+			interactive ? "cursor-pointer hover:bg-primary/5" : "",
+			extra
+		].filter(Boolean).join(" "),
+		children: [labelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+			label: col.header,
+			children: col.render(row, rowIndex)
+		}, col.key)), unlabelled.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center justify-end gap-2 py-1.5",
+			children: unlabelled.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: col.render(row, rowIndex) }, col.key))
+		})]
+	});
+}
+//#endregion
 //#region src/composites/detection-colors.ts
 /**
 * Detection class colors — a thin adapter over the SINGLE event-kind
@@ -55260,6 +55176,7 @@ exports.useVibrationGetStatus = useVibrationGetStatus;
 exports.useVideoclipsGetClipPlayback = useVideoclipsGetClipPlayback;
 exports.useVideoclipsListClips = useVideoclipsListClips;
 exports.useVideoclipsListSources = useVideoclipsListSources;
+exports.useVideoclipsReadClipBytes = useVideoclipsReadClipBytes;
 exports.useVodPlayback = useVodPlayback;
 exports.useWaterHeaterGetStatus = useWaterHeaterGetStatus;
 exports.useWaterHeaterSetAway = useWaterHeaterSetAway;