@object-ui/app-shell 3.3.0 → 3.3.2

package/dist/layout/AppSidebar.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AppSidebar
+ *
+ * Collapsible sidebar navigation for the console. Delegates navigation
+ * rendering to `NavigationRenderer` from `@object-ui/layout` (using
+ * @dnd-kit drag-to-reorder and pin/unpin), while keeping Console-specific
+ * features: app switcher dropdown, user footer, favorites, recent items,
+ * and mobile swipe gesture.
+ * @module
+ */
+import * as React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+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';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
+import { useAuth, getUserInitials } from '@object-ui/auth';
+import { usePermissions } from '@object-ui/permissions';
+import { useRecentItems } from '../hooks/useRecentItems';
+import { useFavorites } from '../hooks/useFavorites';
+import { useNavPins } from '../hooks/useNavPins';
+import { resolveI18nLabel } from '../utils';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+// ---------------------------------------------------------------------------
+// useNavOrder – localStorage-persisted drag-and-drop reorder for nav items
+// ---------------------------------------------------------------------------
+function useNavOrder(appName) {
+    const storageKey = `objectui-nav-order-${appName}`;
+    const [orderMap, setOrderMap] = React.useState(() => {
+        try {
+            const raw = localStorage.getItem(storageKey);
+            if (!raw)
+                return {};
+            const parsed = JSON.parse(raw);
+            // Validate shape: must be a plain object with string[] values
+            if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed))
+                return {};
+            const result = {};
+            for (const [k, v] of Object.entries(parsed)) {
+                if (Array.isArray(v) && v.every((i) => typeof i === 'string')) {
+                    result[k] = v;
+                }
+            }
+            return result;
+        }
+        catch {
+            return {};
+        }
+    });
+    const persist = React.useCallback((next) => {
+        setOrderMap(next);
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(next));
+        }
+        catch { /* full */ }
+    }, [storageKey]);
+    /** Apply saved order to a flat list of navigation items. */
+    const applyOrder = React.useCallback((items) => {
+        const saved = orderMap['__root__'];
+        if (!saved)
+            return items;
+        const byId = new Map(items.map(i => [i.id, i]));
+        const ordered = [];
+        for (const id of saved) {
+            const item = byId.get(id);
+            if (item) {
+                ordered.push(item);
+                byId.delete(id);
+            }
+        }
+        // Append any items not in the saved order (newly added)
+        byId.forEach(item => ordered.push(item));
+        return ordered;
+    }, [orderMap]);
+    /** Persist reordered items from NavigationRenderer's onReorder callback. */
+    const handleReorder = React.useCallback((reorderedItems) => {
+        const ids = reorderedItems.map(i => i.id);
+        persist({ ...orderMap, __root__: ids });
+    }, [orderMap, persist]);
+    return { applyOrder, handleReorder };
+}
+/**
+ * Resolve a Lucide icon component by name string.
+ * Delegates to the shared lazy `getIcon` helper which returns a wrapper
+ * around lucide-react `DynamicIcon` so individual icons are code-split.
+ */
+const getIcon = resolveIcon;
+export function AppSidebar({ activeAppName, onAppChange }) {
+    const { isMobile } = useSidebar();
+    const { user, signOut } = useAuth();
+    const navigate = useNavigate();
+    const { t } = useObjectTranslation();
+    const { objectLabel: resolveNavObjectLabel } = useObjectLabel();
+    // Swipe-from-left-edge gesture to open sidebar on mobile
+    React.useEffect(() => {
+        const EDGE_THRESHOLD = 30;
+        const SWIPE_DISTANCE = 50;
+        let touchStartX = 0;
+        const handleTouchStart = (e) => {
+            touchStartX = e.touches[0].clientX;
+        };
+        const handleTouchEnd = (e) => {
+            const deltaX = e.changedTouches[0].clientX - touchStartX;
+            if (touchStartX < EDGE_THRESHOLD && deltaX > SWIPE_DISTANCE && isMobile) {
+                document.querySelector('[data-sidebar="trigger"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            }
+        };
+        document.addEventListener('touchstart', handleTouchStart, { passive: true });
+        document.addEventListener('touchend', handleTouchEnd, { passive: true });
+        return () => {
+            document.removeEventListener('touchstart', handleTouchStart);
+            document.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [isMobile]);
+    const { recentItems } = useRecentItems();
+    const { favorites, removeFavorite } = useFavorites();
+    const { apps: metadataApps } = useMetadata();
+    const apps = metadataApps || [];
+    // Filter out inactive apps
+    const activeApps = apps.filter((a) => a.active !== false);
+    const activeApp = activeApps.find((a) => a.name === activeAppName) || activeApps[0];
+    // Extract branding information from spec
+    const logo = activeApp?.branding?.logo;
+    const primaryColor = activeApp?.branding?.primaryColor;
+    // Drag-reorder persistence via localStorage (adapted for @dnd-kit)
+    const { applyOrder, handleReorder } = useNavOrder(activeAppName);
+    // Navigation pin persistence via localStorage
+    const { togglePin, applyPins } = useNavPins();
+    // Area management — track selected area when app defines areas
+    const areas = activeApp?.areas || [];
+    const [activeAreaId, setActiveAreaId] = React.useState(() => areas.length > 0 ? areas[0].id : null);
+    // Reset area when app changes or areas become available
+    React.useEffect(() => {
+        if (areas.length > 0) {
+            setActiveAreaId(prev => areas.some((a) => a.id === prev) ? prev : areas[0].id);
+        }
+        else {
+            setActiveAreaId(null);
+        }
+    }, [activeAppName, areas.length]);
+    // Resolve navigation items: area navigation > flat navigation > empty
+    const activeArea = areas.find((a) => a.id === activeAreaId);
+    const resolvedNavigation = activeArea?.navigation || activeApp?.navigation || [];
+    // Apply saved order and pin state to navigation items
+    const processedNavigation = React.useMemo(() => {
+        const ordered = applyOrder(resolvedNavigation);
+        return applyPins(ordered);
+    }, [resolvedNavigation, applyOrder, applyPins]);
+    // Search filter state for sidebar navigation
+    const [navSearchQuery, setNavSearchQuery] = React.useState('');
+    // Recent section collapsed by default
+    const [recentExpanded, setRecentExpanded] = React.useState(false);
+    // Visibility evaluation from Console expression context
+    const { evaluator } = useExpressionContext();
+    const evalVis = React.useCallback((expr) => evaluateVisibility(expr, evaluator), [evaluator]);
+    // Permission check from Console permissions context
+    const { can } = usePermissions();
+    const checkPerm = React.useCallback((permissions) => permissions.every((perm) => {
+        const parts = perm.split(':');
+        const [object, action] = parts.length >= 2
+            ? [parts[0], parts[1]]
+            : [perm, 'read'];
+        return can(object, action);
+    }), [can]);
+    const basePath = activeApp ? `/apps/${activeAppName}` : '';
+    // Fallback system navigation when no active app exists — routes into the Setup app.
+    const systemFallbackNavigation = React.useMemo(() => [
+        { id: 'sys-settings', label: 'System Settings', type: 'url', url: '/apps/setup', icon: 'settings' },
+        { id: 'sys-apps', label: 'Applications', type: 'url', url: '/apps/setup/system/apps', icon: 'layout-grid' },
+        { id: 'sys-objects', label: 'Object Manager', type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' },
+        { id: 'sys-users', label: 'Users', type: 'url', url: '/apps/setup/system/users', icon: 'users' },
+        { id: 'sys-orgs', label: 'Organizations', type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' },
+        { 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(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, 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 || '#';
+                    if (item.type === 'object') {
+                        href = `${baseUrl}/${item.objectName}`;
+                        if (item.viewName)
+                            href += `/view/${item.viewName}`;
+                    }
+                    else if (item.type === 'dashboard')
+                        href = item.dashboardName ? `${baseUrl}/dashboard/${item.dashboardName}` : '#';
+                    else if (item.type === 'page')
+                        href = item.pageName ? `${baseUrl}/page/${item.pageName}` : '#';
+                    return (_jsxs(Link, { to: href, className: "flex flex-col items-center gap-0.5 px-2 py-1.5 text-muted-foreground hover:text-foreground transition-colors min-w-[44px] min-h-[44px] justify-center", children: [_jsx(NavIcon, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] truncate max-w-[60px]", children: resolveI18nLabel(item.label, t) })] }, item.id));
+                }) }))] }));
+}

package/dist/layout/AppSwitcher.d.ts

@@ -0,0 +1,12 @@
+/**
+ * AppSwitcher
+ *
+ * Supabase-style application switcher for the top bar.
+ * Renders as: [App Name] [ChevronDown] — minimal ghost trigger, no icon box.
+ * @module
+ */
+export interface AppSwitcherProps {
+    activeAppName: string;
+    onAppChange: (name: string) => void;
+}
+export declare function AppSwitcher({ activeAppName, onAppChange }: AppSwitcherProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/layout/AppSwitcher.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { getIcon } from '../utils/getIcon';
+export function AppSwitcher({ activeAppName, onAppChange }) {
+    const { apps: metadataApps } = useMetadata();
+    const { t } = useObjectTranslation();
+    const { appLabel } = useObjectLabel();
+    const apps = metadataApps || [];
+    const activeApps = apps.filter((a) => a.active !== false);
+    const activeApp = activeApps.find((a) => a.name === activeAppName) || activeApps[0];
+    if (!activeApp)
+        return null;
+    const appLabelText = appLabel({ name: activeApp.name, label: resolveI18nLabel(activeApp.label, t) });
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium text-foreground/80 hover:bg-accent hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [appLabelText, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-60", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: "Switch Application" }), _jsx(DropdownMenuSeparator, {}), activeApps.map((app) => {
+                        const AppIcon = getIcon(app.icon);
+                        const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
+                        const isActive = activeApp.name === app.name;
+                        return (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "flex items-center gap-2.5 py-2", children: [_jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded border bg-muted text-muted-foreground", children: _jsx(AppIcon, { className: "size-3" }) }), _jsx("span", { className: "flex-1 truncate", children: label }), isActive && _jsx(Check, { className: "size-3.5 text-primary shrink-0" })] }, app.name));
+                    })] })] }));
+}

