@object-ui/app-shell 4.0.7 → 4.0.8

package/dist/views/ObjectView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Console ObjectView
  *
@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - useObjectActions for toolbar create button
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
-import { useMemo, useState, useCallback, useEffect, lazy, Suspense } from 'react';
+import { useMemo, useState, useCallback, useEffect, useRef, lazy, Suspense } from 'react';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
 const ImportWizard = lazy(() => import('@object-ui/plugin-grid').then((m) => ({ default: m.ImportWizard })));
@@ -25,6 +25,7 @@ import { getIcon } from '../utils/getIcon';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
 import { CreateViewDialog } from './CreateViewDialog';
+import { PageHeader } from '../layout/PageHeader';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
@@ -197,13 +198,13 @@ function DrawerDetailContent({ objectDef, recordId, dataSource, onEdit }) {
                         },
                     }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) })] }));
 }
-export function ObjectView({ dataSource, objects, onEdit }) {
+export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey }) {
     const navigate = useNavigate();
     const { objectName, viewId } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();
     const { showDebug } = useMetadataInspector();
     const { t } = useObjectTranslation();
-    const { objectLabel, objectDescription: objectDesc } = useObjectLabel();
+    const { objectLabel, objectDescription: objectDesc, viewLabel, actionLabel, actionConfirm, actionSuccess } = useObjectLabel();
     // Inline view config panel state (Airtable-style right sidebar)
     const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
     const [viewConfigPanelMode, setViewConfigPanelMode] = useState('edit');
@@ -213,6 +214,35 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     const [manageViewsOpen, setManageViewsOpen] = useState(false);
     // Draft state for view config edits — cached locally, saved on demand
     const [viewDraft, setViewDraft] = useState(null);
+    // Per-view debounce timers + latest pending patch payloads. Keyed by
+    // viewId so toggles on different views don't clobber each other. We
+    // merge incoming patches into a single payload so rapid successive
+    // toggles (e.g. resize-drag emitting 60 events/sec) collapse into one
+    // network write.
+    const persistTimers = useRef({});
+    const persistPending = useRef({});
+    const persistViewPatch = useCallback((viewIdLocal, baseViewDef, patch) => {
+        if (!dataSource?.updateViewConfig || !objectName || !viewIdLocal)
+            return;
+        // Merge into pending payload — every key present is the latest
+        // value the user intended.
+        const prev = persistPending.current[viewIdLocal] || {};
+        persistPending.current[viewIdLocal] = { ...prev, ...patch };
+        const existing = persistTimers.current[viewIdLocal];
+        if (existing)
+            clearTimeout(existing);
+        persistTimers.current[viewIdLocal] = setTimeout(() => {
+            const merged = persistPending.current[viewIdLocal] || {};
+            delete persistPending.current[viewIdLocal];
+            delete persistTimers.current[viewIdLocal];
+            Promise.resolve(dataSource.updateViewConfig(objectName, viewIdLocal, {
+                ...baseViewDef,
+                ...merged,
+            })).catch((err) => {
+                console.error('[ObjectView] Failed to persist view config:', err);
+            });
+        }, 300);
+    }, [dataSource, objectName]);
     const handleViewConfigSave = useCallback((draft) => {
         setViewDraft(draft);
         setRefreshKey(k => k + 1);
@@ -259,10 +289,43 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                 const incomingColumns = Array.isArray(config.columns) && config.columns.length > 0
                     ? config.columns
                     : defaultColumns;
+                // Translate NamedListView spec shape (type, label, kanban, chart,
+                // gantt, etc., columns, filter, sort) into the sys_view storage
+                // shape (view_type, label, object_name, *_json columns).
+                // Per spec: front-end follows the protocol, the persistence
+                // boundary owns the mapping to physical columns.
+                const VIEW_TYPE_KEYS = [
+                    'kanban', 'calendar', 'timeline', 'gantt',
+                    'gallery', 'map', 'chart', 'grid',
+                ];
+                const subConfig = {};
+                for (const k of VIEW_TYPE_KEYS) {
+                    if (config[k] && typeof config[k] === 'object') {
+                        Object.assign(subConfig, config[k]);
+                    }
+                }
+                const viewType = config.type || 'grid';
+                const baseLabel = config.label || config.name || 'Untitled View';
+                const slug = baseLabel
+                    .toLowerCase()
+                    .replace(/[^a-z0-9]+/g, '_')
+                    .replace(/^_+|_+$/g, '')
+                    .slice(0, 60) || 'view';
                 const payload = {
-                    objectName,
-                    ...config,
-                    columns: incomingColumns,
+                    name: `${slug}_${Date.now().toString(36)}`,
+                    label: baseLabel,
+                    object_name: objectName,
+                    view_type: viewType,
+                    columns_json: JSON.stringify(incomingColumns),
+                    filters_json: config.filter ? JSON.stringify(config.filter) : null,
+                    sort_json: config.sort ? JSON.stringify(config.sort) : null,
+                    config_json: Object.keys(subConfig).length > 0
+                        ? JSON.stringify(subConfig)
+                        : null,
+                    page_size: config.pageSize ?? 25,
+                    show_search: config.showSearch !== false,
+                    show_filters: config.showFilters !== false,
+                    managed_by: 'user',
                 };
                 const created = await dataSource.create('sys_view', payload);
                 createdId = created?.id ?? created?._id;
@@ -299,6 +362,13 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     }
     // Refresh trigger — bumped after view CRUD or external data mutations.
     const [refreshKey, setRefreshKey] = useState(0);
+    // Propagate externally-triggered refreshes (e.g. global ModalForm submit)
+    // into our internal refreshKey so list/data effects re-run.
+    useEffect(() => {
+        if (externalRefreshKey === undefined || externalRefreshKey === 0)
+            return;
+        setRefreshKey(k => k + 1);
+    }, [externalRefreshKey]);
     // Import wizard open/close state — toolbar entry triggers it.
     const [showImport, setShowImport] = useState(false);
     // ─── User-defined views (sys_view) ──────────────────────────────────
@@ -341,6 +411,70 @@ export function ObjectView({ dataSource, objects, onEdit }) {
         });
         return () => { cancelled = true; };
     }, [dataSource, objectName, refreshKey]);
