@object-ui/app-shell 4.2.1 → 4.4.0

package/dist/views/RecordDetailView.js

@@ -6,44 +6,61 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Uses the DetailView plugin component with auto-generated sections from
  * the object field definitions.
  */
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 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, useObjectLabel } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation, useObjectLabel, usePageAssignment, RecordContextProvider, SchemaRenderer } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
 import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from '../skeletons';
-import { ManagedByBanner } from '../components/ManagedByBanner';
+import { ManagedByBadge } from '../components/ManagedByBadge';
 import { resolveCrudAffordances } from '../utils/crudAffordances';
 import { ActionConfirmDialog } from './ActionConfirmDialog';
 import { ActionParamDialog } from './ActionParamDialog';
+import { resolveActionParams } from '../utils/resolveActionParams';
 import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
+import { useRecordApprovals } from '../hooks/useRecordApprovals';
 import { getRecordDisplayName } from '../utils';
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 /**
  * Audit field names auto-injected by the framework's `applySystemFields`.
- * Surfaced as a dedicated, collapsed "System Information" section on the
- * record detail page so they don't clutter the primary content but remain
- * discoverable. The inline-edit drawer keeps filtering them out via
- * `DEFAULT_SYSTEM_FIELDS` in `@object-ui/plugin-detail/RecordDetailDrawer`.
+ * Filtered out of the auto-generated body sections — they are rendered
+ * separately as a single subtle one-line `<RecordMetaFooter>` (see
+ * `@object-ui/plugin-detail`) so provenance stays discoverable without a
+ * heavy "System Information" panel. The inline-edit drawer also hides
+ * them via `DEFAULT_SYSTEM_FIELDS` in
+ * `@object-ui/plugin-detail/RecordDetailDrawer`.
  */
 const AUDIT_FIELD_NAMES = new Set(['created_at', 'created_by', 'updated_at', 'updated_by']);
+/**
+ * System/tenant fields that the framework auto-injects on every record but
+ * which carry no business value on a detail page. Hidden from the
+ * auto-generated section (when the object has no explicit form sections).
+ * Authors who really want to show these can still list them in
+ * `objectDef.views.form.sections`.
+ */
+const HIDDEN_SYSTEM_FIELD_NAMES = new Set([
+    'organization_id', 'tenant_id', 'is_deleted', 'deleted_at',
+]);
 export function RecordDetailView({ dataSource, objects, onEdit }) {
     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 { objectLabel, viewLabel: _vLabel, sectionLabel, actionLabel, actionConfirm, actionSuccess, fieldLabel, fieldOptionLabel } = useObjectLabel();
     const [isLoading, setIsLoading] = useState(true);
     const [feedItems, setFeedItems] = useState([]);
     const [recordViewers, setRecordViewers] = useState([]);
     const [actionRefreshKey, setActionRefreshKey] = useState(0);
     const [childRelatedData, setChildRelatedData] = useState({});
+    const [historyEntries, setHistoryEntries] = useState(null);
+    const [historyLoading, setHistoryLoading] = useState(false);
     const [recordTitle, setRecordTitle] = useState();
     const objectDef = objects.find((o) => o.name === objectName);
     // Publish record title to the navigation context so the top-bar breadcrumb
@@ -53,6 +70,40 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     // Navigation code passes `record.id || record._id` directly into the URL
     // without adding any prefix, so no stripping is needed.
     const pureRecordId = recordId;
+    // ─── Page Assignment (Salesforce Lightning-style record Pages) ──────
+    // If a PageSchema(pageType='record') is authored for this object, render
+    // it via SchemaRenderer (which dispatches to the registered 'record'
+    // PageRenderer in @object-ui/components). Otherwise we fall through to
+    // the legacy auto-generated DetailView path below.
+    const { page: assignedPage } = usePageAssignment(objectName);
+    const [pageRecord, setPageRecord] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        if (!assignedPage || !pureRecordId || !objectName || !dataSource?.findOne) {
+            setPageRecord(null);
+            return;
+        }
+        // Expand lookup/master_detail fields so the page receives display
+        // names (e.g. account.name) rather than raw foreign-key IDs. The
+        // page subtitle interpolation and record:* renderers depend on this.
+        const expandFields = buildExpandFields(objectDef?.fields);
+        const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
+        const findOnePromise = params
+            ? dataSource.findOne(objectName, pureRecordId, params)
+            : dataSource.findOne(objectName, pureRecordId);
+        findOnePromise
+            .then((rec) => {
+            if (!cancelled)
+                setPageRecord(rec);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPageRecord(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [assignedPage, objectName, pureRecordId, dataSource, objectDef]);
     // ─── Action Provider Handlers ───────────────────────────────────────
     // Confirm dialog state (promise-based)
     const [confirmState, setConfirmState] = useState({ open: false, message: '' });
@@ -65,9 +116,15 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     }, []);
     const paramCollectionHandler = useCallback((params) => {
         return new Promise((resolve) => {
-            setParamState({ open: true, params, resolve });
+            const resolved = resolveActionParams(params, {
+                objectName: objectName || objectDef?.name || '',
+                objects: objects || [],
+                fieldLabel,
+                fieldOptionLabel,
+            });
+            setParamState({ open: true, params: resolved, resolve });
         });
-    }, []);
+    }, [objectName, objectDef, objects, fieldLabel, fieldOptionLabel]);
     const toastHandler = useCallback((message, options) => {
         if (options?.type === 'error')
             toast.error(message);
@@ -187,6 +244,41 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             return { success: false, error: error.message };
         }
     }, [authFetch, pureRecordId, objectName]);
