@camstack/ui-library 1.2.16 → 1.2.18

package/dist/composites/camera-stream-player.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { CamProfile } from '@camstack/types';
+import { ReconnectAction } from './reconnect-schedule';
 type WebkitPresentationMode = 'inline' | 'picture-in-picture' | 'fullscreen';
 declare global {
     interface HTMLVideoElement {
@@ -145,6 +146,13 @@ export interface CameraStreamPlayerProps {
     onStateChange?: (state: PlayerConnectionState) => void;
     /** Called on error */
     onError?: (error: string) => void;
+    /**
+     * Observer of the auto-retry loop: called with every scheduled attempt and
+     * with the exhaustion edge. Hosts wire it to their log pipeline (tagged with
+     * the camera) — a retry loop nobody can see is how a camera stays dark
+     * while looking busy.
+     */
+    onReconnectAttempt?: (action: ReconnectAction) => void;
     /** Custom overlay rendered on top of the video */
     overlay?: ReactNode;
     /**
@@ -242,6 +250,13 @@ export interface CameraStreamPlayerProps {
      * live player — no data channel is created and behaviour is unchanged.
      */
     onControlChannel?: (channel: RTCDataChannel) => void;
+    /**
+     * Optional handle to the player's `<video>` element, delivered once on mount
+     * (and `null` on unmount). Consumers that pace server-pushed frames by what
+     * the viewer actually RENDERED (`requestVideoFrameCallback`) need the
+     * element itself — the recorded-scrub receiver-credit acks are the use case.
+     */
+    onVideoElement?: (el: HTMLVideoElement | null) => void;
 }
-export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, showStats, onPlaybackStats, onClientNetworkSample, onConnectTiming, className, onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel, }: CameraStreamPlayerProps): import("react").JSX.Element;
+export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, showStats, onPlaybackStats, onClientNetworkSample, onConnectTiming, className, onStateChange, onError, onReconnectAttempt, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel, onVideoElement, }: CameraStreamPlayerProps): import("react").JSX.Element;
 export {};

package/dist/composites/cap-settings/RecordingSettings.d.ts

@@ -3,10 +3,6 @@ interface RecordingSettingsProps {
     readonly initial: RecordingConfig;
     readonly saving: boolean;
     readonly onSave: (config: RecordingConfig) => void;
-    /** Regenerate the scrub strips for this camera (clear + rebuild from the
-     *  recorded low segments). Absent → the button is hidden. */
-    readonly onRegenerateStrips?: () => void;
-    readonly regeneratingStrips?: boolean;
 }
-export declare function RecordingSettings({ initial, saving, onSave, onRegenerateStrips, regeneratingStrips, }: RecordingSettingsProps): import("react").JSX.Element;
+export declare function RecordingSettings({ initial, saving, onSave }: RecordingSettingsProps): import("react").JSX.Element;
 export {};

package/dist/composites/copy-button.d.ts

@@ -2,11 +2,20 @@ import { ReactElement } from 'react';
 export interface CopyButtonProps {
     /** String copied to the clipboard when the button is pressed. */
     readonly value: string;
-    /** Optional visible label rendered next to the icon. Icon-only when omitted. */
+    /** Optional visible label rendered next to the icon. Icon-only when omitted.
+     *
+     *  Do NOT pass the name of the field the button sits next to: the row
+     *  already shows it, and the repeat is what overlapped the value on a phone
+     *  (a token row rendered its own name on top of the masked secret). Use
+     *  {@link CopyButtonProps.srLabel} for that — it names the target for screen
+     *  readers without spending horizontal space. */
     readonly label?: string;
+    /** Names what is copied, for assistive tech only — never rendered. Falls back
+     *  to `label`, then to a generic word. */
+    readonly srLabel?: string;
     /** Extra classes merged onto the button. */
     readonly className?: string;
     /** Disable the button (e.g. nothing to copy). */
     readonly disabled?: boolean;
 }
-export declare function CopyButton({ value, label, className, disabled }: CopyButtonProps): ReactElement;
+export declare function CopyButton({ value, label, srLabel, className, disabled, }: CopyButtonProps): ReactElement;

