@camstack/ui-library 0.1.39 → 0.1.40

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

@@ -0,0 +1,25 @@
+/**
+ * ImageSelector — chip-style picker for reference media + upload button.
+ * Despite the historical name it's media-agnostic: pass `accept` to
+ * filter the file picker (defaults to `image/*`). Used by both the
+ * Image Tester and the Audio Tester so the two tabs share the exact
+ * same selection UI.
+ */
+export interface ReferenceImage {
+    readonly id?: string;
+    readonly filename: string;
+    readonly sizeKB?: number;
+}
+export interface ImageSelectorProps {
+    readonly images: readonly ReferenceImage[];
+    readonly selectedFilename: string;
+    readonly uploadedName?: string;
+    readonly onSelect: (filename: string) => void;
+    readonly onUpload: (base64: string, filename: string, dataUrl: string) => void;
+    readonly className?: string;
+    /** File picker `accept` value. Default: `image/*`. */
+    readonly accept?: string;
+    /** Override the upload button label. Default: `Upload...`. */
+    readonly uploadLabel?: string;
+}
+export declare function ImageSelector({ images, selectedFilename, uploadedName, onSelect, onUpload, className, accept, uploadLabel, }: ImageSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/index.d.ts

@@ -0,0 +1,99 @@
+export * from './breadcrumb';
+export { DataTable } from './data-table';
+export type { DataTableProps, DataColumn } from './data-table';
+export { SlideOverPanel } from './slide-over-panel';
+export type { SlideOverPanelProps } from './slide-over-panel';
+export { StepTreeMaster, buildStepTreeFromSchema } from './step-tree-master';
+export type { StepTreeMasterProps, StepTreeNode, StepDotState } from './step-tree-master';
+export { AgentStepEditor } from './agent-step-editor';
+export type { AgentStepEditorProps, EditorMode } from './agent-step-editor';
+export { PipelineTreeMatrix } from './pipeline-tree-matrix';
+export type { PipelineTreeMatrixProps, AgentColumn, CellState } from './pipeline-tree-matrix';
+export { NodePicker } from './node-picker';
+export type { NodePickerProps } from './node-picker';
+export * from './status-badge';
+export * from './provider-badge';
+export * from './version-badge';
+export * from './form-field';
+export * from './page-header';
+export * from './empty-state';
+export * from './confirm-dialog';
+export * from './stat-card';
+export * from './key-value-list';
+export * from './code-block';
+export * from './filter-bar';
+export * from './app-shell';
+export * from './data-table';
+export * from './device-card';
+export * from './device-grid';
+export * from './device-item';
+export * from './device-list';
+export { PipelineStep, ConfigSchemaField } from './pipeline-step';
+export type { PipelineStepDisplayConfig, PipelineStepProps } from './pipeline-step';
+export { PipelineRuntimeSelector } from './pipeline-runtime-selector';
+export type { PipelineRuntimeOption } from './pipeline-runtime-selector';
+export { PipelineBuilder } from './pipeline-builder';
+export type { PipelineBuilderProps } from './pipeline-builder';
+export { CLASS_COLORS, DEFAULT_COLOR, getClassColor } from './detection-colors';
+export { DetectionCanvas } from './detection-canvas';
+export type { Detection, DetectionCanvasProps } from './detection-canvas';
+export { DetectionResultTree } from './detection-result-tree';
+export type { DetectionResultTreeProps } from './detection-result-tree';
+export { StepTimings } from './step-timings';
+export type { StepTimingsProps } from './step-timings';
+export { ImageSelector } from './image-selector';
+export type { ImageSelectorProps, ReferenceImage } from './image-selector';
+export { InferenceConfigSelector } from './inference-config-selector';
+export type { InferenceConfigSelectorProps, InferenceBackendOption, InferenceModelOption, InferenceAgentOption } from './inference-config-selector';
+export type { AddonPageProps } from './addon-page-props';
+export { mountAddonPage } from './mount-addon-page';
+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 { AddonGlobalSettingsForm } from './addon-global-settings-form';
+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 type { CameraStreamPlayerProps, PlayerConnectionState, SignalingResult, ClientStreamHints } from './camera-stream-player';
+export { StreamPanel } from './stream-panel';
+export type { StreamPanelProps, StreamChoice, StreamStats } from './stream-panel';
+export { LoginForm } from './login-form';
+export type { LoginFormProps } from './login-form';
+export { DevShell, useDevShell } from './dev-shell';
+export type { DevShellProps } from './dev-shell';
+export { AudioWaveform } from './audio-waveform';
+export type { AudioWaveformProps } from './audio-waveform';
+export { AudioLevelWaveform } from './audio-level-waveform';
+export type { AudioLevelWaveformProps } from './audio-level-waveform';
+export { AudioClassificationList } from './audio-classification-list';
+export type { AudioClassificationListProps, AudioClassification } from './audio-classification-list';
+export { ResponseLog } from './response-log';
+export type { ResponseLogProps } from './response-log';
+export { PhaseIcon } from './phase-icon';
+export type { PhaseIconProps } from './phase-icon';
+export { LogStream, FloatingLogStream } from './log-stream';
+export type { LogStreamProps, FloatingLogStreamProps } from './log-stream';
+export { EventStream, FloatingEventStream } from './event-stream';
+export type { EventStreamProps, FloatingEventStreamProps } from './event-stream';
+export { DiscoveryPanel } from './discovery-panel';
+export { StateValuesStream } from './state-values-stream';
+export type { StateValuesStreamProps } from './state-values-stream';
+export { DeviceActivityPanel } from './device-activity-panel';
+export type { DeviceActivityPanelProps, ActivityTabId } from './device-activity-panel';
+export { ConfirmActionButton } from './confirm-action-button';
+export type { ConfirmActionButtonProps } from './confirm-action-button';
+export { PTZOverlay } from './ptz-overlay';
+export type { PTZOverlayProps } from './ptz-overlay';
+export { BatteryBadge } from './battery-badge';
+export type { BatteryBadgeProps, BatteryStatusLike } from './battery-badge';
+export { SnapshotButton } from './snapshot-button';
+export type { SnapshotButtonProps, SnapshotButtonTrpc } from './snapshot-button';
+export { DoorbellRecentPanel } from './doorbell-recent-panel';
+export type { DoorbellRecentPanelProps } from './doorbell-recent-panel';
+export { KebabMenu } from './kebab-menu';
+export type { KebabMenuProps, KebabMenuItem } from './kebab-menu';
+export { ConfirmDialogProvider, useConfirm } from './confirm-dialog';
+export { WidgetSlot } from './widget-slot';
+export type { WidgetSlotProps } from './widget-slot';

package/dist/composites/inference-config-selector.d.ts

@@ -0,0 +1,44 @@
+/**
+ * InferenceConfigSelector — cascading selectors for runtime/backend/model.
+ *
+ * Used by benchmark Engine tab, Image Tester pipeline steps, and admin-ui
+ * pipeline configuration. Shows only valid combinations based on capabilities.
+ */
+export interface InferenceBackendOption {
+    readonly id: string;
+    readonly label: string;
+    readonly available: boolean;
+}
+export interface InferenceModelOption {
+    readonly id: string;
+    readonly name: string;
+    readonly downloaded?: boolean;
+}
+export interface InferenceAgentOption {
+    readonly id: string;
+    readonly name: string;
+    readonly status: 'online' | 'offline' | 'busy';
+}
+export interface InferenceConfigSelectorProps {
+    readonly runtime: 'node' | 'python';
+    readonly backend: string;
+    readonly modelId: string;
+    readonly agentId?: string;
+    readonly runtimes: readonly {
+        value: string;
+        label: string;
+        available: boolean;
+    }[];
+    readonly backends: readonly InferenceBackendOption[];
+    readonly models: readonly InferenceModelOption[];
+    readonly agents?: readonly InferenceAgentOption[];
+    readonly onRuntimeChange: (rt: 'node' | 'python') => void;
+    readonly onBackendChange: (id: string) => void;
+    readonly onModelChange: (id: string) => void;
+    readonly onAgentChange?: (id: string) => void;
+    readonly layout?: 'horizontal' | 'vertical' | 'grid';
+    readonly className?: string;
+    /** Show agent selector (default: false) */
+    readonly showAgent?: boolean;
+}
+export declare function InferenceConfigSelector({ runtime, backend, modelId, agentId, runtimes, backends, models, agents, onRuntimeChange, onBackendChange, onModelChange, onAgentChange, layout, className, showAgent, }: InferenceConfigSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/kebab-menu.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType, ReactNode } from 'react';
+export interface KebabMenuItem {
+    /** Stable id for React keys + analytics. */
+    readonly id: string;
+    /** Visible label. */
+    readonly label: string;
+    /** Icon component (lucide-react etc.). */
+    readonly icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Render an inline subtitle / hint under the label. */
+    readonly description?: string;
+    /** Click handler — menu auto-closes after invocation. */
+    readonly onClick: () => void;
+    /** When true, the item is hidden entirely (gated by feature etc.). */
+    readonly hidden?: boolean;
+    /** When true, the item is rendered greyed out and non-clickable. */
+    readonly disabled?: boolean;
+    /** Renders the item with the destructive accent (red text + hover). */
+    readonly danger?: boolean;
+    /**
+     * Optional separator BEFORE this item — useful to group destructive
+     * actions visually at the bottom of the menu.
+     */
+    readonly separatorBefore?: boolean;
+}
+export interface KebabMenuProps {
+    readonly items: readonly KebabMenuItem[];
+    /**
+     * Optional content rendered ABOVE the items (e.g. an explanatory
+     * label or a status line). Hidden when no header is provided.
+     */
+    readonly header?: ReactNode;
+    /** Optional class on the trigger button (sizing, alignment). */
+    readonly triggerClassName?: string;
+    /** Tooltip text on the trigger (defaults to "More actions"). */
+    readonly title?: string;
+}
+export declare function KebabMenu({ items, header, triggerClassName, title }: KebabMenuProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface KeyValueListProps {
+    items: {
+        key: string;
+        value: ReactNode;
+    }[];
+    className?: string;
+}
+export declare function KeyValueList({ items, className }: KeyValueListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,61 @@
+import { LiveBuffer } from '../hooks/use-live-buffer';
+interface LogEntry {
+    readonly timestamp: string;
+    readonly level: string;
+    readonly message: string;
+    readonly scope?: string;
+    readonly tags?: Record<string, string | undefined>;
+    readonly meta?: Record<string, unknown>;
+}
+export interface LogStreamProps {
+    /** Lock to a specific agent. When set, the agent selector is hidden. */
+    readonly agentId?: string;
+    /** Lock to a specific addon. When set, the addon selector is hidden. */
+    readonly addonId?: string;
+    /** Lock to a specific device. When set, the device selector is hidden. */
+    readonly deviceId?: number;
+    /**
+     * Lock to a specific integration. Filter is ALWAYS applied when
+     * provided — current providers don't yet tag loggers with
+     * `integrationId`, so the result will be empty until they do, but
+     * the filter lets us light up integration-scoped logs incrementally
+     * without changing the call sites here.
+     */
+    readonly integrationId?: string;
+    /**
+     * Correlation id for short-lived operations that have no `deviceId`
+     * yet (e.g. a creation-field probe). The matching surface (the
+     * Add-Device modal) generates the id once per dialog open and the
+     * provider plumbs it into its own scoped logger so the user sees
+     * live socket / handshake lines streaming during the test.
+     */
+    readonly requestId?: string;
+    /** Initial log level filter. */
+    readonly level?: 'debug' | 'info' | 'warn' | 'error';
+    /** Max height CSS class (default: 'max-h-96'). */
+    readonly maxHeight?: string;
+    /** Show the scope column. */
+    readonly showScope?: boolean;
+    /** Show the filter bar with selectors. Set false for compact inline use. */
+    readonly showFilters?: boolean;
+    /** Initial number of historical entries to fetch (default: 100). */
+    readonly limit?: number;
+    /**
+     * Optional controlled live buffer. When provided, the stream reads
+     * + appends to this external store rather than its own `useState`,
+     * so visible logs survive an unmount/remount of the component
+     * (used by `DeviceActivityPanel` to preserve content across tab
+     * switches without keeping subscriptions open in inactive tabs).
+     */
+    readonly liveBuffer?: LiveBuffer<LogEntry>;
+    /** Close button handler — when provided, renders a close button. */
+    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 interface FloatingLogStreamProps extends LogStreamProps {
+    /** Position: 'bottom' anchors to parent bottom, 'overlay' is absolute positioned. */
+    readonly position?: 'bottom' | 'overlay';
+}
+export declare function FloatingLogStream({ position, className, ...props }: FloatingLogStreamProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/login-form.d.ts

@@ -0,0 +1,8 @@
+export interface LoginFormProps {
+    onLogin: (username: string, password: string) => Promise<void>;
+    serverUrl?: string;
+    logoSrc?: string;
+    error?: string;
+    className?: string;
+}
+export declare function LoginForm({ onLogin, serverUrl, logoSrc, error: externalError, className, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/mount-addon-page.d.ts

@@ -0,0 +1,16 @@
+import { AddonPageProps } from './addon-page-props';
+export interface MountAddonPageOptions {
+    /** Backend server URL (default: 'https://localhost:4443') */
+    serverUrl?: string;
+    /** Title shown in the dev toolbar */
+    title?: string;
+    /** Root element ID (default: 'root') */
+    rootId?: string;
+}
+/**
+ * Mount an addon page component with the full dev shell.
+ *
+ * @param PageComponent - The addon page component (must accept AddonPageProps)
+ * @param options - Configuration options
+ */
+export declare function mountAddonPage(PageComponent: (props: AddonPageProps) => React.ReactNode, options?: MountAddonPageOptions): void;

package/dist/composites/node-picker.d.ts

@@ -0,0 +1,15 @@
+export interface NodePickerProps {
+    readonly selectedNodeId: string;
+    readonly onSelect: (nodeId: string) => void;
+    /** Caption shown before the pill bar. Defaults to `Node`. */
+    readonly label?: string;
+    /** Hide the leading `Server` icon (compact toolbars). */
+    readonly hideIcon?: boolean;
+    /**
+     * When true, render even when only the hub is online. Useful when
+     * the surrounding UI relies on the picker as a layout anchor; the
+     * default hides the picker since there's nothing to choose.
+     */
+    readonly alwaysShow?: boolean;
+}
+export declare function NodePicker({ selectedNodeId, onSelect, label, hideIcon, alwaysShow, }: NodePickerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/composites/page-header.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    className?: string;
+}
+export declare function PageHeader({ title, subtitle, actions, className }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/phase-icon.d.ts

@@ -0,0 +1,5 @@
+import { LucideProps } from 'lucide-react';
+export interface PhaseIconProps extends LucideProps {
+    readonly phase: string;
+}
+export declare function PhaseIcon({ phase, ...props }: PhaseIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/pipeline-builder.d.ts

@@ -0,0 +1,43 @@
+import { PipelineSchema, PipelineTemplate } from '@camstack/types';
+import { PipelineStepDisplayConfig } from './pipeline-step';
+export interface PipelineBuilderProps {
+    readonly schema: PipelineSchema;
+    readonly steps: readonly PipelineStepDisplayConfig[];
+    readonly onChange: (steps: readonly PipelineStepDisplayConfig[]) => void;
+    readonly templates: readonly PipelineTemplate[];
+    readonly selectedTemplateId: string | null;
+    readonly onSelectTemplate: (id: string | null) => void;
+    readonly onSaveTemplate: (name: string, steps: readonly PipelineStepDisplayConfig[]) => void;
+    readonly onUpdateTemplate: (id: string, steps: readonly PipelineStepDisplayConfig[]) => void;
+    readonly onDeleteTemplate: (id: string) => void;
+    readonly readOnly?: boolean;
+    /** Addon IDs to exclude from the pipeline (e.g. 'motion-detection' for benchmark) */
+    readonly excludeAddons?: readonly string[];
+    /** Hide the template bar (save/load/delete) */
+    readonly hideTemplates?: boolean;
+    /** Only show enabled steps (hide disabled addons and placeholders) */
+    readonly showOnlyEnabled?: boolean;
+    /** Show "Slot: ..." labels above step groups (default: false) */
+    readonly showSlotLabels?: boolean;
+    /**
+     * Toggle mode passed through to every `PipelineStep`:
+     *  - `'simple'` (default) — single on/off switch, edits `step.enabled` directly.
+     *  - `'threeState'` — segmented `[Inherit | On | Off]` control that emits
+     *    override changes via `onOverrideChange` (per addonId). `step.enabled`
+     *    still reflects the effective state (agent default OR override).
+     */
+    readonly toggleMode?: 'simple' | 'threeState';
+    /** Current override map keyed on `addonId` when `toggleMode === 'threeState'`. */
+    readonly overrides?: Readonly<Record<string, boolean>>;
+    /** Fires when the user flips a per-addon 3-state toggle. `null` = inherit. */
+    readonly onOverrideChange?: (addonId: string, next: boolean | null) => void;
+    /** Agent default enabled state per addonId, shown as annotation in `'threeState'` mode. */
+    readonly inheritedEnabledByAddon?: Readonly<Record<string, boolean>>;
+    /**
+     * Hide the Model dropdown + dynamic configSchema controls on every
+     * step (passes through to `PipelineStep.hideModelAndSettings`). Used
+     * on the camera page where these knobs are agent-level.
+     */
+    readonly hideModelAndSettings?: boolean;
+}
+export declare function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateId, onSelectTemplate, onSaveTemplate, onUpdateTemplate, onDeleteTemplate, readOnly, excludeAddons, hideTemplates, showOnlyEnabled, showSlotLabels, toggleMode, overrides, onOverrideChange, inheritedEnabledByAddon, hideModelAndSettings, }: PipelineBuilderProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/pipeline-runtime-selector.d.ts

@@ -0,0 +1,16 @@
+export interface PipelineRuntimeOption {
+    readonly id: string;
+    readonly label: string;
+    readonly available: boolean;
+    /** Platform score for this backend (higher = better) */
+    readonly platformScore?: number;
+    /** Whether this is the best-scored backend */
+    readonly isBest?: boolean;
+}
+interface PipelineRuntimeSelectorProps {
+    readonly options: readonly PipelineRuntimeOption[];
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+}
+export declare function PipelineRuntimeSelector({ options, value, onChange }: PipelineRuntimeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/pipeline-step.d.ts

@@ -0,0 +1,65 @@
+import { PipelineSlot, PipelineAddonSchema, PipelineEngineChoice, ConfigField } from '@camstack/types';
+export interface PipelineStepDisplayConfig {
+    readonly addonId: string;
+    readonly addonName: string;
+    readonly slot: PipelineSlot;
+    readonly inputClasses: readonly string[];
+    readonly outputClasses: readonly string[];
+    readonly enabled: boolean;
+    readonly modelId: string;
+    readonly children: readonly PipelineStepDisplayConfig[];
+    /** Independent engine override — only used by audio-classifier steps */
+    readonly engine?: PipelineEngineChoice;
+    /** UI grouping — steps with the same group are displayed under one heading */
+    readonly group?: string;
+    /** Current values for the step's configSchema fields */
+    readonly settings?: Record<string, unknown>;
+}
+export interface PipelineStepProps {
+    readonly step: PipelineStepDisplayConfig;
+    readonly schema: PipelineAddonSchema | null;
+    /** Full schema map so children can look up their own schema */
+    readonly allSchemas: ReadonlyMap<string, PipelineAddonSchema>;
+    readonly depth?: number;
+    readonly onChange: (updated: PipelineStepDisplayConfig) => void;
+    readonly onDelete?: (addonId: string) => void;
+    readonly readOnly?: boolean;
+    /**
+     * Toggle mode:
+     *  - `'simple'` (default) — header shows a single on/off switch that drives
+     *    `step.enabled` directly. Used on the agent page (`NodePipelineTab`)
+     *    where toggling IS the final state.
+     *  - `'threeState'` — header shows a 3-button segmented control
+     *    `[Inherit | On | Off]`. `overrideState` is the current override value
+     *    (`true` / `false` / `null` for inherit). When the override changes,
+     *    `onOverrideChange` fires. `step.enabled` still renders the effective
+     *    state (inherited agent default OR override). Used on the camera page
+     *    where the user edits a SPARSE override over the agent baseline.
+     */
+    readonly toggleMode?: 'simple' | 'threeState';
+    /**
+     * 3-state override value when `toggleMode === 'threeState'`. `null` or
+     * `undefined` means "inherit" (no override active). Ignored in `'simple'` mode.
+     */
+    readonly overrideState?: boolean | null;
+    /** Fired when the user flips the 3-state toggle in `'threeState'` mode. */
+    readonly onOverrideChange?: (next: boolean | null) => void;
+    /** Agent's default enabled value, shown as an annotation in `'threeState'` mode. */
+    readonly inheritedEnabled?: boolean;
+    /**
+     * Hide the Model dropdown + dynamic configSchema controls inside the
+     * expanded config panel. Used on the camera page where the step's
+     * model + settings are agent-level — a camera can land on any agent,
+     * so exposing agent-level knobs here would be misleading. Agent I/O
+     * tags, engine selector (audio), and the step name stay visible.
+     */
+    readonly hideModelAndSettings?: boolean;
+}
+export declare function PipelineStep({ step, schema, allSchemas: _allSchemas, depth: _depth, onChange, onDelete: _onDelete, readOnly, toggleMode, overrideState, onOverrideChange, inheritedEnabled, hideModelAndSettings, }: PipelineStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigSchemaField({ field, allFields, step, disabled, onChange }: {
+    field: ConfigField;
+    allFields: readonly ConfigField[];
+    step: PipelineStepDisplayConfig;
+    disabled: boolean;
+    onChange: (updated: PipelineStepDisplayConfig) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/composites/pipeline-tree-matrix.d.ts

@@ -0,0 +1,31 @@
+import { StepTreeNode } from './step-tree-master';
+export interface AgentColumn {
+    readonly agentNodeId: string;
+    readonly engineLabel: string;
+}
+export type CellState = {
+    readonly kind: 'enabled';
+    readonly modelId: string;
+} | {
+    readonly kind: 'disabled';
+} | {
+    readonly kind: 'na';
+};
+export interface PipelineTreeMatrixProps {
+    readonly tree: readonly StepTreeNode[];
+    readonly agents: readonly AgentColumn[];
+    readonly getCellState: (addonId: string, agentNodeId: string) => CellState;
+    readonly onCellClick: (addonId: string, agentNodeId: string) => void;
+    readonly selectedCell: {
+        readonly addonId: string;
+        readonly agentNodeId: string;
+    } | null;
+    /**
+     * Optional inline on/off toggle next to each step name. Only useful
+     * in single-agent mode (per-node pipeline tab) where the row already
+     * targets one (agent, addon) pair unambiguously. The matrix renders
+     * the toggle when this callback is set AND `agents.length === 1`.
+     */
+    readonly onToggleEnabled?: (addonId: string, next: boolean) => void;
+}
+export declare function PipelineTreeMatrix({ tree, agents, getCellState, onCellClick, selectedCell, onToggleEnabled, }: PipelineTreeMatrixProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/provider-badge.d.ts

@@ -0,0 +1,7 @@
+import { ProviderType } from '../icons';
+export interface ProviderBadgeProps {
+    provider: ProviderType;
+    showLabel?: boolean;
+    className?: string;
+}
+export declare function ProviderBadge({ provider, showLabel, className, }: ProviderBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/ptz-overlay.d.ts

@@ -0,0 +1,20 @@
+import { UsePTZResult } from '../hooks/use-ptz';
+export interface PTZOverlayProps {
+    /** Result of `usePTZ(trpc, deviceId)`. */
+    readonly controls: UsePTZResult;
+    /**
+     * Visual variant. `'overlay'` floats over the camera viewport with
+     * a translucent dark pill; `'panel'` lays out flat inside its
+     * container with no inner chrome — use that when hosting inside a
+     * floating panel that already provides the dark surface.
+     */
+    readonly mode?: 'overlay' | 'panel';
+    /** Show the presets dropdown (default: true when presets > 0). */
+    readonly showPresets?: boolean;
+    /** Show the zoom buttons (default: true). */
+    readonly showZoom?: boolean;
+    /** Show the home button (default: true). */
+    readonly showHome?: boolean;
+    readonly className?: string;
+}
+export declare function PTZOverlay({ controls, mode, showPresets, showZoom, showHome, className, }: PTZOverlayProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+export interface ResponseLogProps {
+    readonly data: unknown;
+    readonly label?: string;
+    readonly className?: string;
+}
+/**
+ * Expandable log box showing the raw JSON response from a pipeline run.
+ */
+export declare function ResponseLog({ data, label, className }: ResponseLogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/composites/slide-over-panel.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface SlideOverPanelProps {
+    readonly open: boolean;
+    readonly onClose: () => void;
+    readonly title: ReactNode;
+    readonly subtitle?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+    readonly widthClass?: string;
+}
+export declare function SlideOverPanel({ open, onClose, title, subtitle, footer, children, widthClass, }: SlideOverPanelProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,25 @@
+interface QueryFn<I, O> {
+    query(input: I): Promise<O>;
+}
+export interface SnapshotButtonTrpc {
+    readonly snapshot: {
+        readonly getSnapshot: QueryFn<{
+            deviceId: number;
+            streamId?: string;
+            force?: boolean;
+        }, {
+            base64: string;
+            contentType: string;
+        } | null>;
+    };
+}
+export interface SnapshotButtonProps {
+    readonly trpc: SnapshotButtonTrpc;
+    readonly deviceId: number;
+    readonly deviceName: string;
+    /** Visual size — `'sm'` for header / tile, `'md'` for prominent CTA. */
+    readonly size?: 'sm' | 'md';
+    readonly className?: string;
+}
+export declare function SnapshotButton({ trpc, deviceId, deviceName, size, className, }: SnapshotButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/stat-card.d.ts

@@ -0,0 +1,10 @@
+export interface StatCardProps {
+    value: string | number;
+    label: string;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down';
+    };
+    className?: string;
+}
+export declare function StatCard({ value, label, trend, className }: StatCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/state-values-stream.d.ts

@@ -0,0 +1,30 @@
+import { LiveBuffer } from '../hooks/use-live-buffer';
+interface StateChangeEntry {
+    readonly id: string;
+    readonly timestamp: string;
+    readonly capName: string;
+    readonly slice: Record<string, unknown>;
+}
+export interface StateValuesStreamProps {
+    /** Device whose runtime-state changes we want to track. Required. */
+    readonly deviceId: number;
+    /** Initial cap-name filter — empty = all caps visible. */
+    readonly defaultCaps?: readonly string[];
+    /** Max height CSS class. */
+    readonly maxHeight?: string;
+    /** Initial number of historical entries to fetch. */
+    readonly limit?: number;
+    /**
+     * Optional controlled live buffer. When provided the stream appends
+     * to this external store instead of its own internal `useState`,
+     * so the entries survive an unmount/remount of the component (used
+     * by `DeviceActivityPanel` to keep tab content visible across
+     * tab switches without leaving subscriptions alive in inactive
+     * tabs).
+     */
+    readonly liveBuffer?: LiveBuffer<StateChangeEntry>;
+    readonly onClose?: () => void;
+    readonly className?: string;
+}
+export declare function StateValuesStream({ deviceId, defaultCaps, maxHeight, limit, liveBuffer: externalBuffer, onClose, className, }: StateValuesStreamProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/status-badge.d.ts

@@ -0,0 +1,10 @@
+type Status = 'online' | 'offline' | 'degraded' | 'unknown';
+export interface StatusBadgeProps {
+    status: Status;
+    showDot?: boolean;
+    showLabel?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function StatusBadge({ status, showDot, showLabel, size, className, }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/step-timings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * StepTimings — displays pipeline execution timings per step.
+ */
+export interface StepTimingsProps {
+    readonly timings: Readonly<Record<string, number>>;
+    readonly totalMs?: number;
+    readonly className?: string;
+}
+export declare function StepTimings({ timings, totalMs, className }: StepTimingsProps): import("react/jsx-runtime").JSX.Element | null;