+    // ─── Approvals ─────────────────────────────────────────────────────
+    // Surfaces "Submit for Approval" / "Recall" buttons on the record header
+    // when an active approval process is registered for this object, and a
+    // status badge when a request exists.
+    const approvals = useRecordApprovals(objectName, pureRecordId, user?.id);
+    // Hold latest approvals snapshot in a ref so the action handler
+    // (memoized once inside ActionRunner) always sees fresh state instead of
+    // the stale closure captured at the first render.
+    const approvalsRef = useRef(approvals);
+    approvalsRef.current = approvals;
+    const approvalHandler = useCallback(async (action) => {
+        const target = action.target || action.name;
+        const params = (action.params && !Array.isArray(action.params))
+            ? action.params
+            : {};
+        try {
+            if (target === 'submit_approval') {
+                await approvalsRef.current.submit({
+                    processName: params.processName,
+                    comment: params.comment,
+                });
+            }
+            else if (target === 'recall_approval') {
+                await approvalsRef.current.recall({ comment: params.comment });
+            }
+            else {
+                return { success: false, error: `Unknown approval target: ${target}` };
+            }
+            setActionRefreshKey((k) => k + 1);
+            return { success: true, reload: true };
+        }
+        catch (err) {
+            return { success: false, error: err?.message || String(err) };
+        }
+    }, []);
     // Discover reverse references: other objects with lookup/master_detail fields
     // pointing to the current object (e.g., order_item.order → order).
     const childRelations = useMemo(() => {
@@ -236,6 +328,61 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         });
         return () => { cancelled = true; };
     }, [dataSource, pureRecordId, childRelations]);
+    // ── Audit history fetch ────────────────────────────────────────────
+    // Loads recent sys_audit_log entries for this record so the DetailView can
+    // render a read-only "History" tab. Gated on three preconditions to keep
+    // the network and the UI quiet for objects that opt out of history:
+    //   1) trackHistory must be explicitly true on the object capabilities
+    //      (the framework default is false, so we never speculatively fetch).
+    //   2) sys_audit_log must be present in the registered objects list — if
+    //      the platform-objects package isn't deployed the tab makes no sense.
+    //   3) The object being viewed must not be sys_audit_log itself, to avoid
+    //      a recursive tab on the audit log detail page.
+    // We request only the safe projection (created_at, action, user_id) so the
+    // browser never receives serialized old_value/new_value payloads, which
+    // can contain restricted fields. Field-level redaction in PR2 will harden
+    // this further once a backend-scoped audit endpoint exists.
+    const historyEnabled = useMemo(() => {
+        if (!objectDef)
+            return false;
+        if (objectDef.name === 'sys_audit_log')
+            return false;
+        if (objectDef.enable?.trackHistory !== true)
+            return false;
+        return objects.some((o) => o.name === 'sys_audit_log');
+    }, [objectDef, objects]);
+    useEffect(() => {
+        if (!dataSource || !pureRecordId || !objectDef || !historyEnabled) {
+            setHistoryEntries(null);
+            return;
+        }
+        let cancelled = false;
+        setHistoryLoading(true);
+        dataSource
+            .find('sys_audit_log', {
+            $filter: { record_id: pureRecordId, object_name: objectDef.name },
+            $orderby: { created_at: 'desc' },
+            $top: 50,
+            $select: ['id', 'created_at', 'action', 'user_id'],
+        })
+            .then((res) => {
+            if (cancelled)
+                return;
+            const items = Array.isArray(res) ? res : res?.data || [];
+            setHistoryEntries(items);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            console.warn('[RecordDetailView] Failed to fetch sys_audit_log:', err);
+            setHistoryEntries([]);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setHistoryLoading(false);
+        });
+        return () => { cancelled = true; };
+    }, [dataSource, pureRecordId, objectDef, historyEnabled]);
     // Memoize so the object identity is stable across renders — otherwise
     // any effect that depends on it (e.g. the feed loader below) would
     // re-fire every render and create an infinite request loop.
