@object-ui/app-shell 4.0.10 → 4.0.11

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @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

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

@@ -400,6 +400,20 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                 // 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 };
+                    }
+                }
                 if (typeof dataSource?.createView === 'function') {
                     const created = await dataSource.createView(objectName, spec);
                     createdId = created?.name || config?.name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.10",
+  "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.10",
-    "@object-ui/collaboration": "4.0.10",
-    "@object-ui/components": "4.0.10",
-    "@object-ui/core": "4.0.10",
-    "@object-ui/data-objectstack": "4.0.10",
-    "@object-ui/fields": "4.0.10",
-    "@object-ui/i18n": "4.0.10",
-    "@object-ui/layout": "4.0.10",
-    "@object-ui/permissions": "4.0.10",
-    "@object-ui/react": "4.0.10",
-    "@object-ui/types": "4.0.10"
+    "@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.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/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",