package/dist/composites/data-table-layout.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The one decision a shared table has to make on a phone.
+ *
+ * A wide table has no good phone rendering. There are exactly two honest
+ * answers — become a list of cards, or scroll horizontally INSIDE its own
+ * container while the page body never moves sideways — and shrinking the font
+ * is not one of them. `DataTable` supports both; this module decides which, so
+ * the choice is a pure, testable rule instead of per-page CSS.
+ *
+ * The default rule is column count. Below the card breakpoint a phone fits
+ * roughly three readable columns; past that, a sideways scroll means the
+ * operator reads a wide table through a slit and loses the row they started
+ * on. Cards trade the column alignment (which nobody can use at that width
+ * anyway) for every field of one row being readable at once.
+ *
+ * Pass an explicit `mobileMode` to override per table — a wide table whose
+ * value IS the side-by-side comparison (a schedule, a matrix) is better
+ * scrolled than carded, and says so at its call site.
+ */
+/** Per-table override. `auto` applies the column-count rule below. */
+export type TableMobileMode = 'auto' | 'scroll' | 'cards';
+/** How the table renders once the decision is made. */
+export type TableLayoutKind = 'table' | 'cards';
+/**
+ * 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.
+ */
+export declare const CARD_MODE_MIN_COLUMNS = 4;
+export interface ResolveTableLayoutInput {
+    readonly mode: TableMobileMode;
+    readonly columnCount: number;
+    /** Viewport below the card breakpoint (`useIsMobile`). */
+    readonly isNarrow: boolean;
+}
+export declare function resolveTableLayout({ mode, columnCount, isNarrow, }: ResolveTableLayoutInput): TableLayoutKind;

package/dist/composites/data-table.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { TableMobileMode } from './data-table-layout';
 export interface DataColumn<T> {
     /** Stable key for React reconciliation + tests. */
     readonly key: string;
@@ -33,5 +34,12 @@ export interface DataTableProps<T> {
     readonly bordered?: boolean;
     /** Per-row className resolver (e.g. status-coloured backgrounds). */
     readonly rowClassName?: (row: T, rowIndex: number) => string | undefined;
+    /**
+     * Narrow-viewport rendering. Default `auto` — cards from
+     * `CARD_MODE_MIN_COLUMNS` columns up, rows below it. Pass `scroll` when the
+     * point of the table is the side-by-side comparison, `cards` to force the
+     * card list at any column count.
+     */
+    readonly mobileMode?: TableMobileMode;
 }
-export declare function DataTable<T>({ columns, rows, rowKey, onRowClick, minWidthPx, emptyMessage, className, bordered, rowClassName, }: DataTableProps<T>): import("react").JSX.Element | null;
+export declare function DataTable<T>({ columns, rows, rowKey, onRowClick, minWidthPx, emptyMessage, className, bordered, rowClassName, mobileMode, }: DataTableProps<T>): import("react").JSX.Element | null;

package/dist/composites/device-list/columns.d.ts

@@ -13,7 +13,8 @@
  *   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
@@ -44,7 +45,7 @@ export type TableContext = 'devices' | 'integration-detail';
 export declare function columnsForContext(ctx: TableContext): readonly DeviceColumnId[];
 /**
  * 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.
@@ -66,3 +67,27 @@ export declare const COLUMN_PRIORITY: Record<DeviceColumnId, number>;
  * `features` (3) below `md`.
  */
 export declare const COLUMN_BREAKPOINT_CLASS: Record<DeviceColumnId, string>;
+/**
+ * ── The NAME column pin ───────────────────────────────────────────────────
+ *
+ * A sticky first column earns its keep only where the remaining columns still
+ * fit BESIDE it. Read the drop order above: below `md` every optional column
+ * is already folded away, so the table is NAME + Preview and there is nothing
+ * left to scroll under the pin — the pinned column simply holds its width
+ * permanently and pushes Preview off the right edge. On a phone the viewport
+ * is narrower than the pinned column alone, which is the reported defect:
+ * "il nome alla sinistra è fixed, dovrebbe scorrere naturalmente."
+ *
+ * So the pin starts at `md`, the same width at which `features` returns and a
+ * column exists to scroll under it. Below `md` the name column scrolls with
+ * everything else.
+ */
+export declare const NAME_COLUMN_PIN_BREAKPOINT: "md";
+/** Pin classes for the NAME `<th>`/`<td>` — never unconditional. */
+export declare const 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.
+ */
+export declare const NAME_COLUMN_WIDTH_CLASS: "w-44 max-w-[11rem] md:w-64 md:max-w-[16rem]";

package/dist/composites/index.d.ts

@@ -27,6 +27,10 @@ export * from './error-box';
 export * from './confirm-dialog';
 export * from './stat-card';
 export * from './key-value-list';
+export { SettingRow } from './setting-row';
+export type { SettingRowElements, SettingRowProps } from './setting-row';
+export { CARD_MODE_MIN_COLUMNS, resolveTableLayout } from './data-table-layout';
+export type { TableLayoutKind, TableMobileMode } from './data-table-layout';
 export * from './code-block';
 export * from './filter-bar';
 export * from './app-shell';
@@ -74,6 +78,8 @@ export type { ProbeState } from './config-form-field';
 export { DetectionOverlay } from './detection-overlay';
 export type { DetectionOverlayProps } from './detection-overlay';
 export { CameraStreamPlayer } from './camera-stream-player';
+export { nextReconnectAction, RECONNECT_POLICY } from './reconnect-schedule';
+export type { ReconnectAction, ReconnectPolicy } from './reconnect-schedule';
 export type { CameraStreamPlayerProps, PlayerConnectionState, PlayerWebrtcTarget, SignalingResult, ClientOfferResult, ClientStreamHints, SessionSignalingState, } from './camera-stream-player';
 export { StreamPanel } from './stream-panel';
 export type { StreamPanelProps, StreamChoice, StreamStats } from './stream-panel';

package/dist/composites/key-value-list.d.ts

@@ -6,4 +6,12 @@ export interface KeyValueListProps {
     }[];
     className?: string;
 }
