@object-ui/app-shell 4.0.9 → 4.0.11

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @object-ui/app-shell — Changelog
 
+## 4.0.11
+
+### Patch Changes
+
+- 7ea1d93: dashboard
+- Updated dependencies [1909bc3]
+  - @object-ui/i18n@4.0.11
+  - @object-ui/components@4.0.11
+  - @object-ui/fields@4.0.11
+  - @object-ui/plugin-calendar@4.0.11
+  - @object-ui/plugin-charts@4.0.11
+  - @object-ui/plugin-dashboard@4.0.11
+  - @object-ui/plugin-designer@4.0.11
+  - @object-ui/plugin-kanban@4.0.11
+  - @object-ui/plugin-list@4.0.11
+  - @object-ui/react@4.0.11
+  - @object-ui/layout@4.0.11
+  - @object-ui/plugin-chatbot@4.0.11
+  - @object-ui/plugin-detail@4.0.11
+  - @object-ui/plugin-form@4.0.11
+  - @object-ui/plugin-grid@4.0.11
+  - @object-ui/plugin-report@4.0.11
+  - @object-ui/plugin-view@4.0.11
+  - @object-ui/types@4.0.11
+  - @object-ui/core@4.0.11
+  - @object-ui/data-objectstack@4.0.11
+  - @object-ui/auth@4.0.11
+  - @object-ui/permissions@4.0.11
+  - @object-ui/collaboration@4.0.11
+
+## 4.0.10
+
+### Patch Changes
+
+- 7cb0c37: metadata
+  - @object-ui/types@4.0.10
+  - @object-ui/core@4.0.10
+  - @object-ui/i18n@4.0.10
+  - @object-ui/react@4.0.10
+  - @object-ui/components@4.0.10
+  - @object-ui/fields@4.0.10
+  - @object-ui/layout@4.0.10
+  - @object-ui/data-objectstack@4.0.10
+  - @object-ui/auth@4.0.10
+  - @object-ui/permissions@4.0.10
+  - @object-ui/plugin-calendar@4.0.10
+  - @object-ui/plugin-charts@4.0.10
+  - @object-ui/plugin-chatbot@4.0.10
+  - @object-ui/plugin-dashboard@4.0.10
+  - @object-ui/plugin-designer@4.0.10
+  - @object-ui/plugin-detail@4.0.10
+  - @object-ui/plugin-form@4.0.10
+  - @object-ui/plugin-grid@4.0.10
+  - @object-ui/plugin-kanban@4.0.10
+  - @object-ui/plugin-list@4.0.10
+  - @object-ui/plugin-report@4.0.10
+  - @object-ui/plugin-view@4.0.10
+  - @object-ui/collaboration@4.0.10
+
 ## 4.0.9
 
 ### Patch Changes

package/dist/layout/AppSidebar.js

@@ -118,7 +118,7 @@ export function AppSidebar({ activeAppName, onAppChange }) {
     }, [isMobile]);
     const { recentItems } = useRecentItems();
     const { favorites, removeFavorite } = useFavorites();
-    const { apps: metadataApps } = useMetadata();
+    const { apps: metadataApps, objects: metadataObjects } = useMetadata();
     const apps = metadataApps || [];
     // Filter out inactive apps
     const activeApps = apps.filter((a) => a.active !== false);
@@ -166,6 +166,24 @@ export function AppSidebar({ activeAppName, onAppChange }) {
             : [perm, 'read'];
         return can(object, action);
     }), [can]);
+    // Runtime capability checker — gates nav entries with `requiresObject` /
+    // `requiresService` against the runtime's actual SchemaRegistry contents.
+    // Currently we only probe registered objects (sourced from the metadata
+    // provider, which fetches `GET /api/v1/meta/object` on mount). Service
+    // gates default to pass since there is no client-side service registry
+    // probe yet — callers should wire one when needed.
+    const registeredObjectNames = React.useMemo(() => new Set((metadataObjects || []).map((o) => o?.name).filter(Boolean)), [metadataObjects]);
+    const checkCap = React.useCallback((kind, name) => {
+        if (kind === 'object') {
+            // While metadata is still loading we have an empty set; show
+            // entries by default to avoid a "menu flicker" where everything
+            // disappears momentarily on first render.
+            if (registeredObjectNames.size === 0)
+                return true;
+            return registeredObjectNames.has(name);
+        }
+        return true;
+    }, [registeredObjectNames]);
     const basePath = activeApp ? `/apps/${activeAppName}` : '';
     // Fallback system navigation when no active app exists — routes into the Setup app.
     const systemFallbackNavigation = React.useMemo(() => [
@@ -181,7 +199,7 @@ export function AppSidebar({ activeAppName, onAppChange }) {
                                                     const AreaIcon = getIcon(area.icon);
                                                     const isActiveArea = area.id === activeAreaId;
                                                     return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActiveArea, tooltip: area.label, onClick: () => setActiveAreaId(area.id), children: [_jsx(AreaIcon, { className: "h-4 w-4" }), _jsx("span", { children: area.label })] }) }, area.id));