+    // Persisted per-view config overrides (e.g. density toggle). Saved
+    // separately from `objectDef.listViews` (the embedded definition) via
+    // `dataSource.updateViewConfig` and read back here so toggle preferences
+    // survive a hard reload. Keyed by viewId → partial view config to merge.
+    //
+    // Use the batch listViewOverrides() when available — fires one HTTP
+    // GET per object instead of N (one per defined view), avoiding a flurry
+    // of 404s for objects whose views have never been customized. Falls
+    // back to per-view getView() for adapters that don't support the batch
+    // method.
+    const [viewOverrides, setViewOverrides] = useState({});
+    useEffect(() => {
+        let cancelled = false;
+        if (!dataSource || !objectName) {
+            setViewOverrides({});
+            return;
+        }
+        const definedViews = (objectDef.listViews || objectDef.list_views || {});
+        const ids = Object.keys(definedViews);
+        if (ids.length === 0) {
+            setViewOverrides({});
+            return;
+        }
+        const loadBatch = async () => {
+            if (typeof dataSource.listViewOverrides === 'function') {
+                try {
+                    const all = await dataSource.listViewOverrides(objectName);
+                    if (all && typeof all === 'object') {
+                        const map = {};
+                        for (const id of ids) {
+                            if (all[id])
+                                map[id] = all[id];
+                        }
+                        return map;
+                    }
+                }
+                catch {
+                    // fall through to per-view fetch
+                }
+            }
+            if (typeof dataSource.getView !== 'function')
+                return {};
+            const entries = await Promise.all(ids.map(async (id) => {
+                try {
+                    const v = await dataSource.getView(objectName, id);
+                    return [id, v];
+                }
+                catch {
+                    return [id, null];
+                }
+            }));
+            const map = {};
+            for (const [id, v] of entries) {
+                if (v && typeof v === 'object')
+                    map[id] = v;
+            }
+            return map;
+        };
+        loadBatch().then((map) => {
+            if (!cancelled)
+                setViewOverrides(map);
+        });
+        return () => { cancelled = true; };
+    }, [dataSource, objectName, objectDef.listViews, objectDef.list_views, refreshKey]);
     // Resolve Views from objectDef.listViews (camelCase per @objectstack/spec)
     const views = useMemo(() => {
         // Default column resolution priority:
@@ -374,11 +508,18 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             return [];
         };
         const definedViews = objectDef.listViews || objectDef.list_views || {};
-        const viewList = Object.entries(definedViews).map(([key, value]) => ({
-            id: key,
-            ...value,
-            type: value.type || 'grid'
-        }));
+        const viewList = Object.entries(definedViews).map(([key, value]) => {
+            const override = viewOverrides[key];
+            // Override wins per-key — saved overrides represent user
+            // preferences (density, column widths, etc.) that should
+            // shadow the embedded definition.
+            return {
+                id: key,
+                ...value,
+                ...(override || {}),
+                type: (override?.type) || value.type || 'grid',
+            };
+        });
         if (viewList.length === 0) {
             viewList.push({
                 id: 'all',
@@ -468,7 +609,7 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             return (aSaved.created_at || '').localeCompare(bSaved.created_at || '');
         });
         return viewList;
-    }, [objectDef, savedViews, t]);
+    }, [objectDef, savedViews, viewOverrides, t]);
     // Active View State — merge saved draft if available for this view.
     // Resolution priority: URL viewId → ?view= → user-marked default → first.
     const defaultViewId = useMemo(() => {
@@ -861,6 +1002,24 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     // Memoize to avoid unstable object identity on every render (stale closure prevention)
     const detailNavigation = useMemo(() => activeView?.navigation ?? objectDef.navigation ?? { mode: 'page' }, [activeView?.navigation, objectDef.navigation]);
     const drawerRecordId = searchParams.get('recordId');
+    /**
+     * URL-derived equality filters in the form `?filter[<field>]=<value>`.
+     * Used by related-list "View All" buttons to scope the destination list
+     * to a single parent record. Emitted as ObjectQL triples (`[field, '=', value]`)
+     * which matches the shape consumed by the list view's data fetcher when
+     * merging base filters.
+     */
+    const urlFilters = useMemo(() => {
+        const out = [];
+        searchParams.forEach((value, key) => {
+            const m = /^filter\[(.+)\]$/.exec(key);
+            if (m && m[1] && value !== '') {
+                out.push([m[1], '=', value]);
+            }
+        });
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchParams.toString()]);
     // Memoize onNavigate to prevent stale closure in useNavigationOverlay's handleClick
     const handleNavOverlayNavigate = useCallback((recordId, action) => {
         if (action === 'new_window') {
@@ -940,6 +1099,35 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             // Propagate appearance/view-config properties for live preview
             rowHeight: viewDef.rowHeight ?? listSchema.rowHeight,
             densityMode: viewDef.densityMode ?? listSchema.densityMode,
+            // Hydrate persisted user preferences so they survive reload
+            // (Airtable-style per-view personal config). All four below go
+            // through the same persistViewPatch helper which debounces and
+            // batches concurrent toggles.
+            sort: viewDef.sort ?? listSchema.sort,
+            filter: (() => {
+                const base = viewDef.filter ?? listSchema.filter;
+                if (!urlFilters.length)
+                    return base;
+                const baseArr = Array.isArray(base) ? base : [];
+                return [...baseArr, ...urlFilters];
+            })(),
+            hiddenFields: viewDef.hiddenFields ?? listSchema.hiddenFields,
+            columnState: viewDef.columnState ?? listSchema.columnState,
+            onDensityChange: (mode) => {
+                persistViewPatch(viewDef.id, viewDef, { densityMode: mode });
+            },
+            onSortChange: (sort) => {
+                persistViewPatch(viewDef.id, viewDef, { sort });
+            },
+            onFilterChange: (filter) => {
+                persistViewPatch(viewDef.id, viewDef, { filter });
+            },
+            onHiddenFieldsChange: (hidden) => {
+                persistViewPatch(viewDef.id, viewDef, { hiddenFields: hidden });
+            },
+            onColumnStateChange: (state) => {
+                persistViewPatch(viewDef.id, viewDef, { columnState: state });
+            },
             inlineEdit: viewDef.inlineEdit ?? viewDef.editRecordsInline ?? listSchema.inlineEdit,
             appearance: viewDef.showDescription != null
                 ? { showDescription: viewDef.showDescription }
@@ -973,7 +1161,6 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             searchableFields: viewDef.searchableFields ?? listSchema.searchableFields,
             filterableFields: viewDef.filterableFields ?? listSchema.filterableFields,
             resizable: viewDef.resizable ?? listSchema.resizable,
-            hiddenFields: viewDef.hiddenFields ?? listSchema.hiddenFields,
             rowActions: viewDef.rowActions ?? listSchema.rowActions,
             bulkActions: viewDef.bulkActions ?? listSchema.bulkActions,
             sharing: viewDef.sharing ?? listSchema.sharing,
@@ -988,7 +1175,13 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             aria: viewDef.aria ?? listSchema.aria,
             tabs: listSchema.tabs,
             // Propagate filter/sort as default filters/sort for data flow
-            ...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
+            ...((() => {
+                const combined = [
+                    ...(Array.isArray(viewDef.filter) ? viewDef.filter : []),
+                    ...urlFilters,
+                ];
+                return combined.length ? { filters: combined } : {};
+            })()),
             ...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
             options: {
                 kanban: {
@@ -1054,10 +1247,33 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                     // and triggers onRefresh on success.
                     actions.deleteRecord(String(record.id));
                 }
+            }, onBulkDelete: (records) => {
+                const valid = records.filter((r) => r?.id != null);
+                if (valid.length === 0)
+                    return;
+                // Route through actions.execute so the shared AlertDialog
+                // confirms once for the whole batch and the existing
+                // delete handler (now batch-aware) handles refresh + toast.
+                actions.execute({
+                    type: 'delete',
+                    confirmText: t('console.objectView.bulkDeleteConfirm', {
+                        count: valid.length,
+                        defaultValue: `Delete ${valid.length} selected records? This cannot be undone.`,
+                    }),
+                    params: { records: valid },
+                });
             }, onRowClick: (record) => {
                 navOverlay.handleClick(record);
+            }, onSortChange: (sort) => {
+                persistViewPatch(viewDef.id, viewDef, { sort });
+            }, onFilterChange: (filter) => {
+                persistViewPatch(viewDef.id, viewDef, { filter });
+            }, onHiddenFieldsChange: (hidden) => {
+                persistViewPatch(viewDef.id, viewDef, { hiddenFields: hidden });
+            }, onColumnStateChange: (state) => {
+                persistViewPatch(viewDef.id, viewDef, { columnState: state });
             }, dataSource: ds }, key));
-    }, [activeView, objectDef, objectName, refreshKey, navOverlay, actions]);
+    }, [activeView, objectDef, objectName, refreshKey, navOverlay, actions, persistViewPatch, urlFilters]);
     // Memoize the merged views array so PluginObjectView doesn't get a new
     // reference on every render (which would trigger unnecessary data refetches).
     const mergedViews = useMemo(() => views.map((v) => v.id === activeViewId && viewDraft && viewDraft.id === v.id
@@ -1094,13 +1310,22 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             }
         },
     }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort, navigate, viewId, isAdmin]);
