@object-ui/app-shell 5.0.2 → 5.2.1

package/dist/views/RecordDetailView.js

@@ -7,15 +7,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the object field definitions.
  */
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { DetailView, RecordChatterPanel, buildDefaultPageSchema } from '@object-ui/plugin-detail';
+import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
+import { DetailView, RecordChatterPanel, buildDefaultPageSchema, extractMentions } 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, usePageAssignment, RecordContextProvider, SchemaRenderer, DiscussionContextProvider, HighlightFieldsProvider } from '@object-ui/react';
 import { buildExpandFields } from '@object-ui/core';
 import { toast } from 'sonner';
-import { Database, Users } from 'lucide-react';
+import { useRecordPresence, PresenceAvatars } from '@object-ui/collaboration';
+import { Database, ChevronLeft } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from '../skeletons';
 import { ManagedByBadge } from '../components/ManagedByBadge';
@@ -50,6 +50,24 @@ const AUDIT_FIELD_NAMES = new Set(['created_at', 'created_by', 'updated_at', 'up
 const HIDDEN_SYSTEM_FIELD_NAMES = new Set([
     'organization_id', 'tenant_id', 'is_deleted', 'deleted_at',
 ]);
+/**
+ * Field-type signals that suggest a "secondary / system / metadata"
+ * placement when auto-grouping fields. These move out of the main
+ * section and into a collapsible "More details" section by default,
+ * keeping the primary section dense with business-critical fields.
+ *
+ * The heuristic is conservative: when no objectDef metadata is available
+ * we surface most fields in the main section; long-form text and
+ * audit-by-name fields drop down.
+ */
+const SECONDARY_FIELD_NAME_HINTS = ['description', 'notes', 'note', 'remark', 'remarks', 'comments'];
+const SECONDARY_FIELD_TYPES = new Set(['textarea', 'markdown', 'html', 'rich-text', 'json', 'code']);
+function isSecondaryField(fieldName, fieldDef) {
+    if (SECONDARY_FIELD_TYPES.has(fieldDef?.type))
+        return true;
+    const lc = fieldName.toLowerCase();
+    return SECONDARY_FIELD_NAME_HINTS.some((hint) => lc === hint || lc.endsWith(`_${hint}`));
+}
 export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverride, recordIdOverride, embedded }) {
     const params = useParams();
     const appName = params.appName;
@@ -58,13 +76,15 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     const { showDebug } = useMetadataInspector();
     const { user } = useAuth();
     const navigate = useNavigate();
+    const location = useLocation();
+    const originFrom = location.state?.from;
     const { t } = useObjectTranslation();
     const { objectLabel, viewLabel: _vLabel, sectionLabel, actionLabel, actionConfirm, actionSuccess, fieldLabel, fieldOptionLabel } = useObjectLabel();
     const { isFavorite, toggleFavorite, refreshLabel: refreshFavoriteLabel } = useFavorites();
     const { addRecentItem } = useRecentItems();
     const [isLoading, setIsLoading] = useState(true);
     const [feedItems, setFeedItems] = useState([]);
-    const [recordViewers, setRecordViewers] = useState([]);
+    const [mentionSuggestions, setMentionSuggestions] = useState([]);
     const [actionRefreshKey, setActionRefreshKey] = useState(0);
     const [childRelatedData, setChildRelatedData] = useState({});
     const [historyEntries, setHistoryEntries] = useState(null);
@@ -79,6 +99,13 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     // Navigation code passes `record.id || record._id` directly into the URL
     // without adding any prefix, so no stripping is needed.
     const pureRecordId = recordId;
+    // Record-scoped presence ("who else is viewing this record"). The default
+    // PresenceProvider source is a no-op, so this resolves to `[]` until a
+    // realtime transport (WebSocket-backed source) is wired in by the host
+    // app — see `@object-ui/collaboration`'s `<PresenceProvider>`. The
+    // PresenceAvatars row is hidden when the array is empty, so the
+    // affordance is invisible until the transport lights up.
+    const recordPresence = useRecordPresence(objectName, pureRecordId);
     const favoriteRecord = useMemo(() => {
         if (!objectName || !pureRecordId)
             return null;
@@ -140,10 +167,16 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     }, [renderViaSchemaFlag, assignedPage, assignedSlots, objectDef]);
     const effectivePage = assignedPage || synthesizedPage;
     const [pageRecord, setPageRecord] = useState(null);
+    // 'idle' | 'loading' | 'loaded' | 'missing' — distinguishes "haven't
+    // tried yet" from "tried and the record really doesn't exist". The
+    // not-found short-circuit below uses `missing` to render a clean empty
+    // state instead of a half-broken page chrome (rail + discussion).
+    const [pageRecordStatus, setPageRecordStatus] = useState('idle');
     useEffect(() => {
         let cancelled = false;
         if (!effectivePage || !pureRecordId || !objectName || !dataSource?.findOne) {
             setPageRecord(null);
+            setPageRecordStatus('idle');
             return;
         }
         // Expand lookup/master_detail fields so the page receives display
@@ -152,17 +185,28 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         const expandFields = buildExpandFields(objectDef?.fields);
         const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
         const loadRecord = () => {
+            setPageRecordStatus('loading');
             const findOnePromise = params
                 ? dataSource.findOne(objectName, pureRecordId, params)
                 : dataSource.findOne(objectName, pureRecordId);
             findOnePromise
                 .then((rec) => {
-                if (!cancelled)
+                if (cancelled)
+                    return;
+                if (rec && typeof rec === 'object') {
                     setPageRecord(rec);
+                    setPageRecordStatus('loaded');
+                }
+                else {
+                    setPageRecord(null);
+                    setPageRecordStatus('missing');
+                }
             })
                 .catch(() => {
-                if (!cancelled)
-                    setPageRecord(null);
+                if (cancelled)
+                    return;
+                setPageRecord(null);
+                setPageRecordStatus('missing');
             });
         };
         loadRecord();
@@ -553,20 +597,74 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         });
         return () => { cancelled = true; };
     }, [dataSource, pureRecordId, objectDef, historyEnabled]);
