@object-ui/app-shell 3.3.2 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @object-ui/app-shell — Changelog
 
+## 4.0.0
+
+### Patch Changes
+
+- Updated dependencies [a2d7023]
+- Updated dependencies [f1ca238]
+- Updated dependencies [de881ef]
+- Updated dependencies [b2be122]
+  - @object-ui/components@3.4.0
+  - @object-ui/fields@3.4.0
+  - @object-ui/plugin-designer@3.4.0
+  - @object-ui/plugin-grid@3.4.0
+  - @object-ui/plugin-kanban@3.4.0
+  - @object-ui/types@3.4.0
+  - @object-ui/plugin-form@3.4.0
+  - @object-ui/plugin-calendar@3.4.0
+  - @object-ui/layout@3.4.0
+  - @object-ui/plugin-charts@3.4.0
+  - @object-ui/plugin-chatbot@3.4.0
+  - @object-ui/plugin-dashboard@3.4.0
+  - @object-ui/plugin-detail@3.4.0
+  - @object-ui/plugin-list@3.4.0
+  - @object-ui/plugin-report@3.4.0
+  - @object-ui/plugin-view@3.4.0
+  - @object-ui/auth@3.4.0
+  - @object-ui/collaboration@3.4.0
+  - @object-ui/core@3.4.0
+  - @object-ui/data-objectstack@3.4.0
+  - @object-ui/permissions@3.4.0
+  - @object-ui/react@3.4.0
+  - @object-ui/i18n@3.4.0
+
 ## 3.3.2
 
 ### Patch Changes

package/dist/layout/AppHeader.js

@@ -53,8 +53,8 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const { user, signOut, organizations, activeOrganization, isOrganizationsLoading, } = useAuth();
     const dataSource = useAdapter();
     const { t } = useObjectTranslation();
-    const { objectLabel } = useObjectLabel();
-    const { apps: metadataApps } = useMetadata();
+    const { objectLabel, dashboardLabel, pageLabel, reportLabel } = useObjectLabel();
+    const { apps: metadataApps, dashboards: metadataDashboards, pages: metadataPages, reports: metadataReports } = useMetadata();
     const { currentAppName, recordTitle } = useNavigationContext();
     const [apiPresenceUsers, setApiPresenceUsers] = useState(null);
     const [apiActivities, setApiActivities] = useState(null);
