@camstack/ui-library 0.1.29 → 0.1.30

package/dist/index.d.ts

@@ -1,716 +0,0 @@
-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 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;
-
-type ProviderType = 'frigate' | 'scrypted' | 'reolink' | 'homeAssistant' | 'rtsp';
-declare const providerIcons: Record<ProviderType, LucideIcon>;
-
-type StatusType = 'online' | 'offline' | 'degraded' | 'unknown';
-declare const statusIcons: Record<StatusType, LucideIcon>;
-
-declare const buttonVariants: (props?: ({
-    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-}
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
-declare const iconButtonVariants: (props?: ({
-    variant?: "primary" | "danger" | "secondary" | "ghost" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonVariants> {
-    icon: LucideIcon;
-    'aria-label': string;
-}
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
-declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
-    styleVariant?: "outline" | "solid" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {
-    style?: 'solid' | 'outline';
-}
-declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
-
-declare const cardVariants: (props?: ({
-    variant?: "flat" | "bordered" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-}
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
-
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-}
-declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
-
-declare const separatorVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SeparatorProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
-}
-declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
-
-interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-}
-declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const inputVariants: (props?: ({
-    state?: "default" | "error" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
-    leftSlot?: ReactNode;
-    rightSlot?: ReactNode;
-}
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
-
-interface SelectOption {
-    value: string;
-    label: string;
-}
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    options: SelectOption[];
-}
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
-
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-}
-declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
-
-interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
-    checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
-    label?: string;
-}
-declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface DialogProps {
-    children: ReactNode;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-declare function Dialog({ children, open: controlledOpen, onOpenChange }: DialogProps): react_jsx_runtime.JSX.Element;
-declare function DialogTrigger({ children, ...props }: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
-declare const contentVariants: (props?: ({
-    width?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface DialogContentProps extends HTMLAttributes<HTMLDialogElement>, VariantProps<typeof contentVariants> {
-}
-declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDialogElement>>;
-declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function DialogTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function DialogDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
-
-declare function Dropdown({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
-declare function DropdownContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
-interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    icon?: LucideIcon;
-    variant?: 'default' | 'danger';
-}
-declare function DropdownItem({ className, icon: Icon, variant, children, onClick, ...props }: DropdownItemProps): react_jsx_runtime.JSX.Element;
-
-declare function Tooltip({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function TooltipTrigger({ children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-
-interface PopoverProps {
-    children: ReactNode;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-declare function Popover({ children, open: controlledOpen, onOpenChange }: PopoverProps): react_jsx_runtime.JSX.Element;
-declare function PopoverTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
-declare function PopoverContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
-
-interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-    value?: string;
-    onValueChange?: (value: string) => void;
-    defaultValue?: string;
-}
-declare function Tabs({ value: controlledValue, onValueChange, defaultValue, className, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
-declare function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    value: string;
-}
-declare function TabsTrigger({ value, className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
-interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
-    value: string;
-}
-declare function TabsContent({ value, className, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
-
-interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
-}
-declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
-
-interface FloatingPanelProps {
-    /** Panel title displayed in the title bar */
-    title: string;
-    /** Called when the close button is clicked */
-    onClose: () => void;
-    /** Panel content */
-    children: ReactNode;
-    /** Default width in pixels */
-    defaultWidth?: number;
-    /** Default height in pixels */
-    defaultHeight?: number;
-    /** Minimum width in pixels */
-    minWidth?: number;
-    /** Minimum height in pixels */
-    minHeight?: number;
-    /** Offset index to stagger multiple panels (adds 30px offset per index) */
-    offsetIndex?: number;
-    /** Additional CSS classes for the panel container */
-    className?: string;
-}
-declare function FloatingPanel({ title, onClose, children, defaultWidth, defaultHeight, minWidth, minHeight, offsetIndex, className, }: FloatingPanelProps): react_jsx_runtime.JSX.Element;
-
-type Status = 'online' | 'offline' | 'degraded' | 'unknown';
-interface StatusBadgeProps {
-    status: Status;
-    showDot?: boolean;
-    showLabel?: boolean;
-    size?: 'sm' | 'md';
-    className?: string;
-}
-declare function StatusBadge({ status, showDot, showLabel, size, className, }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
-
-interface ProviderBadgeProps {
-    provider: ProviderType;
-    showLabel?: boolean;
-    className?: string;
-}
-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;
-    error?: string;
-    required?: boolean;
-    children: ReactNode;
-    orientation?: 'vertical' | 'horizontal';
-    className?: string;
-}
-declare function FormField({ label, description, error, required, children, orientation, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
-
-interface PageHeaderProps {
-    title: string;
-    subtitle?: string;
-    actions?: ReactNode;
-    className?: string;
-}
-declare function PageHeader({ title, subtitle, actions, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
-
-interface EmptyStateProps {
-    icon?: LucideIcon;
-    title: string;
-    description?: string;
-    action?: ReactNode;
-    className?: string;
-}
-declare function EmptyState({ icon: Icon, title, description, action, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
-
-interface ConfirmDialogProps {
-    title: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    onConfirm: () => void;
-    onCancel: () => void;
-    variant?: 'danger' | 'default';
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-}
-declare function ConfirmDialog({ title, message, confirmLabel, cancelLabel, onConfirm, onCancel, variant, open, onOpenChange, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
-
-interface StatCardProps {
-    value: string | number;
-    label: string;
-    trend?: {
-        value: number;
-        direction: 'up' | 'down';
-    };
-    className?: string;
-}
-declare function StatCard({ value, label, trend, className }: StatCardProps): react_jsx_runtime.JSX.Element;
-
-interface KeyValueListProps {
-    items: {
-        key: string;
-        value: ReactNode;
-    }[];
-    className?: string;
-}
-declare function KeyValueList({ items, className }: KeyValueListProps): react_jsx_runtime.JSX.Element;
-
-interface CodeBlockProps {
-    children: string;
-    maxHeight?: number;
-    className?: string;
-}
-declare function CodeBlock({ children, maxHeight, className }: CodeBlockProps): react_jsx_runtime.JSX.Element;
-
-type FilterDef = {
-    type: 'search';
-    key: string;
-    placeholder?: string;
-} | {
-    type: 'select';
-    key: string;
-    label: string;
-    options: {
-        value: string;
-        label: string;
-    }[];
-} | {
-    type: 'badge-toggle';
-    key: string;
-    options: {
-        value: string;
-        label: string;
-    }[];
-};
-
-interface FilterBarProps {
-    filters: FilterDef[];
-    values: Record<string, unknown>;
-    onChange: (values: Record<string, unknown>) => void;
-    className?: string;
-}
-declare function FilterBar({ filters, values, onChange, className }: FilterBarProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarItemProps {
-    label: string;
-    icon: LucideIcon;
-    href: string;
-    badge?: string | number;
-    active?: boolean;
-    className?: string;
-}
-declare function SidebarItem({ label, icon: Icon, href, badge, active, className, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarSection {
-    label?: string;
-    items: SidebarItemProps[];
-}
-interface SidebarProps {
-    logo?: ReactNode;
-    sections: SidebarSection[];
-    footer?: SidebarItemProps[];
-    className?: string;
-}
-declare function Sidebar({ logo, sections, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-interface AppShellProps {
-    sidebar: SidebarProps;
-    header?: {
-        breadcrumbs?: {
-            label: string;
-            href?: string;
-        }[];
-        actions?: ReactNode;
-    };
-    children: ReactNode;
-    className?: string;
-}
-declare function AppShell({ sidebar, header, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
-
-interface DataTableAction {
-    label: string;
-    icon?: LucideIcon;
-    onClick: () => void;
-    variant?: 'danger' | 'default';
-}
-interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T, unknown>[];
-    sorting?: SortingState;
-    onSortingChange?: (sorting: SortingState) => void;
-    filtering?: ColumnFiltersState;
-    onFilteringChange?: (filtering: ColumnFiltersState) => void;
-    pagination?: {
-        page: number;
-        pageSize: number;
-        total: number;
-    };
-    onPaginationChange?: (pagination: PaginationState) => void;
-    loading?: boolean;
-    emptyState?: ReactNode;
-    rowActions?: (row: T) => DataTableAction[];
-    onRowClick?: (row: T) => void;
-    selectable?: boolean;
-    compact?: boolean;
-    stickyHeader?: boolean;
-    className?: string;
-}
-
-declare function DataTable<T>({ data, columns: userColumns, sorting, onSortingChange, filtering, onFilteringChange, pagination, onPaginationChange, loading, emptyState, rowActions, onRowClick, selectable, compact, stickyHeader, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
-
-interface DeviceCardBadge {
-    /** Badge label text */
-    label: string;
-    /** Optional icon rendered before the label */
-    icon?: ReactNode;
-    /** Click handler — makes the badge interactive */
-    onClick?: () => void;
-}
-interface DeviceCardAction {
-    /** Icon to render */
-    icon: ReactNode;
-    /** Tooltip / aria-label */
-    label: string;
-    /** Click handler */
-    onClick: () => void;
-}
-interface DeviceCardProps {
-    /** Primary title (e.g., device name) */
-    title: string;
-    /** Secondary text (e.g., model, IP) */
-    subtitle?: string;
-    /** Status: determines the color of the status dot */
-    status?: 'online' | 'offline' | 'warning' | 'unknown';
-    /** Whether this card is currently selected */
-    selected?: boolean;
-    /** Click handler for the card body */
-    onClick?: () => void;
-    /** Clickable badges (e.g., stream profiles) */
-    badges?: DeviceCardBadge[];
-    /** Action icons shown at the bottom (e.g., PTZ, events) */
-    actions?: DeviceCardAction[];
-    /** Content rendered at the bottom when status is offline (e.g., Connect button) */
-    offlineAction?: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-declare function DeviceCard({ title, subtitle, status, selected, onClick, badges, actions, offlineAction, className, }: DeviceCardProps): react_jsx_runtime.JSX.Element;
-
-interface DeviceGridProps {
-    /** Grid items */
-    children: ReactNode;
-    /** Minimum card width in pixels (default 220) */
-    minCardWidth?: number;
-    /** Gap between cards in Tailwind spacing units (default 3) */
-    gap?: number;
-    /** Additional CSS classes */
-    className?: string;
-}
-declare function DeviceGrid({ children, minCardWidth, gap, className, }: DeviceGridProps): react_jsx_runtime.JSX.Element;
-
-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 };