@object-ui/app-shell 4.6.0 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,136 @@
 # @object-ui/app-shell — Changelog
 
+## 4.8.0
+
+### Minor Changes
+
+- 3a17c8d: Mobile UI: aggressive chrome reduction to match real mobile-app conventions.
+
+  Real mobile CRMs (Salesforce, HubSpot, Notion, Linear) keep one row of
+  chrome on phones: title + 1 primary action, plus content. We were
+  shipping ~5 rows of toolbars + chips + tabs above the data. This commit
+  hides the desktop-only chrome at the `<sm` breakpoint:
+  - **ListView**: TabBar (view switcher), UserFilters chip row, quick-filters
+    chip row, Sort button, list-scoped Search popover, and the
+    (newly-added) mobile-only ViewSettingsPopover gear are all hidden on
+    phones. Only the **Filter** icon survives on mobile — paired with the
+    global ⌘K top-bar search, that is the entire mobile control surface.
+  - **Kanban**: previous commit replaced verbose swipe text with a dot
+    indicator; that stands.
+  - **ObjectView page header**: the Import (CSV upload) button is hidden
+    on mobile — CSV import is a desktop workflow.
+
+  Net effect on a 390px viewport: ListView toolbar collapses from
+  ~10 controls (5 chips + 5 icons) to a single Filter icon next to the
+  title; the body of the page is reachable without scrolling past 3 rows
+  of chrome.
+
+  Desktop and tablet behavior is unchanged.
+
+- 51e274a: feat(app-shell,plugin-list): mobile Airtable-style topbar + filter chip row
+
+  Refactor mobile object-view layout to match the Airtable Interface
+  pattern:
+  - **AppHeader**: the mobile topbar's static page label is now a
+    view-switcher dropdown (`<viewName> ▾`). Tapping opens a list of
+    available views with icons + active-state checkmark. Falls back to
+    plain text when only one view exists, or when the current page has
+    no view-switching surface (Home, Settings, …).
+  - **ObjectView**: drops the standalone mobile `sm:hidden` view-select
+    row that previously lived between the desktop tab bar and the
+    content area. View switching is now exposed exclusively via the
+    topbar dropdown on mobile, eliminating the duplicated `object name`
+    vs `view name` rows.
+  - **ListView**: un-hides the `UserFilters` chip row on mobile.
+    Single-line, horizontally scrollable, matches the Airtable Interface
+    filter chip strip.
+  - New lightweight `MobileViewSwitcherContext` provides a
+    page → header data channel (no zustand dependency added).
+
+  Net effect on mobile (390×844):
+
+  ```
+  ☰ 客户卡片 ▾                🔍 🔔 M    ← topbar
+  类型 ▾  行业 ▾  是否活跃 ▾  更多 3 ▾  ⛛  ← chip row
+  [content cards]                          ← content
+                                    (+)    ← FAB
+  [Leads | Accounts | Contacts | …]        ← bottom nav
+  ```
+
+- 7feed12: Mobile UX: Home affordance + chrome reduction
+
+  Two fixes that match what users actually need on a 390px viewport:
+  - **Add Home link to mobile sidebar.** When inside an app, the sidebar
+    drawer previously listed only the current app's nav groups, with no
+    way back to the home page (the desktop topbar's logo and AppSwitcher
+    pill are hidden on phones). Now the mobile sidebar opens with a
+    prominent "Home" row (`/home`) at the top, gated to mobile + app
+    context so the desktop layout is untouched.
+  - **Cut a row of top chrome.** The list/object PageHeader (icon + title
+    - create / import / more actions) duplicated the page title already
+      shown in the topbar. On mobile it's hidden entirely; the primary
+      create action moves to a floating "+" button anchored above the
+      bottom nav. Desktop still renders the full PageHeader.
+
+- 00363fd: feat(app-shell): remove mobile bottom-tab navigation
+
+  The mobile bottom-tab strip was rendering the first 5 leaf items of
+  the app's navigation tree — exactly the same items that the drawer
+  (`☰`) surfaces, just without grouping, favourites, or recents.
+
+  Per the Notion / Linear mobile convention, we now rely on the drawer
+  alone. Bottom-tab strips work when they expose **orthogonal**
+  top-level sections (Airtable's Home / Bases / Notifications / Account)
+  — but ours was a duplicate of the drawer, so it was pure visual
+  weight: ~52px of vertical real estate, redundant taps, and clashes
+  with the FAB and chat-bubble stack at the bottom-right corner.
+
+  Net effect:
+  - Drawer remains the single source of in-app navigation.
+  - ~52px reclaimed for list/kanban content on every mobile screen.
+  - FAB and chat-bubble keep their existing offsets (no overlap;
+    bottom-nav was already accounted for above them).
+
+- faba0e3: Mobile UX cleanup:
+  - `app-shell/AppHeader`: hide the platform-logo, app-switcher pill, and
+    intermediate path separators on mobile when inside an app route. The
+    sidebar already exposes those affordances; the topbar now reads
+    `☰ + page title + Search + Inbox + Avatar`.
+  - `plugin-list`: replace the hidden mobile TabBar with a new compact
+    `TabBarSelect` dropdown (current view name + chevron → menu of every
+    view). Phone users keep view-switching without burning a row on chip
+    pills. Desktop continues to render the inline TabBar.
+
+### Patch Changes
+
+- @object-ui/types@4.8.0
+- @object-ui/core@4.8.0
+- @object-ui/i18n@4.8.0
+- @object-ui/react@4.8.0
+- @object-ui/components@4.8.0
+- @object-ui/fields@4.8.0
+- @object-ui/layout@4.8.0
+- @object-ui/data-objectstack@4.8.0
+- @object-ui/auth@4.8.0
+- @object-ui/permissions@4.8.0
+- @object-ui/collaboration@4.8.0
+
+## 4.7.0
+
+### Patch Changes
+
+- @object-ui/types@4.7.0
+- @object-ui/core@4.7.0
+- @object-ui/i18n@4.7.0
+- @object-ui/react@4.7.0
+- @object-ui/components@4.7.0
+- @object-ui/fields@4.7.0
+- @object-ui/layout@4.7.0
+- @object-ui/data-objectstack@4.7.0
+- @object-ui/auth@4.7.0
+- @object-ui/permissions@4.7.0
+- @object-ui/collaboration@4.7.0
+
 ## 4.6.0
 
 ### Patch Changes

package/dist/layout/AppHeader.js

@@ -18,8 +18,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @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 { SidebarTrigger, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, cn, } from '@object-ui/components';
+import { Search, HelpCircle, ChevronDown, Check, Lock, 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';
@@ -32,6 +32,7 @@ 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 { useMobileViewSwitcher } from './MobileViewSwitcherContext';
 import { useNavigationContext } from '../context/NavigationContext';
 function humanizeSlug(slug) {
     return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
@@ -56,6 +57,7 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const { objectLabel, dashboardLabel, pageLabel, reportLabel, viewLabel } = useObjectLabel();
     const { apps: metadataApps, dashboards: metadataDashboards, pages: metadataPages, reports: metadataReports } = useMetadata();
     const { currentAppName, recordTitle } = useNavigationContext();
+    const mobileSwitcher = useMobileViewSwitcher();
     const [apiPresenceUsers, setApiPresenceUsers] = useState(null);
     const [apiActivities, setApiActivities] = useState(null);
     /** M10.8: in-header notifications. Polled from sys_notification scoped to current user. */
@@ -372,8 +374,16 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         }
     }
     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", "aria-label": t('common.toggleSidebar') || 'Toggle sidebar' }), 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) => {
+    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: cn("flex items-center justify-center h-7 w-7 shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", isApp && "hidden sm:flex"), 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", "aria-label": t('common.toggleSidebar') || 'Toggle sidebar' }), activeAppName && onAppChange ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("div", { className: "hidden sm:flex items-center", children: _jsx(AppSwitcher, { activeAppName: activeAppName, onAppChange: onAppChange }) })] })) : appName ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("span", { className: "hidden sm:inline 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(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), _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: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-[11px] font-normal text-muted-foreground uppercase tracking-wide px-2", children: t('user.preferences', { defaultValue: 'Preferences' }) }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.theme', { defaultValue: 'Theme' }) }), _jsx(ModeToggle, {})] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.language', { defaultValue: 'Language' }) }), _jsx(LocaleSwitcher, {})] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_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' })] })] }))] })] })] })] })] }));
+                            }), mobileSwitcher && mobileSwitcher.views.length > 0 ? (mobileSwitcher.views.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "sm:hidden flex items-center gap-0.5 min-w-0 ml-1 rounded-md px-1.5 py-1 text-sm font-medium hover:bg-accent active:bg-accent/80 transition-colors", "aria-label": "Switch view", children: [_jsx("span", { className: "truncate max-w-[180px]", children: mobileSwitcher.triggerLabel ??
+                                                        mobileSwitcher.views.find((v) => v.id === mobileSwitcher.activeViewId)?.label ??
+                                                        lastSegmentLabel }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[220px] max-w-[280px]", children: mobileSwitcher.views.map((v) => {
+                                            const isActive = v.id === mobileSwitcher.activeViewId;
+                                            return (_jsxs(DropdownMenuItem, { onSelect: () => {
+                                                    if (!isActive)
+                                                        mobileSwitcher.onChange(v.id);
+                                                }, className: "gap-2", children: [v.icon ? (_jsx("span", { className: "shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: v.icon })) : null, _jsx("span", { className: "flex-1 truncate", children: v.label }), v.locked ? (_jsx(Lock, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true })) : null, isActive ? (_jsx(Check, { className: "h-4 w-4 shrink-0 text-foreground", "aria-hidden": true })) : null] }, v.id));
+                                        }) })] })) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label }))) : (_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(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), _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: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-[11px] font-normal text-muted-foreground uppercase tracking-wide px-2", children: t('user.preferences', { defaultValue: 'Preferences' }) }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.theme', { defaultValue: 'Theme' }) }), _jsx(ModeToggle, {})] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.language', { defaultValue: 'Language' }) }), _jsx(LocaleSwitcher, {})] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] }))] })] })] })] })] }));
 }