-                                                }) }) })] })), _jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarGroupContent, { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-70" }), _jsx(SidebarInput, { placeholder: "Search navigation...", value: navSearchQuery, onChange: (e) => setNavSearchQuery(e.target.value), className: "pl-8" })] }) }), _jsx(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, searchQuery: navSearchQuery, enablePinning: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), t: t }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), "Recent"] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Favorites"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(SidebarGroup, { "data-testid": "system-fallback-nav", children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Settings, { className: "h-3.5 w-3.5" }), "System"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: systemFallbackNavigation.map((item) => {
+                                                }) }) })] })), _jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarGroupContent, { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-70" }), _jsx(SidebarInput, { placeholder: "Search navigation...", value: navSearchQuery, onChange: (e) => setNavSearchQuery(e.target.value), className: "pl-8" })] }) }), _jsx(NavigationRenderer, { items: processedNavigation, basePath: basePath, evaluateVisibility: evalVis, checkPermission: checkPerm, checkCapability: checkCap, searchQuery: navSearchQuery, enablePinning: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), t: t }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), "Recent"] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Favorites"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(SidebarGroup, { "data-testid": "system-fallback-nav", children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Settings, { className: "h-3.5 w-3.5" }), "System"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: systemFallbackNavigation.map((item) => {
                                             const NavIcon = getIcon(item.icon);
                                             return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.url || '/system', children: [_jsx(NavIcon, { className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }) }, item.id));
                                         }) }) })] })) }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] }), _jsx(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", side: isMobile ? "bottom" : "right", align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('user.settings', { defaultValue: 'Settings' })] }) }), 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' })] })] }))] })] }) }) }) })] }), isMobile && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: (activeApp ? resolvedNavigation : systemFallbackNavigation).filter((n) => n.type !== 'group').slice(0, 5).map((item) => {

package/dist/layout/UnifiedSidebar.js

@@ -114,7 +114,7 @@ export function UnifiedSidebar({ activeAppName }) {
     }, [isMobile]);
     const { recentItems } = useRecentItems();
     const { favorites, removeFavorite } = useFavorites();
-    const { apps: metadataApps } = useMetadata();
+    const { apps: metadataApps, objects: metadataObjects } = useMetadata();
     const apps = metadataApps || [];
     const activeApps = apps.filter((a) => a.active !== false);
     const activeApp = activeApps.find((a) => a.name === (activeAppName || currentAppName)) || activeApps[0];
@@ -160,12 +160,23 @@ export function UnifiedSidebar({ activeAppName }) {
             : [perm, 'read'];
         return can(object, action);
     }), [can]);
+    // Runtime capability gate: hide nav items targeting objects/services
+    // not registered in this runtime (e.g. cloud-only `sys_app`).
+    const registeredObjectNames = React.useMemo(() => new Set((metadataObjects || []).map((o) => o?.name).filter(Boolean)), [metadataObjects]);
+    const checkCap = React.useCallback((kind, name) => {
+        if (kind === 'object') {
+            if (registeredObjectNames.size === 0)
+                return true;
+            return registeredObjectNames.has(name);
+        }
+        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, 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) => {
+                                                    }) }) })] })), _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));

package/dist/views/CreateViewDialog.js

@@ -65,15 +65,27 @@ const REQUIRED_FIELDS_BY_TYPE = {
             filter: (f) => f.type === 'date',
             preferred: PRIMARY_DATE_PREFERRED,
         },