@@ -547,7 +694,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     // redundant "Details" heading).
                     showBorder: false,
                     fields: Object.keys(objectDef.fields || {})
-                        .filter(key => !AUDIT_FIELD_NAMES.has(key))
+                        .filter(key => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key))
                         .map(key => {
                         const fieldDef = objectDef.fields[key];
                         const refTarget = fieldDef.reference_to || fieldDef.reference;
@@ -563,36 +710,16 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     }),
                 },
             ];
-        // Append a dedicated, collapsed "System Information" section listing
-        // audit fields (created/updated at/by) when the schema declares them
-        // and no author-defined section has already surfaced them. The framework
-        // auto-injects these as `system: true, readonly: true` via
-        // `applySystemFields`; rendering them here gives users visibility into
-        // record provenance without polluting the primary content area.
-        const fieldsAlreadyShown = new Set(sections.flatMap((s) => (s.fields || []).map((f) => f.name)));
-        const auditFieldsToShow = Array.from(AUDIT_FIELD_NAMES).filter(name => objectDef.fields?.[name] && !fieldsAlreadyShown.has(name));
-        if (auditFieldsToShow.length > 0) {
-            sections.push({
-                title: sectionLabel(objectDef.name, 'system_info', 'System Information'),
-                collapsible: true,
-                defaultCollapsed: true,
-                fields: auditFieldsToShow.map(key => {
-                    const fieldDef = objectDef.fields[key];
-                    const refTarget = fieldDef.reference_to || fieldDef.reference;
-                    return {
-                        name: key,
-                        label: fieldDef.label || key,
-                        type: fieldDef.type || 'text',
-                        readonly: true,
-                        ...(refTarget && { reference_to: refTarget }),
-                    };
-                }),
-            });
-        }
+        // Audit fields (created_at/created_by/updated_at/updated_by) are NOT
+        // appended as a section here — they are surfaced by `<RecordMetaFooter>`
+        // (rendered by DetailView) as a single subtle line below the content,
+        // replacing the old card-style "System Information" panel. The inline-edit
+        // drawer continues to hide them via `DEFAULT_SYSTEM_FIELDS` in
+        // `@object-ui/plugin-detail/RecordDetailDrawer`.
         // Filter actions for record_header location and deduplicate by name
         const recordHeaderActions = (() => {
             const seen = new Set();
-            return (objectDef.actions || []).filter((a) => {
+            const base = (objectDef.actions || []).filter((a) => {
                 if (!a.locations?.includes('record_header'))
                     return false;
                 if (!a.name)
@@ -611,6 +738,59 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
                 }),
             }));
+            // Inject approval actions — only when the approvals plugin is
+            // available and an active process exists for this object.
+            if (approvals.available && approvals.processes.length > 0) {
+                if (approvals.canSubmit) {
+                    base.push({
+                        name: 'submit_approval',
+                        type: 'approval',
+                        target: 'submit_approval',
+                        label: t('approvals.submitForApproval', { defaultValue: 'Submit for Approval' }),
+                        icon: 'send',
+                        variant: 'default',
+                        locations: ['record_header'],
+                        refreshAfter: true,
+                        successMessage: t('approvals.submitSuccess', { defaultValue: 'Approval request submitted' }),
+                        ...(approvals.processes.length === 1
+                            ? { params: { processName: approvals.processes[0].name } }
+                            : {
+                                collectParams: [{
+                                        name: 'processName',
+                                        label: t('approvals.process', { defaultValue: 'Process' }),
+                                        type: 'select',
+                                        required: true,
+                                        options: approvals.processes.map((p) => ({
+                                            value: p.name,
+                                            label: p.label || p.name,
+                                        })),
+                                    }, {
+                                        name: 'comment',
+                                        label: t('approvals.comment', { defaultValue: 'Comment (optional)' }),
+                                        type: 'text',
+                                        multiline: true,
+                                    }],
+                            }),
+                    });
+                }
+                if (approvals.canRecall) {
+                    base.push({
+                        name: 'recall_approval',
+                        type: 'approval',
+                        target: 'recall_approval',
+                        label: t('approvals.recall', { defaultValue: 'Recall' }),
+                        icon: 'undo',
+                        variant: 'outline',
+                        locations: ['record_header'],
+                        refreshAfter: true,
+                        confirmText: t('approvals.recallConfirm', {
+                            defaultValue: 'Recall this pending approval request?',
+                        }),
+                        successMessage: t('approvals.recallSuccess', { defaultValue: 'Approval recalled' }),
+                    });
+                }
+            }
+            return base;
         })();
         // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
         const highlightFields = objectDef.views?.detail?.highlightFields ?? [];