package/dist/layout/AppSidebar.js

@@ -193,6 +193,7 @@ export function AppSidebar({ activeAppName, onAppChange }) {
         { 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-config', label: 'Configuration', type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' },
         { 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: t('layout.appSwitcher.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: t('layout.appSwitcher.addApp') })] }), _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: t('layout.appSwitcher.editApp') })] }), _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: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_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: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _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) => {

package/dist/layout/ConsoleLayout.js

@@ -16,6 +16,7 @@ import { useDiscovery } from '@object-ui/react';
 const ConsoleFloatingChatbot = lazy(() => import('./ConsoleFloatingChatbot'));
 import { UnifiedSidebar } from './UnifiedSidebar';
 import { AppHeader } from './AppHeader';
+import { MobileViewSwitcherProvider } from './MobileViewSwitcherContext';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar';
 import { useNavigationContext } from '../context/NavigationContext';
 import { resolveI18nLabel } from '../utils';
@@ -39,15 +40,15 @@ export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange,
         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-y-auto overflow-x-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 }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
+    return (_jsx(MobileViewSwitcherProvider, { children: _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-y-auto overflow-x-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 }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }) }));
 }

package/dist/layout/MobileViewSwitcherContext.d.ts

@@ -0,0 +1,79 @@
+/**
+ * MobileViewSwitcherContext
+ *
+ * Lightweight page → header data channel that lets a view-driven page
+ * (e.g. `ObjectView`) expose its list of available views, the active
+ * view id, and a change handler to the mobile `AppHeader` topbar.
+ *
+ * On mobile (<sm), the AppHeader replaces its static page label with a
+ * `<viewName> ▾` dropdown trigger when a switcher has been registered.
+ * Desktop continues to use the inline `ViewTabBar` and ignores this
+ * context entirely.
+ *
+ * Design notes:
+ *   - The provider stores a single nullable value (last registered wins).
+ *     This matches reality — only one ObjectView is rendered at a time
+ *     under the AppHeader. Concurrent registrations are not supported.
+ *   - Consumers must wrap their registration object in `useMemo` (or
+ *     pass primitive refs) so the value identity is stable across renders
+ *     and we don't spam AppHeader re-renders.
+ *   - When the page unmounts or no longer wants to expose a switcher,
+ *     the effect cleanup sets the value back to `null` and AppHeader
+ *     falls back to the static breadcrumb label.
+ *
+ * @module
+ */
+import React from 'react';
+/** Shape of a single view option in the mobile dropdown. */
+export interface MobileViewSwitcherItem {
+    /** Stable view identifier (matches `activeViewId`). */
+    id: string;
+    /** Display label shown in the dropdown row. */
+    label: string;
+    /** Optional Lucide icon node rendered before the label. */
+    icon?: React.ReactNode;
+    /** Optional secondary hint (e.g. owner, "private"). */
+    hint?: string;
+    /** When true, show a lock indicator (e.g. permission-locked). */
+    locked?: boolean;
+}
+/** Value registered by a page (e.g. ObjectView) for the mobile switcher. */
+export interface MobileViewSwitcherValue {
+    /** All views available on this page. May be a single entry. */
+    views: MobileViewSwitcherItem[];
+    /** Currently active view id. */
+    activeViewId: string;
+    /** Invoked when the user picks a view from the dropdown. */
+    onChange: (id: string) => void;
+    /**
+     * Optional override for the trigger label. Defaults to the active
+     * view's `label`. Provide e.g. `Object · View` if you want both.
+     */
+    triggerLabel?: string;
+}
+/** Provider — mount once near the top of the console tree (above AppHeader). */
+export declare function MobileViewSwitcherProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Read the currently registered switcher value (or `null`). */
+export declare function useMobileViewSwitcher(): MobileViewSwitcherValue | null;
+/**
+ * Register a switcher value for the duration of the calling component's
+ * lifetime. Passing `null` (or `undefined`) is a no-op — useful for
+ * conditional pages that sometimes don't want a switcher.
+ *
+ * Wrap the value in `useMemo` and ensure `onChange` is stable
+ * (`useCallback`) so we only re-publish when something materially changes.
+ */
+export declare function useRegisterMobileViewSwitcher(value: MobileViewSwitcherValue | null | undefined): void;
+/**
+ * Convenience: build + register in one call. Stabilises identity via
+ * useMemo so callers don't need to memoize themselves.
+ */
+export declare function useMobileViewSwitcherRegistration(input: {
+    views: MobileViewSwitcherItem[];
+    activeViewId: string;
+    onChange: (id: string) => void;
+    triggerLabel?: string;
+    enabled?: boolean;
+}): void;