@@ -134,18 +134,30 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     if (isApp) {
         if (routeType === 'dashboard') {
             extraSegments.push({ label: t('console.breadcrumb.dashboards'), href: baseHref });
-            if (pathParts[3])
-                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+            if (pathParts[3]) {
+                const dashboardName = pathParts[3];
+                const dashboardDef = (metadataDashboards || []).find((d) => d.name === dashboardName);
+                const fallback = dashboardDef?.label || humanizeSlug(dashboardName);
+                extraSegments.push({ label: dashboardLabel({ name: dashboardName, label: fallback }) });
+            }
         }
         else if (routeType === 'page') {
             extraSegments.push({ label: t('console.breadcrumb.pages'), href: baseHref });
-            if (pathParts[3])
-                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+            if (pathParts[3]) {
+                const pageName = pathParts[3];
+                const pageDef = (metadataPages || []).find((p) => p.name === pageName);
+                const fallback = pageDef?.label || humanizeSlug(pageName);
+                extraSegments.push({ label: pageLabel({ name: pageName, label: fallback }) });
+            }
         }
         else if (routeType === 'report') {
             extraSegments.push({ label: t('console.breadcrumb.reports'), href: baseHref });
-            if (pathParts[3])
-                extraSegments.push({ label: humanizeSlug(pathParts[3]) });
+            if (pathParts[3]) {
+                const reportName = pathParts[3];
+                const reportDef = (metadataReports || []).find((r) => r.name === reportName);
+                const fallback = reportDef?.label || humanizeSlug(reportName);
+                extraSegments.push({ label: reportLabel({ name: reportName, label: fallback }) });
+            }
         }
         else if (routeType === 'system') {
             extraSegments.push({ label: t('console.breadcrumb.system') });

package/dist/layout/UnifiedSidebar.js

@@ -89,7 +89,7 @@ export function UnifiedSidebar({ activeAppName }) {
     const { isMobile } = useSidebar();
     const location = useLocation();
     const { t } = useObjectTranslation();
-    const { objectLabel: resolveNavObjectLabel } = useObjectLabel();
+    const { objectLabel: resolveNavObjectLabel, dashboardLabel: resolveNavDashboardLabel, navGroupLabel: resolveNavGroupLabel } = useObjectLabel();
     const { context, currentAppName } = useNavigationContext();
     // Swipe-from-left-edge gesture to open sidebar on mobile
     React.useEffect(() => {
@@ -161,15 +161,15 @@ export function UnifiedSidebar({ activeAppName }) {
         return can(object, action);
     }), [can]);
     const basePath = context === 'app' && activeApp ? `/apps/${activeApp.name}` : '';
-    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", className: "!top-14 !h-[calc(100svh-3.5rem)]", children: [_jsx(SidebarContent, { className: "pt-2", children: _jsx("div", { className: "transition-opacity duration-200 ease-in-out", children: context === 'app' && activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), "Area"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
+    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: true, onPinToggle: togglePin, enableReorder: true, onReorder: handleReorder, resolveObjectLabel: (objectName, fallback) => resolveNavObjectLabel({ name: objectName, label: fallback }), t: t }), recentItems.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5 cursor-pointer select-none", onClick: () => setRecentExpanded(prev => !prev), children: [_jsx(ChevronRight, { className: `h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}` }), _jsx(Clock, { className: "h-3.5 w-3.5" }), "Recent"] }), recentExpanded && (_jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: recentItems.slice(0, 5).map(item => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : '📄' }), _jsx("span", { className: "truncate", children: item.label })] }) }) }, item.id))) }) }))] })), favorites.length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Favorites"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'report' ? '📈' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: homeNavigation.map((item) => {
+                                                    }) }) })] })), _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) => {
                                                     const NavIcon = getIcon(item.icon);
                                                     const isActive = location.pathname === item.url;
                                                     return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: isActive, children: _jsxs(Link, { to: item.url || '/home', children: [_jsx(NavIcon, { className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }) }, item.id));
-                                                }) }) }) }), favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Starred"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": `Remove ${item.label} from favorites`, children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) }) }), _jsx(SidebarFooter, { className: "border-t p-1", children: _jsx(SidebarTrigger, { className: "w-full justify-start pl-2 group-data-[state=collapsed]:justify-center group-data-[state=collapsed]:pl-0" }) })] }), isMobile && context === 'app' && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: processedNavigation.filter((n) => n.type !== 'group').slice(0, 5).map((item) => {
+                                                }) }) }) }), favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').length > 0 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), t('sidebar.starred', { defaultValue: 'Starred' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: favorites.filter(f => f.type === 'object' || f.type === 'dashboard' || f.type === 'page').slice(0, 8).map(item => (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, children: _jsxs(Link, { to: item.href, children: [_jsx("span", { className: "text-muted-foreground", children: item.type === 'dashboard' ? '📊' : item.type === 'page' ? '📄' : '📋' }), _jsx("span", { className: "truncate", children: item.label })] }) }), _jsx(SidebarMenuAction, { showOnHover: true, onClick: (e) => { e.stopPropagation(); removeFavorite(item.id); }, "aria-label": t('sidebar.removeFromFavorites', { defaultValue: 'Remove {{name}} from favorites', name: item.label }), children: _jsx(StarOff, { className: "h-3 w-3" }) })] }, item.id))) }) })] }))] })) }) }), _jsx(SidebarFooter, { className: "border-t p-1", children: _jsx(SidebarTrigger, { className: "w-full justify-start pl-2 group-data-[state=collapsed]:justify-center group-data-[state=collapsed]:pl-0" }) })] }), isMobile && context === 'app' && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 flex items-center justify-around border-t bg-background/95 backdrop-blur-sm px-2 py-1 sm:hidden safe-area-bottom", children: processedNavigation.filter((n) => n.type !== 'group').slice(0, 5).map((item) => {
                     const NavIcon = getIcon(item.icon);
                     let href = item.url || '#';
                     if (item.type === 'object') {

package/dist/providers/MetadataProvider.js

@@ -7,7 +7,7 @@ export { useMetadata };
 // Constants
 // ---------------------------------------------------------------------------
 const DEFAULT_TTL_MS = 5 * 60 * 1000;
-const EAGER_TYPES = ['app'];
+const EAGER_TYPES = ['app', 'view'];
 const TYPE_BY_STATE_KEY = {
     apps: 'app',
     objects: 'object',
@@ -61,6 +61,44 @@ function isNamedItem(item) {
         'name' in item &&
         typeof item.name === 'string');
 }
+/**
+ * Merge `view` metadata (the @objectstack/spec View container, keyed by
+ * target object name) into object definitions so that `objectDef.listViews`
+ * is populated for the renderer (`@object-ui/plugin-view`) which expects it.
+ *
+ * Each View has shape `{ list?, form?, listViews?, formViews? }`. We collapse:
+ *   - `view.list`      → `listViews[view.list.name || 'default']`
+ *   - `view.listViews` → spread into `listViews`
+ *
+ * Existing `obj.listViews` / `obj.list_views` win to preserve overrides.
+ */
+function mergeViewsIntoObjects(objects, views) {
+    if (!objects.length || !views.length)
+        return objects;
+    const byObject = {};
+    for (const view of views) {
+        const objName = view?.name || view?.list?.data?.object || view?.form?.data?.object;
+        if (!objName)
+            continue;
+        const bucket = (byObject[objName] || (byObject[objName] = {}));
+        if (view.list) {
+            const k = view.list.name || 'default';
+            bucket[k] = view.list;
+        }
+        if (view.listViews && typeof view.listViews === 'object') {
+            for (const [k, v] of Object.entries(view.listViews)) {
+                bucket[k] = v;
+            }
+        }
+    }
+    return objects.map(obj => {
+        const extra = byObject[obj.name];
+        if (!extra)
+            return obj;
+        const existing = obj.listViews || obj.list_views || {};
+        return { ...obj, listViews: { ...extra, ...existing } };
+    });
+}
 function emptyEntry() {
     return {
         status: 'idle',
@@ -294,7 +332,9 @@ export function MetadataProvider({ children, adapter, ttlMs = DEFAULT_TTL_MS })
         const base = {
             apps: getEntry('app').items,
             get objects() {
-                return readType(TYPE_BY_STATE_KEY.objects);
+                const objs = readType(TYPE_BY_STATE_KEY.objects);
+                const views = readType('view');
+                return views.length ? mergeViewsIntoObjects(objs, views) : objs;
             },
             get dashboards() {
                 return readType(TYPE_BY_STATE_KEY.dashboards);

package/dist/utils/getIcon.js

@@ -12,7 +12,7 @@
  */
 import React from 'react';
 import { Database } from 'lucide-react';
-// @ts-expect-error - lucide-react has no `exports` field; subpath types live alongside dynamic.mjs
+// @ts-ignore - lucide-react has no `exports` field; subpath types live alongside dynamic.mjs
 import { DynamicIcon } from 'lucide-react/dynamic.mjs';
 /** Convert PascalCase / camelCase / mixed names to kebab-case for DynamicIcon. */
 function toKebab(name) {
@@ -23,41 +23,6 @@ function toKebab(name) {
         .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
         .toLowerCase();
 }
-/**
- * Aliases for icon names that exist in other icon sets (FontAwesome, Material,
- * Bootstrap…) but use a different name in Lucide. Mapped to the closest
- * Lucide equivalent so existing metadata authored against FA stays portable.
- */
-const ICON_ALIASES = {
-    bullseye: 'target',
-    bullhorn: 'megaphone',
-    tachometer: 'gauge',
-    'tachometer-alt': 'gauge',
-    dashboard: 'layout-dashboard',
-    'life-ring': 'life-buoy',
-    tasks: 'list-checks',
-    'file-invoice': 'receipt',
-    'file-signature': 'file-pen-line',
-    'file-pdf': 'file-text',
-    'check-square': 'square-check',
-    'arrow-up-right-from-square': 'external-link',
-    'sign-out-alt': 'log-out',
-    'sign-in-alt': 'log-in',
-    'cog': 'settings',
-    'gears': 'settings',
-    'envelope': 'mail',
-    'phone-alt': 'phone',
-    'map-marker-alt': 'map-pin',
-    'edit': 'pencil',
-    'trash-alt': 'trash-2',
-    'plus-circle': 'circle-plus',
-    'minus-circle': 'circle-minus',
-    'times-circle': 'circle-x',
-    'check-circle': 'circle-check',
-    'info-circle': 'info',
-    'question-circle': 'circle-help',
-    'exclamation-triangle': 'triangle-alert',
-};
 const cache = new Map();
 /**
  * Resolve a Lucide icon by name (kebab-case or PascalCase).
@@ -75,7 +40,7 @@ export function getIcon(name) {
     const cached = cache.get(name);
     if (cached)
         return cached;
-    const kebab = ICON_ALIASES[toKebab(name)] ?? toKebab(name);
+    const kebab = toKebab(name);
     const Wrapped = (props) => React.createElement(DynamicIcon, {
         name: kebab,
         fallback: Database,

package/dist/views/CreateViewDialog.d.ts

@@ -0,0 +1,44 @@
+/**
+ * CreateViewDialog — Airtable-style "Create new view" modal.
+ *
+ * Step 1: User picks a view type from a visual grid of cards (icon + label
+ * + short description). Selection is highlighted.
+ * Step 2: For view types that need them, the user picks the required
+ * configuration fields (e.g. the group-by field for kanban, the start-date
+ * field for calendar/timeline/gantt, lat/lng for map, image for gallery).
+ *   The Create button stays disabled until every required field is set.
+ * Step 3: The user enters a name (required, defaults to "Grid 1" etc.).
+ *
+ * On submit, calls `onCreate({ type, label, [type]: {...required fields} })`.
+ * The parent is responsible for actually persisting the view (we keep this
+ * component pure — no dataSource coupling).
+ */
+export interface CreateViewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Called with a fully-formed view config payload. Required type-specific
+     * fields are nested under their type key (e.g. `kanban.groupByField`),
+     * matching the @objectstack/spec NamedListView shape.
+     */
+    onCreate: (config: Record<string, any> & {
+        type: string;
+        label: string;
+    }) => void;
+    /** Used to suggest unique default names like "Grid 2" if "Grid 1" exists. */
+    existingLabels?: string[];
+    /** Restrict the available view types. Defaults to all built-in types. */
+    availableTypes?: string[];
+    /**
+     * Object definition. Provides the available fields used to populate the
+     * required field selectors (group-by, start-date, etc.). When omitted,
+     * required-field validation is skipped.
+     */
+    objectDef?: {
+        name: string;
+        label?: string;
+        fields?: Record<string, any>;
+        [key: string]: any;
+    };
+}
+export declare function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }: CreateViewDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/CreateViewDialog.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CreateViewDialog — Airtable-style "Create new view" modal.
+ *
+ * Step 1: User picks a view type from a visual grid of cards (icon + label
+ * + short description). Selection is highlighted.
+ * Step 2: For view types that need them, the user picks the required
+ * configuration fields (e.g. the group-by field for kanban, the start-date
+ * field for calendar/timeline/gantt, lat/lng for map, image for gallery).
+ *   The Create button stays disabled until every required field is set.
+ * Step 3: The user enters a name (required, defaults to "Grid 1" etc.).
+ *
+ * On submit, calls `onCreate({ type, label, [type]: {...required fields} })`.
+ * The parent is responsible for actually persisting the view (we keep this
+ * component pure — no dataSource coupling).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Button, cn, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { deriveFieldOptions } from '@object-ui/plugin-view';
+import { LayoutGrid, KanbanSquare, Calendar as CalendarIcon, Image as ImageIcon, GanttChartSquare, Clock, Map as MapIcon, BarChart3, AlertCircle, } from 'lucide-react';
+function buildViewTypeMeta(t) {
+    return [
+        { type: 'grid', icon: LayoutGrid, label: t('console.objectView.viewTypeGrid'), description: t('console.objectView.viewTypeGridDesc') },
+        { type: 'kanban', icon: KanbanSquare, label: t('console.objectView.viewTypeKanban'), description: t('console.objectView.viewTypeKanbanDesc') },
+        { type: 'calendar', icon: CalendarIcon, label: t('console.objectView.viewTypeCalendar'), description: t('console.objectView.viewTypeCalendarDesc') },
+        { type: 'gallery', icon: ImageIcon, label: t('console.objectView.viewTypeGallery'), description: t('console.objectView.viewTypeGalleryDesc') },
+        { type: 'timeline', icon: Clock, label: t('console.objectView.viewTypeTimeline'), description: t('console.objectView.viewTypeTimelineDesc') },
+        { type: 'gantt', icon: GanttChartSquare, label: t('console.objectView.viewTypeGantt'), description: t('console.objectView.viewTypeGanttDesc') },
+        { type: 'map', icon: MapIcon, label: t('console.objectView.viewTypeMap'), description: t('console.objectView.viewTypeMapDesc') },
+        { type: 'chart', icon: BarChart3, label: t('console.objectView.viewTypeChart'), description: t('console.objectView.viewTypeChartDesc') },
+    ];
+}
+/** Suggest a non-colliding default name like "Grid 1", "Grid 2", … */
+function suggestName(typeLabel, existing) {
+    for (let i = 1; i < 1000; i++) {
+        const candidate = `${typeLabel} ${i}`;
+        if (!existing.has(candidate))
+            return candidate;
+    }
+    return typeLabel;
+}
+const REQUIRED_FIELDS_BY_TYPE = {
+    kanban: [{ key: 'groupByField', i18nKey: 'console.objectView.groupByField', filter: (f) => f.type === 'select' || f.type === 'boolean' }],
+    calendar: [{ key: 'startDateField', i18nKey: 'console.objectView.startDateField', filter: (f) => f.type === 'date' }],
+    timeline: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
+    gantt: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
+    gallery: [{ key: 'imageField', i18nKey: 'console.objectView.imageField' /* no filter — accept any */ }],
+    map: [
+        { key: 'latitudeField', i18nKey: 'console.objectView.latitudeField', filter: (f) => f.type === 'number' },
+        { key: 'longitudeField', i18nKey: 'console.objectView.longitudeField', filter: (f) => f.type === 'number' },
+    ],
+    // grid + chart have no strictly required fields at create time
+};
+export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }) {
+    const { t } = useObjectTranslation();
+    const allTypes = useMemo(() => buildViewTypeMeta(t), [t]);
+    const types = useMemo(() => (availableTypes && availableTypes.length > 0
+        ? allTypes.filter(v => availableTypes.includes(v.type))
+        : allTypes), [allTypes, availableTypes]);
+    const existingSet = useMemo(() => new Set(existingLabels ?? []), [existingLabels]);
+    const fieldOptions = useMemo(() => (objectDef ? deriveFieldOptions(objectDef) : []), [objectDef]);
+    const [selectedType, setSelectedType] = useState(types[0]?.type ?? 'grid');
+    const [label, setLabel] = useState('');
+    const [touched, setTouched] = useState(false);
+    /** Map of `${type}.${fieldKey}` → selected field name. Per-type so switching
+     *  view types preserves the user's earlier choices in case they switch back. */
+    const [requiredFieldValues, setRequiredFieldValues] = useState({});
+    // Reset when the dialog opens, and re-suggest name whenever type changes
+    // (only while the user hasn't manually edited it yet).
+    useEffect(() => {
+        if (open) {
+            setSelectedType(types[0]?.type ?? 'grid');
+            setTouched(false);
+            setRequiredFieldValues({});
+        }
+    }, [open, types]);
+    useEffect(() => {
+        if (!touched) {
+            const meta = types.find(v => v.type === selectedType);
+            setLabel(suggestName(meta?.label ?? 'View', existingSet));
+        }
+    }, [selectedType, touched, types, existingSet]);
+    // Required fields for the currently selected type
+    const requiredFields = REQUIRED_FIELDS_BY_TYPE[selectedType] ?? [];
+    const getRequiredValue = (key) => requiredFieldValues[`${selectedType}.${key}`] ?? '';
+    const setRequiredValue = (key, value) => setRequiredFieldValues(prev => ({ ...prev, [`${selectedType}.${key}`]: value }));
+    const trimmed = label.trim();
+    const isDuplicate = trimmed.length > 0 && existingSet.has(trimmed);
+    const allRequiredFilled = requiredFields.every(f => getRequiredValue(f.key).length > 0);
+    const canSubmit = trimmed.length > 0 && !isDuplicate && allRequiredFilled;
+    // Auto-pick a sensible default for any required field when there's only
+    // one eligible option — saves the user a click. Runs whenever the type or
+    // available options change.
+    useEffect(() => {
+        if (requiredFields.length === 0 || fieldOptions.length === 0)
+            return;
+        requiredFields.forEach((rf) => {
+            if (getRequiredValue(rf.key).length > 0)
+                return;
+            const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
+            if (eligible.length === 1)
+                setRequiredValue(rf.key, eligible[0].value);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedType, fieldOptions]);
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        // Bundle required fields under their type-specific sub-key, matching the
+        // NamedListView spec (e.g. { type: "kanban", kanban: { groupByField: ... } })
+        const subConfig = {};
+        requiredFields.forEach((rf) => {
+            const v = getRequiredValue(rf.key);
+            if (v)
+                subConfig[rf.key] = v;
+        });
+        const payload = {
+            type: selectedType,
+            label: trimmed,
+        };
+        if (Object.keys(subConfig).length > 0) {
+            payload[selectedType] = subConfig;
+        }
+        onCreate(payload);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[560px]", "data-testid": "create-view-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('console.objectView.createView') }), _jsx(DialogDescription, { children: t('console.objectView.createViewDesc') })] }), _jsx("div", { className: "grid grid-cols-4 gap-2 py-2", "data-testid": "create-view-type-grid", children: types.map(({ type, label: typeLabel, description, icon: Icon }) => {
+                        const selected = type === selectedType;
+                        return (_jsxs("button", { type: "button", "data-testid": `create-view-type-${type}`, "aria-pressed": selected, onClick: () => setSelectedType(type), className: cn('group flex flex-col items-start gap-1 rounded-lg border bg-background p-3 text-left transition-colors', 'hover:border-primary/60 hover:bg-accent/40', selected
+                                ? 'border-primary ring-2 ring-primary/30 bg-accent/40'
+                                : 'border-border'), children: [_jsx(Icon, { className: cn('h-5 w-5', selected ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground') }), _jsx("div", { className: "text-xs font-medium leading-tight", children: typeLabel }), _jsx("div", { className: "text-[10px] leading-tight text-muted-foreground line-clamp-2", children: description })] }, type));
+                    }) }), requiredFields.length > 0 && (_jsx("div", { className: "space-y-2 rounded-md border border-dashed bg-muted/30 p-3", "data-testid": "create-view-required-fields", children: requiredFields.map((rf) => {
+                        const selectedFieldValue = getRequiredValue(rf.key);
+                        const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
+                        const noEligible = fieldOptions.length > 0 && eligible.length === 0;
+                        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: `create-view-required-${rf.key}`, className: "text-xs font-medium", children: [t(rf.i18nKey), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsxs("select", { id: `create-view-required-${rf.key}`, "data-testid": `create-view-required-${rf.key}`, value: selectedFieldValue, onChange: (e) => setRequiredValue(rf.key, e.target.value), disabled: noEligible, className: cn('h-9 w-full rounded-md border bg-background px-2 text-xs', selectedFieldValue ? 'border-input' : 'border-input'), children: [_jsx("option", { value: "", children: t('console.objectView.selectField') }), eligible.map(f => (_jsx("option", { value: f.value, children: f.label }, f.value)))] }), noEligible && (_jsxs("p", { className: "flex items-center gap-1 text-[11px] text-destructive", "data-testid": `create-view-error-no-field-${rf.key}`, children: [_jsx(AlertCircle, { className: "h-3 w-3" }), t('console.objectView.noEligibleFieldForType')] }))] }, rf.key));
+                    }) })), _jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: "create-view-name-input", className: "text-xs font-medium", children: [t('console.objectView.title'), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsx(Input, { id: "create-view-name-input", "data-testid": "create-view-name-input", autoFocus: true, value: label, onChange: (e) => { setLabel(e.target.value); setTouched(true); }, onKeyDown: (e) => { if (e.key === 'Enter' && canSubmit)
+                                handleSubmit(); }, placeholder: t('console.objectView.newView'), className: "h-9" }), isDuplicate && (_jsx("p", { className: "text-[11px] text-destructive", "data-testid": "create-view-error-duplicate", children: t('console.objectView.duplicateViewName') }))] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), "data-testid": "create-view-cancel", children: t('console.objectView.cancel') }), _jsx(Button, { type: "button", disabled: !canSubmit, onClick: handleSubmit, "data-testid": "create-view-submit", children: t('console.objectView.create') })] })] }) }));
+}