+    // Fetch a directory of active users once per dataSource mount and expose
+    // them as @-mention suggestions to the DiscussionContext. Capped at 50 to
+    // keep the dropdown tight; hosts can swap in a paginated/server-search
+    // implementation later by mounting their own DiscussionContextProvider.
+    useEffect(() => {
+        if (!dataSource)
+            return;
+        let cancelled = false;
+        // Always seed with the current user so the @-mention dropdown shows at
+        // least one entry even when the backend has no sys_user directory.
+        // Hosts wanting a richer roster should provide it via dataSource.
+        const selfSuggestion = user
+            ? [{
+                    id: String(user.id),
+                    label: user.name || user.email || String(user.id),
+                    avatarUrl: user.image || undefined,
+                }]
+            : [];
+        (async () => {
+            try {
+                const res = await dataSource.find('sys_user', {
+                    $top: 50,
+                    $select: ['id', 'name', 'email', 'image'],
+                });
+                if (cancelled)
+                    return;
+                const rows = Array.isArray(res) ? res : res?.data || [];
+                const fetched = rows
+                    .map((u) => ({
+                    id: String(u.id),
+                    label: u.name || u.email || String(u.id),
+                    avatarUrl: u.image || undefined,
+                }))
+                    .filter((s) => s.label);
+                // Merge: current user first, then directory (de-duped by id).
+                const seen = new Set(selfSuggestion.map((s) => s.id));
+                const merged = [
+                    ...selfSuggestion,
+                    ...fetched.filter((s) => !seen.has(s.id)),
+                ];
+                setMentionSuggestions(merged.length > 0 ? merged : selfSuggestion);
+            }
+            catch {
+                if (cancelled)
+                    return;
+                // Fall back to just the current user so mentions still work.
+                setMentionSuggestions(selfSuggestion);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [dataSource, user?.id, user?.name, user?.email]);
     // 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.
     const currentUser = useMemo(() => (user ? { id: user.id, name: user.name, avatar: user.image } : FALLBACK_USER), [user?.id, user?.name, user?.image]);
-    // Fetch presence and comments from API
+    // Fetch comments from API.
+    //
+    // NOTE: Record-level presence ("who else is viewing this record") used to
+    // be probed here by `dataSource.find('sys_presence', …)`, but that was an
+    // architectural mistake: presence is real-time ephemeral state and does
+    // not belong in a regular REST collection. The probe has been removed
+    // pending a proper transport-level design (WebSocket-backed
+    // `<PresenceProvider>` in @object-ui/collaboration). See ROADMAP for the
+    // realtime / OCC plan.
     useEffect(() => {
         if (!dataSource || !objectName || !pureRecordId)
             return;
         const threadId = `${objectName}:${pureRecordId}`;
-        // Fetch record viewers
-        dataSource.find('sys_presence', { $filter: { recordId: pureRecordId } })
-            .then((res) => { if (res.data?.length)
-            setRecordViewers(res.data); })
-            .catch(() => { });
         // M10.10: Fetch persisted comments from sys_comment. Field names
         // are snake_case to match the platform-objects schema
         // (`packages/platform-objects/src/audit/sys-comment.object.ts`):
@@ -705,6 +803,15 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         })
             .catch(() => { });
     }, [dataSource, objectName, pureRecordId, currentUser]);
+    /**
+     * Note: comment-mention → notification fan-out lives on the server
+     * (`@objectstack/plugin-audit` registers a `sys_comment` afterInsert
+     * hook that parses the `mentions` JSON and writes one `sys_notification`
+     * row per recipient). The client's only job is to ensure
+     * `sys_comment.mentions` carries the real id list (see handleAddComment
+     * /handleAddReply below). Deployments without plugin-audit will not
+     * deliver bell notifications, which is the expected degradation.
+     */
     const handleAddComment = useCallback(async (text) => {
         const newItem = {
             id: crypto.randomUUID(),
@@ -718,6 +825,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         // Persist to backend (M10.10: snake_case fields per sys_comment schema)
         if (dataSource) {
             const threadId = `${objectName}:${pureRecordId}`;
+            const mentionIds = extractMentions(text, mentionSuggestions);
             dataSource.create('sys_comment', {
                 id: newItem.id,
                 thread_id: threadId,
@@ -725,11 +833,11 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                 author_name: currentUser.name,
                 author_avatar_url: 'avatar' in currentUser ? currentUser.avatar : undefined,
                 body: text,
-                mentions: '[]',
+                mentions: JSON.stringify(mentionIds),
                 created_at: newItem.createdAt,
             }).catch(() => { });
         }
-    }, [currentUser, dataSource, objectName, pureRecordId]);
+    }, [currentUser, dataSource, objectName, pureRecordId, mentionSuggestions]);
     const handleAddReply = useCallback(async (parentId, text) => {
         const newItem = {
             id: crypto.randomUUID(),
@@ -749,6 +857,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         });
         if (dataSource) {
             const threadId = `${objectName}:${pureRecordId}`;
+            const mentionIds = extractMentions(text, mentionSuggestions);
             dataSource.create('sys_comment', {
                 id: newItem.id,
                 thread_id: threadId,
@@ -756,12 +865,12 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                 author_name: currentUser.name,
                 author_avatar_url: 'avatar' in currentUser ? currentUser.avatar : undefined,
                 body: text,
-                mentions: '[]',
+                mentions: JSON.stringify(mentionIds),
                 created_at: newItem.createdAt,
                 parent_id: parentId,
             }).catch(() => { });
         }
-    }, [currentUser, dataSource, objectName, pureRecordId]);
+    }, [currentUser, dataSource, objectName, pureRecordId, mentionSuggestions]);
     const handleToggleReaction = useCallback((itemId, emoji) => {
         setFeedItems(prev => prev.map(item => {
             if (item.id !== itemId)
@@ -867,29 +976,55 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                     };
                 }),
             }))