package/dist/layout/MobileViewSwitcherContext.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MobileViewSwitcherContext
+ *
+ * Lightweight page → header data channel that lets a view-driven page
+ * (e.g. `ObjectView`) expose its list of available views, the active
+ * view id, and a change handler to the mobile `AppHeader` topbar.
+ *
+ * On mobile (<sm), the AppHeader replaces its static page label with a
+ * `<viewName> ▾` dropdown trigger when a switcher has been registered.
+ * Desktop continues to use the inline `ViewTabBar` and ignores this
+ * context entirely.
+ *
+ * Design notes:
+ *   - The provider stores a single nullable value (last registered wins).
+ *     This matches reality — only one ObjectView is rendered at a time
+ *     under the AppHeader. Concurrent registrations are not supported.
+ *   - Consumers must wrap their registration object in `useMemo` (or
+ *     pass primitive refs) so the value identity is stable across renders
+ *     and we don't spam AppHeader re-renders.
+ *   - When the page unmounts or no longer wants to expose a switcher,
+ *     the effect cleanup sets the value back to `null` and AppHeader
+ *     falls back to the static breadcrumb label.
+ *
+ * @module
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+const MobileViewSwitcherContext = createContext(null);
+/** Provider — mount once near the top of the console tree (above AppHeader). */
+export function MobileViewSwitcherProvider({ children }) {
+    const [value, setValue] = useState(null);
+    const ctx = useMemo(() => ({ value, setValue }), [value]);
+    return (_jsx(MobileViewSwitcherContext.Provider, { value: ctx, children: children }));
+}
+/** Read the currently registered switcher value (or `null`). */
+export function useMobileViewSwitcher() {
+    const ctx = useContext(MobileViewSwitcherContext);
+    return ctx?.value ?? null;
+}
+/**
+ * Register a switcher value for the duration of the calling component's
+ * lifetime. Passing `null` (or `undefined`) is a no-op — useful for
+ * conditional pages that sometimes don't want a switcher.
+ *
+ * Wrap the value in `useMemo` and ensure `onChange` is stable
+ * (`useCallback`) so we only re-publish when something materially changes.
+ */
+export function useRegisterMobileViewSwitcher(value) {
+    const ctx = useContext(MobileViewSwitcherContext);
+    const lastRef = useRef(null);
+    useEffect(() => {
+        if (!ctx)
+            return undefined;
+        const next = value ?? null;
+        ctx.setValue(next);
+        lastRef.current = next;
+        return () => {
+            // Only clear if nobody else has overwritten us in the meantime.
+            // (Last-mounted wins; on unmount, we still reset to null so a stale
+            //  switcher doesn't leak into the next page.)
+            ctx.setValue(null);
+        };
+    }, [ctx, value]);
+}
+/**
+ * Convenience: build + register in one call. Stabilises identity via
+ * useMemo so callers don't need to memoize themselves.
+ */
+export function useMobileViewSwitcherRegistration(input) {
+    const { views, activeViewId, onChange, triggerLabel, enabled = true } = input;
+    // Stabilise onChange identity if caller didn't already useCallback.
+    const handlerRef = useRef(onChange);
+    handlerRef.current = onChange;
+    const stableOnChange = useCallback((id) => handlerRef.current(id), []);
+    const value = useMemo(() => {
+        if (!enabled)
+            return null;
+        return { views, activeViewId, onChange: stableOnChange, triggerLabel };
+    }, [enabled, views, activeViewId, stableOnChange, triggerLabel]);
+    useRegisterMobileViewSwitcher(value);
+}