-    return (_jsxs(ActionProvider, { context: { objectName: objectDef.name, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsxs("div", { className: "flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10", children: [_jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [_jsx("div", { className: "bg-primary/10 p-1.5 sm:p-2 rounded-md shrink-0", children: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4 text-primary" }); })() }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-base sm:text-lg font-semibold tracking-tight text-foreground truncate", children: objectLabel(objectDef) }), objectDef.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate hidden sm:block max-w-md", children: objectDesc(objectDef) }))] })] }), _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
-                                            type: 'action:bar',
-                                            location: 'list_toolbar',
-                                            actions: objectDef.actions,
-                                            size: 'sm',
-                                            variant: 'outline',
-                                        } }))] })] }), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
+    return (_jsxs(ActionProvider, { context: { objectName: objectDef.name, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsx(PageHeader, { title: objectLabel(objectDef), description: objectDef.description ? objectDesc(objectDef) : undefined, icon: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4" }); })(), actions: _jsxs(_Fragment, { children: [can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
+                                        type: 'action:bar',
+                                        location: 'list_toolbar',
+                                        actions: (objectDef.actions || []).map((a) => ({
+                                            ...a,
+                                            label: actionLabel(objectDef.name, a.name, a.label || a.name),
+                                            ...(a.confirmText !== undefined && {
+                                                confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
+                                            }),
+                                            ...(a.successMessage !== undefined && {
+                                                successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
+                                            }),
+                                        })),
+                                        size: 'sm',
+                                        variant: 'outline',
+                                    } }))] }) }), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
                                 name,
                                 label: def?.label || name,
                                 type: def?.type || 'text',
