@superdangerous/app-framework 4.9.2 → 4.15.0

package/ui/data-table/hooks/useResizableColumns.ts

@@ -0,0 +1,280 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+interface ColumnConfig {
+  key: string;
+  minWidth?: number;
+  maxWidth?: number;
+  defaultWidth?: number;
+}
+
+interface UseResizableColumnsOptions {
+  tableId: string;
+  columns: ColumnConfig[];
+  storageKey?: string;
+}
+
+interface ResizableColumnState {
+  widths: Record<string, number>;
+  isResizing: boolean;
+  resizingColumn: string | null;
+}
+
+export interface ResizableColumnResult {
+  widths: Record<string, number>;
+  isResizing: boolean;
+  totalWidth: number;
+  getResizeHandleProps: (columnKey: string) => {
+    onPointerDown: (e: React.PointerEvent) => void;
+    onMouseDown: (e: React.MouseEvent) => void;
+    draggable: boolean;
+    onDragStart: (e: React.DragEvent) => void;
+    className: string;
+    'data-resizing': boolean;
+  };
+  getColumnStyle: (columnKey: string) => React.CSSProperties;
+  getTableStyle: () => React.CSSProperties;
+  resetToDefaults: () => void;
+}
+
+const DEFAULT_MIN_WIDTH = 50;
+const DEFAULT_WIDTH = 150;
+const DRAG_THRESHOLD = 3; // Minimum pixels before resize activates
+
+export function useResizableColumns({
+  tableId,
+  columns,
+  storageKey,
+}: UseResizableColumnsOptions): ResizableColumnResult {
+  const effectiveStorageKey = storageKey || `table-columns-${tableId}`;
+
+  // Get default widths from column config
+  const getDefaultWidths = useCallback(() => {
+    return columns.reduce((acc, col) => {
+      acc[col.key] = col.defaultWidth || DEFAULT_WIDTH;
+      return acc;
+    }, {} as Record<string, number>);
+  }, [columns]);
+
+  // Initialize widths from localStorage or defaults
+  const [state, setState] = useState<ResizableColumnState>(() => {
+    try {
+      const stored = localStorage.getItem(effectiveStorageKey);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Merge with defaults in case new columns were added
+        const defaults = getDefaultWidths();
+        return {
+          widths: { ...defaults, ...parsed },
+          isResizing: false,
+          resizingColumn: null,
+        };
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
+    return {
+      widths: getDefaultWidths(),
+      isResizing: false,
+      resizingColumn: null,
+    };
+  });
+
+  // Refs for resize handling - these are stable across renders
+  const startXRef = useRef<number>(0);
+  const startWidthRef = useRef<number>(0);
+  const activeColumnRef = useRef<string | null>(null);
+  const hasDraggedRef = useRef<boolean>(false);
+  const columnsRef = useRef(columns);
+
+  // Keep columnsRef up to date
+  useEffect(() => {
+    columnsRef.current = columns;
+  }, [columns]);
+
+  // Get column config by key - uses ref for stable reference
+  const getColumnConfig = useCallback(
+    (key: string) => columnsRef.current.find((c) => c.key === key),
+    []
+  );
+
+  // Persist widths to localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem(effectiveStorageKey, JSON.stringify(state.widths));
+    } catch {
+      // Ignore localStorage errors
+    }
+  }, [state.widths, effectiveStorageKey]);
+
+  // Stable event handlers using refs - these don't change between renders
+  const handlersRef = useRef<{
+    onPointerMove: (e: PointerEvent) => void;
+    onPointerUp: (e: PointerEvent) => void;
+  } | null>(null);
+
+  // Initialize handlers once
+  if (!handlersRef.current) {
+    handlersRef.current = {
+      onPointerMove: (e: PointerEvent) => {
+        if (!activeColumnRef.current) return;
+
+        const diff = e.clientX - startXRef.current;
+
+        // Check if we've exceeded the drag threshold
+        if (!hasDraggedRef.current) {
+          if (Math.abs(diff) < DRAG_THRESHOLD) {
+            return; // Not yet dragging
+          }
+          // Now we're actually dragging - set the resizing state
+          hasDraggedRef.current = true;
+          setState((prev) => ({
+            ...prev,
+            isResizing: true,
+            resizingColumn: activeColumnRef.current,
+          }));
+          document.body.style.cursor = 'col-resize';
+          document.body.style.userSelect = 'none';
+        }
+
+        const config = getColumnConfig(activeColumnRef.current);
+        const minWidth = config?.minWidth || DEFAULT_MIN_WIDTH;
+        const maxWidth = config?.maxWidth;
+
+        let newWidth = Math.max(minWidth, startWidthRef.current + diff);
+        if (maxWidth) {
+          newWidth = Math.min(maxWidth, newWidth);
+        }
+
+        setState((prev) => ({
+          ...prev,
+          widths: {
+            ...prev.widths,
+            [activeColumnRef.current!]: newWidth,
+          },
+        }));
+      },
+
+      onPointerUp: () => {
+        activeColumnRef.current = null;
+        hasDraggedRef.current = false;
+        setState((prev) => ({
+          ...prev,
+          isResizing: false,
+          resizingColumn: null,
+        }));
+
+        // Remove listeners using the same stable references
+        document.removeEventListener('pointermove', handlersRef.current!.onPointerMove);
+        document.removeEventListener('pointerup', handlersRef.current!.onPointerUp);
+        document.removeEventListener('pointercancel', handlersRef.current!.onPointerUp);
+
+        // Remove cursor override
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      },
+    };
+  }
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (handlersRef.current) {
+        document.removeEventListener('pointermove', handlersRef.current.onPointerMove);
+        document.removeEventListener('pointerup', handlersRef.current.onPointerUp);
+        document.removeEventListener('pointercancel', handlersRef.current.onPointerUp);
+      }
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, []);
+
+  // Ref to access current widths without causing re-renders
+  const widthsRef = useRef(state.widths);
+  useEffect(() => {
+    widthsRef.current = state.widths;
+  }, [state.widths]);
+
+  // Start resize - uses stable handler refs
+  const startResize = useCallback(
+    (columnKey: string, clientX: number) => {
+      startXRef.current = clientX;
+      startWidthRef.current = widthsRef.current[columnKey] || DEFAULT_WIDTH;
+      activeColumnRef.current = columnKey;
+      hasDraggedRef.current = false;
+
+      // Add listeners using stable references - use pointer events consistently
+      document.addEventListener('pointermove', handlersRef.current!.onPointerMove);
+      document.addEventListener('pointerup', handlersRef.current!.onPointerUp);
+      document.addEventListener('pointercancel', handlersRef.current!.onPointerUp);
+    },
+    []
+  );
+
+  // Get resize handle props for a column
+  const getResizeHandleProps = useCallback(
+    (columnKey: string) => ({
+      onPointerDown: (e: React.PointerEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startResize(columnKey, e.clientX);
+      },
+      // Prevent other events from interfering
+      onMouseDown: (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      draggable: false,
+      onDragStart: (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: 'resize-handle',
+      'data-resizing': state.resizingColumn === columnKey,
+    }),
+    [startResize, state.resizingColumn]
+  );
+
+  // Get column style with width
+  const getColumnStyle = useCallback(
+    (columnKey: string): React.CSSProperties => {
+      const currentWidth = state.widths[columnKey] || DEFAULT_WIDTH;
+      return {
+        width: currentWidth,
+        minWidth: currentWidth,
+        position: 'relative',
+      };
+    },
+    [state.widths]
+  );
+
+  // Calculate total table width from all columns
+  const totalWidth = columns.reduce((sum, col) => {
+    return sum + (state.widths[col.key] || col.defaultWidth || DEFAULT_WIDTH);
+  }, 0);
+
+  // Get table style
+  const getTableStyle = useCallback(
+    (): React.CSSProperties => ({
+      minWidth: totalWidth,
+    }),
+    [totalWidth]
+  );
+
+  // Reset all columns to default widths
+  const resetToDefaults = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      widths: getDefaultWidths(),
+    }));
+  }, [getDefaultWidths]);
+
+  return {
+    widths: state.widths,
+    isResizing: state.isResizing,
+    totalWidth,
+    getResizeHandleProps,
+    getColumnStyle,
+    getTableStyle,
+    resetToDefaults,
+  };
+}

