@camstack/ui-library 0.1.56 → 0.1.58

package/dist/composites/discovery-panel.d.ts

@@ -6,9 +6,9 @@
  * renders the channel list with status badges, refresh, adopt, and
  * release controls.
  *
- * Mirrors the Scrypted device-discovery affordance pattern: a single
- * generic UI used by every plugin that exposes children behind a
- * gateway. Keeps the operator UX consistent across integrations.
+ * A single generic UI used by every provider that exposes children
+ * behind a gateway. Keeps the operator UX consistent across
+ * integrations.
  */
 interface DiscoveryPanelProps {
     readonly deviceId: number;

package/dist/composites/hls-quality.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Pure helpers for the HLS playback quality selector.
+ *
+ * Intentionally decoupled from hls.js types so this module can be
+ * imported and tested without a DOM or MSE environment.
+ */
+export interface QualityOption {
+    readonly value: number;
+    readonly label: string;
+}
+export interface HlsLevelInfo {
+    readonly height?: number;
+    readonly bitrate?: number;
+    readonly name?: string;
+}
+/**
+ * Build a human-readable label for a single HLS level.
+ *
+ * Priority:
+ * 1. `name` (non-empty) → verbatim. The recorder stamps the master variant
+ *    NAME with the recording profile (high/mid/low), and the VOD selector must
+ *    match the live stream-profile selector's labels — the profile name wins
+ *    over resolution/bitrate.
+ * 2. `height` (> 0) → e.g. "1080p"
+ * 3. `bitrate` (> 0) → e.g. "2500 kbps"
+ * 4. Fallback → "Level N" (1-based)
+ */
+export declare function levelLabel(level: HlsLevelInfo, index: number): string;
+/**
+ * Build the full list of quality options for the selector overlay.
+ *
+ * Always starts with the Auto entry (`value: -1`), followed by one
+ * entry per available HLS level in manifest order.
+ */
+export declare function qualityOptions(levels: readonly HlsLevelInfo[]): QualityOption[];

package/dist/composites/hls-video.d.ts

@@ -0,0 +1,26 @@
+import { QualityOption } from './hls-quality';
+export interface HlsVideoProps {
+    /** Master `.m3u8` URL (typically relative, through the hub data-plane). */
+    readonly url: string;
+    /** Bearer token for the admin-gated data-plane route (optional). */
+    readonly authToken?: string | null;
+    /** Poster painted until the first frame decodes (optional). */
+    readonly posterUrl?: string;
+    /** Auto-play once the manifest is parsed (default: true). */
+    readonly autoPlay?: boolean;
+    readonly className?: string;
+    /**
+     * Called on MANIFEST_PARSED (and reset to `[]` on a new URL) with the
+     * full list of quality options (`qualityOptions(hls.levels)`). The caller
+     * renders the selector; this component owns only the hls instance.
+     * Emits `[]` when the manifest has ≤1 real level (no selector needed).
+     */
+    readonly onQualityOptions?: (options: readonly QualityOption[]) => void;
+    /**
+     * The level index to apply to `hls.currentLevel`. `-1` = Auto/ABR
+     * (default). When this prop changes, the component sets `hls.currentLevel`
+     * immediately. Has no effect in the native HLS fallback path.
+     */
+    readonly selectedLevel?: number;
+}
+export declare function HlsVideo({ url, authToken, posterUrl, autoPlay, className, onQualityOptions, selectedLevel }: HlsVideoProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/hover-zoom-image.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface HoverZoomImageProps {
+    /** Image URL (signed url for Image entities; snapshot object url for cameras). Null → placeholder. */
+    readonly src: string | null;
+    /** Accessible alt / default preview caption (e.g. the device name). */
+    readonly alt: string;
+    /** Optional small label under the enlarged preview. Defaults to `alt`. */
+    readonly caption?: string;
+    /** Text shown in the enlarged preview (and implied by the thumbnail's empty state) when there is no image. */
+    readonly placeholder?: string;
+    /** Sizing override for the thumbnail box. Defaults to a compact `h-7 w-7 rounded`. */
+    readonly thumbClassName?: string;
+    /** Enlarged-preview width in px. */
+    readonly expandedWidth?: number;
+    /** Enlarged-preview height in px (drives the flip-on-collision math). */
+    readonly expandedHeight?: number;
+}
+export declare function HoverZoomImage({ src, alt, caption, placeholder, thumbClassName, expandedWidth, expandedHeight, }: HoverZoomImageProps): ReactNode;

package/dist/composites/index.d.ts

@@ -29,6 +29,10 @@ export * from './device-card';
 export * from './device-grid';
 export * from './device-item';
 export * from './device-list';
+export { DeviceBatchToolbar } from './device-list/batch-toolbar';
+export type { DeviceBatchToolbarProps } from './device-list/batch-toolbar';
+export * from './device-meta';
+export * from './device-controls';
 export { PipelineStep, ConfigSchemaField } from './pipeline-step';
 export type { PipelineStepDisplayConfig, PipelineStepProps } from './pipeline-step';
 export { PipelineRuntimeSelector } from './pipeline-runtime-selector';
@@ -52,6 +56,8 @@ export type { MountAddonPageOptions } from './mount-addon-page';
 export { ConfigFormBuilder } from './config-form-builder';
 export type { TranslationFn } from './config-form-builder';
 export { ConfigFormField, NodeSelectField, NodeMultiSelectField, isFieldVisible } from './config-form-field';
+export { TimezoneSelector, TIMEZONES, findTimezone } from './timezone-selector';
+export type { TimezoneSelectorProps, Timezone, TimezoneDstRule, Weekday } from './timezone-selector';
 export { AddonGlobalSettingsForm } from './addon-global-settings-form';
 export type { ProbeState } from './config-form-field';
 export { DetectionOverlay } from './detection-overlay';
@@ -60,6 +66,8 @@ export { CameraStreamPlayer } from './camera-stream-player';
 export type { CameraStreamPlayerProps, PlayerConnectionState, SignalingResult, ClientStreamHints } from './camera-stream-player';
 export { StreamPanel } from './stream-panel';
 export type { StreamPanelProps, StreamChoice, StreamStats } from './stream-panel';
+export { HlsVideo } from './hls-video';
+export type { HlsVideoProps } from './hls-video';
 export { StreamBrokerSelector } from './stream-broker-selector';
 export type { StreamBrokerSelectorProps } from './stream-broker-selector';
 export { DeviceExportPanel } from './device-export-panel';
@@ -97,6 +105,8 @@ export { PTZOverlay } from './ptz-overlay';
 export type { PTZOverlayProps } from './ptz-overlay';
 export { BatteryBadge } from './battery-badge';
 export type { BatteryBadgeProps, BatteryStatusLike } from './battery-badge';
+export { HoverZoomImage } from './hover-zoom-image';
+export type { HoverZoomImageProps } from './hover-zoom-image';
 export { SnapshotButton } from './snapshot-button';
 export type { SnapshotButtonProps, SnapshotButtonTrpc } from './snapshot-button';
 export { DoorbellRecentPanel } from './doorbell-recent-panel';
@@ -108,5 +118,6 @@ export { WidgetSlot } from './widget-slot';
 export type { WidgetSlotProps } from './widget-slot';
 export { ScopePicker, validateScopes } from './scope-picker';
 export type { ScopeAccess } from './scope-picker';
-export { PtzPanel, AutotrackSection, MotionZonesSettings } from './cap-settings';
-export type { CapSettingsComponentProps } from './cap-settings';
+export { PtzPanel, ConsumablesPanel, AutotrackSection, MotionZonesSettings, MaskShapeCanvas, RecordingPanel } from './cap-settings';
+export type { CapSettingsComponentProps, MaskShapeItem, MaskShapeCanvasProps } from './cap-settings';
+export * from './widget-panel.js';

package/dist/composites/log-stream-scroll.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Pure scroll-geometry helpers for LogStream's follow-the-tail behaviour.
+ *
+ * Kept free of React/DOM lifecycle so the (subtle) "is the viewport pinned
+ * to the bottom?" decision is unit-testable in isolation. The component
+ * wires these into a `useLayoutEffect` (capture pinned-state BEFORE rows
+ * grow) + a user-scroll handler (re-pin when the operator returns to the
+ * bottom). See log-stream.tsx for the lifecycle.
+ */
+/** Default distance (px) from the bottom within which we treat the
+ * viewport as "pinned". Generous enough to absorb sub-pixel rounding and
+ * the height of a partially-revealed last row, tight enough that a
+ * deliberate scroll-up of even one full row reads as "not pinned". */
+export declare const PIN_THRESHOLD_PX = 40;
+/** The slice of scroll geometry the pin decision needs. Matches the
+ * properties of an `HTMLElement` (`scrollTop` / `scrollHeight` /
+ * `clientHeight`) so callers can pass the element fields directly. */
+export interface ScrollGeometry {
+    readonly scrollTop: number;
+    readonly scrollHeight: number;
+    readonly clientHeight: number;
+}
+/**
+ * True when the viewport is scrolled to (or within `threshold` px of) the
+ * bottom of its content.
+ *
+ * `scrollHeight - scrollTop - clientHeight` is the distance from the
+ * bottom: 0 when fully scrolled down, growing as the operator scrolls up.
+ * A `<=` comparison against the threshold means an exact-bottom geometry
+ * (distance 0) always counts as pinned even with a 0 threshold.
+ */
+export declare function isPinnedToBottom(geometry: ScrollGeometry, threshold?: number): boolean;

package/dist/composites/log-stream.d.ts

@@ -14,6 +14,13 @@ export interface LogStreamProps {
     readonly addonId?: string;
     /** Lock to a specific device. When set, the device selector is hidden. */
     readonly deviceId?: number;
+    /**
+     * Lock to a container SUBTREE: filters by `containerDeviceId`, returning the
+     * container's own logs AND every accessory child's logs in one view (each
+     * child stamps its parent's id; a container stamps its own). Pass this
+     * INSTEAD of `deviceId` for a container's Logs tab.
+     */
+    readonly containerDeviceId?: number;
     /**
      * Lock to a specific integration. Filter is ALWAYS applied when
      * provided — current providers don't yet tag loggers with
@@ -52,7 +59,7 @@ export interface LogStreamProps {
     readonly onClose?: () => void;
     readonly className?: string;
 }
-export declare function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight, showScope, showFilters, limit, liveBuffer: externalBuffer, onClose, className, }: LogStreamProps): import("react/jsx-runtime").JSX.Element;
+export declare function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight, showScope, showFilters, limit, liveBuffer: externalBuffer, onClose, className, }: LogStreamProps): import("react/jsx-runtime").JSX.Element;
 export interface FloatingLogStreamProps extends LogStreamProps {
     /** Position: 'bottom' anchors to parent bottom, 'overlay' is absolute positioned. */
     readonly position?: 'bottom' | 'overlay';

package/dist/composites/stream-panel.d.ts

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
-import { SignalingResult, ClientStreamHints } from './camera-stream-player';
+import { CamProfile } from '@camstack/types';
+import { SignalingResult, ClientOfferResult, ClientStreamHints, SessionSignalingState } from './camera-stream-player';
 import { DeviceDetections } from '../hooks/use-device-detections';
 /**
- * Discriminated WebRTC target — same shape as the backend cap. Kept
- * locally on the StreamChoice so consumers don't need to import from
- * `@camstack/types` to render a panel.
+ * Discriminated WebRTC target — same shape as the backend cap. The
+ * `profile` tier uses the canonical `CamProfile` enum.
  */
 export type StreamChoiceTarget = {
     readonly kind: 'adaptive';
 } | {
     readonly kind: 'profile';
-    readonly profile: 'high' | 'mid' | 'low';
+    readonly profile: CamProfile;
 } | {
     readonly kind: 'cam-stream';
     readonly camStreamId: string;
@@ -42,10 +42,54 @@ export interface StreamStats {
     readonly uptimeMs: number;
 }
 export interface StreamPanelProps {
-    readonly serverUrl: string;
-    readonly createSession: (target: StreamChoiceTarget, hints?: ClientStreamHints) => Promise<SignalingResult>;
-    readonly sendAnswer: (sessionId: string, sdpAnswer: string) => Promise<void>;
+    readonly serverUrl?: string;
+    readonly createSession?: (target: StreamChoiceTarget, hints?: ClientStreamHints) => Promise<SignalingResult>;
+    readonly sendAnswer?: (sessionId: string, sdpAnswer: string) => Promise<void>;
+    /**
+     * Client-offer signaling — PREFERRED over `createSession` for browsers.
+     * Closes over the selected target; the player builds the offer and this
+     * posts it. Lets iOS pass H.264 High/Main (incl. 4K) through untouched.
+     * Optional so non-browser callers (benchmark) can stay on server-offer.
+     */
+    readonly handleOffer?: (target: StreamChoiceTarget, sdpOffer: string, sessionId?: string) => Promise<ClientOfferResult>;
+    /** Browser-side ICE servers (STUN + TURN) for client-offer mode. */
+    readonly getIceServers?: () => Promise<readonly RTCIceServer[] | undefined>;
+    /** Trickle ICE — push a client candidate to the server (sessionId-scoped). */
+    readonly addIceCandidate?: (sessionId: string, candidate: RTCIceCandidateInit) => Promise<void>;
+    /** Trickle ICE — poll the server's gathered candidates (sessionId-scoped). */
+    readonly getIceCandidates?: (sessionId: string) => Promise<{
+        candidates: RTCIceCandidateInit[];
+        done: boolean;
+    }>;
     readonly closeSession?: (sessionId: string) => Promise<void>;
+    /**
+     * Poll a session's live signaling state (client-offer mode). A non-null
+     * `pendingRenegotiation` after an adaptive tier switch makes the player
+     * transparently re-offer on the same session. Optional — omit to disable
+     * adaptive re-offer (steady-state behaviour is unchanged).
+     */
+    readonly getSessionState?: (sessionId: string) => Promise<SessionSignalingState>;
+    /**
+     * When set, the panel switches to VOD mode: it renders an `HlsVideo`
+     * over this master `.m3u8` URL INSTEAD of the live WebRTC player, and
+     * the live signaling props are ignored. Lets the same hero player show
+     * recordings/clips (driven by the Recording tab) without a second
+     * player. Clearing it returns the panel to live mode.
+     */
+    readonly playbackUrl?: string;
+    /** Bearer token for the admin-gated data-plane playback route (optional). */
+    readonly playbackAuthToken?: string | null;
+    /**
+     * Short label for the clip/window being played — shown in the header in
+     * place of the stream selector while in VOD mode.
+     */
+    readonly playbackLabel?: string;
+    /**
+     * Invoked when the operator clicks the (re-purposed) play/stop button
+     * while in VOD mode. The caller clears its playback request to return
+     * the panel to the live stream.
+     */
+    readonly onExitPlayback?: () => void;
     /** Available streams. If omitted or single entry, no dropdown shown. */
     readonly streams?: readonly StreamChoice[];
     /** Currently active StreamChoice id. Defaults to first stream. */
@@ -74,6 +118,13 @@ export interface StreamPanelProps {
     readonly showPlayStop?: boolean;
     /** Snapshot source URL (data: URI). Only used when showPlayStop=true. */
     readonly snapshotSrc?: string | null;
+    /**
+     * Optional poster (snapshot data-URL) painted by the live `<video>` until
+     * its FIRST frame decodes — a cold-start fallback only. Independent of
+     * `snapshotSrc` (which is the play/stop preview). Caller-supplied; when
+     * omitted the video simply starts black until the first frame.
+     */
+    readonly posterUrl?: string;
     /** Whether snapshot is currently loading */
     readonly snapshotLoading?: boolean;
     /** Callback to refresh snapshot */
@@ -140,4 +191,4 @@ export interface StreamPanelProps {
     readonly chromeless?: boolean;
     readonly className?: string;
 }
-export declare function StreamPanel({ serverUrl, createSession, sendAnswer, closeSession, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, defaultShowDetections, defaultShowMotion, streamStats, autoPlay, showPlayStop, snapshotSrc, snapshotLoading, onRefreshSnapshot, showStreamStats, children, extraOverlay, ptzAvailable, ptzShown, ptzOverlay, onPtzToggle, intercomAvailable, intercomShown, onIntercomToggle, chromeless, className, }: StreamPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, defaultShowDetections, defaultShowMotion, streamStats, autoPlay, showPlayStop, snapshotSrc, snapshotLoading, onRefreshSnapshot, showStreamStats, children, extraOverlay, ptzAvailable, ptzShown, ptzOverlay, onPtzToggle, intercomAvailable, intercomShown, onIntercomToggle, chromeless, className, }: StreamPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/timezone-selector.d.ts

@@ -0,0 +1,18 @@
+import { TIMEZONES, findTimezone, Timezone, TimezoneDstRule, Weekday } from '@camstack/types';
+export { TIMEZONES, findTimezone };
+export type { Timezone, TimezoneDstRule, Weekday };
+export interface TimezoneSelectorProps {
+    /** Currently selected IANA id (e.g. 'Europe/Rome'). */
+    readonly value: string;
+    /** Fired with the newly chosen IANA id. */
+    readonly onChange: (id: string) => void;
+    readonly disabled?: boolean;
+}
+/**
+ * Friendly timezone picker. Renders a native `<select>` grouped by
+ * region via `<optgroup>`, sourced from the curated `TIMEZONES`
+ * catalogue. The selected value is the IANA id; DST is implied by the
+ * chosen zone (each option carries its standard offset + DST rule),
+ * so there is no separate DST control.
+ */
+export declare function TimezoneSelector({ value, onChange, disabled }: TimezoneSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/widget-panel.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+interface WidgetPanelProps {
+    /** Header title — rendered uppercase, letter-spaced, foreground. */
+    readonly title: string;
+    /** Optional leading icon node (size it `h-3.5 w-3.5` for alignment). */
+    readonly icon?: ReactNode;
+    /** Optional right-aligned header slot (timestamp, live badge, …). Ignored
+     *  when `collapsible` is set — the chevron takes that slot. */
+    readonly headerRight?: ReactNode;
+    /** Render the header as a toggle that shows/hides the body. */
+    readonly collapsible?: boolean;
+    /** Initial open state for a collapsible panel (default open). */
+    readonly defaultOpen?: boolean;
+    /** Body padding/utility override (default `p-3`). */
+    readonly bodyClassName?: string;
+    readonly children: ReactNode;
+}
+export declare function WidgetPanel({ title, icon, headerRight, collapsible, defaultOpen, bodyClassName, children, }: WidgetPanelProps): import("react/jsx-runtime").JSX.Element;
+interface WidgetMetricCardProps {
+    readonly label: string;
+    readonly icon?: ReactNode;
+    /** The metric value (text or node). */
+    readonly children: ReactNode;
+    /** Optional sub-line under the value (e.g. "3 segment ranges"). */
+    readonly footer?: ReactNode;
+}
+export declare function WidgetMetricCard({ label, icon, children, footer }: WidgetMetricCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/contexts/vod-playback.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface VodPlaybackRequest {
+    /** Master `.m3u8` URL through the hub data-plane (relative). */
+    readonly url: string;
+    /** Short human label shown in the hero while playing (e.g. a timestamp). */
+    readonly label?: string;
+}
+export interface VodPlaybackContextValue {
+    readonly request: VodPlaybackRequest | null;
+    readonly play: (request: VodPlaybackRequest) => void;
+    readonly clear: () => void;
+}
+export declare function VodPlaybackProvider({ children }: {
+    readonly children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** @returns the VOD playback controller (inert no-op outside a provider). */
+export declare function useVodPlayback(): VodPlaybackContextValue;