@object-ui/app-shell 3.3.0 → 3.3.1

package/dist/hooks/useObjectActions.js

@@ -0,0 +1,92 @@
+/**
+ * useObjectActions Hook
+ *
+ * Provides action handlers for CRUD operations on an object, backed by
+ * the ActionRunner from @object-ui/core via the useActionRunner hook.
+ *
+ * Supports:
+ * - create: Open create dialog
+ * - delete: Delete a record with confirmation
+ * - navigate: Route to a specific view or record
+ * - refresh: Trigger a data refresh
+ */
+import { useCallback, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useActionRunner } from '@object-ui/react';
+import { toast } from 'sonner';
+export function useObjectActions({ objectName, objectLabel, dataSource, onEdit, onRefresh, }) {
+    const navigate = useNavigate();
+    const { appName } = useParams();
+    const baseUrl = `/apps/${appName}`;
+    const { execute, loading, error, runner } = useActionRunner({
+        context: {
+            objectName,
+            objectLabel: objectLabel || objectName,
+            baseUrl,
+        },
+    });
+    // Register custom handlers
+    useEffect(() => {
+        // Handler: create
+        runner.registerHandler('create', async () => {
+            onEdit?.(null);
+            return { success: true };
+        });
+        // Handler: delete
+        runner.registerHandler('delete', async (action) => {
+            const recordId = action.params?.recordId || action.recordId;
+            if (!recordId)
+                return { success: false, error: 'No record ID provided' };
+            try {
+                await dataSource.delete(objectName, recordId);
+                onRefresh?.();
+                toast.success(`${objectLabel || objectName} deleted successfully`);
+                return { success: true, reload: true };
+            }
+            catch (err) {
+                toast.error(`Failed to delete ${objectLabel || objectName}`, {
+                    description: err.message,
+                });
+                return { success: false, error: err.message };
+            }
+        });
+        // Handler: navigate
+        runner.registerHandler('navigate', async (action) => {
+            const url = action.params?.url || action.url;
+            if (url) {
+                navigate(url.startsWith('/') ? url : `${baseUrl}/${url}`);
+            }
+            return { success: true };
+        });
+        // Handler: refresh
+        runner.registerHandler('refresh', async () => {
+            onRefresh?.();
+            return { success: true, reload: true };
+        });
+    }, [runner, objectName, dataSource, onEdit, onRefresh, navigate, baseUrl]);
+    const create = useCallback(() => {
+        onEdit?.(null);
+    }, [onEdit]);
+    const deleteRecord = useCallback(async (recordId) => {
+        return execute({
+            type: 'delete',
+            confirmText: `Are you sure you want to delete this record?`,
+            params: { recordId },
+        });
+    }, [execute]);
+    const navigateToView = useCallback((viewId) => {
+        navigate(`${baseUrl}/${objectName}/view/${viewId}`);
+    }, [navigate, baseUrl, objectName]);
+    const navigateToRecord = useCallback((recordId) => {
+        navigate(`${baseUrl}/${objectName}/record/${encodeURIComponent(recordId)}`);
+    }, [navigate, baseUrl, objectName]);
+    return {
+        execute,
+        create,
+        deleteRecord,
+        navigateToView,
+        navigateToRecord,
+        loading,
+        error,
+    };
+}

package/dist/hooks/useRecentItems.d.ts

@@ -0,0 +1,21 @@
+/**
+ * useRecentItems
+ *
+ * Tracks recently visited items (objects, dashboards, pages) with
+ * localStorage persistence. Exposes helpers to add and retrieve items.
+ * @module
+ */
+export interface RecentItem {
+    /** Unique key, e.g. "object:contact" or "dashboard:sales_overview" */
+    id: string;
+    label: string;
+    href: string;
+    type: 'object' | 'dashboard' | 'page' | 'report' | 'record';
+    /** ISO timestamp of last visit */
+    visitedAt: string;
+}
+export declare function useRecentItems(): {
+    recentItems: RecentItem[];
+    addRecentItem: (item: Omit<RecentItem, "visitedAt">) => void;
+    clearRecentItems: () => void;
+};

package/dist/hooks/useRecentItems.js