package/dist/layout/UnifiedSidebar.js

@@ -16,8 +16,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { getIcon } from '../utils/getIcon';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarTrigger, useSidebar, } from '@object-ui/components';
-import { Clock, Star, StarOff, ChevronRight, Layers, } from 'lucide-react';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarTrigger, useSidebar, } from '@object-ui/components';
+import { Clock, Star, StarOff, ChevronRight, Home, Layers, } from 'lucide-react';
 import { NavigationRenderer } from '@object-ui/layout';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
@@ -25,7 +25,6 @@ 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
@@ -86,7 +85,7 @@ function useNavOrder(appName) {
     return { applyOrder, handleReorder };
 }
 export function UnifiedSidebar({ activeAppName }) {
-    const { isMobile } = useSidebar();
+    const { isMobile, setOpenMobile } = useSidebar();
     const location = useLocation();
     const { t } = useObjectTranslation();
     const { objectLabel: resolveNavObjectLabel, dashboardLabel: resolveNavDashboardLabel, navGroupLabel: resolveNavGroupLabel } = useObjectLabel();
@@ -172,43 +171,13 @@ export function UnifiedSidebar({ activeAppName }) {
         return true;
     }, [registeredObjectNames]);
     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" }), t('sidebar.area', { defaultValue: '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, checkCapability: checkCap, enablePinning: !isMobile, onPinToggle: togglePin, enableReorder: !isMobile, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), resolveDashboardLabel: (dashboardName, fallback) => resolveNavDashboardLabel({ name: dashboardName, label: fallback }), resolveGroupLabel: activeApp ? (groupId, fallback) => resolveNavGroupLabel(activeApp.name, groupId, fallback) : undefined, 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" }), t('sidebar.recent', { defaultValue: '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" }), t('sidebar.favorites', { defaultValue: '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": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), 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" }), t('sidebar.starred', { defaultValue: '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": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), 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: (() => {
-                    // Flatten group items so apps that organise navigation into groups
-                    // (e.g. Setup → Overview / Administration / …) still surface real
-                    // leaf links in the mobile bottom nav instead of rendering nothing.
-                    const leaves = [];
-                    for (const item of processedNavigation) {
-                        if (item.type === 'group') {
-                            for (const child of (item.children || [])) {
-                                if (child && child.type !== 'group')
-                                    leaves.push(child);
-                            }
-                        }
-                        else {
-                            leaves.push(item);
-                        }
-                    }
-                    return leaves.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));
-                    });
-                })() }))] }));
+    return (_jsx(_Fragment, { children: _jsxs(Sidebar, { collapsible: "icon", className: "!top-14 !h-[calc(100svh-3.5rem)]", children: [isMobile && context === 'app' && (_jsx(SidebarHeader, { className: "border-b p-1.5", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: "h-9 text-sm font-medium", children: _jsxs(Link, { to: "/home", onClick: () => setOpenMobile(false), "data-testid": "mobile-sidebar-home", children: [_jsx(Home, { className: "h-4 w-4" }), _jsx("span", { children: t('home.nav', { defaultValue: 'Home' }) })] }) }) }) }) })), _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" }), t('sidebar.area', { defaultValue: '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, checkCapability: checkCap, enablePinning: !isMobile, onPinToggle: togglePin, enableReorder: !isMobile, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), resolveDashboardLabel: (dashboardName, fallback) => resolveNavDashboardLabel({ name: dashboardName, label: fallback }), resolveGroupLabel: activeApp ? (groupId, fallback) => resolveNavGroupLabel(activeApp.name, groupId, fallback) : undefined, 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" }), t('sidebar.recent', { defaultValue: '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" }), t('sidebar.favorites', { defaultValue: '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": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), 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" }), t('sidebar.starred', { defaultValue: '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": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), 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" }) })] }) }));
 }

package/dist/utils/resolveActionParams.d.ts

@@ -54,6 +54,17 @@ interface RuntimeField {
     } | string>;
     multiple?: boolean;
     defaultValue?: unknown;
+    reference_to?: string;
+    reference?: string;
+    display_field?: string;
+    reference_field?: string;
+    id_field?: string;
+    description_field?: string;
+    title_format?: string;
+    lookup_columns?: unknown[];
+    lookup_filters?: unknown[];
+    lookup_page_size?: number;
+    depends_on?: unknown[];
 }
 interface RuntimeObject {
     name?: string;

package/dist/utils/resolveActionParams.js

@@ -58,6 +58,24 @@ export function resolveActionParam(param, ctx) {
         ?? normaliseOptions(field.options, ownerName, param.field, ctx.fieldOptionLabel);
     const resolvedLabel = param.label
         ?? ctx.fieldLabel(ownerName, param.field, field.label ?? param.field);
+    /** Lookup/reference params carry extra picker config that the dialog
+     *  forwards to `<LookupField>`. Without these the picker would fall back
+     *  to a plain text input. */
+    const isLookupResolvedType = resolvedType === 'lookup' || resolvedType === 'reference';
+    const lookupExtras = isLookupResolvedType
+        ? {
+            referenceTo: field.reference_to ?? field.reference,
+            displayField: field.display_field ?? field.reference_field,
+            idField: field.id_field,
+            descriptionField: field.description_field,
+            multiple: field.multiple,
+            titleFormat: field.title_format,
+            lookupColumns: field.lookup_columns,
+            lookupFilters: field.lookup_filters,
+            lookupPageSize: field.lookup_page_size,
+            dependsOn: field.depends_on,
+        }
+        : {};
     return {
         name: param.name ?? param.field,
         label: resolvedLabel,
@@ -67,6 +85,7 @@ export function resolveActionParam(param, ctx) {
         placeholder: param.placeholder ?? field.placeholder,
         helpText: param.helpText ?? field.help ?? field.description,
         defaultValue: rowDefault ?? param.defaultValue ?? field.defaultValue,
+        ...lookupExtras,
     };
 }
 /** Resolve an array of raw action params. */

package/dist/views/ActionParamDialog.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Checkbox, } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
+import { LookupField } from '@object-ui/fields';
 export function ActionParamDialog({ state, onOpenChange }) {
     const { t } = useObjectTranslation();
     const [values, setValues] = useState({});
@@ -77,7 +78,21 @@ export function ActionParamDialog({ state, onOpenChange }) {
                             return (_jsxs("div", { className: "grid gap-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: param.name, checked: checked, onCheckedChange: (c) => updateValue(param.name, c === true), className: "mt-0.5" }), _jsxs(Label, { htmlFor: param.name, className: "font-normal cursor-pointer", children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })] }), errors[param.name] && (_jsx("p", { className: "text-xs text-destructive ml-6", children: t('actionDialog.requiredError', { label: param.label }) })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground ml-6", children: param.helpText }))] }, param.name));
                         }
                         const isLookupParam = param.type === 'lookup' || param.type === 'reference';
