@superdangerous/app-framework 4.9.0

package/ui/dist/index.d.mts

@@ -0,0 +1,1221 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { LucideIcon } from 'lucide-react';
+export { Activity, AlertCircle, AlertTriangle, Archive, ArrowLeft, ArrowRight, BarChart, Bot, Brain, Building2, Calendar, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, Clock, Coffee, Copy, Cpu, Database, Download, Edit, Eye, EyeOff, File, FileCode, FileText, Filter, Folder, FolderOpen, Gauge, GitBranch, Globe, Grid3x3, HardDrive, HelpCircle, Home, Info, Key, Keyboard, Layers, LayoutDashboard, Lightbulb, LineChart, Loader2, Lock, LogOut, LucideIcon, Menu, MessageSquare, Monitor, Moon, MoreHorizontal, MoreVertical, Package, Palette, Paperclip, Pause, PieChart, Play, PlayCircle, Plus, RefreshCw, Save, Search, Send, Server, Settings, Shield, SkipForward, Smartphone, Sparkles, Square, StopCircle, Sun, Tag, Target, Terminal, Trash2, TrendingDown, TrendingUp, Trophy, Undo, Unlock, Upload, User, UserCheck, UserPlus, Users, Volume2, Wifi, WifiOff, X, XCircle, Zap } from 'lucide-react';
+import { ManagerOptions, SocketOptions, Socket } from 'socket.io-client';
+import { ClassValue } from 'clsx';
+
+declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Simple Card Component
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare function Card({ children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardContent({ children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
+
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface LoginPageConfig {
+    apiEndpoint?: string;
+    logoSrc?: string;
+    fallbackLogoSrc?: string;
+    appTitle?: string;
+    subtitle?: string;
+    showLanguageSelector?: boolean;
+    showPoweredBy?: boolean;
+    poweredByLogo?: string;
+    poweredByText?: string;
+    onLoginSuccess?: () => void;
+    onLoginError?: (error: string) => void;
+    customStyles?: {
+        container?: string;
+        card?: string;
+        logo?: string;
+        title?: string;
+        subtitle?: string;
+        errorMessage?: string;
+        input?: string;
+        button?: string;
+    };
+}
+interface LoginPageProps extends LoginPageConfig {
+    navigate: (path: string) => void;
+}
+declare function LoginPage({ apiEndpoint, logoSrc, fallbackLogoSrc, appTitle, subtitle, showLanguageSelector, showPoweredBy, poweredByLogo, poweredByText, onLoginSuccess, onLoginError, customStyles, navigate }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
+interface ProtectedRouteProps {
+    children: React__default.ReactNode;
+    loginPath?: string;
+    authEndpoint?: string;
+    loadingComponent?: React__default.ReactNode;
+}
+/**
+ * Protected route component that checks authentication before rendering children
+ * Redirects to login page if not authenticated
+ */
+declare function ProtectedRoute({ children, loginPath, authEndpoint, loadingComponent }: ProtectedRouteProps): string | number | true | react_jsx_runtime.JSX.Element | Iterable<React__default.ReactNode>;
+
+interface LogsPageProps {
+    apiUrl?: string;
+    title?: string;
+    description?: string;
+}
+declare function LogsPage({ apiUrl, title, description }: LogsPageProps): react_jsx_runtime.JSX.Element;
+
+interface SettingDefinition$1 {
+    key: string;
+    label: string;
+    description?: string;
+    type: 'text' | 'password' | 'number' | 'boolean' | 'select' | 'custom';
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    defaultValue?: any;
+    validation?: (value: any) => string | null;
+    requiresRestart?: boolean;
+    customComponent?: ReactNode;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+}
+interface SettingsCategory$1 {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    settings: SettingDefinition$1[];
+}
+interface SettingsPageProps {
+    categories: SettingsCategory$1[];
+    values: Record<string, any>;
+    loading?: boolean;
+    saving?: boolean;
+    onSave: (values: Record<string, any>) => Promise<void>;
+    onReset?: () => void;
+    onRestart?: () => void;
+    showRestartBanner?: boolean;
+    className?: string;
+    title?: string;
+}
+declare function SettingsPage({ categories, values: initialValues, loading, saving, onSave, onReset, onRestart, showRestartBanner, className, title }: SettingsPageProps): react_jsx_runtime.JSX.Element;
+
+interface ConnectionStatusProps {
+    url?: string;
+    className?: string;
+    checkInterval?: number;
+}
+/**
+ * Connection status indicator with a calm, pulsing LED beacon
+ * Shows WebSocket connection status between frontend and backend
+ */
+declare function ConnectionStatus$1({ url, className, checkInterval }: ConnectionStatusProps): react_jsx_runtime.JSX.Element;
+
+interface ConnectionLostOverlayProps {
+    isConnected: boolean;
+    appName?: string;
+    onRetry?: () => void;
+}
+declare function ConnectionLostOverlay({ isConnected, appName, onRetry }: ConnectionLostOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+interface ConnectionOverlayProps {
+    isConnected: boolean;
+    onRetry: () => void;
+}
+declare function ConnectionOverlay({ isConnected, onRetry }: ConnectionOverlayProps): JSX.Element | null;
+
+interface ConnectionStatusBannerProps {
+    connected: boolean;
+    connecting: boolean;
+    transport: 'websocket' | 'polling' | null;
+    apiReady?: boolean;
+}
+/**
+ * Enhanced connection status banner that shows different states:
+ * - Green: WebSocket connected (optimal)
+ * - Blue: Polling connected (HTTP/2 fallback, fully functional)
+ * - Yellow: Connecting/reconnecting
+ * - Hidden: Disconnected (handled by ConnectionLostOverlay)
+ */
+declare function ConnectionStatusBanner({ connected, connecting, transport, apiReady }: ConnectionStatusBannerProps): react_jsx_runtime.JSX.Element | null;
+
+interface RestartBannerProps {
+    show: boolean;
+    onRestart?: () => void;
+    onDismiss?: () => void;
+    className?: string;
+}
+declare function RestartBanner({ show, onRestart, onDismiss, className }: RestartBannerProps): react_jsx_runtime.JSX.Element | null;
+
+interface TestModeIndicatorProps {
+    config?: any;
+    className?: string;
+}
+declare function TestModeIndicator({ config }?: TestModeIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
+interface ConnectionIndicatorProps {
+    connected: boolean;
+    connecting: boolean;
+    error: Error | null;
+    retryCount: number;
+    onRetry?: () => void;
+    className?: string;
+}
+declare function ConnectionIndicator({ connected, connecting, error, retryCount, onRetry, className }: ConnectionIndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface DeviceIconProps {
+    category?: string;
+    className?: string;
+    size?: number;
+}
+declare function DeviceIcon({ category, className, size }: DeviceIconProps): react_jsx_runtime.JSX.Element;
+
+interface DogEarBadgeProps {
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: React.ReactNode;
+    color?: 'purple' | 'blue' | 'green' | 'red' | 'amber';
+}
+declare function DogEarBadge({ className, size, icon, color }: DogEarBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: {
+        label: string;
+        onClick: () => void;
+        icon?: React.ReactNode;
+    };
+    className?: string;
+}
+declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface NoTemplatesFoundProps {
+    onCreate?: () => void;
+}
+declare function NoTemplatesFound({ onCreate }: NoTemplatesFoundProps): react_jsx_runtime.JSX.Element;
+interface NoSearchResultsProps {
+    searchTerm?: string;
+    onClearFilters?: () => void;
+}
+declare function NoSearchResults({ searchTerm, onClearFilters }: NoSearchResultsProps): react_jsx_runtime.JSX.Element;
+interface NoSimulatorsRunningProps {
+    onNavigateToTemplates?: () => void;
+}
+declare function NoSimulatorsRunning({ onNavigateToTemplates }: NoSimulatorsRunningProps): react_jsx_runtime.JSX.Element;
+declare const EmptyStates: {
+    NoTemplatesFound: typeof NoTemplatesFound;
+    NoTemplatesMatchSearch: typeof NoSearchResults;
+    NoSimulatorsRunning: typeof NoSimulatorsRunning;
+};
+
+interface LoadingStateProps {
+    message?: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function LoadingState({ message, className, size }: LoadingStateProps): react_jsx_runtime.JSX.Element;
+declare function CardSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TableSkeleton({ rows }: {
+    rows?: number;
+}): react_jsx_runtime.JSX.Element;
+
+interface HelpTooltipProps {
+    content: string | React.ReactNode;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    iconClassName?: string;
+}
+declare function HelpTooltip({ content, title, size, align, side, className, iconClassName }: HelpTooltipProps): react_jsx_runtime.JSX.Element;
+
+interface NetworkInterfaceSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    apiUrl?: string;
+    endpoint?: string;
+    disabled?: boolean;
+    className?: string;
+    showRefresh?: boolean;
+    showNetworkInfo?: boolean;
+}
+declare function NetworkInterfaceSelect({ value, onChange, apiUrl, endpoint, disabled, className, showRefresh, showNetworkInfo }: NetworkInterfaceSelectProps): react_jsx_runtime.JSX.Element;
+
+interface MarkdownViewerProps {
+    content: string;
+    className?: string;
+    showCopyButton?: boolean;
+}
+declare function MarkdownViewer({ content, className, showCopyButton }: MarkdownViewerProps): react_jsx_runtime.JSX.Element;
+/**
+ * MarkdownViewer component wrapped in a Card
+ */
+declare function MarkdownCard({ content, className, title, ...props }: MarkdownViewerProps & {
+    title?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * MarkdownViewer component wrapped in a ScrollArea
+ */
+declare function MarkdownScrollArea({ content, className, height, ...props }: MarkdownViewerProps & {
+    height?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Date formatting utilities for displaying relative time
+ */
+/**
+ * Formats a date/timestamp as relative time (e.g., "2 minutes ago", "3 hours ago")
+ * @param date - Date object, timestamp string, or timestamp number
+ * @returns Formatted relative time string
+ */
+declare function formatRelativeTime(date: Date | string | number): string;
+/**
+ * Formats a date to a standard display format
+ * @param date - Date object, timestamp string, or timestamp number
+ * @param options - Intl.DateTimeFormatOptions for formatting
+ * @returns Formatted date string
+ */
+declare function formatDateTime(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Formats duration in seconds to human-readable format
+ * @param seconds - Duration in seconds
+ * @returns Formatted duration string (e.g., "2h 15m", "5d 3h")
+ */
+declare function formatDuration(seconds: number): string;
+/**
+ * Gets a short relative time label (e.g., "2m", "3h", "5d")
+ * @param date - Date object, timestamp string, or timestamp number
+ * @returns Short relative time string
+ */
+declare function formatShortRelativeTime(date: Date | string | number): string;
+
+declare function getTagColor(tag: string): {
+    bg: string;
+    text: string;
+    border: string;
+} | undefined;
+declare function getTagClassName(tag: string): string;
+
+declare function timeAgo(date: Date | string): string;
+
+/**
+ * API Readiness Utility
+ * Handles checking if the API server is ready before making requests
+ */
+interface ApiReadinessResult {
+    ready: boolean;
+    error?: string;
+    retryAfter?: number;
+}
+interface ApiReadinessOptions {
+    healthEndpoint?: string;
+    timeout?: number;
+    maxAttempts?: number;
+    initialDelay?: number;
+    maxDelay?: number;
+}
+/**
+ * Check if the API server is ready to accept requests
+ */
+declare function checkApiReadiness(apiUrl: string, timeout?: number): Promise<ApiReadinessResult>;
+/**
+ * Wait for API to be ready with exponential backoff
+ */
+declare function waitForApiReady(apiUrl: string, options?: ApiReadinessOptions): Promise<boolean>;
+/**
+ * Enhanced fetch with API readiness check
+ */
+declare function apiRequest<T = any>(apiUrl: string, endpoint: string, options?: RequestInit): Promise<T>;
+/**
+ * React Hook for API Readiness
+ */
+declare function useApiReadiness(apiUrl: string, options?: ApiReadinessOptions): {
+    ready: boolean;
+    error: string | null;
+    checking: boolean;
+};
+
+interface UseFormStateOptions<T> {
+    initialValues: T;
+    defaultValues?: T;
+    onSave: (values: T) => Promise<void>;
+    timeout?: number;
+    validateChanges?: (values: T) => boolean;
+}
+interface FormState<T> {
+    values: T;
+    isDirty: boolean;
+    isSaving: boolean;
+    error: string | null;
+    setValues: (values: T | ((prev: T) => T)) => void;
+    setFieldValue: <K extends keyof T>(field: K, value: T[K]) => void;
+    save: () => Promise<void>;
+    reset: () => void;
+    resetToDefaults: () => void;
+    canSave: boolean;
+}
+/**
+ * Custom hook for managing form state with dirty checking and save lifecycle
+ */
+declare function useFormState<T extends Record<string, any>>({ initialValues, defaultValues, onSave, timeout, validateChanges }: UseFormStateOptions<T>): FormState<T>;
+
+interface NavItem {
+    name: string;
+    href: string;
+    icon?: React__default.ReactNode;
+}
+interface AppLayoutProps {
+    appName: string;
+    appVersion?: string;
+    navigation: NavItem[];
+    children: React__default.ReactNode;
+    logoSrc?: string;
+    showLogout?: boolean;
+    onLogout?: () => void;
+    authenticated?: boolean;
+    connectionStatusUrl?: string;
+    className?: string;
+    primaryColor?: string;
+}
+/**
+ * Standardized application layout for web apps
+ * Provides consistent header, navigation, and connection status
+ */
+declare function AppLayout({ appName, appVersion, navigation, children, logoSrc, showLogout, onLogout, authenticated, connectionStatusUrl, className, primaryColor }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+/**
+ * Layout with sidebar navigation (alternative layout style)
+ */
+interface SidebarLayoutProps extends Omit<AppLayoutProps, 'primaryColor'> {
+    sidebarWidth?: number;
+}
+declare function SidebarLayout({ appName, appVersion, navigation, children, logoSrc, showLogout, onLogout, authenticated, connectionStatusUrl, sidebarWidth, className }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Activity LED Component
+ * Shows a status indicator with optional animation
+ */
+type LEDStatus = 'active' | 'inactive' | 'warning' | 'error' | 'success';
+interface ActivityLEDProps {
+    status: LEDStatus;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    animate?: boolean;
+    label?: string;
+    className?: string;
+}
+declare function ActivityLED({ status, size, animate, label, className }: ActivityLEDProps): react_jsx_runtime.JSX.Element;
+
+interface DataColumn<T> {
+    key: string;
+    label: string;
+    accessor: (item: T) => any;
+    render?: (value: any, item: T) => React.ReactNode;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface RealtimeDataTableProps<T> {
+    data: T[];
+    columns: DataColumn<T>[];
+    keyField: string;
+    title?: string;
+    description?: string;
+    showActivity?: boolean;
+    activityField?: string;
+    activityDecay?: number;
+    showSparkline?: boolean;
+    sparklineField?: string;
+    sparklineHistory?: Map<string, number[]>;
+    sparklineColor?: string;
+    showStatus?: boolean;
+    statusField?: string;
+    statusConfig?: {
+        [key: string]: {
+            label: string;
+            variant: 'default' | 'secondary' | 'destructive' | 'outline';
+            icon?: React.ReactNode;
+        };
+    };
+    expandable?: boolean;
+    childrenField?: string;
+    defaultExpanded?: boolean;
+    className?: string;
+    striped?: boolean;
+    hover?: boolean;
+    compact?: boolean;
+    onRowClick?: (item: T) => void;
+    onRefresh?: () => void;
+}
+declare function RealtimeDataTable<T extends Record<string, any>>({ data, columns, keyField, title, description, showActivity, activityField, activityDecay, showSparkline, sparklineField, sparklineHistory, sparklineColor, showStatus, statusField, statusConfig, expandable, childrenField, defaultExpanded, className, striped: _striped, hover, compact, onRowClick, onRefresh: _onRefresh }: RealtimeDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    strokeWidth?: number;
+    fill?: boolean;
+    className?: string;
+}
+declare function Sparkline({ data, width, height, color, strokeWidth, fill, className }: SparklineProps): react_jsx_runtime.JSX.Element;
+
+interface StatCard {
+    label: string;
+    value: string | number;
+    icon?: LucideIcon;
+    description?: string;
+    trend?: {
+        value: number;
+        label?: string;
+        positive?: boolean;
+    };
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    className?: string;
+}
+interface DashboardStatsProps {
+    stats: StatCard[];
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+}
+declare function DashboardStats({ stats, columns, className }: DashboardStatsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Compact stat card for smaller displays
+ */
+interface CompactStatProps {
+    label: string;
+    value: string | number;
+    icon?: LucideIcon;
+    trend?: number;
+    className?: string;
+}
+declare function CompactStat({ label, value, icon: Icon, trend, className }: CompactStatProps): react_jsx_runtime.JSX.Element;
+
+interface LogEntry {
+    id: string;
+    timestamp: string;
+    level: 'error' | 'warn' | 'info' | 'debug' | 'verbose' | string;
+    category?: string;
+    source?: string;
+    message: string;
+    metadata?: Record<string, any>;
+}
+interface LogFile {
+    filename?: string;
+    name?: string;
+    size: number;
+    modified: string;
+}
+interface LogCategory {
+    id: string;
+    label: string;
+    icon: React.ElementType;
+    description: string;
+}
+interface LogViewerProps {
+    logs?: LogEntry[];
+    logFiles?: LogFile[];
+    onFetchLogs?: () => Promise<LogEntry[]>;
+    onFetchArchives?: () => Promise<LogFile[]>;
+    onClearLogs?: () => Promise<void>;
+    onExportLogs?: () => Promise<void>;
+    onDownloadArchive?: (filename: string) => void;
+    onDeleteArchive?: (filename: string) => Promise<void>;
+    onLogReceived?: (handler: (log: LogEntry) => void) => () => void;
+    autoRefreshMs?: number;
+    maxEntries?: number;
+    defaultCategory?: 'current' | 'archives' | string;
+    enableLiveUpdates?: boolean;
+    enablePause?: boolean;
+    enableAutoScroll?: boolean;
+    autoScrollDefault?: boolean;
+    pausedDefault?: boolean;
+    categories?: LogCategory[];
+    levelBadgeColors?: Record<string, string>;
+    currentLogLevel?: string;
+    showCategories?: boolean;
+    showArchives?: boolean;
+    height?: string;
+    enableSearch?: boolean;
+    enableFilter?: boolean;
+    enableExport?: boolean;
+    enableClear?: boolean;
+    enableCopy?: boolean;
+    className?: string;
+}
+declare function LogViewer({ logs: externalLogs, logFiles: externalLogFiles, onFetchLogs, onFetchArchives, onClearLogs, onExportLogs, onDownloadArchive, onDeleteArchive, onLogReceived, autoRefreshMs, maxEntries, defaultCategory, enableLiveUpdates, enablePause, enableAutoScroll, autoScrollDefault, pausedDefault, enableSearch, enableFilter, enableExport, enableClear, enableCopy, categories, levelBadgeColors, currentLogLevel, showCategories, showArchives, height, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
+
+interface LogStatsProps {
+    stats: {
+        total?: number;
+        error?: number;
+        warn?: number;
+        info?: number;
+        debug?: number;
+        fileSize?: string | number;
+        oldestEntry?: string;
+        newestEntry?: string;
+        [key: string]: any;
+    } | null;
+}
+declare function LogStats({ stats }: LogStatsProps): react_jsx_runtime.JSX.Element | null;
+
+interface SettingDefinition {
+    key: string;
+    label: string;
+    type: 'string' | 'text' | 'number' | 'boolean' | 'select' | 'password' | 'custom';
+    defaultValue?: any;
+    description?: string;
+    help?: string;
+    hint?: string;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    validation?: (value: any) => string | null;
+    requiresRestart?: boolean;
+    hidden?: boolean;
+    customComponent?: React.ComponentType<CustomFieldProps>;
+    inputWidth?: 'small' | 'medium' | 'large';
+    suffix?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+    showIf?: (values: any) => boolean;
+}
+interface SettingsCategory {
+    id: string;
+    label: string;
+    icon?: LucideIcon | string | React.ReactNode;
+    description?: string;
+    settings: SettingDefinition[];
+}
+interface CustomFieldProps {
+    value: any;
+    onChange: (value: any) => void;
+    error?: string;
+    disabled?: boolean;
+    setting: SettingDefinition;
+}
+interface SettingsFrameworkProps {
+    categories: SettingsCategory[];
+    onSave: (values: Record<string, any>) => Promise<void>;
+    onLoad?: () => Promise<Record<string, any>>;
+    onValidate?: (values: Record<string, any>) => Record<string, string> | null;
+    onRestartRequired?: (changedSettings: string[]) => void;
+    title?: string;
+    description?: string;
+    showResetButton?: boolean;
+    showUndoButton?: boolean;
+    customFields?: Record<string, React.ComponentType<CustomFieldProps>>;
+    renderCategory?: (category: SettingsCategory, children: ReactNode) => ReactNode;
+    renderSetting?: (setting: SettingDefinition, field: ReactNode) => ReactNode;
+    autoSave?: boolean;
+    autoSaveDelay?: number;
+    confirmReset?: boolean;
+    persistState?: boolean;
+    className?: string;
+    containerClassName?: string;
+    categoryClassName?: string;
+    settingClassName?: string;
+}
+declare function SettingsFramework({ categories, onSave, onLoad, onValidate, onRestartRequired, title, description, showResetButton, showUndoButton, customFields, renderCategory, renderSetting, autoSave, autoSaveDelay, confirmReset, persistState, className, containerClassName, categoryClassName, settingClassName }: SettingsFrameworkProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme Toggle Component
+ * Provides UI for switching between light/dark/system themes
+ */
+interface ThemeToggleProps {
+    className?: string;
+    showLabel?: boolean;
+    variant?: 'button' | 'select';
+}
+/**
+ * Theme toggle component for settings pages
+ */
+declare function ThemeToggle({ className, showLabel, variant }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+/**
+ * Compact theme toggle for headers/toolbars
+ */
+declare function CompactThemeToggle({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default settings categories with icons for common application settings
+ * Apps can import and extend these categories or create their own
+ */
+declare const defaultSettingsCategories: SettingsCategory$1[];
+/**
+ * Helper function to create a settings category with icon
+ */
+declare function createSettingsCategory(id: string, label: string, iconName: keyof typeof iconMap, description?: string): Omit<SettingsCategory$1, 'settings'>;
+declare const iconMap: {
+    Server: react_jsx_runtime.JSX.Element;
+    Network: react_jsx_runtime.JSX.Element;
+    FileText: react_jsx_runtime.JSX.Element;
+    Shield: react_jsx_runtime.JSX.Element;
+    Mail: react_jsx_runtime.JSX.Element;
+    Settings: react_jsx_runtime.JSX.Element;
+    Database: react_jsx_runtime.JSX.Element;
+    Bell: react_jsx_runtime.JSX.Element;
+    Users: react_jsx_runtime.JSX.Element;
+    Palette: react_jsx_runtime.JSX.Element;
+    Globe: react_jsx_runtime.JSX.Element;
+    Activity: react_jsx_runtime.JSX.Element;
+};
+
+interface UpdateInfo {
+    currentVersion: string;
+    updateAvailable: boolean;
+    latestRelease?: {
+        version: string;
+        name: string;
+        body: string;
+        url: string;
+        publishedAt: string;
+    };
+    lastCheck: number | null;
+}
+interface UpdateNotificationProps {
+    apiUrl?: string;
+    checkInterval?: number;
+    onDownload?: (updateInfo: UpdateInfo) => void;
+}
+declare function UpdateNotification({ apiUrl, checkInterval, // 1 hour default
+onDownload }: UpdateNotificationProps): react_jsx_runtime.JSX.Element | null;
+
+interface SocketIOConfig extends Partial<ManagerOptions & SocketOptions> {
+    url?: string;
+    autoConnect?: boolean;
+    reconnection?: boolean;
+    reconnectionAttempts?: number;
+    reconnectionDelay?: number;
+    reconnectionDelayMax?: number;
+    timeout?: number;
+    transports?: string[];
+    auth?: Record<string, any>;
+    query?: Record<string, any>;
+}
+interface SocketIOState {
+    connected: boolean;
+    connecting: boolean;
+    error: Error | null;
+    retryCount: number;
+    transport: 'websocket' | 'polling' | null;
+}
+interface SocketIOActions {
+    socket: Socket | null;
+    emit: (event: string, data?: any) => void;
+    on: (event: string, handler: (data: any) => void) => void;
+    off: (event: string, handler: (data: any) => void) => void;
+    once: (event: string, handler: (data: any) => void) => void;
+    connect: () => void;
+    disconnect: () => void;
+    reconnect: () => void;
+}
+declare class SocketManager {
+    private sockets;
+    getSocket(url: string, options?: SocketIOConfig): Socket;
+    removeSocket(url: string): void;
+}
+declare const socketManager: SocketManager;
+declare function useSocketIO(config?: SocketIOConfig): [SocketIOState, SocketIOActions];
+
+/**
+ * Hook that debounces a value
+ * @param value The value to debounce
+ * @param delay The delay in milliseconds
+ * @returns The debounced value
+ *
+ * @example
+ * ```tsx
+ * const SearchInput = () => {
+ *   const [searchTerm, setSearchTerm] = useState('');
+ *   const debouncedSearchTerm = useDebounce(searchTerm, 300);
+ *
+ *   useEffect(() => {
+ *     if (debouncedSearchTerm) {
+ *       // Perform search with debounced term
+ *       performSearch(debouncedSearchTerm);
+ *     }
+ *   }, [debouncedSearchTerm]);
+ *
+ *   return (
+ *     <input
+ *       value={searchTerm}
+ *       onChange={(e) => setSearchTerm(e.target.value)}
+ *       placeholder="Search..."
+ *     />
+ *   );
+ * };
+ * ```
+ */
+declare function useDebounce<T>(value: T, delay: number): T;
+
+interface ConnectionStatus {
+    connected: boolean;
+    connecting: boolean;
+    transport: 'websocket' | 'polling' | null;
+    error: Error | null;
+    retryCount: number;
+    reconnect: () => void;
+}
+/**
+ * Enhanced connection status hook that provides comprehensive connection information
+ * including transport type detection for better UX in HTTP/2 environments
+ */
+declare function useConnectionStatus(options?: Parameters<typeof useSocketIO>[0]): ConnectionStatus;
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ * Uses clsx for conditional classes and tailwind-merge to resolve conflicts
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Authentication Handler Utilities
+ *
+ * Provides common authentication functionality for applications
+ */
+interface AuthConfig {
+    loginEndpoint?: string;
+    logoutEndpoint?: string;
+    refreshEndpoint?: string;
+    tokenKey?: string;
+    authKey?: string;
+    tokenExpiry?: number;
+}
+interface AuthResponse {
+    success: boolean;
+    token?: string;
+    user?: {
+        username: string;
+        email?: string;
+        roles?: string[];
+    };
+    error?: string;
+    expiresIn?: number;
+}
+declare class AuthHandler {
+    private config;
+    private refreshTimer?;
+    constructor(config?: AuthConfig);
+    /**
+     * Attempt to log in with credentials
+     */
+    login(username: string, password: string): Promise<AuthResponse>;
+    /**
+     * Log out the current user
+     */
+    logout(): Promise<void>;
+    /**
+     * Check if user is authenticated
+     */
+    isAuthenticated(): boolean;
+    /**
+     * Get the current auth token
+     */
+    getToken(): string | null;
+    /**
+     * Get the current user
+     */
+    getUser(): any;
+    /**
+     * Refresh the authentication token
+     */
+    refreshToken(): Promise<boolean>;
+    /**
+     * Schedule automatic token refresh
+     */
+    private scheduleTokenRefresh;
+    /**
+     * Make an authenticated API request
+     */
+    authenticatedFetch(url: string, options?: RequestInit): Promise<Response>;
+    /**
+     * Protected route wrapper
+     */
+    requireAuth(redirectTo?: string): boolean;
+}
+declare const authHandler: AuthHandler;
+
+/**
+ * SuperDangerous UI Framework - Centralized Theme Configuration
+ *
+ * @module @superdangerous/ui-framework/theme
+ */
+declare const theme: {
+    colors: {
+        primary: {
+            DEFAULT: string;
+            hover: string;
+            light: string;
+            dark: string;
+        };
+        dark: {
+            bg: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                elevated: string;
+            };
+            border: {
+                DEFAULT: string;
+                subtle: string;
+                strong: string;
+            };
+        };
+        light: {
+            bg: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                elevated: string;
+            };
+            border: {
+                DEFAULT: string;
+                subtle: string;
+                strong: string;
+            };
+        };
+        success: {
+            DEFAULT: string;
+            light: string;
+            dark: string;
+        };
+        warning: {
+            DEFAULT: string;
+            light: string;
+            dark: string;
+        };
+        error: {
+            DEFAULT: string;
+            light: string;
+            dark: string;
+        };
+        info: {
+            DEFAULT: string;
+            light: string;
+            dark: string;
+        };
+        intelligent: {
+            DEFAULT: string;
+            light: string;
+            dark: string;
+        };
+        activity: {
+            read: string;
+            write: string;
+            inactive: string;
+        };
+    };
+    gradients: {
+        subtle: string;
+        card: string;
+        glow: string;
+        intelligent: string;
+    };
+    shadows: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        glow: string;
+        'glow-intelligent': string;
+    };
+    radius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    typography: {
+        fonts: {
+            sans: string;
+            mono: string;
+        };
+        sizes: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+        };
+        weights: {
+            light: string;
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+    };
+    transitions: {
+        fast: string;
+        DEFAULT: string;
+        slow: string;
+        timing: string;
+    };
+    zIndex: {
+        base: number;
+        elevated: number;
+        dropdown: number;
+        sticky: number;
+        fixed: number;
+        modal: number;
+        popover: number;
+        tooltip: number;
+    };
+    opacity: {
+        hover: number;
+        disabled: number;
+        backdrop: number;
+        subtle: number;
+    };
+};
+declare const getCSSVariables: (isDark?: boolean) => {
+    '--color-bg-primary': string;
+    '--color-bg-secondary': string;
+    '--color-bg-tertiary': string;
+    '--color-bg-elevated': string;
+    '--color-border': string;
+    '--color-border-subtle': string;
+    '--color-border-strong': string;
+    '--color-text': string;
+    '--color-text-secondary': string;
+    '--color-text-tertiary': string;
+};
+type Theme = typeof theme;
+
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeConfig {
+    mode: ThemeMode;
+    theme: typeof theme;
+    customColors?: {
+        primary?: string;
+        secondary?: string;
+        accent?: string;
+    };
+}
+interface ThemeContextValue {
+    themeConfig: ThemeConfig;
+    setThemeMode: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+    isDark: boolean;
+}
+interface ThemeProviderProps {
+    children: React__default.ReactNode;
+    defaultMode?: ThemeMode;
+    theme?: typeof theme;
+    customColors?: ThemeConfig['customColors'];
+    persistPreference?: boolean;
+}
+/**
+ * Theme Provider Component
+ * Manages theme state and provides theme context to the app
+ */
+declare function ThemeProvider({ children, defaultMode, theme, customColors, persistPreference, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to use theme context
+ */
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * SuperDangerous UI Framework - Shared Style Constants
+ * Reusable Tailwind class combinations for consistency
+ *
+ * @module @superdangerous/ui-framework/styles
+ */
+declare const cardStyles: {
+    readonly base: "transition-all duration-200";
+    readonly interactive: "hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 cursor-pointer";
+    readonly elevation: "shadow-sm";
+};
+declare const buttonStyles: {
+    readonly primary: "gap-2";
+    readonly icon: "h-4 w-4";
+};
+declare const emptyStateStyles: {
+    readonly container: "flex flex-col items-center justify-center py-12 text-center";
+    readonly icon: "h-12 w-12 text-muted-foreground mb-4";
+    readonly title: "text-lg font-medium mb-2";
+    readonly description: "text-sm text-muted-foreground max-w-sm";
+};
+declare const activityStyles: {
+    readonly led: "w-2 h-2 rounded-full transition-all duration-200";
+    readonly pulse: "animate-pulse";
+    readonly colors: {
+        readonly read: "bg-green-500";
+        readonly write: "bg-blue-500";
+        readonly inactive: "bg-gray-400";
+        readonly error: "bg-red-500";
+    };
+};
+declare const statusStyles: {
+    readonly badge: {
+        readonly success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+        readonly warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+        readonly error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+        readonly info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200";
+        readonly default: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200";
+    };
+};
+
+export { ActivityLED, type ActivityLEDProps, Alert, AlertDescription, AlertTitle, type ApiReadinessOptions, type ApiReadinessResult, AppLayout, type AppLayoutProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, type CardProps, CardSkeleton, CardTitle, Checkbox, CompactStat, type CompactStatProps, CompactThemeToggle, ConnectionIndicator, ConnectionLostOverlay, ConnectionOverlay, ConnectionStatus$1 as ConnectionStatus, ConnectionStatusBanner, DashboardStats, type DashboardStatsProps, type DataColumn, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DogEarBadge, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStates, type FormState, HelpTooltip, Input, type InputProps, Label, LoadingState, type LogEntry, type LogFile, LogStats, type LogStatsProps, LogViewer, type LogViewerProps, LoginPage, LogsPage, type LogsPageProps, MarkdownCard, MarkdownScrollArea, MarkdownViewer, type NavItem, NetworkInterfaceSelect, NoSearchResults, NoSimulatorsRunning, NoTemplatesFound, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, RealtimeDataTable, type RealtimeDataTableProps, RestartBanner, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SettingDefinition$1 as SettingDefinition, type SettingsCategory$1 as SettingsCategory, SettingsFramework, SettingsPage, type SettingsPageProps, SidebarLayout, type SidebarLayoutProps, Slider, type SocketIOActions, type SocketIOConfig, type SocketIOState, Sparkline, type SparklineProps, type StatCard, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TestModeIndicator, Textarea, type TextareaProps, type Theme, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UpdateNotification, type UseFormStateOptions, activityStyles, apiRequest, authHandler, badgeVariants, buttonStyles, buttonVariants, cardStyles, checkApiReadiness, cn, createSettingsCategory, defaultSettingsCategories, emptyStateStyles, formatDateTime, formatDuration, formatRelativeTime, formatShortRelativeTime, getCSSVariables, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useConnectionStatus, useDebounce, useFormState, useSocketIO, useTheme, waitForApiReady };