-            : [
-                {
-                    // Intentionally untitled: when there's only one auto-generated
-                    // section, DetailSection flattens it (no Card chrome, no
-                    // redundant "Details" heading).
-                    showBorder: false,
-                    fields: Object.keys(objectDef.fields || {})
-                        .filter(key => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key) && !objectDef.fields[key]?.hidden)
-                        .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',
-                            ...(fieldDef.options && { options: fieldDef.options }),
-                            ...(refTarget && { reference_to: refTarget }),
-                            ...(fieldDef.reference_field && { reference_field: fieldDef.reference_field }),
-                            ...(fieldDef.currency && { currency: fieldDef.currency }),
-                        };
-                    }),
-                },
-            ];
+            : (() => {
+                // Auto-grouping (platform B): when no form sections are authored,
+                // split fields into a primary section and a collapsible
+                // "More details" section so long-form/secondary fields don't
+                // dilute the main grid. The primary section stays untitled so
+                // DetailSection still flattens its chrome when alone.
+                const allFields = Object.keys(objectDef.fields || {})
+                    .filter((key) => !AUDIT_FIELD_NAMES.has(key) && !HIDDEN_SYSTEM_FIELD_NAMES.has(key) && !objectDef.fields[key]?.hidden);
+                const toField = (key) => {
+                    const fieldDef = objectDef.fields[key];
+                    const refTarget = fieldDef.reference_to || fieldDef.reference;
+                    return {
+                        name: key,
+                        label: fieldDef.label || key,
+                        type: fieldDef.type || 'text',
+                        ...(fieldDef.options && { options: fieldDef.options }),
+                        ...(refTarget && { reference_to: refTarget }),
+                        ...(fieldDef.reference_field && { reference_field: fieldDef.reference_field }),
+                        ...(fieldDef.currency && { currency: fieldDef.currency }),
+                    };
+                };
+                const primaryKeys = allFields.filter((k) => !isSecondaryField(k, objectDef.fields[k]));
+                const secondaryKeys = allFields.filter((k) => isSecondaryField(k, objectDef.fields[k]));
+                // Below ~6 primary fields the second section often looks awkward
+                // — keep the legacy single-untitled-section behaviour. Also
+                // honour the "no secondary fields" case the same way.
+                if (secondaryKeys.length === 0 || primaryKeys.length === 0) {
+                    return [
+                        {
+                            showBorder: false,
+                            fields: allFields.map(toField),
+                        },
+                    ];
+                }
+                return [
+                    {
+                        showBorder: false,
+                        fields: primaryKeys.map(toField),
+                    },
+                    {
+                        name: 'details',
+                        title: sectionLabel(objectDef.name, 'details', t('detail.sectionMoreDetails', 'More details')),
+                        collapsible: true,
+                        defaultCollapsed: false,
+                        showBorder: true,
+                        fields: secondaryKeys.map(toField),
+                    },
+                ];
+            })();
         // 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,