package/dist/layout/AuthPageLayout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared layout for authentication pages (login, register, forgot password).
+ * Provides a widescreen-optimized split-panel design with branding on the left
+ * and form content on the right, inspired by enterprise platforms like Airtable and Salesforce.
+ */
+import type React from 'react';
+export declare function AuthPageLayout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/layout/AuthPageLayout.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AuthPageLayout({ children }) {
+    return (_jsxs("div", { className: "flex min-h-screen", children: [_jsx("div", { className: "hidden lg:flex lg:w-1/2 items-center justify-center bg-primary p-12", children: _jsxs("div", { className: "max-w-md space-y-6 text-primary-foreground", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10", role: "img", "aria-label": "ObjectStack logo", children: [_jsx("title", { children: "ObjectStack" }), _jsx("path", { d: "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" })] }), _jsx("span", { className: "text-2xl font-bold", children: "ObjectStack" })] }), _jsx("h2", { className: "text-3xl font-bold leading-tight", children: "Build powerful business applications, faster." }), _jsx("p", { className: "text-lg opacity-90", children: "The universal platform for enterprise data management, workflows, and analytics." })] }) }), _jsx("div", { className: "flex w-full lg:w-1/2 items-center justify-center bg-background px-6 py-12", children: children })] }));
+}

package/dist/layout/ConnectionStatus.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ConnectionStatus
+ *
+ * Displays the current ObjectStack connection state in the header area.
+ * Shows a subtle indicator when connected (auto-hides after a moment),
+ * and a prominent one when reconnecting or in error state.
+ */
+import type { ConnectionState } from '@object-ui/data-objectstack';
+interface ConnectionStatusProps {
+    state: ConnectionState;
+    className?: string;
+}
+export declare function ConnectionStatus({ state, className }: ConnectionStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/layout/ConnectionStatus.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConnectionStatus
+ *
+ * Displays the current ObjectStack connection state in the header area.
+ * Shows a subtle indicator when connected (auto-hides after a moment),
+ * and a prominent one when reconnecting or in error state.
+ */
+import { useState, useEffect } from 'react';
+import { cn } from '@object-ui/components';
+import { WifiOff, Loader2, CheckCircle2 } from 'lucide-react';
+const statusConfig = {
+    connected: { label: 'Connected', color: 'text-green-500', icon: CheckCircle2 },
+    connecting: { label: 'Connecting...', color: 'text-yellow-500', icon: Loader2 },
+    reconnecting: { label: 'Reconnecting...', color: 'text-yellow-500', icon: Loader2 },
+    disconnected: { label: 'Disconnected', color: 'text-muted-foreground', icon: WifiOff },
+    error: { label: 'Connection Error', color: 'text-destructive', icon: WifiOff },
+};
+export function ConnectionStatus({ state, className }) {
+    const config = statusConfig[state];
+    const Icon = config.icon;
+    const [showConnected, setShowConnected] = useState(false);
+    // Briefly show "Connected" when transitioning to connected state
+    useEffect(() => {
+        if (state === 'connected') {
+            setShowConnected(true);
+            const timer = setTimeout(() => setShowConnected(false), 2000);
+            return () => clearTimeout(timer);
+        }
+        setShowConnected(false);
+    }, [state]);
+    // Hide when connected (after the brief flash)
+    if (state === 'connected' && !showConnected)
+        return null;
+    return (_jsxs("div", { className: cn('flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md transition-opacity duration-300', config.color, state === 'connected' && 'bg-green-500/10', state === 'error' && 'bg-destructive/10', state === 'reconnecting' && 'bg-yellow-500/10', className), title: config.label, children: [_jsx(Icon, { className: cn('h-3.5 w-3.5', (state === 'connecting' || state === 'reconnecting') && 'animate-spin') }), _jsx("span", { className: "hidden sm:inline", children: config.label })] }));
+}

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

@@ -0,0 +1,22 @@
+/**
+ * ConsoleLayout
+ *
+ * Root layout shell for the console application. Composes the AppShell
+ * with the UnifiedSidebar, header, and main content area.
+ * Includes the global floating chatbot (FAB) widget.
+ * Sets navigation context to 'app' for app-specific routes.
+ * @module
+ */
+import React from 'react';
+import type { ConnectionState } from '@object-ui/data-objectstack';
+interface ConsoleLayoutProps {
+    children: React.ReactNode;
+    activeAppName: string;
+    activeApp: any;
+    onAppChange: (name: string) => void;
+    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

@@ -0,0 +1,49 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConsoleLayout
+ *
+ * Root layout shell for the console application. Composes the AppShell
+ * with the UnifiedSidebar, header, and main content area.
+ * Includes the global floating chatbot (FAB) widget.
+ * Sets navigation context to 'app' for app-specific routes.
+ * @module
+ */
+import { useEffect, Suspense, lazy } from 'react';
+import { AppShell } from '@object-ui/layout';
+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';
+import { useNavigationContext } from '../context/NavigationContext';
+import { resolveI18nLabel } from '../utils';
+/** Inner component that can access SidebarProvider context */
+function ConsoleLayoutInner({ children }) {
+    useResponsiveSidebar();
+    return _jsx(_Fragment, { children: children });
+}
+/** Floating chatbot wired with useObjectChat for demo auto-response */
+// (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();
+    const { setContext, setCurrentAppName } = useNavigationContext();
+    // Set navigation context to 'app' when this layout mounts
+    useEffect(() => {
+        setContext('app');
+        setCurrentAppName(activeAppName);
+    }, [setContext, setCurrentAppName, activeAppName]);
+    return (_jsxs(AppShell, { sidebar: _jsx(UnifiedSidebar, { activeAppName: activeAppName, onAppChange: onAppChange }), navbar: _jsx(AppHeader, { variant: "app", appName: appLabel, objects: objects, connectionState: connectionState, activeAppName: activeAppName, onAppChange: onAppChange }), className: "!p-0 overflow-hidden bg-muted/5", branding: activeApp?.branding
+            ? {
+                primaryColor: activeApp.branding.primaryColor,
+                accentColor: activeApp.branding.accentColor,
+                favicon: activeApp.branding.favicon,
+                logo: activeApp.branding.logo,
+                title: activeApp.label
+                    ? `${resolveI18nLabel(activeApp.label)} — ObjectStack Console`
+                    : undefined,
+            }
+            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), isAiEnabled && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
+}

package/dist/layout/LocaleSwitcher.d.ts

@@ -0,0 +1,7 @@
+/**
+ * LocaleSwitcher
+ *
+ * Dropdown menu for switching the application language.
+ * Uses the i18n context to change language at runtime.
+ */
+export declare function LocaleSwitcher(): import("react/jsx-runtime").JSX.Element;

package/dist/layout/LocaleSwitcher.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LocaleSwitcher
+ *
+ * Dropdown menu for switching the application language.
+ * Uses the i18n context to change language at runtime.
+ */
+import { Globe } from 'lucide-react';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+/** Supported language metadata */
+const LANGUAGES = [
+    { code: 'en', label: 'English' },
+    { code: 'zh', label: '中文' },
+    { code: 'ja', label: '日本語' },
+    { code: 'ko', label: '한국어' },
+    { code: 'de', label: 'Deutsch' },
+    { code: 'fr', label: 'Français' },
+    { code: 'es', label: 'Español' },
+    { code: 'pt', label: 'Português' },
+    { code: 'ru', label: 'Русский' },
+    { code: 'ar', label: 'العربية' },
+];
+export function LocaleSwitcher() {
+    const { t, language, changeLanguage } = useObjectTranslation();
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", children: [_jsx(Globe, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: t('console.localeSwitcher.label') })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "max-h-72 overflow-y-auto", children: LANGUAGES.map((lang) => (_jsxs(DropdownMenuItem, { onClick: () => changeLanguage(lang.code), className: "gap-2", children: [lang.label, language === lang.code && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, lang.code))) })] }));
+}

package/dist/layout/ModeToggle.d.ts

@@ -0,0 +1 @@
+export declare function ModeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/layout/ModeToggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@object-ui/components";
+import { useTheme } from "../chrome/ThemeProvider";
+import { useObjectTranslation } from '@object-ui/i18n';
+export function ModeToggle() {
+    const { theme, setTheme } = useTheme();
+    const { t } = useObjectTranslation();
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", children: [_jsx(Sun, { className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx(Moon, { className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", { className: "sr-only", children: t('console.theme.toggle') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => setTheme("light"), className: "gap-2", children: [_jsx(Sun, { className: "h-4 w-4" }), t('console.theme.light'), theme === "light" && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }), _jsxs(DropdownMenuItem, { onClick: () => setTheme("dark"), className: "gap-2", children: [_jsx(Moon, { className: "h-4 w-4" }), t('console.theme.dark'), theme === "dark" && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }), _jsxs(DropdownMenuItem, { onClick: () => setTheme("system"), className: "gap-2", children: [_jsx(Monitor, { className: "h-4 w-4" }), t('console.theme.system'), theme === "system" && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] })] })] }));
+}

package/dist/layout/UnifiedSidebar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * UnifiedSidebar
+ *
+ * Airtable-style contextual sidebar that dynamically switches between Home and App navigation.
+ * Features:
+ * - Persistent across all authenticated routes
+ * - Context-aware navigation (Home vs App)
+ * - Pinned bottom area (Settings, Help, User Profile)
+ * - Smooth transitions between contexts
+ * - Back to Home navigation from App context
+ * - App switcher dropdown
+ *
+ * @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;
+    /** Callback when user switches apps */
+    onAppChange?: (name: string) => void;
+}
+export declare function UnifiedSidebar({ activeAppName }: UnifiedSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};