+        {
+            key: 'titleField',
+            i18nKey: 'console.objectView.titleField',
+            helpI18nKey: 'console.objectView.titleFieldHelp',
+            filter: (f) => f.type === 'text',
+        },
     ],
     timeline: [
         {
-            key: 'dateField',
-            i18nKey: 'console.objectView.dateField',
+            key: 'startDateField',
+            i18nKey: 'console.objectView.startDateField',
             helpI18nKey: 'console.objectView.timelineDateFieldHelp',
             filter: (f) => f.type === 'date',
             preferred: PRIMARY_DATE_PREFERRED,
         },
+        {
+            key: 'titleField',
+            i18nKey: 'console.objectView.titleField',
+            helpI18nKey: 'console.objectView.titleFieldHelp',
+            filter: (f) => f.type === 'text',
+        },
     ],
     gantt: [
         {
@@ -90,10 +102,16 @@ const REQUIRED_FIELDS_BY_TYPE = {
             filter: (f) => f.type === 'date',
             preferred: END_DATE_PREFERRED,
         },
+        {
+            key: 'titleField',
+            i18nKey: 'console.objectView.titleField',
+            helpI18nKey: 'console.objectView.titleFieldHelp',
+            filter: (f) => f.type === 'text',
+        },
     ],
     gallery: [
         {
-            key: 'imageField',
+            key: 'coverField',
             i18nKey: 'console.objectView.imageField',
             helpI18nKey: 'console.objectView.imageFieldHelp',
             filter: (f) => isImageLikeField(f),

package/dist/views/DashboardView.js

@@ -27,7 +27,7 @@ const WIDGET_TYPES = [
     { type: 'line', label: 'Line Chart', Icon: LineChart },
     { type: 'pie', label: 'Pie Chart', Icon: PieChart },
     { type: 'table', label: 'Table', Icon: Table2 },
-    { type: 'grid', label: 'Grid', Icon: LayoutGrid },
+    { type: 'pivot', label: 'Pivot', Icon: LayoutGrid },
 ];
 let widgetCounter = 0;
 function createWidgetId() {
@@ -74,12 +74,22 @@ const TOP_LEVEL_WIDGET_KEYS = new Set([
     'layoutW',
     'layoutH',
     'id',
+    // Spec-declared top-level fields that the renderer reads directly off the
+    // widget (not from options). Keeping them here ensures the unflatten path
+    // does not silently drop them into options where the renderer ignores them.
+    'searchable',
+    'pagination',
+    // Drill-down virtual flat keys are handled explicitly below — listing them
+    // here keeps the generic options-collector from duplicating them.
+    'drillDownEnabled',
+    'drillDownTarget',
 ]);
 function flattenWidgetConfig(widget) {
     // Spread options first so explicit top-level widget fields take precedence
     // on collision. This surfaces type-specific options (pivot/table/chart axes,
     // list itemTemplate, etc.) so they appear pre-filled in the config panel.
     const options = (widget.options ?? {});
+    const drillDown = (options.drillDown ?? {});
     return {
         ...options,
         title: widget.title ?? '',
@@ -93,6 +103,11 @@ function flattenWidgetConfig(widget) {
         layoutH: widget.layout?.h ?? 1,
         colorVariant: widget.colorVariant ?? options.colorVariant ?? 'default',
         actionUrl: widget.actionUrl ?? options.actionUrl ?? '',
+        searchable: widget.searchable ?? options.searchable ?? false,
+        pagination: widget.pagination ?? options.pagination ?? false,
+        // Surface drill-down nested shape as flat switches for the panel
+        drillDownEnabled: drillDown.enabled ?? false,
+        drillDownTarget: drillDown.target ?? 'drawer',
     };
 }
 function unflattenWidgetConfig(config, base) {
@@ -107,6 +122,17 @@ function unflattenWidgetConfig(config, base) {
             continue;
         newOptions[key] = value;
     }
+    // Re-nest drill-down flat keys back under options.drillDown so the renderer
+    // (which reads `options.drillDown`) picks them up.
+    const drillDownEnabled = config.drillDownEnabled;
+    const drillDownTarget = config.drillDownTarget;
+    if (drillDownEnabled !== undefined || drillDownTarget !== undefined) {
+        newOptions.drillDown = {
+            ...(baseOptions.drillDown || {}),
+            ...(drillDownEnabled !== undefined ? { enabled: !!drillDownEnabled } : {}),
+            ...(drillDownTarget !== undefined ? { target: drillDownTarget } : {}),
+        };
+    }
     return {
         title: config.title,
         description: config.description,
@@ -118,6 +144,8 @@ function unflattenWidgetConfig(config, base) {
         layout: { ...(base.layout || {}), w: config.layoutW, h: config.layoutH },
         colorVariant: config.colorVariant,
         actionUrl: config.actionUrl,
+        ...(config.searchable !== undefined ? { searchable: !!config.searchable } : {}),
+        ...(config.pagination !== undefined ? { pagination: !!config.pagination } : {}),
         ...(Object.keys(newOptions).length > 0 ? { options: newOptions } : {}),
     };
 }
@@ -129,6 +157,7 @@ function extractDashboardConfig(schema) {
         rowHeight: String(s.rowHeight ?? '120'),
         refreshInterval: String(s.refreshInterval ?? '0'),
         title: s.title ?? '',
+        description: s.description ?? '',
         showDescription: s.showDescription ?? true,
         theme: s.theme ?? 'auto',
     };
@@ -231,7 +260,12 @@ export function DashboardView({ dataSource }) {
             refresh().catch(() => { });
         }
         catch (err) {
+            // Surface the failure — previously this was a silent console.warn,
+            // which produced "I saw it work, then refresh wiped it" reports
+            // because the optimistic state update masked a server-side reject.
+            const message = err instanceof Error ? err.message : String(err);
             console.warn('[DashboardView] Auto-save failed:', err);
+            toast.error(`Failed to save dashboard: ${message}`);
         }
     }, [adapter, dashboardName, refresh]);
     // ---- Open / close config panel ------------------------------------------
@@ -279,6 +313,18 @@ export function DashboardView({ dataSource }) {
             setSelectedWidgetId(null);
         }
     }, [editSchema, selectedWidgetId, saveSchema]);
+    // Reorder widgets via drag-and-drop from DashboardRenderer's design mode.
+    const handleWidgetsReorder = useCallback((nextWidgets) => {
+        const baseSchema = editSchema || dashboard;
+        if (!baseSchema)
+            return;
+        const newSchema = {
+            ...baseSchema,
+            widgets: nextWidgets,
+        };
+        setEditSchema(newSchema);
+        saveSchema(newSchema);
+    }, [editSchema, dashboard, saveSchema]);
     // ---- Dashboard config panel handlers ------------------------------------
     // Stabilize config reference: only recompute after explicit actions (panel
     // open, save, widget add). configVersion is incremented on those actions.
@@ -301,6 +347,7 @@ export function DashboardView({ dataSource }) {
             rowHeight: toNum(config.rowHeight, editSchema.rowHeight),
             refreshInterval: toNum(config.refreshInterval, 0) ?? 0,
             title: config.title,
+            description: config.description,
             showDescription: config.showDescription,
             theme: config.theme,
         };
@@ -391,6 +438,34 @@ export function DashboardView({ dataSource }) {
             label: f.label || key,
         }));
     }, [selectedWidget?.object, metadataObjects]);