+/**
+ * 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.
+ */
 export declare function KeyValueList({ items, className }: KeyValueListProps): import("react").JSX.Element;

package/dist/composites/reconnect-schedule.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Reconnect schedule — the stream player's auto-retry policy as a pure
+ * decision function.
+ *
+ * Why it exists as a module: the inline version had two silent behaviours the
+ * operator ran into — exhaustion returned without a trace (the retry loop
+ * just stopped, so a camera stayed dark while looking busy), and no attempt
+ * was observable anywhere. Attempt in, action out: the component executes the
+ * action (timer + callbacks) and can log/report every step; the backoff shape
+ * and the exhaustion edge are pinned by tests.
+ */
+export interface ReconnectPolicy {
+    readonly baseDelayMs: number;
+    readonly maxDelayMs: number;
+    readonly maxAttempts: number;
+}
+/** 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). */
+export declare const RECONNECT_POLICY: ReconnectPolicy;
+export type ReconnectAction = {
+    readonly kind: 'retry';
+    readonly delayMs: number;
+} | {
+    readonly kind: 'exhausted';
+    readonly attempts: number;
+};
+/**
+ * Decide what attempt number `attempt` (0-based) should do. `random` is the
+ * jitter source (unit interval), injectable for tests.
+ */
+export declare function nextReconnectAction(attempt: number, random?: () => number): ReconnectAction;

package/dist/composites/setting-row.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * Which elements the row emits.
+ *
+ *   - `plain` (default) — `div` / `span`; valid anywhere.
+ *   - `description` — `dt` / `dd` inside a wrapper `div`, so the row is a
+ *     valid child of a `<dl>` (`KeyValueList`).
+ */
+export type SettingRowElements = 'plain' | 'description';
+export interface SettingRowProps {
+    /** Left-hand label. Free to wrap — it is never given a fixed width at L1. */
+    readonly label: ReactNode;
+    /** The value. Wraps at L1, truncates from the stack breakpoint up. */
+    readonly children: ReactNode;
+    /** Trailing affordances (copy / reveal), kept beside the value. */
+    readonly actions?: ReactNode;
+    /** Element flavour — see `SettingRowElements`. Default `plain`. */
+    readonly elements?: SettingRowElements;
+    /** Extra classes on the outer row. */
+    readonly className?: string;
+    /** Extra classes on the value text (e.g. `font-mono`). */
+    readonly valueClassName?: string;
+}
+export declare function SettingRow({ label, children, actions, elements, className, valueClassName, }: SettingRowProps): ReactNode;

package/dist/generated/system-hooks.d.ts

@@ -1399,6 +1399,10 @@ export declare const useSettingsStoreInsert: typeof trpc.settingsStore.insert.us
 export declare const useSettingsStoreUpdate: typeof trpc.settingsStore.update.useMutation;
 /** Generated alias around `trpc.settingsStore.delete.useMutation`. */
 export declare const useSettingsStoreDelete: typeof trpc.settingsStore.delete.useMutation;