@@ -1124,7 +1349,7 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                             const isSystem = !saved;
                             return {
                                 id: view.id,
-                                label: view.label,
+                                label: viewLabel(objectDef.name, view.name || view.id, view.label || view.name || view.id),
                                 type: view.type,
                                 hasActiveFilters: Array.isArray(view.filter) && view.filter.length > 0,
                                 hasActiveSort: Array.isArray(view.sort) && view.sort.length > 0,
@@ -1145,14 +1370,14 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                                         showVisibilityGroups: true,
                                     }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }));
                     })(), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
-                                    handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-auto p-3 sm:p-4", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                                    navOverlay.handleClick(record);
-                                                }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }), typeof recordCount === 'number' && (_jsx("div", { "data-testid": "record-count-footer", className: "border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
+                                    handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden p-3 sm:p-4", children: _jsx("div", { className: "h-full overflow-auto rounded-lg border bg-card shadow-xs", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
+                                                        navOverlay.handleClick(record);
+                                                    }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }), typeof recordCount === 'number' && (_jsx("div", { "data-testid": "record-count-footer", className: "border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
                                     const recordId = (record.id || record._id);
                                     return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
-                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-auto p-3 sm:p-4", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                            navOverlay.handleClick(record);
-                                        }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
+                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-hidden p-3 sm:p-4", children: _jsx("div", { className: "h-full overflow-auto rounded-lg border bg-card shadow-xs", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
+                                                navOverlay.handleClick(record);
+                                            }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
                                     { title: 'View Configuration', data: activeView },
                                     { title: 'Object Definition', data: objectDef },
                                 ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) }), _jsx(CreateViewDialog, { open: showCreateViewDialog && isAdmin, onOpenChange: setShowCreateViewDialog, existingLabels: views.map((v) => v.label).filter(Boolean), objectDef: objectDef, onCreate: (cfg) => handleViewCreate(cfg) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)

package/dist/views/RecordDetailView.js

@@ -12,7 +12,7 @@ import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PresenceAvatars } from '@object-ui/collaboration';
 import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
