@object-ui/app-shell 3.3.1 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @object-ui/app-shell — Changelog
 
+## 3.3.2
+
+### Patch Changes
+
+- @object-ui/types@3.3.2
+- @object-ui/core@3.3.2
+- @object-ui/i18n@3.3.2
+- @object-ui/react@3.3.2
+- @object-ui/components@3.3.2
+- @object-ui/fields@3.3.2
+- @object-ui/layout@3.3.2
+- @object-ui/data-objectstack@3.3.2
+- @object-ui/auth@3.3.2
+- @object-ui/permissions@3.3.2
+- @object-ui/plugin-calendar@3.3.2
+- @object-ui/plugin-charts@3.3.2
+- @object-ui/plugin-chatbot@3.3.2
+- @object-ui/plugin-dashboard@3.3.2
+- @object-ui/plugin-designer@3.3.2
+- @object-ui/plugin-detail@3.3.2
+- @object-ui/plugin-form@3.3.2
+- @object-ui/plugin-grid@3.3.2
+- @object-ui/plugin-kanban@3.3.2
+- @object-ui/plugin-list@3.3.2
+- @object-ui/plugin-report@3.3.2
+- @object-ui/plugin-view@3.3.2
+- @object-ui/collaboration@3.3.2
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/chrome/CommandPalette.js

@@ -9,27 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useEffect, useState, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import * as LucideIcons from 'lucide-react';
 import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from '@object-ui/components';
-import { LayoutDashboard, FileText, BarChart3, Database, Moon, Sun, Monitor, Search, Plus, } from 'lucide-react';
+import { LayoutDashboard, FileText, BarChart3, Moon, Sun, Monitor, Search, Plus, } from 'lucide-react';
 import { useTheme } from './ThemeProvider';
 import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { resolveI18nLabel } from '../utils';
-/** Resolve a Lucide icon by name (kebab-case or PascalCase) */
-function getIcon(name) {
-    if (!name)
-        return Database;
-    if (LucideIcons[name])
-        return LucideIcons[name];
-    const pascal = name
-        .split('-')
-        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
-        .join('');
-    if (LucideIcons[pascal])
-        return LucideIcons[pascal];
-    return Database;
-}
+import { getIcon } from '../utils/getIcon';
 export function CommandPalette({ apps, activeApp, objects: _objects, onAppChange }) {
     const [open, setOpen] = useState(false);
     const navigate = useNavigate();

package/dist/layout/AppHeader.js

@@ -178,5 +178,5 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     return (_jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [_jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [_jsx(Link, { to: "/home", className: "flex items-center justify-center h-7 w-7 shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", title: "ObjectStack", children: _jsx(Boxes, { className: "h-4 w-4" }) }), resolvedVariant === 'home' && (_jsx("span", { className: "hidden sm:inline ml-2 text-sm font-semibold tracking-tight", children: "ObjectStack" })), resolvedVariant === 'orgs' && (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: t('organizations.title', { defaultValue: 'Organizations' }) })] })), isApp && (_jsxs(_Fragment, { children: [_jsx(SidebarTrigger, { className: "md:hidden shrink-0 ml-1" }), activeAppName && onAppChange ? (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx(AppSwitcher, { activeAppName: activeAppName, onAppChange: onAppChange })] })) : appName ? (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: appName })] })) : null, extraSegments.map((seg, i) => {
                                 const isLast = i === extraSegments.length - 1;
                                 return (_jsxs("span", { className: "hidden sm:flex items-center min-w-0", children: [_jsx(PathSep, {}), seg.siblings && seg.siblings.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: `flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium transition-colors outline-none hover:bg-accent hover:text-foreground ${!isLast ? 'text-foreground/60' : 'text-foreground/80'}`, children: [seg.label, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-56 max-h-72 overflow-y-auto", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: "Switch Object" }), _jsx(DropdownMenuSeparator, {}), seg.siblings.map((sibling) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Link, { to: sibling.href, className: "w-full", children: sibling.label }) }, sibling.href)))] })] })) : seg.href ? (_jsx(Link, { to: seg.href, className: `rounded-md px-1.5 py-1 text-sm font-medium transition-colors hover:bg-accent hover:text-foreground truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label })) : (_jsx("span", { className: `px-1.5 py-1 text-sm font-medium truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label }))] }, i));
-                            }), _jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel })] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), "Offline"] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: "Users currently online", children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search...' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), "aria-label": t('console.search', { defaultValue: 'Search...' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ActivityFeed, { activities: activeActivities }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", asChild: true, "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ModeToggle, {}) }), _jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(LocaleSwitcher, {}) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image ?? '/avatars/user.jpg', alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image ?? '/avatars/user.jpg', alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] })] })] })] })] }));
+                            }), _jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel })] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), "Offline"] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: "Users currently online", children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search...' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), "aria-label": t('console.search', { defaultValue: 'Search...' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ActivityFeed, { activities: activeActivities }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", asChild: true, "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(ModeToggle, {}) }), _jsx("div", { className: "hidden sm:flex shrink-0", children: _jsx(LocaleSwitcher, {}) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] })] })] })] })] }));
 }