-                        return (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: param.name, children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), param.type === 'select' && param.options ? (_jsxs(Select, { value: values[param.name] ?? '', onValueChange: (val) => updateValue(param.name, val), children: [_jsx(SelectTrigger, { id: param.name, className: errors[param.name] ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: param.placeholder || t('actionDialog.selectPlaceholder', { label: param.label }) }) }), _jsx(SelectContent, { children: param.options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : param.type === 'textarea' ? (_jsx(Textarea, { id: param.name, value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : param.type === 'number' ? (_jsx(Input, { id: param.name, type: "number", value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value === '' ? undefined : e.target.valueAsNumber), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : (_jsx(Input, { id: param.name, type: ['email', 'url', 'date', 'datetime-local', 'time', 'password'].includes(param.type) ? param.type : 'text', value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder ||
+                        return (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: param.name, children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), param.type === 'select' && param.options ? (_jsxs(Select, { value: values[param.name] ?? '', onValueChange: (val) => updateValue(param.name, val), children: [_jsx(SelectTrigger, { id: param.name, className: errors[param.name] ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: param.placeholder || t('actionDialog.selectPlaceholder', { label: param.label }) }) }), _jsx(SelectContent, { children: param.options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : isLookupParam && param.referenceTo ? (_jsx(LookupField, { value: values[param.name] ?? null, onChange: (v) => updateValue(param.name, v), field: {
+                                        name: param.name,
+                                        type: 'lookup',
+                                        reference_to: param.referenceTo,
+                                        display_field: param.displayField,
+                                        id_field: param.idField,
+                                        description_field: param.descriptionField,
+                                        multiple: param.multiple,
+                                        title_format: param.titleFormat,
+                                        lookup_columns: param.lookupColumns,
+                                        lookup_filters: param.lookupFilters,
+                                        lookup_page_size: param.lookupPageSize,
+                                        depends_on: param.dependsOn,
+                                        placeholder: param.placeholder,
+                                    } })) : param.type === 'textarea' ? (_jsx(Textarea, { id: param.name, value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : param.type === 'number' ? (_jsx(Input, { id: param.name, type: "number", value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value === '' ? undefined : e.target.valueAsNumber), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : (_jsx(Input, { id: param.name, type: ['email', 'url', 'date', 'datetime-local', 'time', 'password'].includes(param.type) ? param.type : 'text', value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder ||
                                         (isLookupParam ? t('actionDialog.lookupPlaceholder', { label: param.label }) : undefined), className: errors[param.name] ? 'border-destructive' : '' })), errors[param.name] && (_jsx("p", { className: "text-xs text-destructive", children: t('actionDialog.requiredError', { label: param.label }) })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: param.helpText })), isLookupParam && !param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: t('actionDialog.lookupHelpText') }))] }, param.name));
                     }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: t('actionDialog.cancel') }), _jsx(Button, { onClick: handleSubmit, children: t('actionDialog.confirm') })] })] }) }));
 }