-import { ActionProvider, useObjectTranslation } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation, useObjectLabel } from '@object-ui/react';
 import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -23,11 +23,12 @@ 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();
+    const { appName, objectName, recordId } = useParams();
     const { showDebug } = useMetadataInspector();
     const { user } = useAuth();
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
+    const { objectLabel, viewLabel: _vLabel, sectionLabel, actionLabel, actionConfirm, actionSuccess } = useObjectLabel();
     const [isLoading, setIsLoading] = useState(true);
     const [feedItems, setFeedItems] = useState([]);
     const [recordViewers, setRecordViewers] = useState([]);
@@ -368,7 +369,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         const formSections = objectDef.views?.form?.sections;
         const sections = formSections && formSections.length > 0
             ? formSections.map((sec) => ({
-                title: sec.title,
+                title: sec.name ? sectionLabel(objectDef.name, sec.name, sec.title || sec.name) : sec.title,
                 collapsible: sec.collapsible,
                 defaultCollapsed: sec.defaultCollapsed,
                 fields: (sec.fields || []).map((f) => {
@@ -423,7 +424,16 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     return false;
                 seen.add(a.name);
                 return true;
-            });
+            }).map((a) => ({
+                ...a,
+                label: actionLabel(objectDef.name, a.name, a.label || a.name),
+                ...(a.confirmText !== undefined && {
+                    confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
+                }),
+                ...(a.successMessage !== undefined && {
+                    successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
+                }),
+            }));
         })();
         // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
         const highlightFields = objectDef.views?.detail?.highlightFields ?? [];
@@ -432,16 +442,88 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         // Build related entries from reverse-reference child objects.
         // `referenceField` is the FK field on the child pointing back to this
         // record — passed so the related-list renderer can hide the redundant