package/dist/layout/AppSidebar.js

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import * as React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import * as LucideIcons from 'lucide-react';
+import { Layers } from 'lucide-react';
+import { getIcon as resolveIcon } from '../utils/getIcon';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarInput, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, useSidebar, } from '@object-ui/components';
 import { ChevronsUpDown, Plus, Settings, LogOut, Database, Clock, Star, StarOff, Search, Pencil, ChevronRight, Home, } from 'lucide-react';
 import { NavigationRenderer } from '@object-ui/layout';
@@ -84,26 +85,10 @@ function useNavOrder(appName) {
 }
 /**
  * Resolve a Lucide icon component by name string.
- * Supports camelCase, PascalCase, and kebab-case icon names.
+ * Delegates to the shared lazy `getIcon` helper which returns a wrapper
+ * around lucide-react `DynamicIcon` so individual icons are code-split.
  */
-function getIcon(name) {
-    if (!name)
-        return LucideIcons.Database;
-    // 1. Direct match (PascalCase or camelCase)
-    if (LucideIcons[name]) {
-        return LucideIcons[name];
-    }
-    // 2. Try converting kebab-case to PascalCase (e.g. "shopping-cart" -> "ShoppingCart")
-    const pascalName = name
-        .split('-')
-        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-        .join('');
-    if (LucideIcons[pascalName]) {
-        return LucideIcons[pascalName];
-    }
-    // 3. Fallback
-    return LucideIcons.Database;
-}
+const getIcon = resolveIcon;
 export function AppSidebar({ activeAppName, onAppChange }) {
     const { isMobile } = useSidebar();
     const { user, signOut } = useAuth();
@@ -192,14 +177,14 @@ export function AppSidebar({ activeAppName, onAppChange }) {
         { id: 'sys-roles', label: 'Roles', type: 'url', url: '/apps/setup/system/roles', icon: 'shield' },
         { id: 'sys-create-app', label: 'Create App', type: 'url', url: '/create-app', icon: 'plus' },
     ], []);