@@ -0,0 +1,50 @@
+/**
+ * useRecentItems
+ *
+ * Tracks recently visited items (objects, dashboards, pages) with
+ * localStorage persistence. Exposes helpers to add and retrieve items.
+ * @module
+ */
+import { useState, useCallback, useEffect } from 'react';
+const STORAGE_KEY = 'objectui-recent-items';
+const MAX_RECENT = 8;
+function loadRecent() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        return raw ? JSON.parse(raw) : [];
+    }
+    catch {
+        return [];
+    }
+}
+function saveRecent(items) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+    }
+    catch {
+        // Storage full — silently ignore
+    }
+}
+export function useRecentItems() {
+    const [recentItems, setRecentItems] = useState(loadRecent);
+    // Sync from storage on mount
+    useEffect(() => {
+        setRecentItems(loadRecent());
+    }, []);
+    const addRecentItem = useCallback((item) => {
+        setRecentItems(prev => {
+            const filtered = prev.filter(r => r.id !== item.id);
+            const updated = [
+                { ...item, visitedAt: new Date().toISOString() },
+                ...filtered,
+            ].slice(0, MAX_RECENT);
+            saveRecent(updated);
+            return updated;
+        });
+    }, []);
+    const clearRecentItems = useCallback(() => {
+        setRecentItems([]);
+        saveRecent([]);
+    }, []);
+    return { recentItems, addRecentItem, clearRecentItems };
+}

package/dist/hooks/useResponsiveSidebar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useResponsiveSidebar
+ *
+ * Auto-collapses the sidebar on tablet-width viewports (768px–1023px).
+ * Must be called inside a SidebarProvider context.
+ * @module
+ */
+export declare function useResponsiveSidebar(): void;

package/dist/hooks/useResponsiveSidebar.js

@@ -0,0 +1,28 @@
+/**
+ * useResponsiveSidebar
+ *
+ * Auto-collapses the sidebar on tablet-width viewports (768px–1023px).
+ * Must be called inside a SidebarProvider context.
+ * @module
+ */
+import { useEffect } from 'react';
+import { useSidebar } from '@object-ui/components';
+/** Tablet breakpoint range: 768px <= width < 1024px */
+const TABLET_MIN = 768;
+const TABLET_MAX = 1024;
+export function useResponsiveSidebar() {
+    const { setOpen, isMobile } = useSidebar();
+    useEffect(() => {
+        function handleResize() {
+            const width = window.innerWidth;
+            if (width >= TABLET_MIN && width < TABLET_MAX) {
+                // Tablet: auto-collapse sidebar
+                setOpen(false);
+            }
+        }
+        // Run on mount to set initial state
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [setOpen, isMobile]);
+}

package/dist/index.d.ts

@@ -9,4 +9,33 @@ export { ObjectRenderer } from './components/ObjectRenderer';
 export { DashboardRenderer } from './components/DashboardRenderer';
 export { PageRenderer } from './components/PageRenderer';
 export { FormRenderer } from './components/FormRenderer';
+export { AdapterProvider, useAdapter } from './providers/AdapterProvider';
+export { MetadataProvider, useMetadata, useMetadataItem } from './providers/MetadataProvider';
+export { ExpressionProvider, useExpressionContext, evaluateVisibility } from './providers/ExpressionProvider';
+export { useObjectActions } from './hooks/useObjectActions';
+export { useRecentItems } from './hooks/useRecentItems';
 export type { AppShellProps, ObjectRendererProps, DashboardRendererProps, PageRendererProps, FormRendererProps, } from './types';
+export type { MetadataState, MetadataContextValue, MetadataTypeStatus, } from './providers/MetadataProvider';
+export type { ExpressionContextValue, } from './providers/ExpressionProvider';
+export type { RecentItem, } from './hooks/useRecentItems';
+export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute, RootRedirect, SystemRedirect, LoadingFallback, } from './console/ConsoleShell';
+export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
+export type { ActivityItem } from './layout';
+export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
+export type { FavoriteItem } from './hooks';
+export { NavigationProvider, useNavigationContext, FavoritesProvider } from './context';
+export { AppContent as DefaultAppContent } from './console/AppContent';
+export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';
+export { RegisterPage as DefaultRegisterPage } from './console/auth/RegisterPage';
+export { ForgotPasswordPage as DefaultForgotPasswordPage } from './console/auth/ForgotPasswordPage';
+export { HomeLayout as DefaultHomeLayout, HomeLayout } from './console/home/HomeLayout';
+export { HomePage as DefaultHomePage, HomePage } from './console/home/HomePage';
+export { OrganizationsLayout as DefaultOrganizationsLayout } from './console/organizations/OrganizationsLayout';
+export { OrganizationsPage as DefaultOrganizationsPage } from './console/organizations/OrganizationsPage';
+export { OrganizationLayout as DefaultOrganizationLayout } from './console/organizations/manage/OrganizationLayout';
+export { MembersPage as DefaultMembersPage } from './console/organizations/manage/MembersPage';
+export { InvitationsPage as DefaultInvitationsPage } from './console/organizations/manage/InvitationsPage';
+export { SettingsPage as DefaultSettingsPage } from './console/organizations/manage/SettingsPage';
+export { AcceptInvitationPage as DefaultAcceptInvitationPage } from './console/organizations/manage/AcceptInvitationPage';