@@ -1106,6 +1241,16 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     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 }) })] }) }));
     }
+    // Record-not-found short-circuit. Previously we rendered the page chrome
+    // (rail, discussion, breadcrumb with the truncated raw id) even when the
+    // record didn't exist, which made invalid links look like a partially-
+    // broken page instead of a clean 404. Only triggers on the synth/page
+    // path; the legacy DetailView path handles missing records itself.
+    if (effectivePage && pageRecordStatus === 'missing') {
+        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.recordNotFound', { defaultValue: 'Record not found' }) }), _jsx(EmptyDescription, { children: t('empty.recordNotFoundDescription', {
+                            defaultValue: 'The record you are looking for does not exist or may have been deleted.',
+                        }) })] }) }));
+    }
     if (effectivePage) {
         const disableDiscussion = effectivePage?.disableDiscussion === true;
         // When the page schema embeds an explicit `record:discussion` /
@@ -1143,6 +1288,24 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
             const affordances = resolveCrudAffordances(objectDef);
             const items = [];
             if (affordances.edit) {
+                // Inline-edit toggle. Surfaced ABOVE `sys_edit` so the
+                // overflow menu lists field-level editing first — Lightning /
+                // HubSpot put inline edit ("Edit details") above the modal /
+                // form-page edit because in-page editing is the higher-frequency
+                // interaction. Communicates with DetailView via a window event
+                // so we don't need to lift inline-edit state out of the plugin.
+                items.push({
+                    name: 'sys_inline_edit',
+                    label: t('detail.editFieldsInline', { defaultValue: 'Edit fields' }),
+                    type: 'script',
+                    locations: ['record_header'],
+                    variant: 'outline',
+                    onClick: () => {
+                        window.dispatchEvent(new CustomEvent('objectui:record:inline-edit-toggle', {
+                            detail: { recordId: pureRecordId, objectName },
+                        }));
+                    },
+                });
                 items.push({
                     name: 'sys_edit',
                     label: t('detail.edit', { defaultValue: 'Edit' }),
@@ -1191,7 +1354,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                     label: t('detail.delete', { defaultValue: 'Delete' }),
                     type: 'script',
                     locations: ['record_header'],
-                    variant: 'outline',
+                    variant: 'destructive',
                     onClick: async () => {
                         const msg = t('detail.deleteConfirmation', {
                             defaultValue: 'Are you sure you want to delete this record?',
@@ -1250,9 +1413,14 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                 headerActions: synthHeaderActions,
                 related: synthRelated,
                 history: synthHistory,
+                // Per-object opt-outs read from `objectDef.detail.*`. Lets
+                // catalog/atomic objects (product, task, ...) keep a focused
+                // single-column layout instead of inheriting the rail.
+                hideReferenceRail: objectDef?.detail?.hideReferenceRail === true || undefined,
+                hideRelatedTab: objectDef?.detail?.hideRelatedTab === true || undefined,
                 ...(assignedSlots ? { slots: assignedSlots } : {}),
             });
-        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 })] }))] }), _jsx(RecordContextProvider, { objectName: objectName, recordId: pureRecordId, data: pageRecord, objectSchema: objectDef, dataSource: dataSource, embedded: embedded, headerSystemActions: synthSystemActions, isFavorite: isRecordFavorite, onToggleFavorite: favoriteRecord ? handleToggleRecordFavorite : undefined, children: _jsx(HighlightFieldsProvider, { children: _jsx(DiscussionContextProvider, { items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction, 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: _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsxs("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: [_jsx(SchemaRenderer, { schema: renderedPage }), showAutoDiscussion && (_jsx("div", { className: "mt-6", children: _jsx(RecordChatterPanel, { config: {
+        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: [recordPresence.length > 0 && (_jsx(PresenceAvatars, { users: recordPresence, size: "sm", maxVisible: 3, showStatus: true })), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy })] }), _jsx(RecordContextProvider, { objectName: objectName, recordId: pureRecordId, data: pageRecord, objectSchema: objectDef, dataSource: dataSource, embedded: embedded, headerSystemActions: synthSystemActions, isFavorite: isRecordFavorite, onToggleFavorite: favoriteRecord ? handleToggleRecordFavorite : undefined, children: _jsx(HighlightFieldsProvider, { children: _jsx(DiscussionContextProvider, { items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction, mentionSuggestions: mentionSuggestions, 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: _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsxs("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: [originFrom?.pathname && originFrom?.label && (_jsxs(Link, { to: originFrom.pathname, className: "inline-flex items-center gap-1 mb-3 text-sm text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx("span", { children: originFrom.label })] })), _jsx(SchemaRenderer, { schema: renderedPage }), showAutoDiscussion && (_jsx("div", { className: "mt-6", children: _jsx(RecordChatterPanel, { config: {
                                                             position: 'bottom',
                                                             collapsible: false,
                                                             feed: {
@@ -1260,7 +1428,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                                                                 enableThreading: true,
                                                                 showCommentInput: true,
                                                             },
-                                                        }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) }))] }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Page Schema', data: renderedPage }] })] }) }) }) }) }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
+                                                        }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction, mentionSuggestions: mentionSuggestions }) }))] }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Page Schema', data: renderedPage }] })] }) }) }) }) }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
                         if (!open)
                             setConfirmState(s => ({ ...s, open: false }));
                     } }), _jsx(ActionParamDialog, { state: paramState, onOpenChange: (open) => {
@@ -1268,7 +1436,7 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
                             setParamState(s => ({ ...s, open: false }));
                     } })] }));
     }