package/ui/data-table/index.ts

@@ -0,0 +1,74 @@
+/**
+ * @superdangerous/app-framework/data-table
+ *
+ * A comprehensive data table module providing hooks and components
+ * for building enterprise-grade data tables with:
+ *
+ * - Pagination with localStorage persistence
+ * - Column visibility toggling with locked columns
+ * - Column resizing with drag handles
+ * - Column reordering with drag-and-drop
+ * - Batch selection and actions
+ * - Search and filter controls
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   usePagination,
+ *   useColumnVisibility,
+ *   DataTablePage,
+ *   BatchActionsBar
+ * } from '@superdangerous/app-framework/data-table';
+ *
+ * function MyTable() {
+ *   const pagination = usePagination({ data: items, storageKey: 'my-table' });
+ *   const columnVisibility = useColumnVisibility({ columns, storageKey: 'my-table-cols' });
+ *
+ *   return (
+ *     <DataTablePage
+ *       title="Items"
+ *       pagination={pagination}
+ *       // ...
+ *     >
+ *       <table>...</table>
+ *     </DataTablePage>
+ *   );
+ * }
+ * ```
+ */
+
+// Hooks
+export {
+  usePagination,
+  useColumnVisibility,
+  useResizableColumns,
+  useColumnOrder,
+  useColumnDragDrop,
+} from './hooks';
+
+export type {
+  ColumnConfig,
+  ColumnVisibilityState,
+  ResizableColumnResult,
+  ColumnOrderConfig,
+  DragState,
+} from './hooks';
+
+// Components
+export {
+  DataTablePage,
+  PaginationControls,
+  Pagination,
+  BatchActionsBar,
+  ColumnVisibility,
+  TableFilters,
+} from './components';
+
+export type {
+  DataTablePageProps,
+  FilterOption,
+  PaginationControlsProps,
+  BatchActionsBarProps,
+  TableFiltersProps,
+  TableFilterOption,
+} from './components';