package/dist/index.js

@@ -4,8 +4,43 @@
  * Minimal Application Shell for ObjectUI
  * Framework-agnostic rendering engine for third-party integration
  */
+// Components
 export { AppShell } from './components/AppShell';
 export { ObjectRenderer } from './components/ObjectRenderer';
 export { DashboardRenderer } from './components/DashboardRenderer';
 export { PageRenderer } from './components/PageRenderer';
 export { FormRenderer } from './components/FormRenderer';
+// Providers
+export { AdapterProvider, useAdapter } from './providers/AdapterProvider';
+export { MetadataProvider, useMetadata, useMetadataItem } from './providers/MetadataProvider';
+export { ExpressionProvider, useExpressionContext, evaluateVisibility } from './providers/ExpressionProvider';
+// Hooks
+export { useObjectActions } from './hooks/useObjectActions';
+export { useRecentItems } from './hooks/useRecentItems';
+// Console building blocks — compose these in your App.tsx to build the console
+// routing tree. See examples/console-starter/src/App.tsx for a minimal example.
+export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute, RootRedirect, SystemRedirect, LoadingFallback, } from './console/ConsoleShell';
+// Layout chrome
+export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
+// Top-level chrome (dialogs, providers, error boundaries)
+export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+// Standard inner-SPA views
+export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+// Hooks
+export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
+// Context providers
+export { NavigationProvider, useNavigationContext, FavoritesProvider } from './context';
+// Default page implementations (consumers can partial-override slots)
+export { AppContent as DefaultAppContent } from './console/AppContent';
+export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';
+export { RegisterPage as DefaultRegisterPage } from './console/auth/RegisterPage';
+export { ForgotPasswordPage as DefaultForgotPasswordPage } from './console/auth/ForgotPasswordPage';
+export { HomeLayout as DefaultHomeLayout, HomeLayout } from './console/home/HomeLayout';
+export { HomePage as DefaultHomePage, HomePage } from './console/home/HomePage';
+export { OrganizationsLayout as DefaultOrganizationsLayout } from './console/organizations/OrganizationsLayout';
+export { OrganizationsPage as DefaultOrganizationsPage } from './console/organizations/OrganizationsPage';
+export { OrganizationLayout as DefaultOrganizationLayout } from './console/organizations/manage/OrganizationLayout';
+export { MembersPage as DefaultMembersPage } from './console/organizations/manage/MembersPage';
+export { InvitationsPage as DefaultInvitationsPage } from './console/organizations/manage/InvitationsPage';
+export { SettingsPage as DefaultSettingsPage } from './console/organizations/manage/SettingsPage';
+export { AcceptInvitationPage as DefaultAcceptInvitationPage } from './console/organizations/manage/AcceptInvitationPage';