-    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || `${activeApps.length} Apps Available` })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Switch Application" }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Home" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Add App" })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Edit App" })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Manage All Apps" })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: "System Console" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: "No apps configured" })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(LucideIcons.Layers, { className: "h-3.5 w-3.5" }), "Area"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || `${activeApps.length} Apps Available` })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Switch Application" }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Home" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Add App" })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Edit App" })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Manage All Apps" })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: "System Console" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: "No apps configured" })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), "Area"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
                                                     const AreaIcon = getIcon(area.icon);
                                                     const isActiveArea = area.id === activeAreaId;
                                                     return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActiveArea, tooltip: area.label, onClick: () => setActiveAreaId(area.id), children: [_jsx(AreaIcon, { className: "h-4 w-4" }), _jsx("span", { children: area.label })] }) }, area.id));
                                                 }) }) })] })), _jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarGroupContent, { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-70" }), _jsx(SidebarInput, { placeholder: "Search navigation...", value: navSearchQuery, onChange: (e) => setNavSearchQuery(e.target.value), className: "pl-8" })] }) }), _jsx(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, searchQuery: navSearchQuery, enablePinning: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), t: t }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), "Recent"] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Favorites"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(SidebarGroup, { "data-testid": "system-fallback-nav", children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Settings, { className: "h-3.5 w-3.5" }), "System"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: systemFallbackNavigation.map((item) => {
                                             const NavIcon = getIcon(item.icon);
                                             return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.url || '/system', children: [_jsx(NavIcon, { className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }) }, item.id));
-                                        }) }) })] })) }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image ?? '/avatars/user.jpg', alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] }), _jsx(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", side: isMobile ? "bottom" : "right", align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image ?? '/avatars/user.jpg', alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), "Settings"] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Log out"] })] })] }) }) }) })] }), isMobile && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: (activeApp ? resolvedNavigation : systemFallbackNavigation).filter((n) => n.type !== 'group').slice(0, 5).map((item) => {
+                                        }) }) })] })) }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] }), _jsx(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", side: isMobile ? "bottom" : "right", align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), "Settings"] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Log out"] })] })] }) }) }) })] }), isMobile && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: (activeApp ? resolvedNavigation : systemFallbackNavigation).filter((n) => n.type !== 'group').slice(0, 5).map((item) => {
                     const NavIcon = getIcon(item.icon);
                     const baseUrl = activeApp ? `/apps/${activeAppName}` : '';
                     let href = item.url || '#';

package/dist/layout/AppSwitcher.js

@@ -1,25 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as LucideIcons from 'lucide-react';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, } from '@object-ui/components';
 import { ChevronDown, Check } from 'lucide-react';
 import { useMetadata } from '../providers/MetadataProvider';
 import { resolveI18nLabel } from '../utils';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
-function getIcon(name) {
-    if (!name)
-        return LucideIcons.Database;
-    const lookup = (key) => {
-        try {
-            const icon = LucideIcons[key];
-            return typeof icon === 'function' ? icon : undefined;
-        }
-        catch {
-            return undefined;
-        }
-    };
-    const pascalName = name.split(/[-_]/).map(p => p.charAt(0).toUpperCase() + p.slice(1)).join('');
-    return lookup(name) ?? lookup(pascalName) ?? LucideIcons.Database;
-}
+import { getIcon } from '../utils/getIcon';
 export function AppSwitcher({ activeAppName, onAppChange }) {
     const { apps: metadataApps } = useMetadata();
     const { t } = useObjectTranslation();

package/dist/layout/ConsoleFloatingChatbot.d.ts

@@ -0,0 +1,10 @@
+interface ConsoleObject {
+    name: string;
+    label?: string;
+}
+export interface ConsoleFloatingChatbotProps {
+    appLabel: string;
+    objects: ConsoleObject[];
+}
+export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/layout/ConsoleFloatingChatbot.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingChatbot, useObjectChat } from '@object-ui/plugin-chatbot';
+export default function ConsoleFloatingChatbot({ appLabel, objects }) {
+    const objectNames = objects.map((o) => o.label || o.name).join(', ');
+    const { messages, isLoading, error, sendMessage, stop, reload, clear, } = useObjectChat({
+        initialMessages: [
+            {
+                id: 'welcome',
+                role: 'assistant',
+                content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
+            },
+        ],
+        autoResponse: true,
+        autoResponseText: objectNames
+            ? `I can help you work with ${objectNames}. What would you like to do?`
+            : 'Thanks for your message! I\'m here to help you navigate and manage your data.',
+        autoResponseDelay: 800,
+    });
+    return (_jsx(FloatingChatbot, { floatingConfig: {
+            position: 'bottom-right',
+            defaultOpen: false,
+            panelWidth: 400,
+            panelHeight: 520,
+            title: `${appLabel} Assistant`,
+            triggerSize: 56,
+        }, messages: messages, placeholder: "Ask anything...", onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
+}

package/dist/layout/ConsoleLayout.d.ts

@@ -17,5 +17,6 @@ interface ConsoleLayoutProps {
     objects: any[];
     connectionState?: ConnectionState;
 }
+/** Floating chatbot wired with useObjectChat for demo auto-response */
 export declare function ConsoleLayout({ children, activeAppName, activeApp, onAppChange, objects, connectionState }: ConsoleLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layout/ConsoleLayout.js

@@ -8,10 +8,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Sets navigation context to 'app' for app-specific routes.
  * @module
  */
-import { useEffect } from 'react';
+import { useEffect, Suspense, lazy } from 'react';
 import { AppShell } from '@object-ui/layout';
-import { FloatingChatbot, useObjectChat } from '@object-ui/plugin-chatbot';
 import { useDiscovery } from '@object-ui/react';
+// Lazy-load the chatbot so its heavy markdown deps (~150 KB) stay out of
+// the initial paint until the AI assistant is actually enabled.
+const ConsoleFloatingChatbot = lazy(() => import('./ConsoleFloatingChatbot'));
 import { UnifiedSidebar } from './UnifiedSidebar';
 import { AppHeader } from './AppHeader';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
@@ -23,31 +25,7 @@ function ConsoleLayoutInner({ children }) {
     return _jsx(_Fragment, { children: children });
 }
 /** Floating chatbot wired with useObjectChat for demo auto-response */
-function ConsoleFloatingChatbot({ appLabel, objects }) {
-    const objectNames = objects.map((o) => o.label || o.name).join(', ');
-    const { messages, isLoading, error, sendMessage, stop, reload, clear, } = useObjectChat({
-        initialMessages: [
-            {
-                id: 'welcome',
-                role: 'assistant',
-                content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
-            },
-        ],
-        autoResponse: true,
-        autoResponseText: objectNames
-            ? `I can help you work with ${objectNames}. What would you like to do?`
-            : 'Thanks for your message! I\'m here to help you navigate and manage your data.',
-        autoResponseDelay: 800,
-    });
-    return (_jsx(FloatingChatbot, { floatingConfig: {
-            position: 'bottom-right',
-            defaultOpen: false,
-            panelWidth: 400,
-            panelHeight: 520,
-            title: `${appLabel} Assistant`,
-            triggerSize: 56,
-        }, messages: messages, placeholder: "Ask anything...", onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
-}
+// (moved to ./ConsoleFloatingChatbot.tsx for code-splitting)
 export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange, objects, connectionState }) {
     const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
     const { isAiEnabled } = useDiscovery();
@@ -67,5 +45,5 @@ export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange,
                     ? `${resolveI18nLabel(activeApp.label)} — ObjectStack Console`
                     : undefined,
             }
-            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), isAiEnabled && _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects })] }));
+            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), isAiEnabled && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
 }