-    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 }), isFavorite: isRecordFavorite, onToggleFavorite: favoriteRecord ? handleToggleRecordFavorite : undefined, onDataLoaded: (record) => {
+    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: [recordPresence.length > 0 && (_jsx(PresenceAvatars, { users: recordPresence, size: "sm", maxVisible: 3, showStatus: true })), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy })] }), _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 }), isFavorite: isRecordFavorite, onToggleFavorite: favoriteRecord ? handleToggleRecordFavorite : undefined, onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')
                                         return;
                                     // Resolve the same way DetailView's header does, so the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "5.0.2",
+  "version": "5.2.1",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,35 +27,35 @@
   "dependencies": {
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "5.0.2",
-    "@object-ui/collaboration": "5.0.2",
-    "@object-ui/components": "5.0.2",
-    "@object-ui/core": "5.0.2",
-    "@object-ui/data-objectstack": "5.0.2",
-    "@object-ui/fields": "5.0.2",
-    "@object-ui/i18n": "5.0.2",
-    "@object-ui/layout": "5.0.2",
-    "@object-ui/permissions": "5.0.2",
-    "@object-ui/providers": "5.0.2",
-    "@object-ui/react": "5.0.2",
-    "@object-ui/types": "5.0.2"
+    "@object-ui/auth": "5.2.1",
+    "@object-ui/collaboration": "5.2.1",
+    "@object-ui/components": "5.2.1",
+    "@object-ui/core": "5.2.1",
+    "@object-ui/data-objectstack": "5.2.1",
+    "@object-ui/fields": "5.2.1",
+    "@object-ui/i18n": "5.2.1",
+    "@object-ui/layout": "5.2.1",
+    "@object-ui/permissions": "5.2.1",
+    "@object-ui/providers": "5.2.1",
+    "@object-ui/react": "5.2.1",
+    "@object-ui/types": "5.2.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^5.0.2",
-    "@object-ui/plugin-charts": "^5.0.2",
-    "@object-ui/plugin-chatbot": "^5.0.2",
-    "@object-ui/plugin-dashboard": "^5.0.2",
-    "@object-ui/plugin-designer": "^5.0.2",
-    "@object-ui/plugin-detail": "^5.0.2",
-    "@object-ui/plugin-form": "^5.0.2",
-    "@object-ui/plugin-grid": "^5.0.2",
-    "@object-ui/plugin-kanban": "^5.0.2",
-    "@object-ui/plugin-list": "^5.0.2",
-    "@object-ui/plugin-report": "^5.0.2",
-    "@object-ui/plugin-view": "^5.0.2"
+    "@object-ui/plugin-calendar": "^5.2.1",
+    "@object-ui/plugin-charts": "^5.2.1",
+    "@object-ui/plugin-chatbot": "^5.2.1",
+    "@object-ui/plugin-dashboard": "^5.2.1",
+    "@object-ui/plugin-designer": "^5.2.1",
+    "@object-ui/plugin-detail": "^5.2.1",
+    "@object-ui/plugin-form": "^5.2.1",
+    "@object-ui/plugin-grid": "^5.2.1",
+    "@object-ui/plugin-kanban": "^5.2.1",
+    "@object-ui/plugin-list": "^5.2.1",
+    "@object-ui/plugin-report": "^5.2.1",
+    "@object-ui/plugin-view": "^5.2.1"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",

package/src/styles.css

@@ -14,3 +14,52 @@
  * ancestor) instead of the OS `prefers-color-scheme`. Required so the
  * in-app theme toggle fully controls light/dark UI under Tailwind v4. */
 @custom-variant dark (&:where(.dark, .dark *));
