@camstack/ui-library 0.1.25 → 0.1.27

package/dist/index.d.cts

@@ -1,13 +1,16 @@
-export { CamStackColorTokens, CamStackTheme, DeepPartial, ThemeMode, ThemeProvider, UseThemeModeReturn, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode } from './theme/index.cjs';
+import { UseThemeModeReturn } from './theme/index.cjs';
+export { CamStackColorTokens, CamStackTheme, DeepPartial, ThemeMode, ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode } from './theme/index.cjs';
 import { ClassValue } from 'clsx';
 import { LucideIcon } from 'lucide-react';
 import * as react from 'react';
-import { ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+import react__default, { ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, SortingState, ColumnFiltersState, PaginationState } from '@tanstack/react-table';
 export { ColumnDef, ColumnFiltersState, PaginationState, SortingState } from '@tanstack/react-table';
+import { PipelineSlot, PipelineAddonSchema, InferenceCapabilities, PipelineSchema, PipelineTemplate, LabelData } from '@camstack/types';
+import { createTRPCClient } from '@trpc/client';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -198,6 +201,30 @@ interface ProviderBadgeProps {
 }
 declare function ProviderBadge({ provider, showLabel, className, }: ProviderBadgeProps): react_jsx_runtime.JSX.Element;
 
+type SemanticBadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface SemanticBadgeProps {
+    children: react__default.ReactNode;
+    variant?: SemanticBadgeVariant;
+    /** Use monospace font (good for versions, codes) */
+    mono?: boolean;
+    className?: string;
+}
+/**
+ * General-purpose badge with semantic color variants.
+ * Solid background with dark text for maximum contrast.
+ */
+declare function SemanticBadge({ children, variant, mono, className }: SemanticBadgeProps): react_jsx_runtime.JSX.Element;
+interface VersionBadgeProps {
+    version: string;
+    preRelease?: boolean;
+    className?: string;
+}
+/**
+ * Version badge — auto-detects pre-release versions.
+ * Stable = success (green), Pre-release = warning (amber).
+ */
+declare function VersionBadge({ version, preRelease, className }: VersionBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface FormFieldProps {
     label: string;
     description?: string;
@@ -412,4 +439,278 @@ interface DeviceGridProps {
 }
 declare function DeviceGrid({ children, minCardWidth, gap, className, }: DeviceGridProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableAction, type DataTableProps, DeviceCard, type DeviceCardAction, type DeviceCardBadge, type DeviceCardProps, DeviceGrid, type DeviceGridProps, Dialog, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownItem, DropdownTrigger, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterDef, FloatingPanel, type FloatingPanelProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, KeyValueList, type KeyValueListProps, Label, type LabelProps, PageHeader, type PageHeaderProps, Popover, PopoverContent, PopoverTrigger, ProviderBadge, type ProviderBadgeProps, type ProviderType, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusType, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, cn, providerIcons, statusIcons };
+interface PipelineStepDisplayConfig {
+    readonly addonId: string;
+    readonly addonName: string;
+    readonly slot: PipelineSlot;
+    readonly inputClasses: readonly string[];
+    readonly outputClasses: readonly string[];
+    readonly enabled: boolean;
+    readonly agentId: string;
+    readonly runtime: string;
+    readonly backend: string;
+    readonly modelId: string;
+    readonly confidence: number;
+    readonly classFilters: readonly string[];
+    readonly children: readonly PipelineStepDisplayConfig[];
+}
+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 capabilities: InferenceCapabilities;
+    readonly depth?: number;
+    readonly onChange: (updated: PipelineStepDisplayConfig) => void;
+    readonly onDelete?: (addonId: string) => void;
+    readonly readOnly?: boolean;
+}
+declare function PipelineStep({ step, schema, allSchemas, capabilities, depth, onChange, onDelete, readOnly, }: PipelineStepProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+declare function PipelineRuntimeSelector({ options, value, onChange }: PipelineRuntimeSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface PipelineBuilderProps {
+    readonly schema: PipelineSchema;
+    readonly capabilities: InferenceCapabilities;
+    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[];
+}
+declare function PipelineBuilder({ schema, capabilities, steps, onChange, templates, selectedTemplateId, onSelectTemplate, onSaveTemplate, onUpdateTemplate, onDeleteTemplate, readOnly, excludeAddons, }: PipelineBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detection class colors — single source of truth.
+ *
+ * Used by: DetectionCanvas (UI), result-annotator (server-side SVG),
+ * admin-ui event viewer, and any other place that visualizes detections.
+ */
+/** Fixed colors for known detection classes */
+declare const CLASS_COLORS: Readonly<Record<string, string>>;
+/** Primary/default color when nothing else matches */
+declare const DEFAULT_COLOR = "#f59e42";
+/**
+ * Get the color for a detection class name.
+ * Returns a fixed color for known classes, or a deterministic hash-based color for unknown ones.
+ */
+declare function getClassColor(className: string, customColors?: Readonly<Record<string, string>>): string;
+
+/** @deprecated Use CLASS_COLORS from detection-colors instead */
+declare const DEFAULT_CLASS_COLORS: Readonly<Record<string, string>>;
+
+interface Detection {
+    /** Display class name (e.g., 'person', 'vehicle', 'face') */
+    readonly className: string;
+    /** Confidence score 0-1 */
+    readonly confidence: number;
+    /** Bounding box [x1, y1, x2, y2] in pixel coordinates */
+    readonly bbox: readonly [number, number, number, number];
+    /** Sub-detections from cropper steps (face box, plate box) — for debug */
+    readonly children?: readonly Detection[];
+    /** Accumulated labels from all classifier/recognizer steps */
+    readonly labelsData?: readonly LabelData[];
+    /** Base64-encoded binary segmentation mask (from -seg models) */
+    readonly mask?: string;
+    /** Mask pixel width */
+    readonly maskWidth?: number;
+    /** Mask pixel height */
+    readonly maskHeight?: number;
+}
+interface DetectionCanvasProps {
+    /** Image source (data URL or regular URL) */
+    readonly src: string | null;
+    /** Image dimensions (used for bbox coordinate mapping) */
+    readonly imageWidth: number;
+    readonly imageHeight: number;
+    /** Detections to overlay */
+    readonly detections?: readonly Detection[];
+    /** Custom class → hex color mapping (merged with defaults) */
+    readonly classColors?: Readonly<Record<string, string>>;
+    /** Aspect ratio CSS value (default: auto based on image dimensions) */
+    readonly aspectRatio?: string;
+    /** Additional CSS classes on the container */
+    readonly className?: string;
+    /** Placeholder content when no image is loaded */
+    readonly placeholder?: ReactNode;
+    /** Show confidence percentage in bbox labels */
+    readonly showConfidence?: boolean;
+    /** Minimum confidence to display (0-1, default: 0) */
+    readonly minConfidence?: number;
+    /** Border width for bboxes in px (default: 2) */
+    readonly borderWidth?: number;
+}
+declare function DetectionCanvas({ src, imageWidth, imageHeight, detections, classColors, aspectRatio, className, placeholder, showConfidence, minConfidence, borderWidth, }: DetectionCanvasProps): react_jsx_runtime.JSX.Element;
+
+interface DetectionResultTreeProps {
+    readonly detections: readonly Detection[];
+    readonly classColors?: Readonly<Record<string, string>>;
+    readonly className?: string;
+    /** Set of detection path keys that are hidden (e.g., "0", "0.1", "0.1.2") */
+    readonly hiddenKeys?: ReadonlySet<string>;
+    /** Callback when a detection's visibility is toggled */
+    readonly onToggleVisibility?: (key: string, visible: boolean) => void;
+}
+declare function DetectionResultTree({ detections, classColors, className, hiddenKeys, onToggleVisibility, }: DetectionResultTreeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StepTimings — displays pipeline execution timings per step.
+ */
+interface StepTimingsProps {
+    readonly timings: Readonly<Record<string, number>>;
+    readonly totalMs?: number;
+    readonly className?: string;
+}
+declare function StepTimings({ timings, totalMs, className }: StepTimingsProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * ImageSelector — select from reference images or upload custom image.
+ * Used by benchmark Image Tester and any addon page that needs image input.
+ */
+interface ReferenceImage {
+    readonly id: string;
+    readonly filename: string;
+    readonly sizeKB?: number;
+}
+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;
+}
+declare function ImageSelector({ images, selectedFilename, uploadedName, onSelect, onUpload, className, }: ImageSelectorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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.
+ */
+interface InferenceBackendOption {
+    readonly id: string;
+    readonly label: string;
+    readonly available: boolean;
+}
+interface InferenceModelOption {
+    readonly id: string;
+    readonly name: string;
+    readonly downloaded?: boolean;
+}
+interface InferenceAgentOption {
+    readonly id: string;
+    readonly name: string;
+    readonly status: 'online' | 'offline' | 'busy';
+}
+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;
+}
+declare function InferenceConfigSelector({ runtime, backend, modelId, agentId, runtimes, backends, models, agents, onRuntimeChange, onBackendChange, onModelChange, onAgentChange, layout, className, showAgent, }: InferenceConfigSelectorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Standard props for addon page components.
+ *
+ * Every addon page receives these props from the AddonPageLoader in admin-ui.
+ * Use this type for your page's default export:
+ *
+ * ```tsx
+ * import type { AddonPageProps } from '@camstack/ui'
+ *
+ * export default function MyAddonPage({ trpc, theme, navigate }: AddonPageProps) {
+ *   return <div>Hello from my addon!</div>
+ * }
+ * ```
+ */
+interface AddonPageProps {
+    /** tRPC client — fully typed access to all backend routes */
+    readonly trpc: any;
+    /** Current theme state */
+    readonly theme: {
+        readonly isDark: boolean;
+    };
+    /** Navigate to a route within the admin UI */
+    readonly navigate: (path: string) => void;
+}
+
+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
+ */
+declare function mountAddonPage(PageComponent: (props: AddonPageProps) => any, options?: MountAddonPageOptions): void;
+
+interface LoginFormProps {
+    onLogin: (username: string, password: string) => Promise<void>;
+    serverUrl?: string;
+    logoSrc?: string;
+    error?: string;
+    className?: string;
+}
+declare function LoginForm({ onLogin, serverUrl, logoSrc, error: externalError, className, }: LoginFormProps): react_jsx_runtime.JSX.Element;
+
+interface DevShellProps {
+    children: (props: {
+        trpc: ReturnType<typeof createTRPCClient>;
+        theme: UseThemeModeReturn;
+    }) => ReactNode;
+    serverUrl?: string;
+    title?: string;
+}
+interface DevShellContextValue {
+    trpc: ReturnType<typeof createTRPCClient>;
+    token: string;
+    logout: () => void;
+}
+declare function useDevShell(): DevShellContextValue;
+declare function DevShell({ children, serverUrl, title, }: DevShellProps): react_jsx_runtime.JSX.Element;
+
+export { type AddonPageProps, AppShell, type AppShellProps, Badge, type BadgeProps, Button, type ButtonProps, CLASS_COLORS, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmDialog, type ConfirmDialogProps, DEFAULT_CLASS_COLORS, DEFAULT_COLOR, DataTable, type DataTableAction, type DataTableProps, type Detection, DetectionCanvas, type DetectionCanvasProps, DetectionResultTree, type DetectionResultTreeProps, DevShell, type DevShellProps, DeviceCard, type DeviceCardAction, type DeviceCardBadge, type DeviceCardProps, DeviceGrid, type DeviceGridProps, Dialog, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownItem, DropdownTrigger, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterDef, FloatingPanel, type FloatingPanelProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, ImageSelector, type ImageSelectorProps, type InferenceAgentOption, type InferenceBackendOption, InferenceConfigSelector, type InferenceConfigSelectorProps, type InferenceModelOption, Input, type InputProps, KeyValueList, type KeyValueListProps, Label, type LabelProps, LoginForm, type LoginFormProps, type MountAddonPageOptions, PageHeader, type PageHeaderProps, PipelineBuilder, type PipelineBuilderProps, type PipelineRuntimeOption, PipelineRuntimeSelector, PipelineStep, type PipelineStepDisplayConfig, type PipelineStepProps, Popover, PopoverContent, PopoverTrigger, ProviderBadge, type ProviderBadgeProps, type ProviderType, type ReferenceImage, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, SemanticBadge, type SemanticBadgeProps, type SemanticBadgeVariant, Separator, type SeparatorProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusType, StepTimings, type StepTimingsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, UseThemeModeReturn, VersionBadge, type VersionBadgeProps, cn, getClassColor, mountAddonPage, providerIcons, statusIcons, useDevShell };

package/dist/index.d.ts

@@ -1,13 +1,16 @@
-export { CamStackColorTokens, CamStackTheme, DeepPartial, ThemeMode, ThemeProvider, UseThemeModeReturn, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode } from './theme/index.js';
+import { UseThemeModeReturn } from './theme/index.js';
+export { CamStackColorTokens, CamStackTheme, DeepPartial, ThemeMode, ThemeProvider, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode } from './theme/index.js';
 import { ClassValue } from 'clsx';
 import { LucideIcon } from 'lucide-react';
 import * as react from 'react';
-import { ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+import react__default, { ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, SortingState, ColumnFiltersState, PaginationState } from '@tanstack/react-table';
 export { ColumnDef, ColumnFiltersState, PaginationState, SortingState } from '@tanstack/react-table';
+import { PipelineSlot, PipelineAddonSchema, InferenceCapabilities, PipelineSchema, PipelineTemplate, LabelData } from '@camstack/types';
+import { createTRPCClient } from '@trpc/client';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -198,6 +201,30 @@ interface ProviderBadgeProps {
 }
 declare function ProviderBadge({ provider, showLabel, className, }: ProviderBadgeProps): react_jsx_runtime.JSX.Element;
 
+type SemanticBadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface SemanticBadgeProps {
+    children: react__default.ReactNode;
+    variant?: SemanticBadgeVariant;
+    /** Use monospace font (good for versions, codes) */
+    mono?: boolean;
+    className?: string;
+}
+/**
+ * General-purpose badge with semantic color variants.
+ * Solid background with dark text for maximum contrast.
+ */
+declare function SemanticBadge({ children, variant, mono, className }: SemanticBadgeProps): react_jsx_runtime.JSX.Element;
+interface VersionBadgeProps {
+    version: string;
+    preRelease?: boolean;
+    className?: string;
+}
+/**
+ * Version badge — auto-detects pre-release versions.
+ * Stable = success (green), Pre-release = warning (amber).
+ */
+declare function VersionBadge({ version, preRelease, className }: VersionBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface FormFieldProps {
     label: string;
     description?: string;
@@ -412,4 +439,278 @@ interface DeviceGridProps {
 }
 declare function DeviceGrid({ children, minCardWidth, gap, className, }: DeviceGridProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableAction, type DataTableProps, DeviceCard, type DeviceCardAction, type DeviceCardBadge, type DeviceCardProps, DeviceGrid, type DeviceGridProps, Dialog, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownItem, DropdownTrigger, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterDef, FloatingPanel, type FloatingPanelProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, KeyValueList, type KeyValueListProps, Label, type LabelProps, PageHeader, type PageHeaderProps, Popover, PopoverContent, PopoverTrigger, ProviderBadge, type ProviderBadgeProps, type ProviderType, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusType, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, cn, providerIcons, statusIcons };
+interface PipelineStepDisplayConfig {
+    readonly addonId: string;
+    readonly addonName: string;
+    readonly slot: PipelineSlot;
+    readonly inputClasses: readonly string[];
+    readonly outputClasses: readonly string[];
+    readonly enabled: boolean;
+    readonly agentId: string;
+    readonly runtime: string;
+    readonly backend: string;
+    readonly modelId: string;
+    readonly confidence: number;
+    readonly classFilters: readonly string[];
+    readonly children: readonly PipelineStepDisplayConfig[];
+}
+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 capabilities: InferenceCapabilities;
+    readonly depth?: number;
+    readonly onChange: (updated: PipelineStepDisplayConfig) => void;
+    readonly onDelete?: (addonId: string) => void;
+    readonly readOnly?: boolean;
+}
+declare function PipelineStep({ step, schema, allSchemas, capabilities, depth, onChange, onDelete, readOnly, }: PipelineStepProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+declare function PipelineRuntimeSelector({ options, value, onChange }: PipelineRuntimeSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface PipelineBuilderProps {
+    readonly schema: PipelineSchema;
+    readonly capabilities: InferenceCapabilities;
+    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[];
+}
+declare function PipelineBuilder({ schema, capabilities, steps, onChange, templates, selectedTemplateId, onSelectTemplate, onSaveTemplate, onUpdateTemplate, onDeleteTemplate, readOnly, excludeAddons, }: PipelineBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detection class colors — single source of truth.
+ *
+ * Used by: DetectionCanvas (UI), result-annotator (server-side SVG),
+ * admin-ui event viewer, and any other place that visualizes detections.
+ */
+/** Fixed colors for known detection classes */
+declare const CLASS_COLORS: Readonly<Record<string, string>>;
+/** Primary/default color when nothing else matches */
+declare const DEFAULT_COLOR = "#f59e42";
+/**
+ * Get the color for a detection class name.
+ * Returns a fixed color for known classes, or a deterministic hash-based color for unknown ones.
+ */
+declare function getClassColor(className: string, customColors?: Readonly<Record<string, string>>): string;
+
+/** @deprecated Use CLASS_COLORS from detection-colors instead */
+declare const DEFAULT_CLASS_COLORS: Readonly<Record<string, string>>;
+
+interface Detection {
+    /** Display class name (e.g., 'person', 'vehicle', 'face') */
+    readonly className: string;
+    /** Confidence score 0-1 */
+    readonly confidence: number;
+    /** Bounding box [x1, y1, x2, y2] in pixel coordinates */
+    readonly bbox: readonly [number, number, number, number];
+    /** Sub-detections from cropper steps (face box, plate box) — for debug */
+    readonly children?: readonly Detection[];
+    /** Accumulated labels from all classifier/recognizer steps */
+    readonly labelsData?: readonly LabelData[];
+    /** Base64-encoded binary segmentation mask (from -seg models) */
+    readonly mask?: string;
+    /** Mask pixel width */
+    readonly maskWidth?: number;
+    /** Mask pixel height */
+    readonly maskHeight?: number;
+}
+interface DetectionCanvasProps {
+    /** Image source (data URL or regular URL) */
+    readonly src: string | null;
+    /** Image dimensions (used for bbox coordinate mapping) */
+    readonly imageWidth: number;
+    readonly imageHeight: number;
+    /** Detections to overlay */
+    readonly detections?: readonly Detection[];
+    /** Custom class → hex color mapping (merged with defaults) */
+    readonly classColors?: Readonly<Record<string, string>>;
+    /** Aspect ratio CSS value (default: auto based on image dimensions) */
+    readonly aspectRatio?: string;
+    /** Additional CSS classes on the container */
+    readonly className?: string;
+    /** Placeholder content when no image is loaded */
+    readonly placeholder?: ReactNode;
+    /** Show confidence percentage in bbox labels */
+    readonly showConfidence?: boolean;
+    /** Minimum confidence to display (0-1, default: 0) */
+    readonly minConfidence?: number;
+    /** Border width for bboxes in px (default: 2) */
+    readonly borderWidth?: number;
+}
+declare function DetectionCanvas({ src, imageWidth, imageHeight, detections, classColors, aspectRatio, className, placeholder, showConfidence, minConfidence, borderWidth, }: DetectionCanvasProps): react_jsx_runtime.JSX.Element;
+
+interface DetectionResultTreeProps {
+    readonly detections: readonly Detection[];
+    readonly classColors?: Readonly<Record<string, string>>;
+    readonly className?: string;
+    /** Set of detection path keys that are hidden (e.g., "0", "0.1", "0.1.2") */
+    readonly hiddenKeys?: ReadonlySet<string>;
+    /** Callback when a detection's visibility is toggled */
+    readonly onToggleVisibility?: (key: string, visible: boolean) => void;
+}
+declare function DetectionResultTree({ detections, classColors, className, hiddenKeys, onToggleVisibility, }: DetectionResultTreeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StepTimings — displays pipeline execution timings per step.
+ */
+interface StepTimingsProps {
+    readonly timings: Readonly<Record<string, number>>;
+    readonly totalMs?: number;
+    readonly className?: string;
+}
+declare function StepTimings({ timings, totalMs, className }: StepTimingsProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * ImageSelector — select from reference images or upload custom image.
+ * Used by benchmark Image Tester and any addon page that needs image input.
+ */
+interface ReferenceImage {
+    readonly id: string;
+    readonly filename: string;
+    readonly sizeKB?: number;
+}
+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;
+}
+declare function ImageSelector({ images, selectedFilename, uploadedName, onSelect, onUpload, className, }: ImageSelectorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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.
+ */
+interface InferenceBackendOption {
+    readonly id: string;
+    readonly label: string;
+    readonly available: boolean;
+}
+interface InferenceModelOption {
+    readonly id: string;
+    readonly name: string;
+    readonly downloaded?: boolean;
+}
+interface InferenceAgentOption {
+    readonly id: string;
+    readonly name: string;
+    readonly status: 'online' | 'offline' | 'busy';
+}
+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;
+}
+declare function InferenceConfigSelector({ runtime, backend, modelId, agentId, runtimes, backends, models, agents, onRuntimeChange, onBackendChange, onModelChange, onAgentChange, layout, className, showAgent, }: InferenceConfigSelectorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Standard props for addon page components.
+ *
+ * Every addon page receives these props from the AddonPageLoader in admin-ui.
+ * Use this type for your page's default export:
+ *
+ * ```tsx
+ * import type { AddonPageProps } from '@camstack/ui'
+ *
+ * export default function MyAddonPage({ trpc, theme, navigate }: AddonPageProps) {
+ *   return <div>Hello from my addon!</div>
+ * }
+ * ```
+ */
+interface AddonPageProps {
+    /** tRPC client — fully typed access to all backend routes */
+    readonly trpc: any;
+    /** Current theme state */
+    readonly theme: {
+        readonly isDark: boolean;
+    };
+    /** Navigate to a route within the admin UI */
+    readonly navigate: (path: string) => void;
+}
+
+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
+ */
+declare function mountAddonPage(PageComponent: (props: AddonPageProps) => any, options?: MountAddonPageOptions): void;
+
+interface LoginFormProps {
+    onLogin: (username: string, password: string) => Promise<void>;
+    serverUrl?: string;
+    logoSrc?: string;
+    error?: string;
+    className?: string;
+}
+declare function LoginForm({ onLogin, serverUrl, logoSrc, error: externalError, className, }: LoginFormProps): react_jsx_runtime.JSX.Element;
+
+interface DevShellProps {
+    children: (props: {
+        trpc: ReturnType<typeof createTRPCClient>;
+        theme: UseThemeModeReturn;
+    }) => ReactNode;
+    serverUrl?: string;
+    title?: string;
+}
+interface DevShellContextValue {
+    trpc: ReturnType<typeof createTRPCClient>;
+    token: string;
+    logout: () => void;
+}
+declare function useDevShell(): DevShellContextValue;
+declare function DevShell({ children, serverUrl, title, }: DevShellProps): react_jsx_runtime.JSX.Element;
+
+export { type AddonPageProps, AppShell, type AppShellProps, Badge, type BadgeProps, Button, type ButtonProps, CLASS_COLORS, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmDialog, type ConfirmDialogProps, DEFAULT_CLASS_COLORS, DEFAULT_COLOR, DataTable, type DataTableAction, type DataTableProps, type Detection, DetectionCanvas, type DetectionCanvasProps, DetectionResultTree, type DetectionResultTreeProps, DevShell, type DevShellProps, DeviceCard, type DeviceCardAction, type DeviceCardBadge, type DeviceCardProps, DeviceGrid, type DeviceGridProps, Dialog, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownItem, DropdownTrigger, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterDef, FloatingPanel, type FloatingPanelProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, ImageSelector, type ImageSelectorProps, type InferenceAgentOption, type InferenceBackendOption, InferenceConfigSelector, type InferenceConfigSelectorProps, type InferenceModelOption, Input, type InputProps, KeyValueList, type KeyValueListProps, Label, type LabelProps, LoginForm, type LoginFormProps, type MountAddonPageOptions, PageHeader, type PageHeaderProps, PipelineBuilder, type PipelineBuilderProps, type PipelineRuntimeOption, PipelineRuntimeSelector, PipelineStep, type PipelineStepDisplayConfig, type PipelineStepProps, Popover, PopoverContent, PopoverTrigger, ProviderBadge, type ProviderBadgeProps, type ProviderType, type ReferenceImage, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, SemanticBadge, type SemanticBadgeProps, type SemanticBadgeVariant, Separator, type SeparatorProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusType, StepTimings, type StepTimingsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger, UseThemeModeReturn, VersionBadge, type VersionBadgeProps, cn, getClassColor, mountAddonPage, providerIcons, statusIcons, useDevShell };