package/dist/layout/ActivityFeed.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ActivityFeed
+ *
+ * Sidebar panel that displays recent activity items (create, update, delete,
+ * comment). Opens as a slide-out Sheet triggered by a bell icon button.
+ * Phase 17 L1 – local state only, no server integration.
+ * @module
+ */
+export interface ActivityItem {
+    id: string;
+    type: 'create' | 'update' | 'delete' | 'comment';
+    objectName: string;
+    recordId?: string;
+    user: string;
+    description: string;
+    timestamp: string;
+}
+export interface ActivityFeedProps {
+    activities?: ActivityItem[];
+    className?: string;
+}
+export declare function ActivityFeed({ activities, className }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;

package/dist/layout/ActivityFeed.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActivityFeed
+ *
+ * Sidebar panel that displays recent activity items (create, update, delete,
+ * comment). Opens as a slide-out Sheet triggered by a bell icon button.
+ * Phase 17 L1 – local state only, no server integration.
+ * @module
+ */
+import { useState } from 'react';
+import { Button, Badge, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from '@object-ui/components';
+import { Bell, Plus, Pencil, Trash2, MessageSquare, Filter } from 'lucide-react';
+const typeConfig = {
+    create: { icon: Plus, color: 'text-green-500' },
+    update: { icon: Pencil, color: 'text-blue-500' },
+    delete: { icon: Trash2, color: 'text-red-500' },
+    comment: { icon: MessageSquare, color: 'text-amber-500' },
+};
+/** Format an ISO timestamp as a relative string (e.g. "2m ago"). */
+function formatRelativeTime(iso) {
+    const ms = new Date(iso).getTime();
+    if (Number.isNaN(ms))
+        return '';
+    const seconds = Math.floor((Date.now() - ms) / 1000);
+    if (seconds < 60)
+        return `${Math.max(seconds, 0)}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}
+export function ActivityFeed({ activities = [], className }) {
+    const [open, setOpen] = useState(false);
+    const [showFilters, setShowFilters] = useState(false);
+    const [notificationPreferences, setNotificationPreferences] = useState({
+        create: true,
+        update: true,
+        delete: true,
+        comment: true,
+    });
+    const togglePreference = (type) => {
+        setNotificationPreferences(prev => ({ ...prev, [type]: !prev[type] }));
+    };
+    const filteredActivities = activities.filter(a => notificationPreferences[a.type]);
+    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: className ?? 'h-8 w-8', "aria-label": "Activity feed", children: [_jsx(Bell, { className: "h-4 w-4" }), activities.length > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-primary text-[9px] font-bold text-primary-foreground flex items-center justify-center", children: activities.length > 9 ? '9+' : activities.length }))] }) }), _jsxs(SheetContent, { side: "right", className: "w-80 sm:w-96", children: [_jsx(SheetHeader, { children: _jsxs(SheetTitle, { className: "flex items-center justify-between", children: ["Recent Activity", _jsxs(Button, { variant: showFilters ? 'secondary' : 'ghost', size: "sm", className: "h-7 px-2", onClick: () => setShowFilters(!showFilters), children: [_jsx(Filter, { className: "h-3.5 w-3.5 mr-1" }), "Filter"] })] }) }), showFilters && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-3 px-1", children: Object.keys(typeConfig).map(type => {
+                            const { icon: Icon, color } = typeConfig[type];
+                            const active = notificationPreferences[type];
+                            return (_jsxs(Badge, { variant: active ? 'default' : 'outline', className: "cursor-pointer select-none gap-1 capitalize", onClick: () => togglePreference(type), children: [_jsx(Icon, { className: `h-3 w-3 ${active ? '' : color}` }), type] }, type));
+                        }) })), filteredActivities.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground", children: [_jsx(Bell, { className: "h-8 w-8 opacity-40" }), _jsx("p", { className: "text-sm", children: "No recent activity" })] })) : (_jsx("ul", { className: "mt-4 space-y-1 overflow-y-auto max-h-[calc(100vh-8rem)]", children: filteredActivities.map((item) => {
+                            const { icon: Icon, color } = typeConfig[item.type];
+                            return (_jsxs("li", { className: "flex items-start gap-3 rounded-md px-2 py-2 hover:bg-muted/50 transition-colors", children: [_jsx("span", { className: `mt-0.5 shrink-0 ${color}`, children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm leading-snug", children: item.description }), _jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [item.user, " \u00B7 ", formatRelativeTime(item.timestamp)] })] })] }, item.id));
+                        }) }))] })] }));
+}

package/dist/layout/AppHeader.d.ts

@@ -0,0 +1,33 @@
+/**
+ * AppHeader — unified top bar
+ *
+ * Supabase-style top bar used across the whole console:
+ *   [Logo] [/ App ▾ / Object ▾ ...]                       [actions] [user ▾]
+ *
+ * Variants:
+ *   - `app`  (default when `appName` is present): sidebar trigger + AppSwitcher
+ *              + breadcrumb path. Used by `ConsoleLayout` inside `/apps/:appName/*`.
+ *   - `home` : no breadcrumb; displays the "ObjectStack" wordmark next to the
+ *              logo. Used by `/home`.
+ *   - `orgs` : no breadcrumb; logo + "Organizations" title. Used by the
+ *              `/organizations` landing page.
+ *
+ * The user avatar dropdown includes the organization (workspace) switcher at
+ * the top so the same chrome lets users change orgs from any page.
+ * @module
+ */
+import { type PresenceUser } from '@object-ui/collaboration';
+import { type ActivityItem } from './ActivityFeed';
+import type { ConnectionState } from '@object-ui/data-objectstack';
+export type AppHeaderVariant = 'app' | 'home' | 'orgs';
+export interface AppHeaderProps {
+    variant?: AppHeaderVariant;
+    appName?: string;
+    objects?: any[];
+    connectionState?: ConnectionState;
+    presenceUsers?: PresenceUser[];
+    activities?: ActivityItem[];
+    activeAppName?: string;
+    onAppChange?: (name: string) => void;
+}
+export declare function AppHeader({ variant, appName, objects, connectionState, presenceUsers, activities, activeAppName, onAppChange, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/layout/AppHeader.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppHeader — unified top bar
+ *
+ * Supabase-style top bar used across the whole console:
+ *   [Logo] [/ App ▾ / Object ▾ ...]                       [actions] [user ▾]
+ *
+ * Variants:
+ *   - `app`  (default when `appName` is present): sidebar trigger + AppSwitcher
+ *              + breadcrumb path. Used by `ConsoleLayout` inside `/apps/:appName/*`.
+ *   - `home` : no breadcrumb; displays the "ObjectStack" wordmark next to the
+ *              logo. Used by `/home`.
+ *   - `orgs` : no breadcrumb; logo + "Organizations" title. Used by the
+ *              `/organizations` landing page.
+ *
+ * The user avatar dropdown includes the organization (workspace) switcher at
+ * the top so the same chrome lets users change orgs from any page.
+ * @module
+ */
+import { useLocation, useParams, Link, useNavigate } from 'react-router-dom';
+import { SidebarTrigger, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, } from '@object-ui/components';
+import { Search, HelpCircle, ChevronDown, Settings, LogOut, User as UserIcon, Boxes, } from 'lucide-react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useOffline } from '@object-ui/react';
+import { PresenceAvatars } from '@object-ui/collaboration';
+import { ModeToggle } from './ModeToggle';
+import { LocaleSwitcher } from './LocaleSwitcher';
+import { ConnectionStatus } from './ConnectionStatus';
+import { ActivityFeed } from './ActivityFeed';
+import { AppSwitcher } from './AppSwitcher';
+import { useAdapter } from '../providers/AdapterProvider';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { useAuth, getUserInitials } from '@object-ui/auth';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useNavigationContext } from '../context/NavigationContext';
+function humanizeSlug(slug) {
+    return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/** Muted `/` separator between path segments */
+function PathSep() {
+    return (_jsx("span", { className: "select-none text-muted-foreground/40 mx-1.5 text-base font-light", "aria-hidden": true, children: "/" }));
+}
+// No fake fallback presence — render nothing when the API has no data so the
+// header doesn't ship phantom collaborators in production.
+const EMPTY_PRESENCE_USERS = [];
+export function AppHeader({ variant, appName, objects, connectionState, presenceUsers, activities, activeAppName, onAppChange, }) {
+    const resolvedVariant = variant ?? (appName ? 'app' : 'home');
+    const isApp = resolvedVariant === 'app';
+    const location = useLocation();
+    const params = useParams();
+    const navigate = useNavigate();
+    const { isOnline } = useOffline();
+    const { user, signOut, organizations, activeOrganization, isOrganizationsLoading, } = useAuth();
+    const dataSource = useAdapter();
+    const { t } = useObjectTranslation();
+    const { objectLabel } = useObjectLabel();
+    const { apps: metadataApps } = useMetadata();
+    const { currentAppName, recordTitle } = useNavigationContext();
+    const [apiPresenceUsers, setApiPresenceUsers] = useState(null);
+    const [apiActivities, setApiActivities] = useState(null);
+    // Once the server returns 404 for these collections we stop retrying for
+    // the lifetime of the page — they're optional features and re-requesting
+    // on every navigation creates console noise + wasted round trips.
+    const presenceUnavailableRef = useRef(false);
+    const activityUnavailableRef = useRef(false);
+    const fetchPresenceAndActivities = useCallback(async () => {
+        if (!dataSource || !isApp)
+            return;
+        const presenceP = presenceUnavailableRef.current
+            ? Promise.resolve({ data: [] })
+            : dataSource.find('sys_presence').catch((err) => {
+                if (err?.status === 404)
+                    presenceUnavailableRef.current = true;
+                return { data: [] };
+            });
+        const activityP = activityUnavailableRef.current
+            ? Promise.resolve({ data: [] })
+            : dataSource
+                .find('sys_activity', { $orderby: { timestamp: 'desc' }, $top: 20 })
+                .catch((err) => {
+                if (err?.status === 404)
+                    activityUnavailableRef.current = true;
+                return { data: [] };
+            });
+        try {
+            const [presenceResult, activityResult] = await Promise.all([presenceP, activityP]);
+            if (presenceResult.data?.length) {
+                const users = presenceResult.data.filter((u) => typeof u.userId === 'string');
+                if (users.length)
+                    setApiPresenceUsers(users);
+            }
+            if (activityResult.data?.length) {
+                const items = activityResult.data.filter((a) => typeof a.type === 'string');
+                if (items.length)
+                    setApiActivities(items);
+            }
+        }
+        catch { /* fallback below */ }
+    }, [dataSource, isApp]);
+    useEffect(() => { fetchPresenceAndActivities(); }, [fetchPresenceAndActivities]);
+    const activeUsers = presenceUsers ?? apiPresenceUsers ?? EMPTY_PRESENCE_USERS;
+    const activeActivities = activities ?? apiActivities ?? [];
+    const orgList = organizations ?? [];
+    const hasOrgSection = isOrganizationsLoading || orgList.length > 0 || !!activeOrganization;
+    // Build path segments (only used in `app` variant)
+    const pathParts = location.pathname.split('/').filter(Boolean);
+    const appNameFromRoute = params.appName || pathParts[1];
+    const routeType = pathParts[2];
+    const baseHref = `/apps/${appNameFromRoute}`;
+    const safeObjects = objects ?? [];
+    // Filter objects to only those belonging to the current app via its navigation
+    const appNameKey = activeAppName || currentAppName || appNameFromRoute;
+    const currentApp = (metadataApps || []).find((a) => a.name === appNameKey);
+    const appNavObjectNames = new Set();
+    const collectNavObjects = (items) => {
+        for (const item of items || []) {
+            if (item.type === 'object' && item.objectName)
+                appNavObjectNames.add(item.objectName);
+            if (item.children)
+                collectNavObjects(item.children);
+        }
+    };
+    collectNavObjects(currentApp?.navigation || []);
+    for (const area of currentApp?.areas || [])
+        collectNavObjects(area.navigation || []);
+    const appObjects = appNavObjectNames.size > 0
+        ? safeObjects.filter((o) => appNavObjectNames.has(o.name))
+        : safeObjects.filter((o) => !o.name.startsWith('sys_') && !o.name.startsWith('auth_'));
+    const objectSiblings = appObjects.map((o) => ({
+        label: objectLabel(o),
+        href: `${baseHref}/${o.name}`,
+    }));
+    const extraSegments = [];
+    if (isApp) {
+        if (routeType === 'dashboard') {
+            extraSegments.push({ label: t('console.breadcrumb.dashboards'), href: baseHref });
+            if (pathParts[3])
+                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+        }
+        else if (routeType === 'page') {
+            extraSegments.push({ label: t('console.breadcrumb.pages'), href: baseHref });
+            if (pathParts[3])
+                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+        }
+        else if (routeType === 'report') {
+            extraSegments.push({ label: t('console.breadcrumb.reports'), href: baseHref });
+            if (pathParts[3])
+                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+        }
+        else if (routeType === 'system') {
+            extraSegments.push({ label: t('console.breadcrumb.system') });
+            if (pathParts[3])
+                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+        }
+        else if (routeType) {
+            const currentObject = safeObjects.find((o) => o.name === routeType);
+            if (currentObject) {
+                extraSegments.push({
+                    label: objectLabel(currentObject),
+                    href: `${baseHref}/${routeType}`,
+                    siblings: objectSiblings,
+                });
+                if (pathParts[3] === 'record' && pathParts[4]) {
+                    const shortId = pathParts[4].length > 12 ? `${pathParts[4].slice(0, 8)}…` : pathParts[4];
+                    const trimmedTitle = recordTitle?.trim();
+                    const displayTitle = trimmedTitle && trimmedTitle.length > 48
+                        ? `${trimmedTitle.slice(0, 45)}…`
+                        : trimmedTitle;
+                    extraSegments.push({ label: displayTitle || `#${shortId}` });
+                }
+                else if (pathParts[3] === 'view' && pathParts[4]) {
+                    extraSegments.push({ label: humanizeSlug(pathParts[4]) });
+                }
+            }
+        }
+    }
+    const lastSegmentLabel = extraSegments[extraSegments.length - 1]?.label || appName || '';
+    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' })] })] })] })] })] })] }));
+}

package/dist/layout/AppSidebar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+export declare function AppSidebar({ activeAppName, onAppChange }: {
+    activeAppName: string;
+    onAppChange: (name: string) => void;
+}): import("react/jsx-runtime").JSX.Element;