@@ -721,6 +901,12 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             sections,
             autoTabs: true,
             autoDiscoverRelated: true,
+            ...(historyEnabled && {
+                history: {
+                    entries: historyEntries ?? [],
+                    loading: historyLoading && historyEntries === null,
+                },
+            }),
             ...(related.length > 0 && { related }),
             ...(highlightFields.length > 0 && { highlightFields }),
             ...(sectionGroups && sectionGroups.length > 0 && { sectionGroups }),
@@ -733,14 +919,17 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             }),
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects]);
+    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects, historyEnabled, historyEntries, historyLoading, approvals.available, approvals.processes, approvals.canSubmit, approvals.canRecall, approvals.pendingRequest, approvals.latestRequest]);
     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(ManagedByBanner, { managedBy: objectDef?.managedBy }), _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 (assignedPage) {
+        return (_jsx(RecordContextProvider, { objectName: objectName, recordId: pureRecordId, data: pageRecord, objectSchema: objectDef, dataSource: dataSource, children: _jsx(ActionProvider, { context: { record: pageRecord || {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler, approval: approvalHandler }, children: _jsx("div", { className: "bg-background p-3 sm:p-4 lg:p-6", children: _jsx(SchemaRenderer, { schema: assignedPage }) }) }) }));
+    }
+    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsxs("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: [_jsx(ManagedByBadge, { managedBy: objectDef?.managedBy }), 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, approval: approvalHandler }, 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

@@ -39,7 +39,7 @@ import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
 import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
 import { SkeletonDetail } from '../skeletons';
-import { ManagedByBanner } from '../components/ManagedByBanner';
+import { ManagedByBadge } from '../components/ManagedByBadge';
 import { useAuth } from '@object-ui/auth';
 import { ExpressionEvaluator } from '@object-ui/core';
 /**
@@ -162,7 +162,7 @@ export function RecordFormPage({ mode }) {
     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 }) }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), t('empty.back')] }) })] }) }));
     }
-    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx(ManagedByBanner, { managedBy: objectDef?.managedBy }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
+    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy, className: "ml-1" })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
                                 type: 'object-form',
                                 formType: 'simple',
                                 objectName: objectDef.name,

package/dist/views/ReportView.js

@@ -38,29 +38,31 @@ export function ReportView({ dataSource }) {
     // State for report runtime data
     const [reportRuntimeData, setReportRuntimeData] = useState([]);
     const [dataLoading, setDataLoading] = useState(false);
+    const getFieldsForObject = useCallback((objName) => {
+        if (!objName || !objects?.length)
+            return undefined;
+        const objDef = objects.find((o) => o.name === objName);
+        if (!objDef?.fields)
+            return undefined;
+        const fields = objDef.fields;
+        if (Array.isArray(fields)) {
+            return fields.map((f) => typeof f === 'string'
+                ? { value: f, label: f, type: 'text' }
+                : { value: f.name, label: f.label || f.name, type: f.type || 'text' });
+        }
+        return Object.entries(fields).map(([name, def]) => ({
+            value: name,
+            label: def.label || name,
+            type: def.type || 'text',
+        }));
+    }, [objects]);
     // Derive available fields from object schema for filter/sort editors
     // Uses live editSchema when available to respond to objectName changes
     const availableFields = useMemo(() => {
         const liveReport = editSchema || reportData;
         const objName = liveReport?.objectName || liveReport?.dataSource?.object || liveReport?.dataSource?.resource;
-        if (objName && objects?.length) {
-            const objDef = objects.find((o) => o.name === objName);
-            if (objDef?.fields) {
-                const fields = objDef.fields;
-                if (Array.isArray(fields)) {
-                    return fields.map((f) => typeof f === 'string'
-                        ? { value: f, label: f, type: 'text' }
-                        : { value: f.name, label: f.label || f.name, type: f.type || 'text' });
-                }
-                return Object.entries(fields).map(([name, def]) => ({
-                    value: name,
-                    label: def.label || name,
-                    type: def.type || 'text',
-                }));
-            }
-        }
-        return FALLBACK_FIELDS;
-    }, [editSchema, reportData, objects]);
+        return getFieldsForObject(objName) ?? FALLBACK_FIELDS;
+    }, [editSchema, reportData, getFieldsForObject]);
     // ---- Save helper --------------------------------------------------------
     const saveSchema = useCallback(async (schema) => {
         try {
@@ -350,5 +352,5 @@ export function ReportView({ dataSource }) {
         allowExport: true,
         loading: dataLoading, // Loading state for data fetching
     };
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "w-full shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: useSpecRenderer ? (_jsx("div", { className: "p-4 sm:p-6", children: _jsx(ReportRenderer, { schema: previewReport, dataSource: dataSource }) })) : (_jsx(ReportViewer, { schema: viewerSchema })) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "w-full shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: useSpecRenderer ? (_jsx("div", { className: "p-4 sm:p-6", children: _jsx(ReportRenderer, { schema: previewReport, dataSource: dataSource }) })) : (_jsx(ReportViewer, { schema: viewerSchema })) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields, getFieldsForObject: getFieldsForObject }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.2.1",
+  "version": "4.4.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.2.1",
-    "@object-ui/collaboration": "4.2.1",
-    "@object-ui/components": "4.2.1",
-    "@object-ui/core": "4.2.1",
-    "@object-ui/data-objectstack": "4.2.1",
-    "@object-ui/fields": "4.2.1",
-    "@object-ui/i18n": "4.2.1",
-    "@object-ui/layout": "4.2.1",
-    "@object-ui/permissions": "4.2.1",
-    "@object-ui/react": "4.2.1",
-    "@object-ui/types": "4.2.1"
+    "@object-ui/auth": "4.4.0",
+    "@object-ui/collaboration": "4.4.0",
+    "@object-ui/components": "4.4.0",
+    "@object-ui/core": "4.4.0",
+    "@object-ui/data-objectstack": "4.4.0",
+    "@object-ui/fields": "4.4.0",
+    "@object-ui/i18n": "4.4.0",
+    "@object-ui/layout": "4.4.0",
+    "@object-ui/permissions": "4.4.0",
+    "@object-ui/react": "4.4.0",
+    "@object-ui/types": "4.4.0"
   },
   "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": "^4.2.1",
-    "@object-ui/plugin-charts": "^4.2.1",
-    "@object-ui/plugin-chatbot": "^4.2.1",
-    "@object-ui/plugin-dashboard": "^4.2.1",
-    "@object-ui/plugin-designer": "^4.2.1",
-    "@object-ui/plugin-detail": "^4.2.1",
-    "@object-ui/plugin-form": "^4.2.1",
-    "@object-ui/plugin-grid": "^4.2.1",
-    "@object-ui/plugin-kanban": "^4.2.1",
-    "@object-ui/plugin-list": "^4.2.1",
-    "@object-ui/plugin-report": "^4.2.1",
-    "@object-ui/plugin-view": "^4.2.1"
+    "@object-ui/plugin-calendar": "^4.4.0",
+    "@object-ui/plugin-charts": "^4.4.0",
+    "@object-ui/plugin-chatbot": "^4.4.0",
+    "@object-ui/plugin-dashboard": "^4.4.0",
+    "@object-ui/plugin-designer": "^4.4.0",
+    "@object-ui/plugin-detail": "^4.4.0",
+    "@object-ui/plugin-form": "^4.4.0",
+    "@object-ui/plugin-grid": "^4.4.0",
+    "@object-ui/plugin-kanban": "^4.4.0",
+    "@object-ui/plugin-list": "^4.4.0",
+    "@object-ui/plugin-report": "^4.4.0",
+    "@object-ui/plugin-view": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",

package/dist/components/ManagedByBanner.d.ts

@@ -1,16 +0,0 @@
-export interface ManagedByBannerProps {
-    /** The `managedBy` flag from the object schema. */
-    managedBy?: string;
-    /** Optional override for the human-readable system name. */
-    label?: string;
-    /** Optional documentation link rendered as "Learn more →". */
-    docHref?: string;
-    /**
-     * Optional human-readable name for the source record / parent workflow
-     * referenced in `system`-bucket banners (e.g. "Opportunity"). When
-     * provided the banner reads "Use the Opportunity record's Submit for
-     * Approval action…" instead of the generic phrasing.
-     */
-    sourceRecordLabel?: string;
-}
-export declare function ManagedByBanner({ managedBy, label, docHref, sourceRecordLabel }: ManagedByBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ManagedByBanner.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ShieldAlert, Info, Lock, Archive } from 'lucide-react';
-const VARIANTS = {
-    config: {
-        icon: Info,
-        tone: 'border-sky-300/60 bg-sky-50 text-sky-900 dark:border-sky-500/40 dark:bg-sky-950/40 dark:text-sky-100',
-        title: 'Administrator configuration',
-        body: () => "These rows define how the platform behaves at runtime — they're authored here, but the runtime data they produce lives in a separate table. Changes take effect once a row is marked Active.",
-    },
-    system: {
-        icon: Lock,
-        tone: 'border-slate-300/60 bg-slate-50 text-slate-900 dark:border-slate-500/40 dark:bg-slate-950/40 dark:text-slate-100',
-        title: 'Managed by the platform',
-        body: (_display, src) => `Rows here are created and updated automatically by the platform engine. To start a new one, use the action button on the ${src ?? 'source record'} (e.g. "Submit for Approval", "Share", "Invite"). The list below is the audit / monitoring surface — actions like Approve, Recall, or Resend live on the row.`,
-    },
-    'append-only': {
-        icon: Archive,
-        tone: 'border-zinc-300/60 bg-zinc-50 text-zinc-900 dark:border-zinc-500/40 dark:bg-zinc-950/40 dark:text-zinc-100',
-        title: 'Read-only historical record',
-        body: () => "This is an immutable audit log. Rows cannot be created, edited, or deleted from the UI — they're written by the platform when events occur. Use Export to download for compliance review.",
-    },
-    'better-auth': {
-        icon: ShieldAlert,
-        tone: 'border-amber-300/60 bg-amber-50 text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-100',
-        title: 'Managed by better-auth',
-        body: (display) => `This object's schema is owned by ${display}. Direct edits here bypass password hashing, session validation, two-factor checks, and audit hooks — and may corrupt account state. Use the dedicated identity workflows instead (Invite User, Reset Password, Revoke Session, Rotate Key, …).`,
-    },
-};
-export function ManagedByBanner({ managedBy, label, docHref, sourceRecordLabel }) {
-    if (!managedBy || managedBy === 'platform')
-        return null;
-    const variant = VARIANTS[managedBy];
-    if (!variant)
-        return null;
-    const display = label ?? managedBy;
-    const Icon = variant.icon;
-    return (_jsxs("div", { role: "note", "data-testid": "managed-by-banner", "data-bucket": managedBy, className: `flex items-start gap-3 border-b px-4 py-2.5 text-sm ${variant.tone}`, children: [_jsx(Icon, { className: "mt-0.5 h-4 w-4 flex-none" }), _jsxs("div", { className: "flex-1", children: [_jsxs("strong", { className: "font-semibold", children: [variant.title, "."] }), ' ', variant.body(display, sourceRecordLabel), docHref && (_jsxs(_Fragment, { children: [' ', _jsx("a", { href: docHref, target: "_blank", rel: "noreferrer", className: "underline underline-offset-2 hover:opacity-80", children: "Learn more \u2192" })] }))] })] }));
-}