package/dist/views/ObjectView.js

@@ -18,13 +18,14 @@ import { ObjectView as PluginObjectView, ViewTabBar, ManageViewsDialog } from '@
 // Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
 // uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
 // Do NOT add eager `import '@object-ui/plugin-*'` side-effect imports here.
-import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay } from '@object-ui/components';
+import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, } from '@object-ui/components';
 import { Plus, Upload, Table as TableIcon, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
 import { getIcon } from '../utils/getIcon';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
 import { CreateViewDialog } from './CreateViewDialog';
 import { PageHeader } from '../layout/PageHeader';
+import { useMobileViewSwitcherRegistration } from '../layout/MobileViewSwitcherContext';
 import { ManagedByBadge } from '../components/ManagedByBadge';
 import { RecordDetailView } from './RecordDetailView';
 import { resolveCrudAffordances } from '../utils/crudAffordances';
@@ -674,6 +675,25 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             navigate(`view/${matchedView.id}`);
         }
     };
+    // Mobile view switcher — registers our view list with the AppHeader so
+    // the topbar can render a `<viewName> ▾` dropdown instead of the static
+    // page label. Desktop ignores this (ViewTabBar handles switching there).
+    const mobileViewSwitcherItems = useMemo(() => {
+        return (views || []).map((view) => {
+            const Icon = VIEW_TYPE_ICONS[view.type];
+            return {
+                id: view.id,
+                label: viewLabel(objectDef.name, view.name || view.id, view.label || view.name || view.id),
+                icon: Icon ? _jsx(Icon, { className: "h-4 w-4" }) : undefined,
+            };
+        });
+    }, [views, objectDef.name, viewLabel]);
+    useMobileViewSwitcherRegistration({
+        views: mobileViewSwitcherItems,
+        activeViewId: activeViewId ?? '',
+        onChange: handleViewChange,
+        enabled: mobileViewSwitcherItems.length > 0 && !!activeViewId,
+    });
     // ViewSwitcher callbacks — wired to both PluginObjectView instances
     const handleCreateView = useCallback(() => {
         setShowCreateViewDialog(true);
@@ -1561,27 +1581,27 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             activeOrganization: activeOrganization
                 ? { id: activeOrganization.id, slug: activeOrganization.slug, name: activeOrganization.name }
                 : null,
-        }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsx(PageHeader, { title: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "truncate", children: objectLabel(objectDef) }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy })] }), description: objectDef.description ? objectDesc(objectDef) : undefined, icon: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4" }); })(), actions: _jsxs(_Fragment, { children: [affordances.create && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), affordances.import && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
-                                        type: 'action:bar',
-                                        location: 'list_toolbar',
-                                        actions: (objectDef.actions || []).map((a) => ({
-                                            ...a,
-                                            label: actionLabel(objectDef.name, a.name, a.label || a.name),
-                                            ...(a.confirmText !== undefined && {
-                                                confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
-                                            }),
-                                            ...(a.successMessage !== undefined && {
-                                                successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
-                                            }),
-                                        })),
-                                        size: 'sm',
-                                        variant: 'outline',
-                                        // On mobile, collapse all schema-driven toolbar actions
-                                        // into a single overflow menu so the icon-only New /
-                                        // Import buttons stay visible without pushing the page
-                                        // title off-screen.
-                                        mobileMaxVisible: 0,
-                                    } }))] }) }), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
+        }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsx("div", { className: "hidden sm:block", children: _jsx(PageHeader, { title: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "truncate", children: objectLabel(objectDef) }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy })] }), description: objectDef.description ? objectDesc(objectDef) : undefined, icon: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4" }); })(), actions: _jsxs(_Fragment, { children: [affordances.create && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), affordances.import && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "hidden sm:inline-flex shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
+                                            type: 'action:bar',
+                                            location: 'list_toolbar',
+                                            actions: (objectDef.actions || []).map((a) => ({
+                                                ...a,
+                                                label: actionLabel(objectDef.name, a.name, a.label || a.name),
+                                                ...(a.confirmText !== undefined && {
+                                                    confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
+                                                }),
+                                                ...(a.successMessage !== undefined && {
+                                                    successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
+                                                }),
+                                            })),
+                                            size: 'sm',
+                                            variant: 'outline',
+                                            // On mobile, collapse all schema-driven toolbar actions
+                                            // into a single overflow menu so the icon-only New /
+                                            // Import buttons stay visible without pushing the page
+                                            // title off-screen.
+                                            mobileMaxVisible: 0,
+                                        } }))] }) }) }), affordances.create && can(objectDef.name, 'create') && (_jsx("button", { type: "button", onClick: actions.create, className: "sm:hidden fixed right-4 bottom-36 z-40 h-12 w-12 rounded-full bg-primary text-primary-foreground shadow-lg active:scale-95 transition-transform inline-flex items-center justify-center", "aria-label": t('console.objectView.new'), "data-testid": "mobile-fab-create", children: _jsx(Plus, { className: "h-5 w-5" }) })), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
                                 name,
                                 label: def?.label || name,
                                 type: def?.type || 'text',
