@superdangerous/app-framework 4.15.2 → 4.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdangerous/app-framework",
-  "version": "4.15.2",
+  "version": "4.15.3",
   "description": "Opinionated TypeScript framework for structured vibecoding - building internal web and desktop apps with batteries included",
   "type": "module",
   "main": "dist/index.js",

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

@@ -82,7 +82,9 @@ export function useColumnOrder({
     setColumnOrder(prev => {
       const newOrder = [...prev];
       const [removed] = newOrder.splice(fromIndex, 1);
-      newOrder.splice(toIndex, 0, removed);
+      if (removed !== undefined) {
+        newOrder.splice(toIndex, 0, removed);
+      }
       return newOrder;
     });
   }, []);
@@ -100,7 +102,9 @@ export function useColumnOrder({
 
       const newOrder = [...prev];
       const [removed] = newOrder.splice(currentIndex, 1);
-      newOrder.splice(newIndex, 0, removed);
+      if (removed !== undefined) {
+        newOrder.splice(newIndex, 0, removed);
+      }
       return newOrder;
     });
   }, []);

package/ui/dist/index.d.mts

@@ -1420,4 +1420,421 @@ 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, 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 };
+interface UsePaginationOptions<T> {
+    data: T[];
+    pageSize?: number;
+    storageKey?: string;
+}
+interface UsePaginationResult<T> {
+    paginatedData: T[];
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    firstPage: () => void;
+    lastPage: () => void;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+}
+declare function usePagination<T>({ data, pageSize: initialPageSize, storageKey, }: UsePaginationOptions<T>): UsePaginationResult<T>;
+
+interface ColumnConfig$1 {
+    id: string;
+    label: string;
+    defaultVisible?: boolean;
+    locked?: boolean;
+}
+interface ColumnVisibilityState {
+    [key: string]: boolean;
+}
+interface UseColumnVisibilityOptions {
+    columns: ColumnConfig$1[];
+    storageKey: string;
+}
+interface UseColumnVisibilityReturn {
+    visibleColumns: ColumnVisibilityState;
+    isColumnVisible: (columnId: string) => boolean;
+    toggleColumn: (columnId: string) => void;
+    showAllColumns: () => void;
+    hideAllColumns: () => void;
+    columns: ColumnConfig$1[];
+}
+declare function useColumnVisibility({ columns, storageKey, }: UseColumnVisibilityOptions): UseColumnVisibilityReturn;
+
+interface ColumnConfig {
+    key: string;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+interface UseResizableColumnsOptions {
+    tableId: string;
+    columns: ColumnConfig[];
+    storageKey?: string;
+}
+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;
+}
+declare function useResizableColumns({ tableId, columns, storageKey, }: UseResizableColumnsOptions): ResizableColumnResult;
+
+interface ColumnOrderConfig {
+    id: string;
+    label: string;
+    locked?: boolean;
+}
+interface UseColumnOrderOptions {
+    storageKey: string;
+    defaultOrder: string[];
+}
+interface UseColumnOrderReturn {
+    columnOrder: string[];
+    moveColumn: (fromIndex: number, toIndex: number) => void;
+    moveColumnById: (columnId: string, direction: 'left' | 'right') => void;
+    resetOrder: () => void;
+    getOrderedColumns: <T extends {
+        id: string;
+    }>(columns: T[]) => T[];
+}
+/**
+ * Hook for managing column order with localStorage persistence
+ */
+declare function useColumnOrder({ storageKey, defaultOrder, }: UseColumnOrderOptions): UseColumnOrderReturn;
+/**
+ * Drag and drop helpers for column reordering
+ */
+interface DragState {
+    isDragging: boolean;
+    draggedId: string | null;
+    dropIndex: number | null;
+}
+declare function useColumnDragDrop(columnOrder: string[], moveColumn: (from: number, to: number) => void, lockedColumns?: string[]): {
+    dragState: DragState;
+    getDragHandleProps: (columnId: string) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    showDropIndicator: (columnId: string) => boolean;
+};
+
+/**
+ * Column width configuration
+ */
+interface ColumnWidth {
+    default: number;
+    min: number;
+    max?: number;
+}
+/**
+ * Column visibility configuration
+ */
+interface ColumnVisibility$1 {
+    default: boolean;
+    locked?: boolean;
+}
+/**
+ * Props passed to header cell render function
+ */
+interface HeaderCellProps {
+    columnId: string;
+    isSorted: boolean;
+    sortDirection?: 'asc' | 'desc';
+}
+/**
+ * Props passed to cell render function
+ */
+interface CellProps {
+    columnId: string;
+    isDragging: boolean;
+}
+/**
+ * Column definition for DataTable
+ */
+interface ColumnDef<T> {
+    /** Unique column identifier */
+    id: string;
+    /** Header content - string or render function */
+    header: string | ((props: HeaderCellProps) => ReactNode);
+    /** Cell content render function */
+    cell: (item: T, props: CellProps) => ReactNode;
+    /** Key to use for sorting (if sortable) */
+    sortKey?: string;
+    /** Width configuration */
+    width?: ColumnWidth;
+    /** Visibility configuration */
+    visibility?: ColumnVisibility$1;
+    /** Additional CSS class for cells */
+    className?: string;
+    /** Whether this column should use column style from resize hook */
+    resizable?: boolean;
+}
+/**
+ * External pagination state (from usePagination hook)
+ */
+interface ExternalPaginationState<T> {
+    paginatedData: T[];
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+}
+/**
+ * DataTable props
+ */
+interface DataTableProps<T> {
+    /** Data array to display */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Storage key for persisting table state (column widths, order, visibility) */
+    storageKey: string;
+    /** Function to get unique ID from item */
+    getRowId: (item: T) => string;
+    /** Enable row selection with checkboxes */
+    selectable?: boolean;
+    /** Set of selected row IDs */
+    selectedIds?: Set<string>;
+    /** Callback when selection changes */
+    onSelectionChange?: (ids: Set<string>) => void;
+    /** Callback when row is clicked */
+    onRowClick?: (item: T) => void;
+    /** Callback when row is right-clicked (for context menu) */
+    onRowContextMenu?: (item: T, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Current sort field */
+    sortField?: string;
+    /** Current sort order */
+    sortOrder?: 'asc' | 'desc';
+    /** Callback when sort changes */
+    onSort?: (field: string) => void;
+    /** Render function for actions column (always last, sticky) */
+    actionsColumn?: (item: T) => ReactNode;
+    /** Width for actions column */
+    actionsColumnWidth?: number;
+    /** Page size for pagination (used when no external pagination provided) */
+    pageSize?: number;
+    /** External pagination state from usePagination hook (overrides internal pagination) */
+    pagination?: ExternalPaginationState<T>;
+    /** Hide the built-in pagination controls (use when pagination is shown elsewhere) */
+    hidePagination?: boolean;
+    /** Additional CSS class for table container */
+    className?: string;
+    /** Function to compute row CSS class */
+    rowClassName?: (item: T) => string;
+    /** Enable header right-click for column visibility menu */
+    enableHeaderContextMenu?: boolean;
+    /** Columns that cannot be reordered */
+    lockedColumns?: string[];
+    /** Default column order (if not persisted) */
+    defaultColumnOrder?: string[];
+    /** Show loading indicator */
+    loading?: boolean;
+    /** Content to show when no data */
+    emptyState?: ReactNode;
+}
+/**
+ * Column config for visibility hook (for compatibility)
+ */
+interface ColumnConfigCompat {
+    id: string;
+    label: string;
+    defaultVisible?: boolean;
+    locked?: boolean;
+}
+/**
+ * Column config for resize hook (for compatibility)
+ */
+interface ColumnSizeConfig {
+    key: string;
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+}
+
+/**
+ * DataTable - Generic data table with full feature set
+ *
+ * Features:
+ * - Column resizing (drag handles)
+ * - Column reordering (drag-drop)
+ * - Column visibility toggle
+ * - Row selection with checkboxes
+ * - Sorting
+ * - Pagination
+ * - Sticky actions column
+ * - Context menu support
+ * - Header context menu for column visibility
+ */
+declare function DataTable<T>({ data, columns, storageKey, getRowId, selectable, selectedIds, onSelectionChange, onRowClick, onRowContextMenu, sortField, sortOrder, onSort, actionsColumn, actionsColumnWidth, pageSize, pagination: externalPagination, hidePagination, className, rowClassName, enableHeaderContextMenu, lockedColumns, defaultColumnOrder, loading, emptyState, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * PaginationControls - Compact inline pagination for table headers
+ *
+ * A condensed version of pagination controls designed to sit alongside
+ * search/filter controls in a table header bar.
+ */
+interface PaginationControlsProps {
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    className?: string;
+}
+declare function PaginationControls({ page, pageSize, totalPages, totalItems, startIndex, endIndex, canGoNext, canGoPrev, pageSizeOptions, setPage: _setPage, setPageSize, nextPage, prevPage, className, }: PaginationControlsProps): react_jsx_runtime.JSX.Element | null;
+
+interface FilterOption$1 {
+    id: string;
+    label: string;
+    render: () => React__default.ReactNode;
+}
+interface DataTablePageProps {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Search term */
+    search?: string;
+    /** Search change handler */
+    onSearchChange?: (value: string) => void;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Filter options for popover */
+    filters?: FilterOption$1[];
+    /** Number of active filters */
+    activeFilterCount?: number;
+    /** Clear all filters handler */
+    onClearFilters?: () => void;
+    /** Pagination props from usePagination hook */
+    pagination?: PaginationControlsProps;
+    /** Action buttons to show in the header */
+    actions?: React__default.ReactNode;
+    /** Content before the table (e.g., BatchActionsBar) */
+    beforeTable?: React__default.ReactNode;
+    /** The DataTable component */
+    children: React__default.ReactNode;
+    /** Additional class for the container */
+    className?: string;
+    /** Whether to show a loading state */
+    loading?: boolean;
+    /** Loading component to show */
+    loadingComponent?: React__default.ReactNode;
+}
+declare function DataTablePage({ title, description, search, onSearchChange, searchPlaceholder, filters, activeFilterCount, onClearFilters, pagination, actions, beforeTable, children, className, loading, loadingComponent, }: DataTablePageProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalItems: number;
+    startIndex: number;
+    endIndex: number;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    pageSizeOptions: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onFirstPage: () => void;
+    onLastPage: () => void;
+    className?: string;
+}
+declare function Pagination({ page, pageSize, totalPages, totalItems, startIndex, endIndex, canGoNext, canGoPrev, pageSizeOptions, onPageChange, onPageSizeChange, onNextPage, onPrevPage, onFirstPage, onLastPage, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface BatchActionsBarProps {
+    /** Number of selected items */
+    selectedCount: number;
+    /** Callback to clear selection */
+    onClear: () => void;
+    /** Action buttons to display on the right side */
+    children: ReactNode;
+    /** Label for the selected items (default: "item"/"items") */
+    itemLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A horizontal bar that appears when items are selected,
+ * showing the count and providing batch action buttons.
+ */
+declare function BatchActionsBar({ selectedCount, onClear, children, itemLabel, className, }: BatchActionsBarProps): react_jsx_runtime.JSX.Element | null;
+
+interface ColumnVisibilityProps {
+    columns: ColumnConfig$1[];
+    isColumnVisible: (columnId: string) => boolean;
+    toggleColumn: (columnId: string) => void;
+    showAllColumns: () => void;
+    hideAllColumns: () => void;
+}
+declare function ColumnVisibility({ columns, isColumnVisible, toggleColumn, showAllColumns, hideAllColumns, }: ColumnVisibilityProps): react_jsx_runtime.JSX.Element;
+
+interface FilterOption {
+    id: string;
+    label: string;
+    render: () => React__default.ReactNode;
+}
+interface TableFiltersProps {
+    search?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    filters?: FilterOption[];
+    activeFilterCount?: number;
+    onClearFilters?: () => void;
+    className?: string;
+    children?: React__default.ReactNode;
+}
+/**
+ * TableFilters - Compact filter controls for data tables
+ *
+ * Features:
+ * - Search input
+ * - Popover filter menu with badge showing active count
+ * - Clear all filters button
+ * - Custom filter components via render prop
+ * - Children slot for additional action buttons
+ */
+declare function TableFilters({ search, onSearchChange, searchPlaceholder, filters, activeFilterCount, onClearFilters, className, children, }: TableFiltersProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityLED, type ActivityLEDProps, Alert, AlertDescription, AlertTitle, type ApiReadinessOptions, type ApiReadinessResult, AppLayout, type AppLayoutProps, Badge, type BadgeProps, BatchActionsBar, type BatchActionsBarProps, Button, type ButtonProps, Card, CardContent, CardHeader, type CardProps, CardSkeleton, CardTitle, type CellProps, Checkbox, CodeSnippet, CodeViewer, type CodeViewerProps, ColorPalette, type ColumnConfig$1 as ColumnConfig, type ColumnConfigCompat, type ColumnDef, type ColumnOrderConfig, type ColumnSizeConfig, ColumnVisibility, type ColumnVisibility$1 as ColumnVisibilityConfig, type ColumnVisibilityState, type ColumnWidth, 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, DataTable, DataTablePage, type DataTablePageProps, type DataTableProps, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DogEarBadge, type DragState, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStates, type ExternalPaginationState, type FilterOption$1 as FilterOption, type FormState, type HeaderCellProps, 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, Pagination, PaginationControls, type PaginationControlsProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, RealtimeDataTable, type RealtimeDataTableProps, type ResizableColumnResult, 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, type FilterOption as TableFilterOption, TableFilters, type TableFiltersProps, 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, useColumnDragDrop, useColumnOrder, useColumnVisibility, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, usePagination, useResizableColumns, useSocketIO, useTheme, waitForApiReady };