+    // ---- Runtime capability gate (must run before guards to respect Rules of Hooks)
+    // Hide widgets whose `requiresObject` is not registered (mirrors
+    // NavigationItem.requiresObject for nav entries). Defaults to widget.object
+    // when not set, so any object-bound widget disappears gracefully when its
+    // backing object isn't in this runtime (e.g. cloud-only
+    // `sys_package_installation` on system_overview).
+    const registeredObjectNamesForFilter = useMemo(() => new Set((metadataObjects || []).map((o) => o?.name).filter(Boolean)), [metadataObjects]);
+    const previewSchemaSrc = editSchema || dashboard;
+    const previewSchema = useMemo(() => {
+        if (!previewSchemaSrc)
+            return previewSchemaSrc;
+        // Defer pruning until metadata has actually loaded — otherwise the
+        // empty Set would hide every object-bound widget on first render.
+        if (registeredObjectNamesForFilter.size === 0)
+            return previewSchemaSrc;
+        const widgets = previewSchemaSrc.widgets;
+        if (!Array.isArray(widgets) || widgets.length === 0)
+            return previewSchemaSrc;
+        const filtered = widgets.filter((w) => {
+            const required = w?.requiresObject ?? w?.object;
+            if (!required)
+                return true;
+            return registeredObjectNamesForFilter.has(required);
+        });
+        if (filtered.length === widgets.length)
+            return previewSchemaSrc;
+        return { ...previewSchemaSrc, widgets: filtered };
+    }, [previewSchemaSrc, registeredObjectNamesForFilter]);
     // ---- Loading / not-found guards -----------------------------------------
     if (isLoading) {
         return _jsx(SkeletonDashboard, {});
@@ -398,14 +473,29 @@ export function DashboardView({ dataSource }) {
     if (!dashboard) {
         return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(LayoutDashboard, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.dashboardNotFound') }), _jsx(EmptyDescription, { children: t('empty.dashboardNotFoundDescription', { name: dashboardName }) })] }) }));
     }
-    const previewSchema = editSchema || dashboard;
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: dashboardLabel({ name: dashboard.name, label: resolveI18nLabel(dashboard.label, t) }) || dashboard.name }), (() => {
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [(() => {
+                                // Per @objectstack/spec, DashboardSchema.title is "the dashboard
+                                // title displayed in the header". We prefer it when present so
+                                // edits made through the config panel (which writes `title`) are
+                                // visible after save/reload. Falls back to `label` (the metadata
+                                // display name) and finally to the raw `name`. We also follow
+                                // `previewSchema` instead of the cached `dashboard` so the H1
+                                // updates live while the user is typing in the config panel.
+                                const headerSrc = previewSchema || dashboard;
+                                const resolvedTitle = resolveI18nLabel(headerSrc.title, t);
+                                const resolvedLabel = resolveI18nLabel(dashboard.label, t);
+                                const fallbackLabel = dashboardLabel({ name: dashboard.name, label: resolvedLabel });
+                                const display = resolvedTitle || fallbackLabel || dashboard.name;
+                                return (_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: display }));
+                            })(), (() => {
+                                const headerSrc = previewSchema || dashboard;
+                                const rawDesc = headerSrc.description ?? dashboard.description;
                                 const desc = dashboardDescription({
                                     name: dashboard.name,
-                                    description: resolveI18nLabel(dashboard.description, t),
+                                    description: resolveI18nLabel(rawDesc, t),
                                 });
                                 return desc ? (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: desc })) : null;
-                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, modalHandler: modalHandler, scriptHandlers: scriptHandlers }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
+                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, onWidgetsReorder: handleWidgetsReorder, modalHandler: modalHandler, scriptHandlers: scriptHandlers, hideHeaderText: true }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
                     type: 'object-form',
                     formType: 'modal',
                     objectName: modalState.schema.objectName,

package/dist/views/ObjectView.js