@@ -1619,12 +1639,12 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                                     : undefined,
                             };
                         });
-                        return (_jsxs("div", { className: "border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: [_jsx(ViewTabBar, { views: viewTabItems, activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: {
-                                        reorderable: false,
-                                        showAddButton: isAdmin,
-                                        showPinnedSection: true,
-                                        showVisibilityGroups: true,
-                                    }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }));
+                        return (_jsx(_Fragment, { children: _jsxs("div", { className: "hidden sm:block border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: [_jsx(ViewTabBar, { views: viewTabItems, activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: {
+                                            reorderable: false,
+                                            showAddButton: isAdmin,
+                                            showPinnedSection: true,
+                                            showVisibilityGroups: true,
+                                        }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }) }));
                     })(), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
                                     handleDrawerClose(); }, title: objectLabel(objectDef), onExpand: handleExpandDrawer, expandLabel: t('console.objectView.expandToPage', { defaultValue: 'Open as full page' }), storageKey: `drawer-width:${objectDef.name}`, mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record, event) => {
                                                         handleRowClick(record, event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.6.0",
-    "@object-ui/collaboration": "4.6.0",
-    "@object-ui/components": "4.6.0",
-    "@object-ui/core": "4.6.0",
-    "@object-ui/data-objectstack": "4.6.0",
-    "@object-ui/fields": "4.6.0",
-    "@object-ui/i18n": "4.6.0",
-    "@object-ui/layout": "4.6.0",
-    "@object-ui/permissions": "4.6.0",
-    "@object-ui/react": "4.6.0",
-    "@object-ui/types": "4.6.0"
+    "@object-ui/auth": "4.8.0",
+    "@object-ui/collaboration": "4.8.0",
+    "@object-ui/components": "4.8.0",
+    "@object-ui/core": "4.8.0",
+    "@object-ui/data-objectstack": "4.8.0",
+    "@object-ui/fields": "4.8.0",
+    "@object-ui/i18n": "4.8.0",
+    "@object-ui/layout": "4.8.0",
+    "@object-ui/permissions": "4.8.0",
+    "@object-ui/react": "4.8.0",
+    "@object-ui/types": "4.8.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^4.6.0",
-    "@object-ui/plugin-charts": "^4.6.0",
-    "@object-ui/plugin-chatbot": "^4.6.0",
-    "@object-ui/plugin-dashboard": "^4.6.0",
-    "@object-ui/plugin-designer": "^4.6.0",
-    "@object-ui/plugin-detail": "^4.6.0",
-    "@object-ui/plugin-form": "^4.6.0",
-    "@object-ui/plugin-grid": "^4.6.0",
-    "@object-ui/plugin-kanban": "^4.6.0",
-    "@object-ui/plugin-list": "^4.6.0",
-    "@object-ui/plugin-report": "^4.6.0",
-    "@object-ui/plugin-view": "^4.6.0"
+    "@object-ui/plugin-calendar": "^4.8.0",
+    "@object-ui/plugin-charts": "^4.8.0",
+    "@object-ui/plugin-chatbot": "^4.8.0",
+    "@object-ui/plugin-dashboard": "^4.8.0",
+    "@object-ui/plugin-designer": "^4.8.0",
+    "@object-ui/plugin-detail": "^4.8.0",
+    "@object-ui/plugin-form": "^4.8.0",
+    "@object-ui/plugin-grid": "^4.8.0",
+    "@object-ui/plugin-kanban": "^4.8.0",
+    "@object-ui/plugin-list": "^4.8.0",
+    "@object-ui/plugin-report": "^4.8.0",
+    "@object-ui/plugin-view": "^4.8.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",