@object-ui/app-shell 4.0.0 → 4.0.3

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 /**
  * Utility functions for ObjectStack Console
  */
+export { resolveRecordFormTarget, } from './recordFormNavigation';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
@@ -28,24 +29,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 +79,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/utils/recordFormNavigation.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Resolvers for record-form navigation targets.
+ *
+ * Pure helpers extracted from `AppContent.tsx` so the routing rules behind
+ * the modal-vs-page decision are unit-testable in isolation. Keep this file
+ * free of React / router imports — it must run in a node test environment.
+ *
+ * @module utils/recordFormNavigation
+ */
+/**
+ * Subset of the object metadata shape consumed by the resolver. Mirrors the
+ * fields read from the runtime objects list (`useMetadata().objects`).
+ */
+export interface ObjectDefinitionForNavigation {
+    /** API name used in URLs. */
+    name: string;
+    /** Optional UI mode override for create/edit interactions. */
+    editMode?: 'modal' | 'page';
+}
+/**
+ * Result of the modal-vs-page decision. `kind: 'modal'` means the caller
+ * should open the global `<ModalForm>`; `kind: 'page'` means the caller
+ * should `navigate(url)` to the full-screen create/edit route.
+ */
+export type RecordFormTarget = {
+    kind: 'modal';
+} | {
+    kind: 'page';
+    url: string;
+};
+/**
+ * Build a record-form navigation target.
+ *
+ * Returns:
+ *   - `{ kind: 'modal' }` when the object metadata does not opt in to page
+ *     mode (default behavior — preserves backward compatibility).
+ *   - `{ kind: 'page', url }` when `objectDef.editMode === 'page'`. The
+ *     URL points at `/{baseUrl}/{objectName}/new` for create, or
+ *     `/{baseUrl}/{objectName}/record/{recordId}/edit` for edit. The
+ *     `recordId` is derived from `record.id` or `record._id`, falling
+ *     back to create-mode if neither is present.
+ *
+ * Notes:
+ *   - Returns `{ kind: 'modal' }` when `objectDef` is missing or has no
+ *     `name` — the caller (AppContent) treats this as "no actionable
+ *     state" and falls back to the existing modal flow.
+ *   - `recordId` is URL-encoded so non-ASCII / reserved characters in
+ *     object IDs (e.g. UUIDs with `:` separators) are safe.
+ */
+export declare function resolveRecordFormTarget(opts: {
+    objectDef: ObjectDefinitionForNavigation | null | undefined;
+    baseUrl: string;
+    record: {
+        id?: string | number;
+        _id?: string | number;
+    } | null | undefined;
+}): RecordFormTarget;
+/**
+ * Action descriptor accepted by the navigate-create / navigate-edit
+ * handlers. Loose-typed because the same shape is constructed dynamically
+ * from JSON metadata at runtime and we want the helpers to be tolerant of
+ * legacy or hand-authored inputs.
+ */
+export interface NavigationActionDef {
+    /** Optional explicit object name (overrides any context). */
+    objectName?: string;
+    /** Optional explicit record id (only meaningful for `navigate_edit`). */
+    recordId?: string | number;
+    /** Standard params bag — preferred location for objectName / recordId. */
+    params?: {
+        objectName?: string;
+        recordId?: string | number;
+        [key: string]: any;
+    };
+}
+/**
+ * Optional context typically supplied by an `ActionRunner` (e.g. when the
+ * action button is mounted inside an `ObjectView`, the view registers its
+ * `objectName` and `baseUrl` on the runner so action JSON can omit them).
+ *
+ * Tolerant of additional unknown keys because the upstream
+ * `ActionRunner.getContext()` returns a generic `ActionContext` with an
+ * open index signature; we only read the two fields we care about.
+ */
+export interface NavigationActionContext {
+    objectName?: string;
+    baseUrl?: string;
+    [key: string]: unknown;
+}
+export type NavigationActionResult = {
+    success: true;
+    url: string;
+} | {
+    success: false;
+    error: string;
+};
+/**
+ * Resolve the URL for a `navigate_create` action.
+ *
+ * Order of precedence for `objectName`:
+ *   1. `action.params.objectName`
+ *   2. `action.objectName`
+ *   3. `context.objectName`
+ *
+ * `baseUrl` falls back to `context.baseUrl`, then to the supplied
+ * `defaultBaseUrl` (typically `/apps/{appName}`).
+ *
+ * Returns `{ success: false }` with a descriptive error when `objectName`
+ * cannot be resolved — the caller (`ActionRunner`) surfaces this to the UI.
+ */
+export declare function resolveNavigateCreateUrl(opts: {
+    action: NavigationActionDef;
+    context?: NavigationActionContext;
+    defaultBaseUrl: string;
+}): NavigationActionResult;
+/**
+ * Resolve the URL for a `navigate_edit` action.
+ *
+ * Same `objectName` precedence as {@link resolveNavigateCreateUrl}.
+ * `recordId` is read from `action.params.recordId` or `action.recordId`
+ * (no context fallback — record ids are intrinsically per-action).
+ *
+ * Returns `{ success: false }` with a descriptive error when either
+ * `objectName` or `recordId` is missing.
+ */
+export declare function resolveNavigateEditUrl(opts: {
+    action: NavigationActionDef;
+    context?: NavigationActionContext;
+    defaultBaseUrl: string;
+}): NavigationActionResult;