@@ -47,6 +47,112 @@ const VIEW_TYPE_ICONS = {
     chart: BarChart3,
 };
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
+/**
+ * Translate a NamedListView spec object (shape: `type`, `label`, `columns`,
+ * `filter`, `sort`, `kanban`/`chart`/`gantt`/... sub-blocks, `bulkActions`,
+ * `rowActions`, `pagination`, ...) into the `sys_view` storage shape that the
+ * server's `sys_view` object schema actually exposes (snake_case scalars +
+ * `*_json` text columns for complex shapes).
+ *
+ * The server rejects any other column name (`bulkActions`, `objectName`,
+ * `isPinned`, ...) with `table sys_view has no column named …`, and knex
+ * flattens raw arrays into positional bindings which mangles the SQL — so
+ * every write path that targets `sys_view` MUST go through this helper.
+ */
+function toSysViewPayload(config, objectName, opts = {}) {
+    const VIEW_TYPE_KEYS = [
+        'kanban', 'calendar', 'timeline', 'gantt',
+        'gallery', 'map', 'chart', 'grid',
+    ];
+    // Fold view-type-specific sub-blocks plus any non-storage NamedListView
+    // fields into a single `config_json` blob so the round-trip preserves
+    // everything the renderer might need (bulkActions, rowActions, pagination,
+    // navigation, emptyState, exportOptions, rowHeight, isPinned, isDefault,
+    // visibility, sortOrder, …).
+    const subConfig = {};
+    for (const k of VIEW_TYPE_KEYS) {
+        if (config[k] && typeof config[k] === 'object') {
+            Object.assign(subConfig, config[k]);
+        }
+    }
+    const EXTRA_CONFIG_KEYS = [
+        'bulkActions', 'rowActions', 'pagination', 'navigation',
+        'emptyState', 'exportOptions', 'rowHeight',
+        'isPinned', 'isDefault', 'visibility', 'sortOrder',
+        'showSort',
+    ];
+    for (const k of EXTRA_CONFIG_KEYS) {
+        if (config[k] !== undefined)
+            subConfig[k] = config[k];
+    }
+    const incomingColumns = Array.isArray(config.columns) && config.columns.length > 0
+        ? config.columns
+        : (opts.defaultColumns ?? []);
+    const viewType = config.type || 'grid';
+    const baseLabel = config.label || config.name || 'Untitled View';
+    const slug = baseLabel
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 60) || 'view';
+    return {
+        name: `${slug}_${Date.now().toString(36)}`,
+        label: baseLabel,
+        object_name: objectName,
+        view_type: viewType,
+        columns_json: JSON.stringify(incomingColumns),
+        filters_json: config.filter ? JSON.stringify(config.filter) : null,
+        sort_json: config.sort ? JSON.stringify(config.sort) : null,
+        config_json: Object.keys(subConfig).length > 0
+            ? JSON.stringify(subConfig)
+            : null,
+        page_size: config.pageSize ?? 25,
+        show_search: config.showSearch !== false,
+        show_filters: config.showFilters !== false,
+        managed_by: 'user',
+    };
+}
+/**
+ * Inverse of {@link toSysViewPayload}. Decodes a raw `sys_view` record
+ * (snake_case fields + `*_json` text columns) back into the NamedListView
+ * spec shape (`type`, `columns`, `filter`, `sort`, plus everything stashed
+ * inside `config_json`) so the rest of the UI — ViewTabBar, ListView, the
+ * grid renderer — can consume it without caring about the storage layer.
+ *
+ * Robust to fixtures/mocks that already store the spec shape directly
+ * (older tests, the in-memory dev adapter): if `*_json` is missing we fall
+ * back to `sv.columns` / `sv.filter` / `sv.sort` as-is.
+ */
+function fromSysViewRecord(sv) {
+    const parse = (raw) => {
+        if (raw == null)
+            return undefined;
+        if (typeof raw !== 'string')
+            return raw;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const columns = parse(sv.columns_json) ?? sv.columns;
+    const filter = parse(sv.filters_json) ?? sv.filter;
+    const sort = parse(sv.sort_json) ?? sv.sort;
+    const extra = parse(sv.config_json) ?? {};
+    return {
+        ...sv,
+        ...extra,
+        type: sv.view_type ?? sv.type ?? 'grid',
+        objectName: sv.object_name ?? sv.objectName,
+        columns,
+        filter,
+        sort,
+        showSearch: sv.show_search ?? sv.showSearch,
+        showFilters: sv.show_filters ?? sv.showFilters,
+        pageSize: sv.page_size ?? sv.pageSize,
+    };
+}
 /**
  * DrawerDetailContent — extracted component for NavigationOverlay content.
  * Needs to be a proper component (not a render prop) so it can use hooks
@@ -289,46 +395,35 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                 const incomingColumns = Array.isArray(config.columns) && config.columns.length > 0
                     ? config.columns
                     : defaultColumns;
-                // Translate NamedListView spec shape (type, label, kanban, chart,
-                // gantt, etc., columns, filter, sort) into the sys_view storage
-                // shape (view_type, label, object_name, *_json columns).
-                // Per spec: front-end follows the protocol, the persistence
-                // boundary owns the mapping to physical columns.
-                const VIEW_TYPE_KEYS = [
-                    'kanban', 'calendar', 'timeline', 'gantt',
-                    'gallery', 'map', 'chart', 'grid',
-                ];
-                const subConfig = {};
-                for (const k of VIEW_TYPE_KEYS) {
-                    if (config[k] && typeof config[k] === 'object') {
-                        Object.assign(subConfig, config[k]);
+                // ADR-0005 overlay path — write the full spec under a unique
+                // `name` via the metadata customization API instead of into
+                // the physical `sys_view` table (whose columns no longer
+                // accommodate the spec shape: arrays, nested objects, etc.).
+                const spec = { ...config, columns: incomingColumns };
+                // Per @objectstack/spec, certain view types nest their card/field
+                // list inside their type-specific subconfig (e.g. kanban.columns,
+                // gallery.visibleFields). The CreateViewDialog only collects
+                // required *picker* fields; we mirror the resolved column list
+                // into the subconfig here so the spec validator accepts the row.
+                if (config.type === 'kanban') {
+                    spec.kanban = { ...(spec.kanban || {}), columns: incomingColumns };
+                }
+                else if (config.type === 'gallery') {
+                    const existing = spec.gallery || {};
+                    if (!Array.isArray(existing.visibleFields) || existing.visibleFields.length === 0) {
+                        spec.gallery = { ...existing, visibleFields: incomingColumns };
                     }
                 }
-                const viewType = config.type || 'grid';
-                const baseLabel = config.label || config.name || 'Untitled View';
-                const slug = baseLabel
-                    .toLowerCase()
-                    .replace(/[^a-z0-9]+/g, '_')
-                    .replace(/^_+|_+$/g, '')
-                    .slice(0, 60) || 'view';
-                const payload = {
-                    name: `${slug}_${Date.now().toString(36)}`,
-                    label: baseLabel,
-                    object_name: objectName,
-                    view_type: viewType,
-                    columns_json: JSON.stringify(incomingColumns),
-                    filters_json: config.filter ? JSON.stringify(config.filter) : null,
-                    sort_json: config.sort ? JSON.stringify(config.sort) : null,
-                    config_json: Object.keys(subConfig).length > 0
-                        ? JSON.stringify(subConfig)
-                        : null,
-                    page_size: config.pageSize ?? 25,
-                    show_search: config.showSearch !== false,
-                    show_filters: config.showFilters !== false,
-                    managed_by: 'user',
-                };
-                const created = await dataSource.create('sys_view', payload);
-                createdId = created?.id ?? created?._id;
+                if (typeof dataSource?.createView === 'function') {
+                    const created = await dataSource.createView(objectName, spec);
+                    createdId = created?.name || config?.name;
+                }
+                else if (dataSource?.create) {
+                    // Legacy fallback for adapters that don't expose createView.
+                    const payload = toSysViewPayload(spec, objectName, { defaultColumns });
+                    const created = await dataSource.create('sys_view', payload);
+                    createdId = created?.id ?? created?._id;
+                }
             }
             setShowViewConfigPanel(false);
             setViewConfigPanelMode('edit');
@@ -378,13 +473,47 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
     const [savedViews, setSavedViews] = useState([]);
     useEffect(() => {
         let cancelled = false;
-        if (!dataSource?.find || !objectName) {
+        if (!objectName) {
+            setSavedViews([]);
+            return;
+        }
+        // ADR-0005: use the metadata overlay API instead of writing to
+        // the physical `sys_view` table (which has incompatible columns).
+        // Falls back to the legacy `find('sys_view', ...)` path only when
+        // the adapter doesn't expose `listViews` (e.g. test mocks).
+        if (typeof dataSource?.listViews === 'function') {
+            dataSource.listViews(objectName)
+                .then((rows) => {
+                if (cancelled)
+                    return;
+                // Normalize: ensure each view has an `id` for ViewTabBar
+                // (which is name-keyed downstream). Stamp `objectName`
+                // so the defensive filter in handlers still works.
+                const normalized = (rows || []).map((sv) => ({
+                    ...sv,
+                    // Overlay rows are keyed by `name`. Prefer that as the
+                    // tab id so a duplicate's `id` field (which may have
+                    // been copied verbatim from the source artifact) does
+                    // not collide with the source's view id during dedup.
+                    id: sv.name || sv.id,
+                    objectName: sv.objectName || sv.object || objectName,
+                }));
+                setSavedViews(normalized);
+            })
+                .catch((err) => {
+                console.error('[ObjectView] Failed to load overlay views:', err);
+                if (!cancelled)
+                    setSavedViews([]);
+            });
+            return () => { cancelled = true; };
+        }
+        if (!dataSource?.find) {
             setSavedViews([]);
             return;
         }
         dataSource
             .find('sys_view', {
-            $filter: ['objectName', '=', objectName],
+            $filter: ['object_name', '=', objectName],
             $orderby: [{ field: 'created_at', order: 'asc' }],
             $top: 200,
         })
@@ -400,8 +529,12 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             // Defensive client-side filter: only keep rows that look like
             // sys_view records for *this* object. Adapters that don't
             // honour $filter (or test mocks that ignore it) won't pollute
-            // the view list with arbitrary records.
-            const filtered = rows.filter(r => r && r.objectName === objectName);
+            // the view list with arbitrary records. Match either casing —
+            // the storage column is `object_name`, but older mock fixtures
+            // and tests may still emit `objectName`.
+            const filtered = rows
+                .filter(r => r && (r.object_name === objectName || r.objectName === objectName))
+                .map(fromSysViewRecord);
             setSavedViews(filtered);
         })
             .catch((err) => {
@@ -666,21 +799,25 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         return savedViews.some((sv) => (sv.id || sv._id) === vid);
     }, [savedViews]);
     const handleRenameView = useCallback(async (vid, newName) => {
-        if (!dataSource?.update)
-            return;
         if (!isSavedView(vid)) {
             toast.error(t('console.objectView.cannotEditMetaView') || 'Built-in views cannot be renamed.');
             return;
         }
         try {
-            await dataSource.update('sys_view', vid, { label: newName });
+            // ADR-0005 overlay path — `vid` is the view's `name` field
+            if (typeof dataSource?.updateView === 'function') {
+                await dataSource.updateView(objectName, vid, { label: newName });
+            }
+            else if (dataSource?.update) {
+                await dataSource.update('sys_view', vid, { label: newName });
+            }
             setRefreshKey(k => k + 1);
         }
         catch (err) {
             console.error('[ViewTabBar] Failed to rename view:', err);
             toast.error(t('objectViewActions.renameFailed'));
         }
-    }, [dataSource, isSavedView, t]);
+    }, [dataSource, objectName, isSavedView, t]);
     // Promise-based confirm/param dialogs — declared early so destructive
     // handlers (delete, etc.) can `await confirmHandler(...)` for a proper
     // Airtable-style confirmation flow.
@@ -697,7 +834,7 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         });
     }, []);
     const handleDeleteView = useCallback(async (vid) => {
-        if (!dataSource?.delete)
+        if (!dataSource)
             return;
         if (!isSavedView(vid)) {
             toast.error(t('console.objectView.cannotDeleteMetaView') || 'Built-in views cannot be deleted.');
@@ -714,7 +851,12 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         if (!confirmed)
             return;
         try {
-            await dataSource.delete('sys_view', vid);
+            if (typeof dataSource?.deleteView === 'function') {
+                await dataSource.deleteView(objectName, vid);
+            }
+            else if (dataSource?.delete) {
+                await dataSource.delete('sys_view', vid);
+            }
             // If we deleted the active view, fall back to the first remaining view.
             if (vid === activeViewId) {
                 const fallback = views.find((v) => v.id !== vid);
@@ -729,30 +871,50 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         }
     }, [dataSource, isSavedView, activeViewId, views, viewId, navigate, t, confirmHandler]);
     const handleDuplicateView = useCallback(async (vid) => {
-        if (!dataSource?.create)
+        if (!dataSource)
             return;
         const source = views.find((v) => v.id === vid);
         if (!source)
             return;
         try {
-            const { id: _omit, created_at, updated_at, ...rest } = source;
-            const newId = `view_${Date.now()}`;
-            const payload = {
+            // ADR-0005 overlay path — store the full NamedListView spec
+            // shape directly under a unique `name`. No legacy sys_view
+            // column-flattening required.
+            const baseName = String(source.name || vid).toLowerCase()
+                .replace(/[^a-z0-9_]+/g, '_').replace(/^_+|_+$/g, '') || 'view';
+            const newName = `${baseName}_copy_${Date.now().toString(36)}`;
+            // Drop `id` so the overlay row is keyed purely by `name`; copying
+            // the source's `id` would collide with the source view in the
+            // tab-bar dedup logic and silently shadow it.
+            const { id: _omitId, ...rest } = source;
+            const spec = {
                 ...rest,
-                objectName,
-                id: newId,
+                name: newName,
                 label: `${source.label || vid} (Copy)`,
                 isDefault: false,
                 isPinned: false,
+                data: source.data || { provider: 'object', object: objectName },
+                object: source.object || objectName,
             };
-            await dataSource.create('sys_view', payload);
+            let newId;
+            if (typeof dataSource?.createView === 'function') {
+                const created = await dataSource.createView(objectName, spec);
+                newId = created?.name || newName;
+            }
+            else if (dataSource?.create) {
+                const payload = toSysViewPayload(spec, objectName);
+                const created = await dataSource.create('sys_view', payload);
+                newId = created?.id ?? created?._id;
+            }
             setRefreshKey(k => k + 1);
             // Auto-activate the duplicate (Airtable parity).
-            if (viewId) {
-                navigate(`../${newId}`, { relative: 'path' });
-            }
-            else {
-                navigate(`view/${newId}`);
+            if (newId) {
+                if (viewId) {
+                    navigate(`../${newId}`, { relative: 'path' });
+                }
+                else {
+                    navigate(`view/${newId}`);
+                }
             }
         }
         catch (err) {
@@ -761,22 +923,27 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         }
     }, [dataSource, views, objectName, navigate, viewId]);
     const handlePinView = useCallback(async (vid, pinned) => {
-        if (!dataSource?.update)
+        if (!dataSource)
             return;
         if (!isSavedView(vid)) {
             toast.error(t('console.objectView.cannotEditMetaView') || 'Built-in views cannot be pinned.');
             return;
         }
         try {
-            await dataSource.update('sys_view', vid, { isPinned: pinned });
+            if (typeof dataSource?.updateView === 'function') {
+                await dataSource.updateView(objectName, vid, { isPinned: pinned });
+            }
+            else if (dataSource?.update) {
+                await dataSource.update('sys_view', vid, { isPinned: pinned });
+            }
             setRefreshKey(k => k + 1);
         }
         catch (err) {
             console.error('[ViewTabBar] Failed to pin view:', err);
         }
-    }, [dataSource, isSavedView, t]);
+    }, [dataSource, objectName, isSavedView, t]);
     const handleSetDefaultView = useCallback(async (vid) => {
-        if (!dataSource?.update)
+        if (!dataSource)
             return;
         if (!isSavedView(vid)) {
             toast.error(t('console.objectView.cannotEditMetaView')
@@ -785,10 +952,18 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         }
         try {
             // Clear `isDefault` on all other saved views, then set this one.
+            const hasOverlay = typeof dataSource?.updateView === 'function';
             const updates = savedViews
                 .filter((sv) => (sv.id || sv._id) !== vid && sv.isDefault)
-                .map((sv) => dataSource.update('sys_view', sv.id || sv._id, { isDefault: false }));
-            updates.push(dataSource.update('sys_view', vid, { isDefault: true }));
+                .map((sv) => {
+                const id = sv.id || sv._id;
+                return hasOverlay
+                    ? dataSource.updateView(objectName, id, { isDefault: false })
+                    : dataSource.update('sys_view', id, { isDefault: false });
+            });
+            updates.push(hasOverlay
+                ? dataSource.updateView(objectName, vid, { isDefault: true })
+                : dataSource.update('sys_view', vid, { isDefault: true }));
             await Promise.all(updates);
             setRefreshKey(k => k + 1);
         }
@@ -796,7 +971,7 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
             console.error('[ViewTabBar] Failed to set default view:', err);
             toast.error('Failed to set default view');
         }
-    }, [dataSource, savedViews, isSavedView, t]);
+    }, [dataSource, objectName, savedViews, isSavedView, t]);
     const handleReorderViews = useCallback(async (orderedIds) => {
         // Persist order for ALL views (incl. metadata) in localStorage so the
         // UI immediately reflects the new ordering, including reorderings
@@ -809,11 +984,15 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         catch { /* ignore */ }
         // Best-effort: also persist `sortOrder` on each saved view so other
         // sessions / users can pick up the order from the backend.
