@superdangerous/app-framework 4.16.12 → 4.16.14

package/package.json

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

package/ui/dist/index.d.mts

@@ -761,6 +761,117 @@ interface SidebarLayoutProps extends Omit<AppLayoutProps, 'primaryColor'> {
 }
 declare function SidebarLayout({ appName, appVersion, navigation, children, logoSrc, logoClassName, logoOffset, headerHeight, showLogout, onLogout, authenticated, connectionStatusUrl, sidebarWidth, className }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
+interface SidebarNavItem {
+    name: string;
+    href: string;
+    icon?: LucideIcon | React__default.ReactNode;
+    badge?: number | string;
+    /** Group label - items with the same group will be grouped together */
+    group?: string;
+}
+interface SidebarNavGroup {
+    label: string;
+    items: SidebarNavItem[];
+}
+interface SidebarAppLayoutProps {
+    /** Application name displayed in the sidebar header */
+    appName: string;
+    /** Application version (optional) */
+    appVersion?: string;
+    /** Navigation items - can be flat array or grouped */
+    navigation: SidebarNavItem[] | SidebarNavGroup[];
+    /** Page content */
+    children: React__default.ReactNode;
+    /** Logo image source */
+    logoSrc?: string;
+    /** Custom CSS class for logo */
+    logoClassName?: string;
+    /** Show logout button */
+    showLogout?: boolean;
+    /** Custom logout handler */
+    onLogout?: () => void;
+    /** Whether user is authenticated (controls logout visibility) */
+    authenticated?: boolean;
+    /** WebSocket URL for connection status */
+    connectionStatusUrl?: string;
+    /** Custom sidebar width (default: 260px) */
+    sidebarWidth?: number;
+    /** Additional className for the layout container */
+    className?: string;
+    /** Custom header content (replaces default logo/name) */
+    headerContent?: React__default.ReactNode;
+    /** Custom footer content (replaces default logout) */
+    footerContent?: React__default.ReactNode;
+    /** Primary accent color for active states */
+    primaryColor?: string;
+}
+/**
+ * Full-featured application layout with sidebar navigation.
+ * Based on the epi-edge-bms sidebar design pattern.
+ *
+ * @example
+ * ```tsx
+ * <SidebarAppLayout
+ *   appName="My App"
+ *   appVersion="1.0.0"
+ *   navigation={[
+ *     { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+ *     { name: 'Settings', href: '/settings', icon: Settings },
+ *   ]}
+ * >
+ *   <Routes>...</Routes>
+ * </SidebarAppLayout>
+ * ```
+ */
+declare function SidebarAppLayout({ appName, appVersion, navigation, children, logoSrc, logoClassName, showLogout, onLogout, authenticated, connectionStatusUrl, sidebarWidth, className, headerContent, footerContent, primaryColor, }: SidebarAppLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarContextValue {
+    collapsed: boolean;
+    toggle: () => void;
+    isMobile: boolean;
+}
+interface SidebarProviderProps {
+    children: React$1.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsible?: boolean;
+}
+declare function SidebarProvider({ children, defaultCollapsed, collapsible }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    collapsible?: 'icon' | 'none';
+    width?: number;
+}
+declare function Sidebar({ className, collapsible, width, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function SidebarTrigger({ className, ...props }: React$1.ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+declare function SidebarHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const SidebarGroup: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "active" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarMenuButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarMenuButtonVariants> {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string;
+}
+declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<SidebarMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<SidebarMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarSection: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHRElement> & React$1.RefAttributes<HTMLHRElement>>;
+interface SidebarMenuBadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'secondary' | 'destructive';
+}
+declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<SidebarMenuBadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+
 /**
  * Activity LED Component
  * Shows a status indicator with optional animation
@@ -900,6 +1011,10 @@ interface LogViewerProps {
     categories?: LogCategory[];
     levelBadgeColors?: Record<string, string>;
     currentLogLevel?: string;
+    /** Display mode: 'full' shows sidebar, 'logs' shows only live logs, 'archives' shows only archives */
+    mode?: 'full' | 'logs' | 'archives';
+    /** Show the header with title. Set to false when embedded in settings. */
+    showHeader?: boolean;
     showCategories?: boolean;
     showArchives?: boolean;
     height?: string;
@@ -910,7 +1025,7 @@ interface LogViewerProps {
     enableCopy?: boolean;
     className?: string;
 }
-declare function LogViewer({ logs: externalLogs, logFiles: externalLogFiles, onFetchLogs, onFetchArchives, onClearLogs, onExportLogs, onDownloadArchive, onDeleteArchive, onLogReceived, autoRefreshMs, maxEntries, defaultCategory, enableLiveUpdates, enableAutoScroll, autoScrollDefault, newestFirst, enableSearch, enableFilter, enableExport, enableClear, enableCopy, categories, levelBadgeColors, currentLogLevel, showCategories, showArchives, height, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
+declare function LogViewer({ logs: externalLogs, logFiles: externalLogFiles, onFetchLogs, onFetchArchives, onClearLogs, onExportLogs, onDownloadArchive, onDeleteArchive, onLogReceived, autoRefreshMs, maxEntries, defaultCategory, enableLiveUpdates, enableAutoScroll, autoScrollDefault, newestFirst, enableSearch, enableFilter, enableExport, enableClear, enableCopy, categories, levelBadgeColors, currentLogLevel, mode, showHeader, showCategories, showArchives, height, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
 
 interface LogStatsProps {
     stats: {
@@ -1000,38 +1115,42 @@ interface SettingsFrameworkProps {
 }
 declare function SettingsFramework({ categories, onSave, onLoad, onValidate, onRestartRequired, title, description, showResetButton, showUndoButton, customFields, renderCategory, renderSetting, autoSave, autoSaveDelay, confirmReset, persistState, className, containerClassName, categoryClassName, settingClassName, height, maxContentWidth }: SettingsFrameworkProps): react_jsx_runtime.JSX.Element;
 
-interface LogsSettingsProps extends SettingsCategoryComponentProps {
+interface LiveLogsSettingsProps extends SettingsCategoryComponentProps {
     /** Fetch current log entries */
     onFetchLogs: () => Promise<LogEntry[]>;
-    /** Fetch log archive files */
-    onFetchArchives?: () => Promise<LogFile[]>;
     /** Clear current logs */
     onClearLogs?: () => Promise<void>;
+    /** Auto-refresh interval in ms (default: 3000) */
+    autoRefreshMs?: number;
+    /** Height of the log viewer (default: 100%) */
+    height?: string;
+}
+interface LogArchivesSettingsProps extends SettingsCategoryComponentProps {
+    /** Fetch log archive files */
+    onFetchArchives: () => Promise<LogFile[]>;
     /** Download an archive file */
     onDownloadArchive?: (filename: string) => void;
     /** Delete an archive file */
     onDeleteArchive?: (filename: string) => Promise<void>;
-    /** Auto-refresh interval in ms (default: 3000) */
-    autoRefreshMs?: number;
-    /** Height of the log viewer (default: calc(100vh - 400px)) */
+    /** Height of the archives viewer (default: 100%) */
     height?: string;
 }
 /**
- * Logs settings component for use in SettingsFramework categories
+ * Live logs settings component for use in SettingsFramework categories.
+ * Shows only the live log viewer without archives or internal navigation.
  *
  * @example
  * ```tsx
  * const categories = [
  *   {
- *     id: 'logs',
- *     label: 'Logs',
- *     icon: ScrollText,
- *     description: 'View application logs and archives',
+ *     id: 'liveLogs',
+ *     label: 'Live Logs',
+ *     icon: Terminal,
+ *     description: 'View real-time application logs',
  *     component: (props) => (
- *       <LogsSettings
+ *       <LiveLogsSettings
  *         {...props}
  *         onFetchLogs={fetchLogs}
- *         onFetchArchives={fetchArchives}
  *         onClearLogs={clearLogs}
  *       />
  *     ),
@@ -1039,6 +1158,42 @@ interface LogsSettingsProps extends SettingsCategoryComponentProps {
  * ];
  * ```
  */
+declare function LiveLogsSettings({ onFetchLogs, onClearLogs, autoRefreshMs, height, }: LiveLogsSettingsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Log archives settings component for use in SettingsFramework categories.
+ * Shows only the archived log files without live logs or internal navigation.
+ *
+ * @example
+ * ```tsx
+ * const categories = [
+ *   {
+ *     id: 'logArchives',
+ *     label: 'Log Archives',
+ *     icon: Archive,
+ *     description: 'Download and manage archived log files',
+ *     component: (props) => (
+ *       <LogArchivesSettings
+ *         {...props}
+ *         onFetchArchives={fetchArchives}
+ *         onDownloadArchive={downloadArchive}
+ *         onDeleteArchive={deleteArchive}
+ *       />
+ *     ),
+ *   },
+ * ];
+ * ```
+ */
+declare function LogArchivesSettings({ onFetchArchives, onDownloadArchive, onDeleteArchive, height, }: LogArchivesSettingsProps): react_jsx_runtime.JSX.Element;
+interface LogsSettingsProps extends SettingsCategoryComponentProps {
+    onFetchLogs: () => Promise<LogEntry[]>;
+    onFetchArchives?: () => Promise<LogFile[]>;
+    onClearLogs?: () => Promise<void>;
+    onDownloadArchive?: (filename: string) => void;
+    onDeleteArchive?: (filename: string) => Promise<void>;
+    autoRefreshMs?: number;
+    height?: string;
+}
+/** @deprecated Use LiveLogsSettings and LogArchivesSettings instead */
 declare function LogsSettings({ onFetchLogs, onFetchArchives, onClearLogs, onDownloadArchive, onDeleteArchive, autoRefreshMs, height, }: LogsSettingsProps): react_jsx_runtime.JSX.Element;
 
 /**
@@ -1914,4 +2069,4 @@ interface TableFiltersProps {
  */
 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, type CustomFieldProps, 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, LogsSettings, type LogsSettingsProps, 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, type SettingsCategory, type SettingsCategoryComponentProps, SettingsFramework, type SettingsFrameworkProps, 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, formatTimeAgo, getCSSVariables, getNextAvailableColor, getNextTagColor, getRandomTagColor, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useColumnDragDrop, useColumnOrder, useColumnVisibility, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, usePagination, useResizableColumns, useSocketIO, useTheme, waitForApiReady };
+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, type CustomFieldProps, 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, LiveLogsSettings, type LiveLogsSettingsProps, LoadingState, LogArchivesSettings, type LogArchivesSettingsProps, type LogEntry, type LogFile, LogStats, type LogStatsProps, LogViewer, type LogViewerProps, LoginPage, LogsPage, type LogsPageProps, LogsSettings, type LogsSettingsProps, 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, type SettingsCategory, type SettingsCategoryComponentProps, SettingsFramework, type SettingsFrameworkProps, SettingsPage, type SettingsPageProps, Sidebar, SidebarAppLayout, type SidebarAppLayoutProps, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLayout, type SidebarLayoutProps, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarNavGroup, type SidebarNavItem, SidebarProvider, SidebarRail, SidebarSection, SidebarSeparator, SidebarTrigger, 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, formatTimeAgo, getCSSVariables, getNextAvailableColor, getNextTagColor, getRandomTagColor, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useColumnDragDrop, useColumnOrder, useColumnVisibility, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, usePagination, useResizableColumns, useSidebar, useSocketIO, useTheme, waitForApiReady };

package/ui/dist/index.d.ts

@@ -761,6 +761,117 @@ interface SidebarLayoutProps extends Omit<AppLayoutProps, 'primaryColor'> {
 }
 declare function SidebarLayout({ appName, appVersion, navigation, children, logoSrc, logoClassName, logoOffset, headerHeight, showLogout, onLogout, authenticated, connectionStatusUrl, sidebarWidth, className }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
+interface SidebarNavItem {
+    name: string;
+    href: string;
+    icon?: LucideIcon | React__default.ReactNode;
+    badge?: number | string;
+    /** Group label - items with the same group will be grouped together */
+    group?: string;
+}
+interface SidebarNavGroup {
+    label: string;
+    items: SidebarNavItem[];
+}
+interface SidebarAppLayoutProps {
+    /** Application name displayed in the sidebar header */
+    appName: string;
+    /** Application version (optional) */
+    appVersion?: string;
+    /** Navigation items - can be flat array or grouped */
+    navigation: SidebarNavItem[] | SidebarNavGroup[];
+    /** Page content */
+    children: React__default.ReactNode;
+    /** Logo image source */
+    logoSrc?: string;
+    /** Custom CSS class for logo */
+    logoClassName?: string;
+    /** Show logout button */
+    showLogout?: boolean;
+    /** Custom logout handler */
+    onLogout?: () => void;
+    /** Whether user is authenticated (controls logout visibility) */
+    authenticated?: boolean;
+    /** WebSocket URL for connection status */
+    connectionStatusUrl?: string;
+    /** Custom sidebar width (default: 260px) */
+    sidebarWidth?: number;
+    /** Additional className for the layout container */
+    className?: string;
+    /** Custom header content (replaces default logo/name) */
+    headerContent?: React__default.ReactNode;
+    /** Custom footer content (replaces default logout) */
+    footerContent?: React__default.ReactNode;
+    /** Primary accent color for active states */
+    primaryColor?: string;
+}
+/**
+ * Full-featured application layout with sidebar navigation.
+ * Based on the epi-edge-bms sidebar design pattern.
+ *
+ * @example
+ * ```tsx
+ * <SidebarAppLayout
+ *   appName="My App"
+ *   appVersion="1.0.0"
+ *   navigation={[
+ *     { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+ *     { name: 'Settings', href: '/settings', icon: Settings },
+ *   ]}
+ * >
+ *   <Routes>...</Routes>
+ * </SidebarAppLayout>
+ * ```
+ */
+declare function SidebarAppLayout({ appName, appVersion, navigation, children, logoSrc, logoClassName, showLogout, onLogout, authenticated, connectionStatusUrl, sidebarWidth, className, headerContent, footerContent, primaryColor, }: SidebarAppLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarContextValue {
+    collapsed: boolean;
+    toggle: () => void;
+    isMobile: boolean;
+}
+interface SidebarProviderProps {
+    children: React$1.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsible?: boolean;
+}
+declare function SidebarProvider({ children, defaultCollapsed, collapsible }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    collapsible?: 'icon' | 'none';
+    width?: number;
+}
+declare function Sidebar({ className, collapsible, width, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function SidebarTrigger({ className, ...props }: React$1.ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+declare function SidebarHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const SidebarGroup: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "active" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SidebarMenuButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof sidebarMenuButtonVariants> {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string;
+}
+declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<SidebarMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<SidebarMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarSection: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHRElement> & React$1.RefAttributes<HTMLHRElement>>;
+interface SidebarMenuBadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'secondary' | 'destructive';
+}
+declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<SidebarMenuBadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+
 /**
  * Activity LED Component
  * Shows a status indicator with optional animation
@@ -900,6 +1011,10 @@ interface LogViewerProps {
     categories?: LogCategory[];
     levelBadgeColors?: Record<string, string>;
     currentLogLevel?: string;
+    /** Display mode: 'full' shows sidebar, 'logs' shows only live logs, 'archives' shows only archives */
+    mode?: 'full' | 'logs' | 'archives';
+    /** Show the header with title. Set to false when embedded in settings. */
+    showHeader?: boolean;
     showCategories?: boolean;
     showArchives?: boolean;
     height?: string;
@@ -910,7 +1025,7 @@ interface LogViewerProps {
     enableCopy?: boolean;
     className?: string;
 }
-declare function LogViewer({ logs: externalLogs, logFiles: externalLogFiles, onFetchLogs, onFetchArchives, onClearLogs, onExportLogs, onDownloadArchive, onDeleteArchive, onLogReceived, autoRefreshMs, maxEntries, defaultCategory, enableLiveUpdates, enableAutoScroll, autoScrollDefault, newestFirst, enableSearch, enableFilter, enableExport, enableClear, enableCopy, categories, levelBadgeColors, currentLogLevel, showCategories, showArchives, height, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
+declare function LogViewer({ logs: externalLogs, logFiles: externalLogFiles, onFetchLogs, onFetchArchives, onClearLogs, onExportLogs, onDownloadArchive, onDeleteArchive, onLogReceived, autoRefreshMs, maxEntries, defaultCategory, enableLiveUpdates, enableAutoScroll, autoScrollDefault, newestFirst, enableSearch, enableFilter, enableExport, enableClear, enableCopy, categories, levelBadgeColors, currentLogLevel, mode, showHeader, showCategories, showArchives, height, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
 
 interface LogStatsProps {
     stats: {
@@ -1000,38 +1115,42 @@ interface SettingsFrameworkProps {
 }
 declare function SettingsFramework({ categories, onSave, onLoad, onValidate, onRestartRequired, title, description, showResetButton, showUndoButton, customFields, renderCategory, renderSetting, autoSave, autoSaveDelay, confirmReset, persistState, className, containerClassName, categoryClassName, settingClassName, height, maxContentWidth }: SettingsFrameworkProps): react_jsx_runtime.JSX.Element;
 
-interface LogsSettingsProps extends SettingsCategoryComponentProps {
+interface LiveLogsSettingsProps extends SettingsCategoryComponentProps {
     /** Fetch current log entries */
     onFetchLogs: () => Promise<LogEntry[]>;
-    /** Fetch log archive files */
-    onFetchArchives?: () => Promise<LogFile[]>;
     /** Clear current logs */
     onClearLogs?: () => Promise<void>;
+    /** Auto-refresh interval in ms (default: 3000) */
+    autoRefreshMs?: number;
+    /** Height of the log viewer (default: 100%) */
+    height?: string;
+}
+interface LogArchivesSettingsProps extends SettingsCategoryComponentProps {
+    /** Fetch log archive files */
+    onFetchArchives: () => Promise<LogFile[]>;
     /** Download an archive file */
     onDownloadArchive?: (filename: string) => void;
     /** Delete an archive file */
     onDeleteArchive?: (filename: string) => Promise<void>;
-    /** Auto-refresh interval in ms (default: 3000) */
-    autoRefreshMs?: number;
-    /** Height of the log viewer (default: calc(100vh - 400px)) */
+    /** Height of the archives viewer (default: 100%) */
     height?: string;
 }
 /**
- * Logs settings component for use in SettingsFramework categories
+ * Live logs settings component for use in SettingsFramework categories.
+ * Shows only the live log viewer without archives or internal navigation.
  *
  * @example
  * ```tsx
  * const categories = [
  *   {
- *     id: 'logs',
- *     label: 'Logs',
- *     icon: ScrollText,
- *     description: 'View application logs and archives',
+ *     id: 'liveLogs',
+ *     label: 'Live Logs',
+ *     icon: Terminal,
+ *     description: 'View real-time application logs',
  *     component: (props) => (
- *       <LogsSettings
+ *       <LiveLogsSettings
  *         {...props}
  *         onFetchLogs={fetchLogs}
- *         onFetchArchives={fetchArchives}
  *         onClearLogs={clearLogs}
  *       />
  *     ),
@@ -1039,6 +1158,42 @@ interface LogsSettingsProps extends SettingsCategoryComponentProps {
  * ];
  * ```
  */
+declare function LiveLogsSettings({ onFetchLogs, onClearLogs, autoRefreshMs, height, }: LiveLogsSettingsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Log archives settings component for use in SettingsFramework categories.
+ * Shows only the archived log files without live logs or internal navigation.
+ *
+ * @example
+ * ```tsx
+ * const categories = [
+ *   {
+ *     id: 'logArchives',
+ *     label: 'Log Archives',
+ *     icon: Archive,
+ *     description: 'Download and manage archived log files',
+ *     component: (props) => (
+ *       <LogArchivesSettings
+ *         {...props}
+ *         onFetchArchives={fetchArchives}
+ *         onDownloadArchive={downloadArchive}
+ *         onDeleteArchive={deleteArchive}
+ *       />
+ *     ),
+ *   },
+ * ];
+ * ```
+ */
+declare function LogArchivesSettings({ onFetchArchives, onDownloadArchive, onDeleteArchive, height, }: LogArchivesSettingsProps): react_jsx_runtime.JSX.Element;
+interface LogsSettingsProps extends SettingsCategoryComponentProps {
+    onFetchLogs: () => Promise<LogEntry[]>;
+    onFetchArchives?: () => Promise<LogFile[]>;
+    onClearLogs?: () => Promise<void>;
+    onDownloadArchive?: (filename: string) => void;
+    onDeleteArchive?: (filename: string) => Promise<void>;
+    autoRefreshMs?: number;
+    height?: string;
+}
+/** @deprecated Use LiveLogsSettings and LogArchivesSettings instead */
 declare function LogsSettings({ onFetchLogs, onFetchArchives, onClearLogs, onDownloadArchive, onDeleteArchive, autoRefreshMs, height, }: LogsSettingsProps): react_jsx_runtime.JSX.Element;
 
 /**
@@ -1914,4 +2069,4 @@ interface TableFiltersProps {
  */
 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, type CustomFieldProps, 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, LogsSettings, type LogsSettingsProps, 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, type SettingsCategory, type SettingsCategoryComponentProps, SettingsFramework, type SettingsFrameworkProps, 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, formatTimeAgo, getCSSVariables, getNextAvailableColor, getNextTagColor, getRandomTagColor, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useColumnDragDrop, useColumnOrder, useColumnVisibility, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, usePagination, useResizableColumns, useSocketIO, useTheme, waitForApiReady };
+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, type CustomFieldProps, 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, LiveLogsSettings, type LiveLogsSettingsProps, LoadingState, LogArchivesSettings, type LogArchivesSettingsProps, type LogEntry, type LogFile, LogStats, type LogStatsProps, LogViewer, type LogViewerProps, LoginPage, LogsPage, type LogsPageProps, LogsSettings, type LogsSettingsProps, 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, type SettingsCategory, type SettingsCategoryComponentProps, SettingsFramework, type SettingsFrameworkProps, SettingsPage, type SettingsPageProps, Sidebar, SidebarAppLayout, type SidebarAppLayoutProps, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLayout, type SidebarLayoutProps, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarNavGroup, type SidebarNavItem, SidebarProvider, SidebarRail, SidebarSection, SidebarSeparator, SidebarTrigger, 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, formatTimeAgo, getCSSVariables, getNextAvailableColor, getNextTagColor, getRandomTagColor, getTagClassName, getTagColor, socketManager, statusStyles, theme, timeAgo, useApiReadiness, useColumnDragDrop, useColumnOrder, useColumnVisibility, useConfirmDialog, useConnectionStatus, useDebounce, useFormState, usePagination, useResizableColumns, useSidebar, useSocketIO, useTheme, waitForApiReady };