-        // parent-ID column.
+        // parent-ID column. Each entry carries action handlers that the renderer
+        // surfaces as header `+ New` / `View All` buttons and per-row Edit /
+        // Delete controls.
+        const baseAppUrl = appName ? `/apps/${appName}` : '';
         const related = childRelations.map(({ childObject, childLabel, referenceField }) => {
             const childObjectDef = objects.find((o) => o.name === childObject);
+            const parentId = pureRecordId || '';
+            const localizedTitle = childObjectDef
+                ? objectLabel({ name: childObjectDef.name, label: childObjectDef.label || childLabel })
+                : childLabel;
+            const buildNewUrl = () => {
+                const qs = new URLSearchParams({ [referenceField]: parentId }).toString();
+                return `${baseAppUrl}/${childObject}/new${qs ? `?${qs}` : ''}`;
+            };
+            const buildListUrl = () => {
+                const qs = new URLSearchParams({
+                    [`filter[${referenceField}]`]: parentId,
+                }).toString();
+                return `${baseAppUrl}/${childObject}${qs ? `?${qs}` : ''}`;
+            };
+            const buildEditUrl = (row) => {
+                const rid = row?.id || row?._id;
+                if (!rid)
+                    return null;
+                return `${baseAppUrl}/${childObject}/record/${encodeURIComponent(String(rid))}/edit`;
+            };
+            const buildRecordUrl = (row) => {
+                const rid = row?.id || row?._id;
+                if (!rid)
+                    return null;
+                return `${baseAppUrl}/${childObject}/record/${encodeURIComponent(String(rid))}`;
+            };
+            const onNew = baseAppUrl
+                ? () => navigate(buildNewUrl())
+                : undefined;
+            const onViewAll = baseAppUrl
+                ? () => navigate(buildListUrl())
+                : undefined;
+            const onRowClick = baseAppUrl
+                ? (row) => {
+                    const url = buildRecordUrl(row);
+                    if (url)
+                        navigate(url);
+                }
+                : undefined;
+            const onRowEdit = baseAppUrl
+                ? (row) => {
+                    const url = buildEditUrl(row);
+                    if (url)
+                        navigate(url);
+                }
+                : undefined;
+            const onRowDelete = dataSource && parentId
+                ? async (row) => {
+                    const rid = row?.id || row?._id;
+                    if (!rid)
+                        return;
+                    try {
+                        await dataSource.delete(childObject, rid);
+                        toast.success(t('detail.deleteSuccess', { defaultValue: 'Deleted' }));
+                        setChildRelatedData((prev) => ({
+                            ...prev,
+                            [childObject]: (prev[childObject] || []).filter((r) => (r.id || r._id) !== rid),
+                        }));
+                    }
+                    catch (err) {
+                        toast.error(err?.message || t('detail.deleteError', { defaultValue: 'Delete failed' }));
+                    }
+                }
+                : undefined;
             return {
-                title: childLabel,
+                title: localizedTitle,
                 type: 'table',
                 api: childObject,
                 data: childRelatedData[childObject] || [],
                 referenceField,
                 icon: childObjectDef?.icon,
+                onNew,
+                onViewAll,
+                onRowClick,
+                onRowEdit,
+                onRowDelete,
             };
         });
         return {
@@ -468,14 +550,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             }),
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey]);
+    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects]);
     if (isLoading) {
         return _jsx(SkeletonDetail, {});
     }
     if (!objectDef) {
         return (_jsx("div", { className: "flex h-full items-center justify-center p-4", 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(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) })] }) }));
     }
-    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: t('recordDetail.viewersTooltip'), 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) => {
+    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: t('recordDetail.viewersTooltip'), 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: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')
                                         return;
                                     // Resolve the same way DetailView's header does, so the

package/dist/views/RecordFormPage.js

@@ -29,7 +29,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module views/RecordFormPage
  */
 import { useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { ArrowLeft, Database } from 'lucide-react';
@@ -52,11 +52,29 @@ import { ExpressionEvaluator } from '@object-ui/core';
 export function RecordFormPage({ mode }) {
     const { appName, objectName, recordId } = useParams();
     const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
     const dataSource = useAdapter();
     const { objects, loading: metadataLoading } = useMetadata();
     const { t } = useObjectTranslation();
     const { objectLabel } = useObjectLabel();
     const { user } = useAuth();
+    /**
+     * Query-string prefills for create mode. Used by related-list "+ New"
+     * buttons that pass the parent record id as a `<referenceField>=<id>`
+     * pair so the new child record is auto-linked back to the parent.
+     * Stable identity: only changes when the actual search string changes.
+     */
+    const prefillValues = useMemo(() => {
+        if (mode !== 'create')
+            return undefined;
+        const entries = [];
+        for (const [k, v] of searchParams.entries()) {
+            if (k && v)
+                entries.push([k, v]);
+        }
+        return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, searchParams.toString()]);
     const objectDef = useMemo(() => objects.find((o) => o.name === objectName), [objects, objectName]);
     const baseUrl = `/apps/${appName}`;
     const objectListUrl = `${baseUrl}/${objectName}`;
@@ -149,6 +167,7 @@ export function RecordFormPage({ mode }) {
                                 objectName: objectDef.name,
                                 mode,
                                 recordId: mode === 'edit' ? recordId : undefined,
+                                ...(prefillValues && { initialValues: prefillValues }),
                                 title: pageTitle,
                                 description: mode === 'create'
                                     ? t('form.createDescription', {