+
+/* Shimmer keyframe + utility for skeleton loading placeholders.
+ *
+ * Usage:   <div class="animate-shimmer ..."> or via ShimmerSkeleton
+ *          from @object-ui/components.
+ *
+ * The keyframe slides a 200%-wide gradient across an element's
+ * background. Pair with `bg-[length:200%_100%]` and a gradient that
+ * uses the design-system muted tokens, e.g.
+ *   bg-[linear-gradient(90deg,var(--muted),var(--muted-foreground)/10,var(--muted))]
+ *
+ * Respects `prefers-reduced-motion` automatically via the
+ * `motion-safe:` Tailwind variant on the consuming site.
+ */
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@utility animate-shimmer {
+  animation: shimmer 1.6s linear infinite;
+}
+
+/* Press feedback for shadcn-style Button components.
+ *
+ * The cva base in `packages/components/src/ui/button.tsx` always emits
+ * this 6-class combination on the outermost element:
+ *   inline-flex + whitespace-nowrap + rounded-md + text-sm +
+ *   font-medium + ring-offset-background
+ *
+ * That intersection is specific enough to scope the rule to Button
+ * (and `asChild` <a> Buttons) while leaving cmdk rows, SidebarNav
+ * links, native input[type=submit], and bare <button> in third-party
+ * libraries untouched.
+ *
+ * Gated on `prefers-reduced-motion: no-preference` so reduced-motion
+ * users see a hard click with no transform.
+ *
+ * Failure mode: if shadcn upstream changes the cva base class
+ * combination, the selector silently no-longer matches and we lose
+ * the animation — no UI breakage. Search the cva base string in
+ * `ui/button.tsx` to locate and update this rule when that happens.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  :is(button, a).inline-flex.whitespace-nowrap.rounded-md.text-sm.font-medium.ring-offset-background:not(:disabled):active {
+    transform: scale(0.97);
+    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

package/dist/components/DashboardRenderer.d.ts

@@ -1,8 +0,0 @@
-import type { DashboardRendererProps } from '../types';
-/**
- * DashboardRenderer - Renders dashboard layouts from schema
- *
- * Framework-agnostic component that renders a dashboard based on JSON schema.
- * Delegates to registered dashboard plugins.
- */
-export declare function DashboardRenderer({ schema, dataSource, dashboardName, }: DashboardRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DashboardRenderer.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SchemaRendererProvider } from '@object-ui/react';
-import { useObjectTranslation } from '@object-ui/i18n';
-/**
- * DashboardRenderer - Renders dashboard layouts from schema
- *
- * Framework-agnostic component that renders a dashboard based on JSON schema.
- * Delegates to registered dashboard plugins.
- */
-export function DashboardRenderer({ schema, dataSource, dashboardName, }) {
-    const { t } = useObjectTranslation();
-    if (!schema) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("div", { className: "text-muted-foreground", children: t('renderer.noDashboardSchema') }) }));
-    }
-    return (_jsx(SchemaRendererProvider, { dataSource: dataSource, children: _jsxs("div", { className: "dashboard-renderer h-full p-4", children: [_jsx("h1", { className: "mb-4 text-2xl font-bold", children: schema.title || dashboardName || t('renderer.dashboard') }), _jsx("div", { className: "text-muted-foreground", children: t('renderer.dashboardRendering', { name: schema.title || dashboardName }) })] }) }));
-}

