@object-ui/app-shell 4.0.0 → 4.0.1

package/CHANGELOG.md

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

package/dist/layout/AppHeader.js

@@ -181,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/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.js

@@ -58,7 +58,16 @@ export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels,
     const types = useMemo(() => (availableTypes && availableTypes.length > 0
         ? allTypes.filter(v => availableTypes.includes(v.type))
         : allTypes), [allTypes, availableTypes]);
-    const existingSet = useMemo(() => new Set(existingLabels ?? []), [existingLabels]);
+    // 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('');

package/dist/views/ObjectView.js

@@ -634,14 +634,17 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     const handleSetDefaultView = useCallback(async (vid) => {
         if (!dataSource?.update)
             return;
+        if (!isSavedView(vid)) {
+            toast.error(t('console.objectView.cannotEditMetaView')
+                || 'System view — duplicate it to mark a default.');
+            return;
+        }
         try {
             // Clear `isDefault` on all other saved views, then set this one.
             const updates = savedViews
                 .filter((sv) => (sv.id || sv._id) !== vid && sv.isDefault)
                 .map((sv) => dataSource.update('sys_view', sv.id || sv._id, { isDefault: false }));
-            if (isSavedView(vid)) {
-                updates.push(dataSource.update('sys_view', vid, { isDefault: true }));
-            }
+            updates.push(dataSource.update('sys_view', vid, { isDefault: true }));
             await Promise.all(updates);
             setRefreshKey(k => k + 1);
         }
@@ -649,7 +652,7 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             console.error('[ViewTabBar] Failed to set default view:', err);
             toast.error('Failed to set default view');
         }
-    }, [dataSource, savedViews, isSavedView]);
+    }, [dataSource, savedViews, isSavedView, t]);
     const handleReorderViews = useCallback(async (orderedIds) => {
         // Persist order for ALL views (incl. metadata) in localStorage so the
         // UI immediately reflects the new ordering, including reorderings
@@ -677,11 +680,19 @@ export function ObjectView({ dataSource, objects, onEdit }) {
         setRefreshKey(k => k + 1);
     }, [dataSource, savedViews, objectName]);
     const handleConfigView = useCallback((vid) => {
+        // System (metadata-defined) views are read-only — opening the
+        // ViewConfigPanel against one would let the user save changes that
+        // never persist. Steer them to "Duplicate view" instead.
+        if (!isSavedView(vid)) {
+            toast.error(t('console.objectView.cannotEditMetaView')
+                || 'System view — duplicate it to make changes.');
+            return;
+        }
         if (vid !== activeViewId)
             handleViewChange(vid);
         setViewConfigPanelMode('edit');
         setShowViewConfigPanel(true);
-    }, [activeViewId, handleViewChange]);
+    }, [activeViewId, handleViewChange, isSavedView, t]);
     const handleAddView = useCallback(() => {
         setShowCreateViewDialog(true);
     }, []);
@@ -1001,7 +1012,13 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                     center: viewDef.map?.center,
                 },
                 gallery: {
-                    imageField: viewDef.gallery?.imageField || 'image',
+                    // Spread the full view-defined gallery first so spec
+                    // fields (cardSize, visibleFields, coverField, coverFit)
+                    // make it through; then layer legacy field aliases that
+                    // ObjectGallery still consults.
+                    ...(viewDef.gallery || {}),
+                    imageField: viewDef.gallery?.imageField || viewDef.gallery?.coverField || 'image',
+                    coverField: viewDef.gallery?.coverField || viewDef.gallery?.imageField,
                     titleField: viewDef.gallery?.titleField || objectDef.titleField || 'name',
                     subtitleField: viewDef.gallery?.subtitleField,
                 },