package/dist/layout/UnifiedSidebar.d.ts

@@ -12,6 +12,11 @@
  *
  * @module
  */
+/**
+ * Lazy-resolved Lucide icon — see ../utils/getIcon for impl.
+ * The local symbol is kept for backwards compat with existing call sites
+ * within this file.
+ */
 interface UnifiedSidebarProps {
     /** When in app context, the active app name */
     activeAppName?: string;

package/dist/layout/UnifiedSidebar.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import * as LucideIcons from 'lucide-react';
+import { getIcon } from '../utils/getIcon';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarTrigger, useSidebar, } from '@object-ui/components';
 import { Clock, Star, StarOff, ChevronRight, Layers, } from 'lucide-react';
 import { NavigationRenderer } from '@object-ui/layout';
@@ -85,30 +85,6 @@ function useNavOrder(appName) {
     }, [orderMap, persist]);
     return { applyOrder, handleReorder };
 }
-/**
- * Resolve a Lucide icon component by name string.
- * Safely handles both exact names and kebab-case → PascalCase conversion.
- * The try/catch guards against strict module proxy environments (e.g. vitest mocks).
- */
-function getIcon(name) {
-    if (!name)
-        return LucideIcons.Database;
-    const lookup = (key) => {
-        try {
-            const icon = LucideIcons[key];
-            return typeof icon === 'function' ? icon : undefined;
-        }
-        catch {
-            return undefined;
-        }
-    };
-    // Try exact match first, then convert kebab-case / lowercase to PascalCase
-    const pascalName = name
-        .split(/[-_]/)
-        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-        .join('');
-    return lookup(name) ?? lookup(pascalName) ?? LucideIcons.Database;
-}
 export function UnifiedSidebar({ activeAppName }) {
     const { isMobile } = useSidebar();
     const location = useLocation();

package/dist/utils/getIcon.d.ts

@@ -2,9 +2,23 @@
  * Icon utilities
  *
  * Helpers for resolving Lucide icons by name.
+ *
+ * Implementation: instead of statically importing every icon (~1500
+ * components, ~568 KB raw / 140 KB gz), we wrap lucide-react's built-in
+ * `DynamicIcon` so each icon is fetched as its own tiny chunk on first use.
+ *
+ * The exported `getIcon(name)` API stays synchronous and returns a React
+ * component, preserving call sites that do `const Icon = getIcon(name); <Icon />`.
  */
+import React from 'react';
 /**
- * Resolve a Lucide icon by name (kebab-case or PascalCase)
- * Falls back to Database icon if not found
+ * Resolve a Lucide icon by name (kebab-case or PascalCase).
+ *
+ * Returns a React component that lazy-loads the underlying SVG icon on
+ * mount. Falls back to the `Database` icon (statically imported) when no
+ * `name` is given.
+ *
+ * The returned component is memoised per `name` so repeated calls with the
+ * same name yield the same component reference (stable for React.memo).
  */
 export declare function getIcon(name?: string): React.ElementType;

package/dist/utils/getIcon.js

@@ -2,23 +2,86 @@
  * Icon utilities
  *
  * Helpers for resolving Lucide icons by name.
+ *
+ * Implementation: instead of statically importing every icon (~1500
+ * components, ~568 KB raw / 140 KB gz), we wrap lucide-react's built-in
+ * `DynamicIcon` so each icon is fetched as its own tiny chunk on first use.
+ *
+ * The exported `getIcon(name)` API stays synchronous and returns a React
+ * component, preserving call sites that do `const Icon = getIcon(name); <Icon />`.
  */
-import * as LucideIcons from 'lucide-react';
+import React from 'react';
 import { Database } from 'lucide-react';
+// @ts-expect-error - lucide-react has no `exports` field; subpath types live alongside dynamic.mjs
+import { DynamicIcon } from 'lucide-react/dynamic.mjs';
+/** Convert PascalCase / camelCase / mixed names to kebab-case for DynamicIcon. */
+function toKebab(name) {
+    if (name.includes('-'))
+        return name.toLowerCase();
+    return name
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
 /**
- * Resolve a Lucide icon by name (kebab-case or PascalCase)
- * Falls back to Database icon if not found
+ * Aliases for icon names that exist in other icon sets (FontAwesome, Material,
+ * Bootstrap…) but use a different name in Lucide. Mapped to the closest
+ * Lucide equivalent so existing metadata authored against FA stays portable.
+ */
+const ICON_ALIASES = {
+    bullseye: 'target',
+    bullhorn: 'megaphone',
+    tachometer: 'gauge',
+    'tachometer-alt': 'gauge',
+    dashboard: 'layout-dashboard',
+    'life-ring': 'life-buoy',
+    tasks: 'list-checks',
+    'file-invoice': 'receipt',
+    'file-signature': 'file-pen-line',
+    'file-pdf': 'file-text',
+    'check-square': 'square-check',
+    'arrow-up-right-from-square': 'external-link',
+    'sign-out-alt': 'log-out',
+    'sign-in-alt': 'log-in',
+    'cog': 'settings',
+    'gears': 'settings',
+    'envelope': 'mail',
+    'phone-alt': 'phone',
+    'map-marker-alt': 'map-pin',
+    'edit': 'pencil',
+    'trash-alt': 'trash-2',
+    'plus-circle': 'circle-plus',
+    'minus-circle': 'circle-minus',
+    'times-circle': 'circle-x',
+    'check-circle': 'circle-check',
+    'info-circle': 'info',
+    'question-circle': 'circle-help',
+    'exclamation-triangle': 'triangle-alert',
+};
+const cache = new Map();
+/**
+ * Resolve a Lucide icon by name (kebab-case or PascalCase).
+ *
+ * Returns a React component that lazy-loads the underlying SVG icon on
+ * mount. Falls back to the `Database` icon (statically imported) when no
+ * `name` is given.
+ *
+ * The returned component is memoised per `name` so repeated calls with the
+ * same name yield the same component reference (stable for React.memo).
  */
 export function getIcon(name) {
     if (!name)
         return Database;
-    if (LucideIcons[name])
-        return LucideIcons[name];
-    const pascal = name
-        .split('-')
-        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
-        .join('');
-    if (LucideIcons[pascal])
-        return LucideIcons[pascal];
-    return Database;
+    const cached = cache.get(name);
+    if (cached)
+        return cached;
+    const kebab = ICON_ALIASES[toKebab(name)] ?? toKebab(name);
+    const Wrapped = (props) => React.createElement(DynamicIcon, {
+        name: kebab,
+        fallback: Database,
+        ...props,
+    });
+    Wrapped.displayName = `LucideIcon(${name})`;
+    cache.set(name, Wrapped);
+    return Wrapped;
 }

package/dist/views/ObjectView.d.ts

@@ -8,7 +8,4 @@
  * - useObjectActions for toolbar create button
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
-import '@object-ui/plugin-grid';
-import '@object-ui/plugin-kanban';
-import '@object-ui/plugin-calendar';
 export declare function ObjectView({ dataSource, objects, onEdit }: any): import("react/jsx-runtime").JSX.Element;

package/dist/views/ObjectView.js

@@ -9,16 +9,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - useObjectActions for toolbar create button
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useCallback, useEffect, lazy, Suspense } from 'react';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
-import { ObjectChart } from '@object-ui/plugin-charts';
+const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
 import { ListView } from '@object-ui/plugin-list';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { ObjectView as PluginObjectView, ViewTabBar } from '@object-ui/plugin-view';
-// Import plugins for side-effects (registration)
-import '@object-ui/plugin-grid';
-import '@object-ui/plugin-kanban';
-import '@object-ui/plugin-calendar';
+// Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
+// uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
+// Do NOT add eager `import '@object-ui/plugin-*'` side-effect imports here.
 import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
 import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
 import { getIcon } from '../utils/getIcon';
@@ -575,17 +574,17 @@ export function ObjectView({ dataSource, objects, onEdit }) {
         }
         if (viewDef.type === 'chart') {
             const chartConfig = viewDef.chart || {};
-            return (_jsx(ObjectChart, { dataSource: ds, schema: {
-                    type: 'object-chart',
-                    objectName: objectDef.name,
-                    chartType: chartConfig.chartType,
-                    xAxisField: chartConfig.xAxisField,
-                    yAxisFields: chartConfig.yAxisFields,
-                    aggregation: chartConfig.aggregation,
-                    series: chartConfig.series,
-                    config: chartConfig.config,
-                    filter: chartConfig.filter,
-                } }, key));
+            return (_jsx(Suspense, { fallback: _jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading chart\u2026" }), children: _jsx(ObjectChart, { dataSource: ds, schema: {
+                        type: 'object-chart',
+                        objectName: objectDef.name,
+                        chartType: chartConfig.chartType,
+                        xAxisField: chartConfig.xAxisField,
+                        yAxisFields: chartConfig.yAxisFields,
+                        aggregation: chartConfig.aggregation,
+                        series: chartConfig.series,
+                        config: chartConfig.config,
+                        filter: chartConfig.filter,
+                    } }) }, key));
         }
         const fullSchema = {
             ...listSchema,

package/dist/views/ReportView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
-import { ReportViewer, ReportConfigPanel } from '@object-ui/plugin-report';
+const ReportViewer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportViewer })));
+const ReportConfigPanel = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportConfigPanel })));
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { Pencil, BarChart3, Loader2 } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -280,5 +281,5 @@ export function ReportView({ dataSource }) {
         allowExport: true,
         loading: dataLoading, // Loading state for data fetching
     };
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(ReportViewer, { schema: viewerSchema }) }) }), _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: _jsx(ReportViewer, { schema: viewerSchema }) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -26,34 +26,34 @@
   "dependencies": {
     "lucide-react": "^0.544.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "3.3.1",
-    "@object-ui/collaboration": "3.3.1",
-    "@object-ui/components": "3.3.1",
-    "@object-ui/core": "3.3.1",
-    "@object-ui/data-objectstack": "3.3.1",
-    "@object-ui/fields": "3.3.1",
-    "@object-ui/i18n": "3.3.1",
-    "@object-ui/layout": "3.3.1",
-    "@object-ui/permissions": "3.3.1",
-    "@object-ui/react": "3.3.1",
-    "@object-ui/types": "3.3.1"
+    "@object-ui/auth": "3.3.2",
+    "@object-ui/collaboration": "3.3.2",
+    "@object-ui/components": "3.3.2",
+    "@object-ui/core": "3.3.2",
+    "@object-ui/data-objectstack": "3.3.2",
+    "@object-ui/fields": "3.3.2",
+    "@object-ui/i18n": "3.3.2",
+    "@object-ui/layout": "3.3.2",
+    "@object-ui/permissions": "3.3.2",
+    "@object-ui/react": "3.3.2",
+    "@object-ui/types": "3.3.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "3.3.1",
-    "@object-ui/plugin-charts": "3.3.1",
-    "@object-ui/plugin-chatbot": "3.3.1",
-    "@object-ui/plugin-dashboard": "3.3.1",
-    "@object-ui/plugin-designer": "3.3.1",
-    "@object-ui/plugin-detail": "3.3.1",
-    "@object-ui/plugin-form": "3.3.1",
-    "@object-ui/plugin-grid": "3.3.1",
-    "@object-ui/plugin-kanban": "3.3.1",
-    "@object-ui/plugin-list": "3.3.1",
-    "@object-ui/plugin-report": "3.3.1",
-    "@object-ui/plugin-view": "3.3.1"
+    "@object-ui/plugin-calendar": "3.3.2",
+    "@object-ui/plugin-charts": "3.3.2",
+    "@object-ui/plugin-chatbot": "3.3.2",
+    "@object-ui/plugin-dashboard": "3.3.2",
+    "@object-ui/plugin-designer": "3.3.2",
+    "@object-ui/plugin-detail": "3.3.2",
+    "@object-ui/plugin-form": "3.3.2",
+    "@object-ui/plugin-grid": "3.3.2",
+    "@object-ui/plugin-kanban": "3.3.2",
+    "@object-ui/plugin-list": "3.3.2",
+    "@object-ui/plugin-report": "3.3.2",
+    "@object-ui/plugin-view": "3.3.2"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
@@ -64,7 +64,7 @@
     "react-router-dom": "^7.14.2",
     "sonner": "^2.0.7",
     "typescript": "^6.0.3",
-    "vite": "^6.2.2"
+    "vite": "^8.0.10"
   },
   "keywords": [
     "objectui",