+/** Generated alias around `trpc.settingsStore.deleteWhere.useMutation`. */
+export declare const useSettingsStoreDeleteWhere: typeof trpc.settingsStore.deleteWhere.useMutation;
+/** Generated alias around `trpc.settingsStore.updateWhere.useMutation`. */
+export declare const useSettingsStoreUpdateWhere: typeof trpc.settingsStore.updateWhere.useMutation;
 /** Generated alias around `trpc.settingsStore.count.useQuery`. */
 export declare const useSettingsStoreCount: typeof trpc.settingsStore.count.useQuery;
 /** Generated alias around `trpc.settingsStore.histogram.useQuery`. */

package/dist/hooks/turn-server-cache.d.ts

@@ -0,0 +1,77 @@
+/**
+ * TurnServerCache — shared STUN/TURN credential cache for the WebRTC connect
+ * path.
+ *
+ * ## Why this exists
+ *
+ * The ICE-server fetch is serialized BEFORE `createOffer` on every connect
+ * (`camera-stream-player.tsx` → `getIceServers()`), so its latency lands 1:1
+ * in the time-to-first-frame. Production `embed:webrtc-timing` lines measured
+ * it at 0.2–3.6 s on a cold page. Two verified defects drove that:
+ *
+ *  1. **No in-flight coalescing.** The mount-time prefetch and the connect's
+ *     own call raced: whichever started second issued a SECOND full
+ *     `getTurnServers` round trip instead of awaiting the first.
+ *  2. **Per-page cache.** The cache was a `WeakMap` keyed on the page's tRPC
+ *     client. The native app loads a fresh embed page per camera open, so the
+ *     common remote path started cold every single time.
+ *
+ * ## Design
+ *
+ * Three layers, checked in order:
+ *  - **memory** (`WeakMap` keyed on the caller's tRPC client — unchanged
+ *    semantics: two admin tabs pointed at different hubs never cross-serve),
+ *  - **in-flight** (concurrent callers share one promise),
+ *  - **storage** (`localStorage` when available) so a fresh page finds warm
+ *    credentials. Storage is per-origin, and the page's origin IS the hub, so
+ *    cross-hub leakage is structurally impossible.
+ *
+ * Freshness: entries younger than `freshTtlMs` are served as-is. Entries older
+ * than that but younger than `staleCapMs` are served IMMEDIATELY while a
+ * background refresh runs (credentials from the hub's providers are valid for
+ * hours — e.g. 24 h for the managed-relay provider — so a bounded stale window
+ * is safe; an actually-expired relay credential degrades to the public-STUN
+ * fallback exactly like an absent one, and the refresh heals the next
+ * connect). Beyond `staleCapMs` the fetch is awaited.
+ *
+ * Failure: a failed fetch serves the stale entry when one exists, else
+ * `undefined` (caller falls back to public STUN). Failures are never cached.
+ */
+/** Narrow storage contract — satisfied by `localStorage`, injectable in tests. */
+export interface TurnCacheStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+export interface TurnServerCacheOptions {
+    /** Entries younger than this are served without any fetch. */
+    readonly freshTtlMs?: number;
+    /** Entries older than `freshTtlMs` but younger than this are served
+     *  immediately while a background refresh runs. */
+    readonly staleCapMs?: number;
+    /** Storage layer. `null` disables persistence (memory-only). When omitted,
+     *  `globalThis.localStorage` is used if present. */
+    readonly storage?: TurnCacheStorage | null;
+    readonly now?: () => number;
+    readonly storageKey?: string;
+}
+export declare class TurnServerCache {
+    private readonly freshTtlMs;
+    private readonly staleCapMs;
+    private readonly storage;
+    private readonly now;
+    private readonly storageKey;
+    /** Keyed on the caller's tRPC client object (stable per connected system). */
+    private readonly memory;
+    /** In-flight fetch per key — concurrent callers share one round trip. */
+    private readonly inflight;
+    constructor(options?: TurnServerCacheOptions);
+    /**
+     * 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`.
+     */
+    getOrFetch(key: object, fetch: () => Promise<readonly RTCIceServer[]>): Promise<readonly RTCIceServer[] | undefined>;
+    private startFetch;
+    private readStorage;
+    private writeStorage;
+}