package/dist/utils/recordFormNavigation.js

@@ -0,0 +1,96 @@
+/**
+ * Resolvers for record-form navigation targets.
+ *
+ * Pure helpers extracted from `AppContent.tsx` so the routing rules behind
+ * the modal-vs-page decision are unit-testable in isolation. Keep this file
+ * free of React / router imports — it must run in a node test environment.
+ *
+ * @module utils/recordFormNavigation
+ */
+/**
+ * Build a record-form navigation target.
+ *
+ * Returns:
+ *   - `{ kind: 'modal' }` when the object metadata does not opt in to page
+ *     mode (default behavior — preserves backward compatibility).
+ *   - `{ kind: 'page', url }` when `objectDef.editMode === 'page'`. The
+ *     URL points at `/{baseUrl}/{objectName}/new` for create, or
+ *     `/{baseUrl}/{objectName}/record/{recordId}/edit` for edit. The
+ *     `recordId` is derived from `record.id` or `record._id`, falling
+ *     back to create-mode if neither is present.
+ *
+ * Notes:
+ *   - Returns `{ kind: 'modal' }` when `objectDef` is missing or has no
+ *     `name` — the caller (AppContent) treats this as "no actionable
+ *     state" and falls back to the existing modal flow.
+ *   - `recordId` is URL-encoded so non-ASCII / reserved characters in
+ *     object IDs (e.g. UUIDs with `:` separators) are safe.
+ */
+export function resolveRecordFormTarget(opts) {
+    const { objectDef, baseUrl, record } = opts;
+    if (!objectDef?.name || objectDef.editMode !== 'page') {
+        return { kind: 'modal' };
+    }
+    const rawId = record?.id ?? record?._id;
+    if (record && rawId != null && rawId !== '') {
+        const encoded = encodeURIComponent(String(rawId));
+        return {
+            kind: 'page',
+            url: `${baseUrl}/${objectDef.name}/record/${encoded}/edit`,
+        };
+    }
+    return { kind: 'page', url: `${baseUrl}/${objectDef.name}/new` };
+}
+/**
+ * Resolve the URL for a `navigate_create` action.
+ *
+ * Order of precedence for `objectName`:
+ *   1. `action.params.objectName`
+ *   2. `action.objectName`
+ *   3. `context.objectName`
+ *
+ * `baseUrl` falls back to `context.baseUrl`, then to the supplied
+ * `defaultBaseUrl` (typically `/apps/{appName}`).
+ *
+ * Returns `{ success: false }` with a descriptive error when `objectName`
+ * cannot be resolved — the caller (`ActionRunner`) surfaces this to the UI.
+ */
+export function resolveNavigateCreateUrl(opts) {
+    const { action, context = {}, defaultBaseUrl } = opts;
+    const objectName = action.params?.objectName ?? action.objectName ?? context.objectName;
+    const baseUrl = context.baseUrl ?? defaultBaseUrl;
+    if (!objectName) {
+        return {
+            success: false,
+            error: 'navigate_create: objectName is required',
+        };
+    }
+    return { success: true, url: `${baseUrl}/${objectName}/new` };
+}
+/**
+ * Resolve the URL for a `navigate_edit` action.
+ *
+ * Same `objectName` precedence as {@link resolveNavigateCreateUrl}.
+ * `recordId` is read from `action.params.recordId` or `action.recordId`
+ * (no context fallback — record ids are intrinsically per-action).
+ *
+ * Returns `{ success: false }` with a descriptive error when either
+ * `objectName` or `recordId` is missing.
+ */
+export function resolveNavigateEditUrl(opts) {
+    const { action, context = {}, defaultBaseUrl } = opts;
+    const objectName = action.params?.objectName ?? action.objectName ?? context.objectName;
+    const recordId = action.params?.recordId ?? action.recordId;
+    const baseUrl = context.baseUrl ?? defaultBaseUrl;
+    if (!objectName || recordId == null || recordId === '') {
+        return {
+            success: false,
+            error: 'navigate_edit: objectName and recordId are required',
+        };
+    }
+    const encoded = encodeURIComponent(String(recordId));
+    return {
+        success: true,
+        url: `${baseUrl}/${objectName}/record/${encoded}/edit`,
+    };
+}

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/dist/views/RecordFormPage.d.ts

