@object-ui/app-shell 3.3.2 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @object-ui/app-shell — Changelog
 
+## 4.0.1
+
+### Patch Changes
+
+- @object-ui/types@4.0.1
+- @object-ui/core@4.0.1
+- @object-ui/i18n@4.0.1
+- @object-ui/react@4.0.1
+- @object-ui/components@4.0.1
+- @object-ui/fields@4.0.1
+- @object-ui/layout@4.0.1
+- @object-ui/data-objectstack@4.0.1
+- @object-ui/auth@4.0.1
+- @object-ui/permissions@4.0.1
+- @object-ui/plugin-calendar@4.0.1
+- @object-ui/plugin-charts@4.0.1
+- @object-ui/plugin-chatbot@4.0.1
+- @object-ui/plugin-dashboard@4.0.1
+- @object-ui/plugin-designer@4.0.1
+- @object-ui/plugin-detail@4.0.1
+- @object-ui/plugin-form@4.0.1
+- @object-ui/plugin-grid@4.0.1
+- @object-ui/plugin-kanban@4.0.1
+- @object-ui/plugin-list@4.0.1
+- @object-ui/plugin-report@4.0.1
+- @object-ui/plugin-view@4.0.1
+- @object-ui/collaboration@4.0.1
+
+## 4.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @object-ui/types@4.0.0
+  - @object-ui/auth@4.0.0
+  - @object-ui/collaboration@4.0.0
+  - @object-ui/components@4.0.0
+  - @object-ui/core@4.0.0
+  - @object-ui/data-objectstack@4.0.0
+  - @object-ui/fields@4.0.0
+  - @object-ui/layout@4.0.0
+  - @object-ui/permissions@4.0.0
+  - @object-ui/plugin-calendar@4.0.0
+  - @object-ui/plugin-charts@4.0.0
+  - @object-ui/plugin-chatbot@4.0.0
+  - @object-ui/plugin-dashboard@4.0.0
+  - @object-ui/plugin-designer@4.0.0
+  - @object-ui/plugin-detail@4.0.0
+  - @object-ui/plugin-form@4.0.0
+  - @object-ui/plugin-grid@4.0.0
+  - @object-ui/plugin-kanban@4.0.0
+  - @object-ui/plugin-list@4.0.0
+  - @object-ui/plugin-report@4.0.0
+  - @object-ui/plugin-view@4.0.0
+  - @object-ui/react@4.0.0
+  - @object-ui/i18n@4.0.0
+
+## 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') });
@@ -169,7 +181,14 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
                     extraSegments.push({ label: displayTitle || `#${shortId}` });
                 }
                 else if (pathParts[3] === 'view' && pathParts[4]) {
-                    extraSegments.push({ label: humanizeSlug(pathParts[4]) });
+                    // Prefer the view's metadata label (e.g. "Lead Pipeline") over a
+                    // humanized slug ("Kanban By Status") so the breadcrumb matches the
+                    // tab label users clicked.
+                    const viewName = pathParts[4];
+                    const definedViews = currentObject.listViews || currentObject.list_views || {};
+                    const viewDef = definedViews[viewName];
+                    const viewLabel = (viewDef && (viewDef.label || viewDef.title)) || humanizeSlug(viewName);
+                    extraSegments.push({ label: viewLabel });
                 }
             }
         }

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/utils/index.d.ts