package/dist/views/DashboardView.js

@@ -17,7 +17,7 @@ import { SkeletonDashboard } from '../skeletons';
 import { useMetadata } from '../providers/MetadataProvider';
 import { resolveI18nLabel } from '../utils';
 import { useAdapter } from '../providers/AdapterProvider';
-import { useObjectTranslation } from '@object-ui/i18n';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 // ---------------------------------------------------------------------------
 // Widget type palette for the add-widget toolbar
 // ---------------------------------------------------------------------------
@@ -105,6 +105,7 @@ export function DashboardView({ dataSource }) {
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
     const { t } = useObjectTranslation();
+    const { dashboardLabel, dashboardDescription } = useObjectLabel();
     const [isLoading, setIsLoading] = useState(true);
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     const [selectedWidgetId, setSelectedWidgetId] = useState(null);
@@ -120,13 +121,28 @@ export function DashboardView({ dataSource }) {
         });
     }, []);
     const modalHandler = useCallback((schema) => new Promise((resolve) => {
-        // Normalize string schema (e.g. action.target = 'opportunity') to a
-        // ModalForm-compatible descriptor so header `modal` actions like
-        // { actionType: 'modal', actionUrl: 'opportunity' } open the create
-        // form for that object.
-        const normalized = typeof schema === 'string'
-            ? { objectName: schema, mode: 'create' }
-            : schema;
+        // Normalize string schema (e.g. action.target = 'opportunity' or
+        // 'create_opportunity') to a ModalForm-compatible descriptor so header
+        // `modal` actions like { actionType: 'modal', actionUrl: 'create_opportunity' }
+        // open the create form for that object. Supports the conventional
+        // `<verb>_<object>` form (create_/new_/add_/edit_/update_) emitted by
+        // server-driven dashboard schemas.
+        let normalized;
+        if (typeof schema === 'string') {
+            const m = schema.match(/^(create|new|add|edit|update)_(.+)$/);
+            if (m) {
+                const verb = m[1];
+                const objectName = m[2];
+                const mode = verb === 'edit' || verb === 'update' ? 'edit' : 'create';
+                normalized = { objectName, mode };
+            }
+            else {
+                normalized = { objectName: schema, mode: 'create' };
+            }
+        }
+        else {
+            normalized = schema;
+        }
         setModalState({ schema: normalized, resolve });
     }), []);
     const scriptHandlers = useMemo(() => ({
@@ -336,7 +352,13 @@ export function DashboardView({ dataSource }) {
         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: "Dashboard Not Found" }), _jsxs(EmptyDescription, { children: ["The dashboard \"", dashboardName, "\" could not be found. It may have been removed or renamed."] })] }) }));
     }
     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: resolveI18nLabel(dashboard.label, t) || dashboard.name }), dashboard.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: resolveI18nLabel(dashboard.description, t) }))] }), _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" }), "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: {
+    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 }), (() => {
+                                const desc = dashboardDescription({
+                                    name: dashboard.name,
+                                    description: resolveI18nLabel(dashboard.description, 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: {
                     type: 'object-form',
                     formType: 'modal',
                     objectName: modalState.schema.objectName,