-        if (dataSource?.update) {
+        if (dataSource) {
+            const hasOverlay = typeof dataSource?.updateView === 'function';
             const savedIdSet = new Set(savedViews.map((sv) => sv.id || sv._id));
             const updates = orderedIds
                 .filter(id => savedIdSet.has(id))
-                .map((id, idx) => dataSource.update('sys_view', id, { sortOrder: idx }));
+                .map((id, idx) => hasOverlay
+                ? dataSource.updateView(objectName, id, { sortOrder: idx })
+                : dataSource.update?.('sys_view', id, { sortOrder: idx }))
+                .filter(Boolean);
             try {
                 await Promise.all(updates);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.9",
+  "version": "4.0.11",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.14.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.0.9",
-    "@object-ui/collaboration": "4.0.9",
-    "@object-ui/core": "4.0.9",
-    "@object-ui/data-objectstack": "4.0.9",
-    "@object-ui/fields": "4.0.9",
-    "@object-ui/i18n": "4.0.9",
-    "@object-ui/layout": "4.0.9",
-    "@object-ui/permissions": "4.0.9",
-    "@object-ui/react": "4.0.9",
-    "@object-ui/types": "4.0.9",
-    "@object-ui/components": "4.0.9"
+    "@object-ui/auth": "4.0.11",
+    "@object-ui/collaboration": "4.0.11",
+    "@object-ui/components": "4.0.11",
+    "@object-ui/core": "4.0.11",
+    "@object-ui/data-objectstack": "4.0.11",
+    "@object-ui/fields": "4.0.11",
+    "@object-ui/i18n": "4.0.11",
+    "@object-ui/layout": "4.0.11",
+    "@object-ui/permissions": "4.0.11",
+    "@object-ui/react": "4.0.11",
+    "@object-ui/types": "4.0.11"
   },
   "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.0.9",
-    "@object-ui/plugin-charts": "4.0.9",
-    "@object-ui/plugin-chatbot": "4.0.9",
-    "@object-ui/plugin-dashboard": "4.0.9",
-    "@object-ui/plugin-designer": "4.0.9",
-    "@object-ui/plugin-detail": "4.0.9",
-    "@object-ui/plugin-form": "4.0.9",
-    "@object-ui/plugin-grid": "4.0.9",
-    "@object-ui/plugin-kanban": "4.0.9",
-    "@object-ui/plugin-list": "4.0.9",
-    "@object-ui/plugin-report": "4.0.9",
-    "@object-ui/plugin-view": "4.0.9"
+    "@object-ui/plugin-calendar": "4.0.11",
+    "@object-ui/plugin-charts": "4.0.11",
+    "@object-ui/plugin-chatbot": "4.0.11",
+    "@object-ui/plugin-dashboard": "4.0.11",
+    "@object-ui/plugin-designer": "4.0.11",
+    "@object-ui/plugin-detail": "4.0.11",
+    "@object-ui/plugin-form": "4.0.11",
+    "@object-ui/plugin-grid": "4.0.11",
+    "@object-ui/plugin-kanban": "4.0.11",
+    "@object-ui/plugin-list": "4.0.11",
+    "@object-ui/plugin-report": "4.0.11",
+    "@object-ui/plugin-view": "4.0.11"
   },
   "devDependencies": {
     "@types/node": "^25.7.0",