@@ -0,0 +1,42 @@
+/**
+ * RecordFormPage Component
+ *
+ * Renders a full-screen create or edit page for a record. This is the
+ * page-mode counterpart to the global `ModalForm` mounted by `AppContent`
+ * for objects whose metadata declares `editMode: 'page'`.
+ *
+ * Routes (mounted by `AppContent`):
+ *   - `/apps/:appName/:objectName/new`              — create mode
+ *   - `/apps/:appName/:objectName/record/:recordId/edit` — edit mode
+ *
+ * Behavior:
+ *   - Resolves the object definition via `useMetadata()`. While metadata is
+ *     still loading the page renders a `SkeletonDetail` to avoid a flash of
+ *     "Object Not Found".
+ *   - Delegates form rendering and data fetching to `<ObjectForm>` from
+ *     `@object-ui/plugin-form` with `formType: 'simple'`. ObjectForm itself
+ *     fetches the existing record (in edit mode) via `dataSource.findOne`,
+ *     so this page does not need to manage its own loading state for
+ *     record data.
+ *   - On success / cancel, navigates back if the user has history, otherwise
+ *     falls back to a sensible parent route (record detail in edit mode,
+ *     object list in create mode). Cancel always navigates back without a
+ *     toast.
+ *   - Wraps the form in a sticky page header (back button + title) for a
+ *     consistent full-screen chrome.
+ *
+ * @module views/RecordFormPage
+ */
+export interface RecordFormPageProps {
+    /** Form mode — `'create'` for the `/new` route, `'edit'` for the `/edit` route. */
+    mode: 'create' | 'edit';
+}
+/**
+ * Full-screen record create/edit page.
+ *
+ * Reads `:objectName` (and `:recordId` when editing) from the URL and
+ * resolves the object definition. Renders an `<ObjectForm>` configured with
+ * `formType: 'simple'` (i.e. a flat in-page form), wrapped in a page header
+ * that mirrors the look of `RecordDetailView`.
+ */
+export declare function RecordFormPage({ mode }: RecordFormPageProps): import("react/jsx-runtime").JSX.Element;