package/ui/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, MouseEvent } 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';
@@ -195,10 +195,20 @@ declare function ProtectedRoute({ children, loginPath, authEndpoint, loadingComp
 
 interface LogsPageProps {
     apiUrl?: string;
-    title?: string;
-    description?: string;
 }
-declare function LogsPage({ apiUrl, title, description }: LogsPageProps): react_jsx_runtime.JSX.Element;
+/**
+ * A complete logs page component with file list and live log viewer
+ *
+ * @example
+ * ```tsx
+ * import { LogsPage } from '@superdangerous/app-framework/ui';
+ *
+ * function App() {
+ *   return <LogsPage apiUrl="/api/logs" />;
+ * }
+ * ```
+ */
+declare function LogsPage({ apiUrl }: LogsPageProps): react_jsx_runtime.JSX.Element;
 
 interface SettingDefinition$1 {
     key: string;
@@ -403,6 +413,176 @@ declare function MarkdownScrollArea({ content, className, height, ...props }: Ma
     height?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface TruncatedTextProps {
+    children: ReactNode;
+    className?: string;
+    maxWidth?: string | number;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+}
+declare function TruncatedText({ children, className, maxWidth, tooltipSide, }: TruncatedTextProps): react_jsx_runtime.JSX.Element;
+
+declare const TAG_COLORS: {
+    hex: string;
+    name: string;
+}[];
+interface ColorPaletteProps {
+    value: string;
+    onChange: (color: string) => void;
+    columns?: number;
+    className?: string;
+}
+declare function ColorPalette({ value, onChange, columns, className }: ColorPaletteProps): react_jsx_runtime.JSX.Element;
+declare function getRandomTagColor(): string;
+declare function getNextTagColor(currentColor: string): string;
+declare function getNextAvailableColor(usedColors: string[]): string;
+
+type ConfirmDialogVariant = 'default' | 'destructive' | 'warning' | 'success';
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmDialogVariant;
+    icon?: LucideIcon;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    loading?: boolean;
+}
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, icon, onConfirm, onCancel, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to manage confirm dialog state
+ */
+declare function useConfirmDialog(): {
+    confirm: (options: {
+        title: string;
+        description: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        variant?: ConfirmDialogVariant;
+    }) => Promise<boolean>;
+    dialogProps: {
+        onOpenChange: (open: boolean) => void;
+        onCancel: () => void;
+        open: boolean;
+        title: string;
+        description: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        variant?: ConfirmDialogVariant;
+        onConfirm: () => void;
+    };
+    ConfirmDialog: typeof ConfirmDialog;
+};
+
+interface ResizableDialogRenderProps {
+    isFullscreen: boolean;
+}
+interface ResizableDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    children: React.ReactNode | ((props: ResizableDialogRenderProps) => React.ReactNode);
+    footer?: React.ReactNode;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    className?: string;
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+}
+declare function ResizableDialog({ open, onOpenChange, title, children, footer, defaultWidth, defaultHeight, minWidth, minHeight, className, onFullscreenChange, }: ResizableDialogProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
+interface ContextMenuProps {
+    position: ContextMenuPosition;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Base context menu container with positioning, close-on-outside-click,
+ * and close-on-scroll behavior. Automatically adjusts position to stay within viewport.
+ */
+declare function ContextMenu({ position, onClose, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuItemProps {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: () => void;
+    icon?: ReactNode;
+    children: ReactNode;
+    /** Use 'default' for standard items, or specify a color variant */
+    variant?: 'default' | 'success' | 'warning' | 'destructive' | 'purple';
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A single menu item for the context menu.
+ */
+declare function ContextMenuItem({ onClick, onMouseEnter, icon, children, variant, disabled, className, }: ContextMenuItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal separator for context menu sections.
+ */
+declare function ContextMenuSeparator(): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuSubmenuProps {
+    label: string;
+    icon?: ReactNode;
+    children: ReactNode;
+    /** Callback when this submenu opens (useful for closing other submenus) */
+    onOpen?: () => void;
+    /** External control for open state */
+    isOpen?: boolean;
+    /** External control for setting open state */
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A hoverable submenu that opens to the right of the trigger.
+ * Can be controlled externally or manage its own state.
+ */
+declare function ContextMenuSubmenu({ label, icon, children, onOpen, isOpen: externalIsOpen, onOpenChange, className, }: ContextMenuSubmenuProps): react_jsx_runtime.JSX.Element;
+
+interface CodeViewerProps {
+    code: string;
+    language?: string;
+    filename?: string;
+    lineStart?: number;
+    highlightLines?: number[];
+    className?: string;
+    showLineNumbers?: boolean;
+    showFilename?: boolean;
+    autoScrollToHighlight?: boolean;
+}
+/**
+ * Code viewer with syntax highlighting, line numbers, and highlighted line support.
+ *
+ * @example
+ * ```tsx
+ * <CodeViewer
+ *   code={sourceCode}
+ *   filename="example.ts"
+ *   highlightLines={[5, 6, 7]}
+ *   lineStart={10}
+ * />
+ * ```
+ */
+declare function CodeViewer({ code, language, filename, lineStart, highlightLines, className, showLineNumbers, showFilename, autoScrollToHighlight, }: CodeViewerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Compact version for inline code snippets without line numbers.
+ */
+declare function CodeSnippet({ code, language, filename, className, }: {
+    code: string;
+    language?: string;
+    filename?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 /**
  * Date formatting utilities for displaying relative time
  */
@@ -432,6 +612,28 @@ declare function formatDuration(seconds: number): string;
  */
 declare function formatShortRelativeTime(date: Date | string | number): string;
 
+/**
+ * Number and byte formatting utilities
+ */
+/**
+ * Formats bytes to human-readable size
+ * @param bytes - Number of bytes
+ * @returns Formatted string (e.g., "1.50 KB", "2.30 MB")
+ */
+declare function formatBytes(bytes: number): string;
+/**
+ * Formats large numbers with K/M suffixes
+ * @param num - Number to format
+ * @returns Formatted string (e.g., "1.5K", "2.3M")
+ */
+declare function formatNumber(num: number): string;
+/**
+ * Formats duration in milliseconds to human-readable format
+ * @param ms - Duration in milliseconds
+ * @returns Formatted duration string (e.g., "2h 15m", "45s")
+ */
+declare function formatDurationMs(ms: number): string;
+
 declare function getTagColor(tag: string): {
     bg: string;
     text: string;
@@ -1218,4 +1420,4 @@ declare const statusStyles: {
     };
 };
 
-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 };
+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, CodeSnippet, CodeViewer, type CodeViewerProps, ColorPalette, CompactStat, type CompactStatProps, CompactThemeToggle, ConfirmDialog, type ConfirmDialogVariant, ConnectionIndicator, ConnectionLostOverlay, ConnectionOverlay, ConnectionStatus$1 as ConnectionStatus, ConnectionStatusBanner, ContextMenu, ContextMenuItem, type ContextMenuItemProps, type ContextMenuPosition, type ContextMenuProps, ContextMenuSeparator, ContextMenuSubmenu, type ContextMenuSubmenuProps, 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, ResizableDialog, 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, TAG_COLORS, 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, TruncatedText, UpdateNotification, type UseFormStateOptions, activityStyles, apiRequest, authHandler, badgeVariants, buttonStyles, buttonVariants, cardStyles, checkApiReadiness, cn, createSettingsCategory, defaultSettingsCategories, emptyStateStyles, formatBytes, formatDateTime, formatDuration, formatDurationMs, formatNumber, formatRelativeTime, formatShortRelativeTime, getCSSVariables, getNextAvailableColor, getNextTagColor, getRandomTagColor, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, useSocketIO, useTheme, waitForApiReady };