@@ -1072,6 +1089,10 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                                         } }))] })] }), views.length >= 1 && (() => {
                         const viewTabItems = views.map((view) => {
                             const saved = savedViews.find((sv) => (sv.id || sv._id) === view.id);
+                            // System views (loaded from objectDef.listViews / metadata) are
+                            // *read-only*. Only sys_view-backed records can be mutated by
+                            // the user; admins must duplicate a system view to customize it.
+                            const isSystem = !saved;
                             return {
                                 id: view.id,
                                 label: view.label,
@@ -1081,6 +1102,11 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                                 isDefault: !!(saved?.isDefault ?? view.isDefault),
                                 isPinned: !!(saved?.isPinned ?? view.isPinned),
                                 visibility: saved?.visibility ?? view.visibility,
+                                readonly: isSystem,
+                                readonlyReason: isSystem
+                                    ? (t('console.objectView.systemViewReadonly')
+                                        || 'System view defined in code — duplicate to customize.')
+                                    : undefined,
                             };
                         });
                         return (_jsxs("div", { className: "border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: [_jsx(ViewTabBar, { views: viewTabItems, activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: {

package/dist/views/RecordDetailView.js

@@ -20,6 +20,7 @@ import { SkeletonDetail } from '../skeletons';
 import { ActionConfirmDialog } from './ActionConfirmDialog';
 import { ActionParamDialog } from './ActionParamDialog';
 import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
+import { getRecordDisplayName } from '../utils';
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 export function RecordDetailView({ dataSource, objects, onEdit }) {
     const { objectName, recordId } = useParams();
@@ -477,17 +478,13 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: recordViewers.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", title: "Users viewing this record", children: [_jsx(Users, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx(PresenceAvatars, { users: recordViewers, size: "sm", maxVisible: 4, showStatus: true })] })) }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: _jsx(ActionProvider, { context: { record: {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectDef.label, onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')
                                         return;
-                                    const primary = detailSchema.primaryField;
-                                    const candidates = [
-                                        primary && record[primary],
-                                        record.name,
-                                        record.title,
-                                        record.label,
-                                        record.subject,
-                                    ];
-                                    const next = candidates.find((v) => typeof v === 'string' && v.trim().length > 0);
-                                    if (next && next !== recordTitle)
-                                        setRecordTitle(next);
+                                    // Resolve the same way DetailView's header does, so the
+                                    // breadcrumb matches the on-page title (e.g. "David Kim"
+                                    // instead of "#lead-1778…").
+                                    const resolved = getRecordDisplayName(objectDef, record);
+                                    if (resolved && resolved !== recordTitle && resolved !== 'Untitled') {
+                                        setRecordTitle(resolved);
+                                    }
                                 }, onEdit: () => {
                                     onEdit({ id: pureRecordId });
                                 }, discussionSlot: _jsx(RecordChatterPanel, { config: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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": "3.4.0",
-    "@object-ui/collaboration": "3.4.0",
-    "@object-ui/components": "3.4.0",
-    "@object-ui/core": "3.4.0",
-    "@object-ui/data-objectstack": "3.4.0",
-    "@object-ui/fields": "3.4.0",
-    "@object-ui/i18n": "3.4.0",
-    "@object-ui/layout": "3.4.0",
-    "@object-ui/permissions": "3.4.0",
-    "@object-ui/react": "3.4.0",
-    "@object-ui/types": "3.4.0"
+    "@object-ui/auth": "4.0.1",
+    "@object-ui/collaboration": "4.0.1",
+    "@object-ui/components": "4.0.1",
+    "@object-ui/core": "4.0.1",
+    "@object-ui/data-objectstack": "4.0.1",
+    "@object-ui/fields": "4.0.1",
+    "@object-ui/i18n": "4.0.1",
+    "@object-ui/layout": "4.0.1",
+    "@object-ui/permissions": "4.0.1",
+    "@object-ui/react": "4.0.1",
+    "@object-ui/types": "4.0.1"
   },
   "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": "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-designer": "3.4.0",
-    "@object-ui/plugin-detail": "3.4.0",
-    "@object-ui/plugin-form": "3.4.0",
-    "@object-ui/plugin-grid": "3.4.0",
-    "@object-ui/plugin-kanban": "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/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"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",