package/dist/components/FormRenderer.d.ts

@@ -1,8 +0,0 @@
-import type { FormRendererProps } from '../types';
-/**
- * FormRenderer - Renders forms (modal or inline)
- *
- * Framework-agnostic component that renders a form based on schema.
- * Handles both create and edit modes.
- */
-export declare function FormRenderer({ schema, dataSource, mode, recordId, onSuccess, onCancel, objectDef, }: FormRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormRenderer.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SchemaRendererProvider } from '@object-ui/react';
-import { useObjectTranslation } from '@object-ui/i18n';
-/**
- * FormRenderer - Renders forms (modal or inline)
- *
- * Framework-agnostic component that renders a form based on schema.
- * Handles both create and edit modes.
- */
-export function FormRenderer({ schema, dataSource, mode = 'create', recordId, onSuccess, onCancel, objectDef, }) {
-    const { t } = useObjectTranslation();
-    if (!schema) {
-        return (_jsx("div", { className: "flex items-center justify-center p-4", children: _jsx("div", { className: "text-muted-foreground", children: t('renderer.noFormSchema') }) }));
-    }
-    const handleSubmit = async (data) => {
-        try {
-            if (mode === 'create' && objectDef) {
-                const result = await dataSource.create(objectDef.name, data);
-                onSuccess?.(result);
-            }
-            else if (mode === 'edit' && recordId && objectDef) {
-                const result = await dataSource.update(objectDef.name, recordId, data);
-                onSuccess?.(result);
-            }
-        }
-        catch (error) {
-            console.error('Form submission error:', error);
-        }
-    };
-    return (_jsx(SchemaRendererProvider, { dataSource: dataSource, children: _jsxs("div", { className: "form-renderer p-4", children: [_jsx("h2", { className: "mb-4 text-xl font-semibold", children: schema.title || (mode === 'create' ? t('renderer.createRecord') : t('renderer.editRecord')) }), _jsxs("div", { className: "text-muted-foreground", children: [t('renderer.formRenderingMode', { mode }), recordId && ` ${t('renderer.formRenderingFor', { id: recordId })}`] }), _jsxs("div", { className: "mt-4 flex gap-2", children: [_jsx("button", { onClick: () => handleSubmit({}), className: "rounded bg-primary px-4 py-2 text-primary-foreground", children: t('renderer.save') }), onCancel && (_jsx("button", { onClick: onCancel, className: "rounded border px-4 py-2", children: t('renderer.cancel') }))] })] }) }));
-}

package/dist/components/ObjectRenderer.d.ts

@@ -1,8 +0,0 @@
-import type { ObjectRendererProps } from '../types';
-/**
- * ObjectRenderer - Renders object views (Grid, Kanban, List, etc.)
- *
- * Framework-agnostic component that renders an object view based on schema.
- * Supports all view types registered in the ComponentRegistry.
- */
-export declare function ObjectRenderer({ objectName, viewId, dataSource, onRecordClick: _onRecordClick, onEdit: _onEdit, objectDef: externalObjectDef, refreshKey, }: ObjectRendererProps): import("react/jsx-runtime").JSX.Element;