@@ -18,10 +18,13 @@ export declare function resolveI18nLabel(label: string | {
  */
 export declare function capitalizeFirst(str: string): string;
 /**
- * Format a record title using the titleFormat pattern
- * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"
- * @param record The record data object
- * @returns Formatted title string
+ * Format a record title using the titleFormat pattern.
+ *
+ * Empty placeholders (missing or null/empty fields) are stripped along with
+ * any orphan separator they leave behind, so a template like
+ *   "{full_name} - {company}"
+ * evaluated against `{ company: "Acme" }` resolves to `"Acme"` rather than
+ * `" - Acme"`. Returns an empty string when no placeholder resolved.
  */
 export declare function formatRecordTitle(titleFormat: string | undefined, record: any): string;
 /**

package/dist/utils/index.js

@@ -28,24 +28,47 @@ export function capitalizeFirst(str) {
         return str;
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
+// Sentinel used to mark empty-placeholder positions inside formatRecordTitle
+// so adjacent separators can be stripped in a second pass.
+const EMPTY_TOKEN = '\u0000';
+// Separator characters commonly placed between {fields} in titleFormat patterns
+// (hyphen, em/en dashes, pipes, slashes, middle dot, comma, colon).
+const SEPARATOR_CLASS = '[-\\u2013\\u2014|/·,:]';
 /**
- * Format a record title using the titleFormat pattern
- * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"
- * @param record The record data object
- * @returns Formatted title string
+ * Format a record title using the titleFormat pattern.
+ *
+ * Empty placeholders (missing or null/empty fields) are stripped along with
+ * any orphan separator they leave behind, so a template like
+ *   "{full_name} - {company}"
+ * evaluated against `{ company: "Acme" }` resolves to `"Acme"` rather than
+ * `" - Acme"`. Returns an empty string when no placeholder resolved.
  */
 export function formatRecordTitle(titleFormat, record) {
     if (!titleFormat || !record) {
         return record?.id || record?._id || 'Record';
     }
-    // Replace {fieldName} patterns with actual values
-    return titleFormat.replace(/\{(\w+)\}/g, (_match, fieldName) => {
-        const value = record[fieldName];
-        if (value === null || value === undefined) {
-            return '';
+    let anyResolved = false;
+    let out = titleFormat.replace(/\{([^{}]+)\}/g, (_match, fieldName) => {
+        const value = record[fieldName.trim()];
+        if (value === null || value === undefined || value === '') {
+            return EMPTY_TOKEN;
         }
+        anyResolved = true;
         return String(value);
     });
+    if (!anyResolved)
+        return '';
+    // Drop separators on either side of an empty token, then any leftover
+    // tokens, then collapse runs of whitespace.
+    const sepBefore = new RegExp(`\\s*${SEPARATOR_CLASS}\\s*${EMPTY_TOKEN}`, 'g');
+    const sepAfter = new RegExp(`${EMPTY_TOKEN}\\s*${SEPARATOR_CLASS}\\s*`, 'g');
+    out = out
+        .replace(sepBefore, '')
+        .replace(sepAfter, '')
+        .replace(new RegExp(EMPTY_TOKEN, 'g'), '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return out;
 }
 /**
  * Get display name for a record using titleFormat or fallback
@@ -55,8 +78,17 @@ export function formatRecordTitle(titleFormat, record) {
  */
 export function getRecordDisplayName(objectDef, record) {
     if (objectDef?.titleFormat) {
-        return formatRecordTitle(objectDef.titleFormat, record);
+        const formatted = formatRecordTitle(objectDef.titleFormat, record);
+        if (formatted)
+            return formatted;
     }
-    // Fallback: Try common name fields
-    return record?.name || record?.title || record?.label || record?.id || record?._id || 'Untitled';
+    return (record?.name ||
+        record?.full_name ||
+        record?.fullName ||
+        record?.title ||
+        record?.label ||
+        record?.subject ||
+        record?.id ||
+        record?._id ||
+        'Untitled');
 }

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,149 @@
+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]);
+    // Stabilise the existing-labels list across renders so we don't churn the
+    // `existingSet` memo (and the dependent useEffects) on every parent render.
+    // Callers commonly pass `views.map(v => v.label)` inline, which is a fresh
+    // array each render — without this normalisation, the name-suggest effect
+    // below would re-fire indefinitely and could trigger "Maximum update depth"
+    // when the array contents are stable but the reference is not.
+    const existingKey = (existingLabels ?? []).join('\u0000');
+    const existingSet = useMemo(() => new Set(existingLabels ?? []), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [existingKey]);
+    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') })] })] }) }));
+}