@object-ui/app-shell 3.3.0 → 3.3.1

package/dist/layout/UnifiedSidebar.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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
+ */
+import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import * as LucideIcons from 'lucide-react';
+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';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
+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';
+// useObjectLabel provides appLabel/appDescription for convention-based
+// i18n lookup — `{ns}.apps.{name}.label` resolves to the translated label
+// loaded from /api/v1/i18n/translations/:locale.
+import { useNavigationContext } from '../context/NavigationContext';
+// ---------------------------------------------------------------------------
+// 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);
+            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]);
+    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);
+            }
+        }
+        byId.forEach(item => ordered.push(item));
+        return ordered;
+    }, [orderMap]);
+    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.
+ * 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();
+    const { t } = useObjectTranslation();
+    const { objectLabel: resolveNavObjectLabel } = useObjectLabel();
+    const { context, currentAppName } = useNavigationContext();
+    // 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 || [];
+    const activeApps = apps.filter((a) => a.active !== false);
+    const activeApp = activeApps.find((a) => a.name === (activeAppName || currentAppName)) || activeApps[0];
+    // Drag-reorder and pin persistence
+    const { applyOrder, handleReorder } = useNavOrder(activeApp?.name || 'home');
+    const { togglePin, applyPins } = useNavPins();
+    // Area management
+    const areas = activeApp?.areas || [];
+    const [activeAreaId, setActiveAreaId] = React.useState(() => areas.length > 0 ? areas[0].id : null);
+    React.useEffect(() => {
+        if (areas.length > 0) {
+            setActiveAreaId(prev => areas.some((a) => a.id === prev) ? prev : areas[0].id);
+        }
+        else {
+            setActiveAreaId(null);
+        }
+    }, [activeApp?.name, areas.length]);
+    // Resolve navigation items
+    const activeArea = areas.find((a) => a.id === activeAreaId);
+    const appNavigation = activeArea?.navigation || activeApp?.navigation || [];
+    // Home navigation items
+    const homeNavigation = React.useMemo(() => [
+        { id: 'home-dashboard', label: t('home.nav', { defaultValue: 'Home' }), type: 'url', url: '/home', icon: 'home' },
+    ], [t]);
+    // Determine which navigation to show based on context
+    const navigationItems = context === 'home' ? homeNavigation : appNavigation;
+    // Apply saved order and pin state
+    const processedNavigation = React.useMemo(() => {
+        const ordered = applyOrder(navigationItems);
+        return applyPins(ordered);
+    }, [navigationItems, applyOrder, applyPins]);
+    // Recent section collapsed by default
+    const [recentExpanded, setRecentExpanded] = React.useState(false);
+    // Visibility evaluation
+    const { evaluator } = useExpressionContext();
+    const evalVis = React.useCallback((expr) => evaluateVisibility(expr, evaluator), [evaluator]);
+    // Permission check
+    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 = context === 'app' && activeApp ? `/apps/${activeApp.name}` : '';
+    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", className: "!top-14 !h-[calc(100svh-3.5rem)]", children: [_jsx(SidebarContent, { className: "pt-2", children: _jsx("div", { className: "transition-opacity duration-200 ease-in-out", children: context === 'app' && 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(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, 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(_Fragment, { children: [_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: homeNavigation.map((item) => {
+                                                    const NavIcon = getIcon(item.icon);
+                                                    const isActive = location.pathname === item.url;
+                                                    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: isActive, children: _jsxs(Link, { to: item.url || '/home', children: [_jsx(NavIcon, { className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }) }, item.id));
+                                                }) }) }) }), favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Starred"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').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 === '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))) }) })] }))] })) }) }), _jsx(SidebarFooter, { className: "border-t p-1", children: _jsx(SidebarTrigger, { className: "w-full justify-start pl-2 group-data-[state=collapsed]:justify-center group-data-[state=collapsed]:pl-0" }) })] }), isMobile && context === 'app' && (_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: processedNavigation.filter((n) => n.type !== 'group').slice(0, 5).map((item) => {
+                    const NavIcon = getIcon(item.icon);
+                    let href = item.url || '#';
+                    if (item.type === 'object') {
+                        href = `${basePath}/${item.objectName}`;
+                        if (item.viewName)
+                            href += `/view/${item.viewName}`;
+                    }
+                    else if (item.type === 'dashboard')
+                        href = item.dashboardName ? `${basePath}/dashboard/${item.dashboardName}` : '#';
+                    else if (item.type === 'page')
+                        href = item.pageName ? `${basePath}/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/index.d.ts

@@ -0,0 +1,11 @@
+export { ConsoleLayout } from './ConsoleLayout';
+export { AppHeader } from './AppHeader';
+export { AppSidebar } from './AppSidebar';
+export { UnifiedSidebar } from './UnifiedSidebar';
+export { AppSwitcher } from './AppSwitcher';
+export { ConnectionStatus } from './ConnectionStatus';
+export { ActivityFeed } from './ActivityFeed';
+export type { ActivityItem } from './ActivityFeed';
+export { LocaleSwitcher } from './LocaleSwitcher';
+export { ModeToggle } from './ModeToggle';
+export { AuthPageLayout } from './AuthPageLayout';

package/dist/layout/index.js

@@ -0,0 +1,10 @@
+export { ConsoleLayout } from './ConsoleLayout';
+export { AppHeader } from './AppHeader';
+export { AppSidebar } from './AppSidebar';
+export { UnifiedSidebar } from './UnifiedSidebar';
+export { AppSwitcher } from './AppSwitcher';
+export { ConnectionStatus } from './ConnectionStatus';
+export { ActivityFeed } from './ActivityFeed';
+export { LocaleSwitcher } from './LocaleSwitcher';
+export { ModeToggle } from './ModeToggle';
+export { AuthPageLayout } from './AuthPageLayout';

package/dist/providers/AdapterProvider.d.ts

@@ -0,0 +1,21 @@
+/**
+ * AdapterProvider
+ *
+ * Creates and provides an ObjectStackAdapter instance to the component tree.
+ * Also exposes a `useAdapter` hook for consuming the adapter in child components.
+ *
+ * @module
+ */
+import { type ReactNode } from 'react';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+export { useAdapter } from '@object-ui/react';
+interface AdapterProviderProps {
+    children: ReactNode;
+    /** Optional pre-created adapter (useful for testing). */
+    adapter?: ObjectStackAdapter | null;
+}
+/**
+ * Creates an ObjectStackAdapter, connects to the API, then provides it to children.
+ * Shows nothing (returns null) until the adapter is ready.
+ */
+export declare function AdapterProvider({ children, adapter: externalAdapter }: AdapterProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/AdapterProvider.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdapterProvider
+ *
+ * Creates and provides an ObjectStackAdapter instance to the component tree.
+ * Also exposes a `useAdapter` hook for consuming the adapter in child components.
+ *
+ * @module
+ */
+import { useState, useEffect } from 'react';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { createAuthenticatedFetch } from '@object-ui/auth';
+import { AdapterCtx } from '@object-ui/react';
+export { useAdapter } from '@object-ui/react';
+/**
+ * Creates an ObjectStackAdapter, connects to the API, then provides it to children.
+ * Shows nothing (returns null) until the adapter is ready.
+ */
+export function AdapterProvider({ children, adapter: externalAdapter }) {
+    const [adapter, setAdapter] = useState(externalAdapter ?? null);
+    useEffect(() => {
+        if (externalAdapter) {
+            setAdapter(externalAdapter);
+            return;
+        }
+        let cancelled = false;
+        async function init() {
+            try {
+                const a = new ObjectStackAdapter({
+                    baseUrl: import.meta.env.VITE_SERVER_URL || '',
+                    fetch: createAuthenticatedFetch(),
+                    autoReconnect: true,
+                    maxReconnectAttempts: 5,
+                    reconnectDelay: 1000,
+                    cache: { maxSize: 50, ttl: 300000 },
+                });
+                await a.connect();
+                if (!cancelled) {
+                    setAdapter(a);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    console.error('[Console] Failed to initialize:', err);
+                }
+            }
+        }
+        init();
+        return () => { cancelled = true; };
+    }, [externalAdapter]);
+    return (_jsx(AdapterCtx.Provider, { value: adapter, children: children }));
+}

package/dist/providers/ExpressionProvider.d.ts

@@ -0,0 +1,50 @@
+/**
+ * ExpressionContext Provider
+ *
+ * Provides expression evaluation context (user, app, data) to all child components.
+ * Used by useCondition/useExpression hooks from @object-ui/react to evaluate
+ * dynamic visibility, disabled, and hidden expressions in navigation items,
+ * fields, and components.
+ *
+ * @example
+ * ```tsx
+ * <ExpressionProvider user={currentUser} app={activeApp}>
+ *   <AppSidebar />
+ * </ExpressionProvider>
+ * ```
+ */
+import React from 'react';
+import { ExpressionEvaluator } from '@object-ui/core';
+export interface ExpressionContextValue {
+    /** Current authenticated user */
+    user: Record<string, any>;
+    /** Active application config */
+    app: Record<string, any>;
+    /** Additional data scope */
+    data: Record<string, any>;
+    /** The evaluator instance (for imperative use) */
+    evaluator: ExpressionEvaluator;
+}
+interface ExpressionProviderProps {
+    children: React.ReactNode;
+    user?: Record<string, any>;
+    app?: Record<string, any>;
+    data?: Record<string, any>;
+}
+export declare function ExpressionProvider({ children, user, app, data }: ExpressionProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the expression context.
+ * Returns the full context value or a default empty context.
+ */
+export declare function useExpressionContext(): ExpressionContextValue;
+/**
+ * Evaluate a visibility expression.
+ * Supports:
+ * - boolean: true/false
+ * - string "true"/"false"
+ * - template expression: "${user.role === 'admin'}"
+ *
+ * Returns true if the item should be visible.
+ */
+export declare function evaluateVisibility(expression: string | boolean | undefined, evaluator: ExpressionEvaluator): boolean;
+export {};

package/dist/providers/ExpressionProvider.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ExpressionContext Provider
+ *
+ * Provides expression evaluation context (user, app, data) to all child components.
+ * Used by useCondition/useExpression hooks from @object-ui/react to evaluate
+ * dynamic visibility, disabled, and hidden expressions in navigation items,
+ * fields, and components.
+ *
+ * @example
+ * ```tsx
+ * <ExpressionProvider user={currentUser} app={activeApp}>
+ *   <AppSidebar />
+ * </ExpressionProvider>
+ * ```
+ */
+import { createContext, useContext, useMemo } from 'react';
+import { ExpressionEvaluator } from '@object-ui/core';
+const ExprCtx = createContext(null);
+export function ExpressionProvider({ children, user = {}, app = {}, data = {} }) {
+    const value = useMemo(() => {
+        const context = { user, app, data };
+        const evaluator = new ExpressionEvaluator(context);
+        return { user, app, data, evaluator };
+    }, [user, app, data]);
+    return _jsx(ExprCtx.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access the expression context.
+ * Returns the full context value or a default empty context.
+ */
+export function useExpressionContext() {
+    const ctx = useContext(ExprCtx);
+    if (!ctx) {
+        // Return a safe default so components can be used outside the provider
+        const fallback = { user: {}, app: {}, data: {} };
+        return { ...fallback, evaluator: new ExpressionEvaluator(fallback) };
+    }
+    return ctx;
+}
+/**
+ * Evaluate a visibility expression.
+ * Supports:
+ * - boolean: true/false
+ * - string "true"/"false"
+ * - template expression: "${user.role === 'admin'}"
+ *
+ * Returns true if the item should be visible.
+ */
+export function evaluateVisibility(expression, evaluator) {
+    if (expression === undefined || expression === null)
+        return true;
+    if (expression === true || expression === 'true')
+        return true;
+    if (expression === false || expression === 'false')
+        return false;
+    if (typeof expression === 'string' && expression.includes('${')) {
+        try {
+            const result = evaluator.evaluateCondition(expression);
+            return result;
+        }
+        catch {
+            return true; // Default to visible on error
+        }
+    }
+    return true;
+}

package/dist/providers/MetadataProvider.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { useMetadata, type MetadataContextValue, type MetadataState } from '@object-ui/react';
+export type { MetadataState, MetadataContextValue };
+export { useMetadataItem } from '@object-ui/react';
+export { useMetadata };
+export type MetadataTypeStatus = 'idle' | 'loading' | 'ready' | 'error';
+interface MetadataProviderProps {
+    children: ReactNode;
+    adapter: ObjectStackAdapter;
+    ttlMs?: number;
+}
+export declare function MetadataProvider({ children, adapter, ttlMs }: MetadataProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useMetadataType(type: string): {
+    items: any[];
+    loading: boolean;
+    error: Error | null;
+};