@object-ui/app-shell 3.3.0 → 3.3.2

package/dist/views/PageView.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Page View Component
+ * Renders a custom page based on the pageName parameter.
+ * Edit opens a right-side drawer with PageCanvasEditor for real-time preview.
+ */
+export declare function PageView(): import("react/jsx-runtime").JSX.Element;

package/dist/views/PageView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Page View Component
+ * Renders a custom page based on the pageName parameter.
+ * Edit opens a right-side drawer with PageCanvasEditor for real-time preview.
+ */
+import { useState, useCallback, lazy, Suspense } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { SchemaRenderer } from '@object-ui/react';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { FileText, Pencil } from 'lucide-react';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { useMetadata } from '../providers/MetadataProvider';
+import { DesignDrawer } from './DesignDrawer';
+const PageCanvasEditor = lazy(() => import('@object-ui/plugin-designer').then((m) => ({ default: m.PageCanvasEditor })));
+export function PageView() {
+    const { pageName } = useParams();
+    const [searchParams] = useSearchParams();
+    const { showDebug } = useMetadataInspector();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    // Find page definition from API-driven metadata
+    const { pages } = useMetadata();
+    const page = pages?.find((p) => p.name === pageName);
+    // Local schema state for live preview — initialized from metadata
+    const [editSchema, setEditSchema] = useState(null);
+    const handleOpenDrawer = useCallback(() => {
+        // Snapshot the current page definition as starting schema
+        setEditSchema(page);
+        setDrawerOpen(true);
+    }, [page]);
+    const handleCloseDrawer = useCallback((open) => {
+        setDrawerOpen(open);
+        if (!open) {
+            // Drawer closed — keep the latest saved schema (already persisted via auto-save)
+        }
+    }, []);
+    if (!page) {
+        return (_jsx("div", { className: "h-full flex items-center justify-center p-8", 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(FileText, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Page Not Found" }), _jsxs(EmptyDescription, { children: ["The page \"", pageName, "\" could not be found. It may have been removed or renamed."] })] }) }));
+    }
+    // Convert URL search params to an object for the page context
+    const params = Object.fromEntries(searchParams.entries());
+    // Use the live-edited schema for preview when the drawer is open
+    const previewSchema = drawerOpen && editSchema ? editSchema : page;
+    return (_jsxs("div", { className: "flex flex-row h-full w-full overflow-hidden relative", children: [_jsxs("div", { className: "flex-1 overflow-auto h-full relative group", children: [_jsx("div", { className: `absolute top-1.5 sm:top-2 right-1.5 sm:right-2 z-50 flex items-center gap-1.5 transition-opacity ${showDebug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`, children: _jsxs("button", { type: "button", onClick: handleOpenDrawer, 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": "page-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) }), _jsx(SchemaRenderer, { schema: {
+                            ...previewSchema,
+                            type: previewSchema.type || 'page',
+                            context: { ...previewSchema.context, params }
+                        } })] }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Page Configuration', data: previewSchema }] }), _jsx(DesignDrawer, { open: drawerOpen, onOpenChange: handleCloseDrawer, title: `Edit Page: ${page.label || page.title || pageName}`, schema: editSchema || page, onSchemaChange: setEditSchema, collection: "sys_page", recordName: pageName, children: (schema, onChange) => (_jsx(Suspense, { fallback: _jsx("div", { className: "p-4 text-muted-foreground", children: "Loading editor\u2026" }), children: _jsx(PageCanvasEditor, { schema: schema, onChange: onChange }) })) })] }));
+}

package/dist/views/RecordDetailView.d.ts

@@ -0,0 +1,14 @@
+/**
+ * RecordDetailView Component
+ *
+ * Renders a detail view for a single record, resolved by URL params.
+ * Uses the DetailView plugin component with auto-generated sections from
+ * the object field definitions.
+ */
+interface RecordDetailViewProps {
+    dataSource: any;
+    objects: any[];
+    onEdit: (record: any) => void;
+}
+export declare function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/views/RecordDetailView.js

@@ -0,0 +1,508 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RecordDetailView Component
+ *
+ * Renders a detail view for a single record, resolved by URL params.
+ * Uses the DetailView plugin component with auto-generated sections from
+ * the object field definitions.
+ */
+import { useState, useEffect, useCallback, useMemo } 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 } from '@object-ui/react';
+import { toast } from 'sonner';
+import { Database, Users } from 'lucide-react';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { SkeletonDetail } from '../skeletons';
+import { ActionConfirmDialog } from './ActionConfirmDialog';
+import { ActionParamDialog } from './ActionParamDialog';
+import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
+const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
+export function RecordDetailView({ dataSource, objects, onEdit }) {
+    const { objectName, recordId } = useParams();
+    const { showDebug } = useMetadataInspector();
+    const { user } = useAuth();
+    const navigate = useNavigate();
+    const { t } = useObjectTranslation();
+    const [isLoading, setIsLoading] = useState(true);
+    const [feedItems, setFeedItems] = useState([]);
+    const [recordViewers, setRecordViewers] = useState([]);
+    const [actionRefreshKey, setActionRefreshKey] = useState(0);
+    const [childRelatedData, setChildRelatedData] = useState({});
+    const [recordTitle, setRecordTitle] = useState();
+    const objectDef = objects.find((o) => o.name === objectName);
+    // Publish record title to the navigation context so the top-bar breadcrumb
+    // can display "Acme Platform Upgrade" instead of "#9U1_MmmxjiGR…".
+    useRecordBreadcrumbTitle(recordTitle);
+    // Use the URL recordId as-is — it contains the actual record id.
+    // Navigation code passes `record.id || record._id` directly into the URL
+    // without adding any prefix, so no stripping is needed.
+    const pureRecordId = recordId;
+    // ─── Action Provider Handlers ───────────────────────────────────────
+    // Confirm dialog state (promise-based)
+    const [confirmState, setConfirmState] = useState({ open: false, message: '' });
+    // Param collection dialog state (promise-based)
+    const [paramState, setParamState] = useState({ open: false, params: [] });
+    const confirmHandler = useCallback((message, options) => {
+        return new Promise((resolve) => {
+            setConfirmState({ open: true, message, options, resolve });
+        });
+    }, []);
+    const paramCollectionHandler = useCallback((params) => {
+        return new Promise((resolve) => {
+            setParamState({ open: true, params, resolve });
+        });
+    }, []);
+    const toastHandler = useCallback((message, options) => {
+        if (options?.type === 'error')
+            toast.error(message);
+        else
+            toast.success(message);
+    }, []);
+    const navigateHandler = useCallback((url, options) => {
+        if (options?.external || options?.newTab) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            navigate(url);
+        }
+    }, [navigate]);
+    // API action handler — maps logical action targets to dataSource operations
+    const apiHandler = useCallback(async (action) => {
+        try {
+            const target = action.target || action.name;
+            const params = action.params || {};
+            switch (target) {
+                case 'opportunity_change_stage':
+                    await dataSource.update(objectName, pureRecordId, { stage: params.new_stage });
+                    break;
+                case 'opportunity_mark_won':
+                    await dataSource.update(objectName, pureRecordId, { stage: 'closed_won' });
+                    break;
+                case 'opportunity_mark_lost':
+                    await dataSource.update(objectName, pureRecordId, { stage: 'closed_lost', loss_reason: params.loss_reason });
+                    break;
+                default:
+                    // Generic: update record with collected params
+                    if (Object.keys(params).length > 0) {
+                        await dataSource.update(objectName, pureRecordId, params);
+                    }
+                    break;
+            }
+            const shouldRefresh = action.refreshAfter === true;
+            if (shouldRefresh) {
+                setActionRefreshKey(k => k + 1);
+            }
+            return { success: true, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [dataSource, objectName, pureRecordId]);
+    // Authenticated fetch for direct backend calls (e.g. flow trigger).
+    const authFetch = useMemo(() => createAuthenticatedFetch(), []);
+    // Flow action handler — POST to /api/v1/automation/{name}/trigger.
+    // Triggered when an Action with `type: 'flow'` is invoked from a record-level
+    // location (record_header, record_more, …). The server-side automation
+    // engine resolves `{name}` against the registered flow definitions and
+    // returns `{success, output, durationMs}`.
+    const flowHandler = useCallback(async (action) => {
+        const flowName = action.target || action.name;
+        if (!flowName) {
+            return { success: false, error: 'No flow target provided for flow action' };
+        }
+        try {
+            const baseUrl = import.meta.env.VITE_SERVER_URL || '';
+            const res = await authFetch(`${baseUrl}/api/v1/automation/${encodeURIComponent(flowName)}/trigger`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    recordId: pureRecordId,
+                    objectName,
+                    params: action.params ?? {},
+                }),
+            });
+            const json = await res.json().catch(() => null);
+            if (!res.ok || (json && json.success === false)) {
+                const errMsg = json?.error || `Flow "${flowName}" failed (HTTP ${res.status})`;
+                return { success: false, error: errMsg };
+            }
+            const shouldRefresh = action.refreshAfter !== false;
+            if (shouldRefresh) {
+                setActionRefreshKey(k => k + 1);
+            }
+            return { success: true, data: json?.data, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [authFetch, pureRecordId, objectName]);
+    // Server-side action handler — POST to /api/v1/actions/{object}/{action}.
+    // Used for `script` and `modal` actions where `action.target` matches a
+    // server-registered handler name (engine.registerAction). Sends the
+    // current recordId, objectName, and any collected/static params, and the
+    // server resolves the handler (with wildcard '*' fallback) and runs it.
+    const serverActionHandler = useCallback(async (action) => {
+        const targetName = action.target || action.name;
+        if (!targetName) {
+            return { success: false, error: 'No action target provided' };
+        }
+        const params = (action.params && !Array.isArray(action.params))
+            ? action.params
+            : {};
+        try {
+            const baseUrl = import.meta.env.VITE_SERVER_URL || '';
+            const obj = action.objectName || objectName || 'global';
+            const res = await authFetch(`${baseUrl}/api/v1/actions/${encodeURIComponent(obj)}/${encodeURIComponent(targetName)}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ recordId: pureRecordId, params }),
+            });
+            const json = await res.json().catch(() => null);
+            if (!res.ok || (json && json.success === false)) {
+                const errMsg = json?.error || `Action "${targetName}" failed (HTTP ${res.status})`;
+                return { success: false, error: errMsg };
+            }
+            const shouldRefresh = action.refreshAfter !== false;
+            if (shouldRefresh)
+                setActionRefreshKey(k => k + 1);
+            return { success: true, data: json?.data, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [authFetch, pureRecordId, objectName]);
+    // Discover reverse references: other objects with lookup/master_detail fields
+    // pointing to the current object (e.g., order_item.order → order).
+    const childRelations = useMemo(() => {
+        if (!objectDef || !objects)
+            return [];
+        const relations = [];
+        for (const obj of objects) {
+            if (obj.name === objectDef.name)
+                continue;
+            for (const [fieldName, fieldDef] of Object.entries(obj.fields || {})) {
+                if (fieldDef &&
+                    (fieldDef.type === 'lookup' || fieldDef.type === 'master_detail') &&
+                    (fieldDef.reference_to || fieldDef.reference) === objectDef.name) {
+                    relations.push({
+                        childObject: obj.name,
+                        childLabel: obj.label || obj.name,
+                        referenceField: fieldName,
+                    });
+                }
+            }
+        }
+        return relations;
+    }, [objectDef, objects]);
+    // Fetch related child records for each reverse reference
+    useEffect(() => {
+        if (!dataSource || !pureRecordId || childRelations.length === 0)
+            return;
+        let cancelled = false;
+        Promise.all(childRelations.map(({ childObject, referenceField }) => dataSource.find(childObject, {
+            $filter: { [referenceField]: pureRecordId },
+        })
+            .then((res) => {
+            const items = Array.isArray(res) ? res : res?.data || [];
+            return { childObject, items };
+        })
+            .catch((err) => {
+            console.warn(`[RecordDetailView] Failed to fetch related ${childObject}:`, err);
+            return { childObject, items: [] };
+        }))).then((results) => {
+            if (cancelled)
+                return;
+            const data = {};
+            for (const { childObject, items } of results) {
+                data[childObject] = items;
+            }
+            setChildRelatedData(data);
+        });
+        return () => { cancelled = true; };
+    }, [dataSource, pureRecordId, childRelations]);
+    const currentUser = user
+        ? { id: user.id, name: user.name, avatar: user.image }
+        : FALLBACK_USER;
+    // Fetch presence and comments from API
+    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(() => { });
+        // Fetch persisted comments and map to FeedItem[]
+        dataSource.find('sys_comment', { $filter: { threadId }, $orderby: { createdAt: 'asc' } })
+            .then((res) => {
+            if (res.data?.length) {
+                setFeedItems(res.data.map((c) => ({
+                    id: c.id,
+                    type: 'comment',
+                    actor: c.author?.name ?? 'Unknown',
+                    actorAvatarUrl: c.author?.avatar,
+                    body: c.content,
+                    createdAt: c.createdAt,
+                    updatedAt: c.updatedAt,
+                    parentId: c.parentId,
+                    reactions: c.reactions
+                        ? Object.entries(c.reactions).map(([emoji, userIds]) => ({
+                            emoji,
+                            count: userIds.length,
+                            reacted: userIds.includes(currentUser.id),
+                        }))
+                        : undefined,
+                })));
+            }
+        })
+            .catch(() => { });
+    }, [dataSource, objectName, pureRecordId, currentUser]);
+    const handleAddComment = useCallback(async (text) => {
+        const newItem = {
+            id: crypto.randomUUID(),
+            type: 'comment',
+            actor: currentUser.name,
+            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
+            body: text,
+            createdAt: new Date().toISOString(),
+        };
+        setFeedItems(prev => [...prev, newItem]);
+        // Persist to backend
+        if (dataSource) {
+            const threadId = `${objectName}:${pureRecordId}`;
+            dataSource.create('sys_comment', {
+                id: newItem.id,
+                threadId,
+                author: currentUser,
+                content: text,
+                mentions: [],
+                createdAt: newItem.createdAt,
+            }).catch(() => { });
+        }
+    }, [currentUser, dataSource, objectName, pureRecordId]);
+    const handleAddReply = useCallback(async (parentId, text) => {
+        const newItem = {
+            id: crypto.randomUUID(),
+            type: 'comment',
+            actor: currentUser.name,
+            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
+            body: text,
+            createdAt: new Date().toISOString(),
+            parentId,
+        };
+        setFeedItems(prev => {
+            const updated = [...prev, newItem];
+            // Increment replyCount on parent
+            return updated.map(item => item.id === parentId
+                ? { ...item, replyCount: (item.replyCount ?? 0) + 1 }
+                : item);
+        });
+        if (dataSource) {
+            const threadId = `${objectName}:${pureRecordId}`;
+            dataSource.create('sys_comment', {
+                id: newItem.id,
+                threadId,
+                author: currentUser,
+                content: text,
+                mentions: [],
+                createdAt: newItem.createdAt,
+                parentId,
+            }).catch(() => { });
+        }
+    }, [currentUser, dataSource, objectName, pureRecordId]);
+    const handleToggleReaction = useCallback((itemId, emoji) => {
+        setFeedItems(prev => prev.map(item => {
+            if (item.id !== itemId)
+                return item;
+            const reactions = [...(item.reactions ?? [])];
+            const idx = reactions.findIndex(r => r.emoji === emoji);
+            if (idx >= 0) {
+                const r = reactions[idx];
+                if (r.reacted) {
+                    // Remove user's reaction
+                    if (r.count <= 1) {
+                        reactions.splice(idx, 1);
+                    }
+                    else {
+                        reactions[idx] = { ...r, count: r.count - 1, reacted: false };
+                    }
+                }
+                else {
+                    reactions[idx] = { ...r, count: r.count + 1, reacted: true };
+                }
+            }
+            else {
+                reactions.push({ emoji, count: 1, reacted: true });
+            }
+            const updated = { ...item, reactions };
+            // Persist reaction toggle to backend
+            if (dataSource) {
+                dataSource.update('sys_comment', String(itemId), {
+                    $toggleReaction: { emoji, userId: currentUser.id },
+                }).catch(() => { });
+            }
+            return updated;
+        }));
+    }, [currentUser.id, dataSource]);
+    useEffect(() => {
+        // Reset loading on navigation; the actual DetailView handles data fetching
+        setIsLoading(true);
+        queueMicrotask(() => setIsLoading(false));
+    }, [objectName, recordId]);
+    // Build detail schema — must be before early returns to keep hook count
+    // consistent across renders and avoid React error #310.
+    const detailSchema = useMemo(() => {
+        if (!objectDef) {
+            return { type: 'detail-view' };
+        }
+        // Auto-detect primary field: prefer objectDef metadata, then 'name' or 'title' heuristic
+        const primaryField = objectDef.primaryField
+            || Object.keys(objectDef.fields || {}).find((key) => key === 'name' || key === 'title');
+        // Build sections: prefer form sections from objectDef, fallback to flat field list
+        const formSections = objectDef.views?.form?.sections;
+        const sections = formSections && formSections.length > 0
+            ? formSections.map((sec) => ({
+                title: sec.title,
+                collapsible: sec.collapsible,
+                defaultCollapsed: sec.defaultCollapsed,
+                fields: (sec.fields || []).map((f) => {
+                    const fieldName = typeof f === 'string' ? f : f.name;
+                    const fieldDef = objectDef.fields[fieldName];
+                    if (!fieldDef) {
+                        console.warn(`[RecordDetailView] Field "${fieldName}" not found in ${objectDef.name} definition`);
+                        return { name: fieldName, label: fieldName };
+                    }
+                    const refTarget = fieldDef.reference_to || fieldDef.reference;
+                    return {
+                        name: fieldName,
+                        label: fieldDef.label || fieldName,
+                        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 }),
+                    };
+                }),
+            }))
+            : [
+                {
+                    // 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 || {}).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 }),
+                        };
+                    }),
+                },
+            ];
+        // Filter actions for record_header location and deduplicate by name
+        const recordHeaderActions = (() => {
+            const seen = new Set();
+            return (objectDef.actions || []).filter((a) => {
+                if (!a.locations?.includes('record_header'))
+                    return false;
+                if (!a.name)
+                    return true;
+                if (seen.has(a.name))
+                    return false;
+                seen.add(a.name);
+                return true;
+            });
+        })();
+        // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
+        const highlightFields = objectDef.views?.detail?.highlightFields ?? [];
+        // Build sectionGroups from objectDef detail/form config if available
+        const sectionGroups = objectDef.views?.detail?.sectionGroups ?? objectDef.views?.form?.sectionGroups;
+        // 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.
+        const related = childRelations.map(({ childObject, childLabel, referenceField }) => {
+            const childObjectDef = objects.find((o) => o.name === childObject);
+            return {
+                title: childLabel,
+                type: 'table',
+                api: childObject,
+                data: childRelatedData[childObject] || [],
+                referenceField,
+                icon: childObjectDef?.icon,
+            };
+        });
+        return {
+            type: 'detail-view',
+            objectName: objectDef.name,
+            resourceId: pureRecordId,
+            showBack: true,
+            onBack: 'history',
+            showEdit: true,
+            title: objectDef.label,
+            primaryField,
+            sections,
+            autoTabs: true,
+            autoDiscoverRelated: true,
+            ...(related.length > 0 && { related }),
+            ...(highlightFields.length > 0 && { highlightFields }),
+            ...(sectionGroups && sectionGroups.length > 0 && { sectionGroups }),
+            ...(recordHeaderActions.length > 0 && {
+                actions: [{
+                        type: 'action:bar',
+                        location: 'record_header',
+                        actions: recordHeaderActions,
+                    }],
+            }),
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey]);
+    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: "Object Not Found" }), _jsxs(EmptyDescription, { children: ["Object \"", objectName, "\" definition missing. Check your configuration or navigate back to select a valid object."] })] }) }));
+    }
+    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: recordViewers.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", title: "Users viewing this record", children: [_jsx(Users, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx(PresenceAvatars, { users: recordViewers, size: "sm", maxVisible: 4, showStatus: true })] })) }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: _jsx(ActionProvider, { context: { record: {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectDef.label, onDataLoaded: (record) => {
+                                    if (!record || typeof record !== 'object')
+                                        return;
+                                    const primary = detailSchema.primaryField;
+                                    const candidates = [
+                                        primary && record[primary],
+                                        record.name,
+                                        record.title,
+                                        record.label,
+                                        record.subject,
+                                    ];
+                                    const next = candidates.find((v) => typeof v === 'string' && v.trim().length > 0);
+                                    if (next && next !== recordTitle)
+                                        setRecordTitle(next);
+                                }, onEdit: () => {
+                                    onEdit({ id: pureRecordId });
+                                }, discussionSlot: _jsx(RecordChatterPanel, { config: {
+                                        position: 'bottom',
+                                        collapsible: false,
+                                        feed: {
+                                            enableReactions: true,
+                                            enableThreading: true,
+                                            showCommentInput: true,
+                                        },
+                                    }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) }, actionRefreshKey) }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'View Schema', data: detailSchema }] })] }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
+                    if (!open)
+                        setConfirmState(s => ({ ...s, open: false }));
+                } }), _jsx(ActionParamDialog, { state: paramState, onOpenChange: (open) => {
+                    if (!open)
+                        setParamState(s => ({ ...s, open: false }));
+                } })] }));
+}

package/dist/views/ReportView.d.ts

@@ -0,0 +1,4 @@
+import type { DataSource } from '@object-ui/types';
+export declare function ReportView({ dataSource }: {
+    dataSource?: DataSource;
+}): import("react/jsx-runtime").JSX.Element;