@object-ui/app-shell 3.3.0 → 3.3.2

package/dist/views/ObjectView.js

@@ -0,0 +1,769 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Console ObjectView
+ *
+ * Thin wrapper around the plugin-view ObjectView that adds:
+ * - Multi-view resolution from objectDef.list_views
+ * - MetadataInspector toggle
+ * - Drawer for record detail preview
+ * - useObjectActions for toolbar create button
+ * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
+ */
+import { useMemo, useState, useCallback, useEffect, lazy, Suspense } from 'react';
+import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
+const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
+import { ListView } from '@object-ui/plugin-list';
+import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
+import { ObjectView as PluginObjectView, ViewTabBar } from '@object-ui/plugin-view';
+// Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
+// uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
+// Do NOT add eager `import '@object-ui/plugin-*'` side-effect imports here.
+import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
+import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
+import { getIcon } from '../utils/getIcon';
+import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { ViewConfigPanel } from './ViewConfigPanel';
+import { useObjectActions } from '../hooks/useObjectActions';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { usePermissions } from '@object-ui/permissions';
+import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
+import { useRealtimeSubscription, useConflictResolution } from '@object-ui/collaboration';
+import { ActionProvider, useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
+import { toast } from 'sonner';
+import { ActionConfirmDialog } from './ActionConfirmDialog';
+import { ActionParamDialog } from './ActionParamDialog';
+/** Map view types to Lucide icons (Airtable-style) */
+const VIEW_TYPE_ICONS = {
+    grid: TableIcon,
+    kanban: KanbanSquare,
+    calendar: Calendar,
+    gallery: LayoutGrid,
+    timeline: Activity,
+    gantt: GanttChart,
+    map: MapPin,
+    chart: BarChart3,
+};
+const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
+/**
+ * DrawerDetailContent — extracted component for NavigationOverlay content.
+ * Needs to be a proper component (not a render prop) so it can use hooks
+ * for data fetching, comment handling, etc.
+ */
+function DrawerDetailContent({ objectDef, recordId, dataSource, onEdit }) {
+    const { user } = useAuth();
+    const currentUser = user
+        ? { id: user.id, name: user.name, avatar: user.image }
+        : FALLBACK_USER;
+    const [feedItems, setFeedItems] = useState([]);
+    // Fetch persisted comments from API
+    useEffect(() => {
+        if (!dataSource || !objectDef?.name || !recordId)
+            return;
+        const threadId = `${objectDef.name}:${recordId}`;
+        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, objectDef?.name, recordId, currentUser.id]);
+    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]);
+        if (dataSource) {
+            const threadId = `${objectDef.name}:${recordId}`;
+            dataSource.create('sys_comment', {
+                id: newItem.id,
+                threadId,
+                author: currentUser,
+                content: text,
+                mentions: [],
+                createdAt: newItem.createdAt,
+            }).catch(() => { });
+        }
+    }, [currentUser, dataSource, objectDef?.name, recordId]);
+    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];
+            return updated.map(item => item.id === parentId
+                ? { ...item, replyCount: (item.replyCount ?? 0) + 1 }
+                : item);
+        });
+        if (dataSource) {
+            const threadId = `${objectDef.name}:${recordId}`;
+            dataSource.create('sys_comment', {
+                id: newItem.id,
+                threadId,
+                author: currentUser,
+                content: text,
+                mentions: [],
+                createdAt: newItem.createdAt,
+                parentId,
+            }).catch(() => { });
+        }
+    }, [currentUser, dataSource, objectDef?.name, recordId]);
+    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) {
+                    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 };
+            if (dataSource) {
+                dataSource.update('sys_comment', String(itemId), {
+                    $toggleReaction: { emoji, userId: currentUser.id },
+                }).catch(() => { });
+            }
+            return updated;
+        }));
+    }, [currentUser.id, dataSource]);
+    return (_jsxs("div", { className: "h-full bg-background overflow-auto p-3 sm:p-4 lg:p-6", children: [_jsx(DetailView, { schema: {
+                    type: 'detail-view',
+                    objectName: objectDef.name,
+                    resourceId: recordId,
+                    showBack: false,
+                    showEdit: true,
+                    title: objectDef.label,
+                    sections: [
+                        {
+                            title: 'Details',
+                            fields: Object.keys(objectDef.fields || {}).map((key) => ({
+                                name: key,
+                                label: objectDef.fields[key].label || key,
+                                type: objectDef.fields[key].type || 'text'
+                            })),
+                        }
+                    ]
+                }, dataSource: dataSource, onEdit: () => onEdit({ id: recordId }) }), _jsx("div", { className: "mt-6 border-t pt-6", children: _jsx(RecordChatterPanel, { config: {
+                        position: 'bottom',
+                        collapsible: true,
+                        defaultCollapsed: true,
+                        feed: {
+                            enableReactions: true,
+                            enableThreading: true,
+                            showCommentInput: true,
+                        },
+                    }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) })] }));
+}
+export function ObjectView({ dataSource, objects, onEdit }) {
+    const navigate = useNavigate();
+    const { objectName, viewId } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { showDebug, toggleDebug } = useMetadataInspector();
+    const { t } = useObjectTranslation();
+    const { objectLabel, objectDescription: objectDesc } = useObjectLabel();
+    // Inline view config panel state (Airtable-style right sidebar)
+    const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
+    const [viewConfigPanelMode, setViewConfigPanelMode] = useState('edit');
+    // Draft state for view config edits — cached locally, saved on demand
+    const [viewDraft, setViewDraft] = useState(null);
+    const handleViewConfigSave = useCallback((draft) => {
+        setViewDraft(draft);
+        setRefreshKey(k => k + 1);
+        // Persist to backend if dataSource supports it
+        if (dataSource?.updateViewConfig) {
+            const objName = objectName;
+            const vid = draft.id;
+            if (objName && vid) {
+                dataSource.updateViewConfig(objName, vid, draft).catch((err) => {
+                    console.error('[ViewConfigPanel] Failed to persist view config:', err);
+                });
+            }
+            else {
+                console.warn('[ViewConfigPanel] Cannot persist view config: missing objectName or viewId.');
+            }
+        }
+        else {
+            console.warn('[ViewConfigPanel] dataSource.updateViewConfig is not available. View config saved locally only.');
+        }
+    }, [dataSource, objectName]);
+    /** Create a new view via the config panel */
+    const handleViewCreate = useCallback(async (config) => {
+        try {
+            if (dataSource?.create) {
+                const payload = { objectName, ...config };
+                await dataSource.create('sys_view', payload);
+            }
+            setShowViewConfigPanel(false);
+            setViewConfigPanelMode('edit');
+            setRefreshKey(k => k + 1);
+        }
+        catch (err) {
+            console.error('[ViewConfigPanel] Failed to create view:', err);
+        }
+    }, [dataSource, objectName]);
+    // Record count tracking for footer
+    const [recordCount, setRecordCount] = useState(undefined);
+    // Admin users automatically get design tools (no toggle needed)
+    const { user } = useAuth();
+    const isAdmin = user?.role === 'admin';
+    const { can } = usePermissions();
+    // Get Object Definition
+    const objectDef = objects.find((o) => o.name === objectName);
+    if (!objectDef) {
+        return (_jsx("div", { className: "h-full p-4 flex items-center justify-center", 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(TableIcon, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('console.objectView.objectNotFound') }), _jsxs(EmptyDescription, { children: [t('console.objectView.objectNotFoundDescription', { objectName }), ' ', t('console.objectView.objectNotFoundHint')] })] }) }));
+    }
+    // Resolve Views from objectDef.listViews (camelCase per @objectstack/spec)
+    const views = useMemo(() => {
+        const definedViews = objectDef.listViews || objectDef.list_views || {};
+        const viewList = Object.entries(definedViews).map(([key, value]) => ({
+            id: key,
+            ...value,
+            type: value.type || 'grid'
+        }));
+        if (viewList.length === 0) {
+            // Default column resolution priority:
+            //   1. `compactLayout` (curated primary business fields).
+            //   2. Business fields only — exclude system-managed identifiers/audit
+            //      columns (id, created_at, updated_at, …) and fields explicitly
+            //      marked hidden/readonly on the schema. First 5 kept for compactness.
+            const SYSTEM_FIELDS = new Set([
+                'id', 'created_at', 'createdAt', 'updated_at', 'updatedAt',
+                'deleted_at', 'deletedAt', 'created_by', 'createdBy',
+                'updated_by', 'updatedBy', '_version', '_rev',
+            ]);
+            let defaultColumns = [];
+            if (Array.isArray(objectDef.compactLayout) && objectDef.compactLayout.length > 0) {
+                defaultColumns = objectDef.compactLayout.filter((n) => objectDef.fields?.[n]);
+            }
+            else if (objectDef.fields) {
+                defaultColumns = Object.entries(objectDef.fields)
+                    .filter(([name, f]) => {
+                    if (!f)
+                        return false;
+                    if (f.hidden)
+                        return false;
+                    if (SYSTEM_FIELDS.has(name))
+                        return false;
+                    return true;
+                })
+                    .map(([name]) => name)
+                    .slice(0, 5);
+            }
+            viewList.push({
+                id: 'all',
+                label: t('console.objectView.allRecords'),
+                type: 'grid',
+                columns: defaultColumns,
+            });
+        }
+        return viewList;
+    }, [objectDef]);
+    // Active View State — merge saved draft if available for this view
+    const activeViewId = viewId || searchParams.get('view') || views[0]?.id;
+    const baseView = views.find((v) => v.id === activeViewId) || views[0];
+    const activeView = viewDraft && viewDraft.id === baseView?.id
+        ? { ...baseView, ...viewDraft }
+        : baseView;
+    /** Real-time draft field update — propagates each toggle/input change immediately */
+    const handleViewUpdate = useCallback((field, value) => {
+        setViewDraft(prev => ({
+            ...(prev || {}),
+            id: baseView?.id,
+            [field]: value,
+        }));
+    }, [baseView?.id]);
+    const handleViewChange = (newViewId) => {
+        // The plugin ObjectView returns the view ID directly via onViewChange
+        const matchedView = views.find((v) => v.id === newViewId);
+        if (!matchedView)
+            return;
+        // Auto-close the config panel when switching views
+        setShowViewConfigPanel(false);
+        if (viewId) {
+            navigate(`../${matchedView.id}`, { relative: "path" });
+        }
+        else {
+            navigate(`view/${matchedView.id}`);
+        }
+    };
+    // ViewSwitcher callbacks — wired to both PluginObjectView instances
+    const handleCreateView = useCallback(() => {
+        setViewConfigPanelMode('create');
+        setShowViewConfigPanel(true);
+    }, []);
+    const handleViewAction = useCallback((actionType, viewType) => {
+        if (actionType === 'settings') {
+            const matchedView = views.find((v) => v.type === viewType);
+            if (matchedView)
+                handleViewChange(matchedView.id);
+            setViewConfigPanelMode('edit');
+            setShowViewConfigPanel(true);
+        }
+    }, [views, handleViewChange]);
+    // Action system for toolbar operations
+    const [refreshKey, setRefreshKey] = useState(0);
+    const actions = useObjectActions({
+        objectName: objectDef.name,
+        objectLabel: objectDef.label,
+        dataSource,
+        onEdit,
+        onRefresh: () => setRefreshKey(k => k + 1),
+    });
+    // ─── ActionProvider handlers for schema-driven toolbar actions ──────
+    const currentUser = user
+        ? { id: user.id, name: user.name, avatar: user.image }
+        : FALLBACK_USER;
+    const [confirmState, setConfirmState] = useState({ open: false, message: '' });
+    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]);
+    const apiHandler = useCallback(async (action) => {
+        try {
+            const target = action.target || action.name;
+            const params = action.params || {};
+            // Generic list-level API handler: update/execute via dataSource
+            if (typeof dataSource.execute === 'function') {
+                await dataSource.execute(objectDef.name, target, params);
+            }
+            else if (params.recordId && Object.keys(params).length > 1 && typeof dataSource.update === 'function') {
+                await dataSource.update(objectDef.name, params.recordId, params);
+            }
+            const shouldRefresh = action.refreshAfter !== false;
+            if (shouldRefresh) {
+                setRefreshKey(k => k + 1);
+            }
+            return { success: true, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [dataSource, objectDef.name]);
+    // 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 list-level
+    // locations (list_toolbar, list_item). For list_item the row's recordId is
+    // expected in `action.params.recordId`.
+    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 params = action.params || {};
+            const res = await authFetch(`${baseUrl}/api/v1/automation/${encodeURIComponent(flowName)}/trigger`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    recordId: params.recordId,
+                    objectName: objectDef.name,
+                    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) {
+                setRefreshKey(k => k + 1);
+            }
+            return { success: true, data: json?.data, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [authFetch, objectDef.name]);
+    // Server-side action handler — POST to /api/v1/actions/{object}/{action}.
+    // For list-toolbar/list-item `script` and `modal` actions whose `target`
+    // matches a server-registered handler. selectedIds (from action.params)
+    // is forwarded so bulk handlers like massUpdateStage / addToCampaign work.
+    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 || objectDef.name || 'global';
+            const res = await authFetch(`${baseUrl}/api/v1/actions/${encodeURIComponent(obj)}/${encodeURIComponent(targetName)}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ recordId: params.recordId, 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)
+                setRefreshKey(k => k + 1);
+            return { success: true, data: json?.data, reload: shouldRefresh };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }, [authFetch, objectDef.name]);
+    // Real-time: auto-refresh when server reports data changes
+    const { lastMessage: realtimeMessage } = useRealtimeSubscription({
+        channel: `object:${objectDef.name}`,
+    });
+    // Conflict resolution: detect and queue conflicts on reconnection
+    const conflictUserId = objectDef.name ? `user-${objectDef.name}` : 'current-user';
+    const { hasConflicts, resolveAllConflicts } = useConflictResolution(conflictUserId);
+    useEffect(() => {
+        if (realtimeMessage) {
+            // On reconnection data change, auto-resolve with server-wins strategy
+            if (hasConflicts) {
+                resolveAllConflicts('remote');
+            }
+            setRefreshKey(k => k + 1);
+        }
+    }, [realtimeMessage, hasConflicts, resolveAllConflicts]);
+    // Fetch record count for footer display
+    useEffect(() => {
+        if (dataSource?.find && objectDef.name) {
+            dataSource.find(objectDef.name, { limit: 0 }).then((result) => {
+                if (typeof result?.total === 'number') {
+                    setRecordCount(result.total);
+                }
+                else if (Array.isArray(result?.data)) {
+                    setRecordCount(result.data.length);
+                }
+                else if (Array.isArray(result)) {
+                    setRecordCount(result.length);
+                }
+            }).catch(() => {
+                // Silently ignore — record count is non-critical
+            });
+        }
+    }, [dataSource, objectDef.name, refreshKey]);
+    // Navigation overlay for record detail (supports drawer/modal/split/popover via config)
+    // Priority: activeView.navigation > objectDef.navigation > default page
+    // Memoize to avoid unstable object identity on every render (stale closure prevention)
+    const detailNavigation = useMemo(() => activeView?.navigation ?? objectDef.navigation ?? { mode: 'page' }, [activeView?.navigation, objectDef.navigation]);
+    const drawerRecordId = searchParams.get('recordId');
+    // Memoize onNavigate to prevent stale closure in useNavigationOverlay's handleClick
+    const handleNavOverlayNavigate = useCallback((recordId, action) => {
+        if (action === 'new_window') {
+            // Open record detail in a new browser tab with Console-correct URL
+            const basePath = window.location.pathname.replace(/\/view\/.*$/, '');
+            window.open(`${basePath}/record/${encodeURIComponent(String(recordId))}`, '_blank');
+            return;
+        }
+        // page / view mode — navigate to record detail page
+        // Handles action === 'view' (from useNavigationOverlay page mode) and
+        // default fallthrough for any unrecognised action
+        if (action === 'view' || !action || action === 'page') {
+            if (viewId) {
+                navigate(`../../record/${encodeURIComponent(String(recordId))}`, { relative: 'path' });
+            }
+            else {
+                navigate(`record/${encodeURIComponent(String(recordId))}`);
+            }
+        }
+    }, [navigate, viewId]);
+    const navOverlay = useNavigationOverlay({
+        navigation: detailNavigation,
+        objectName: objectDef.name,
+        onNavigate: handleNavOverlayNavigate,
+    });
+    const handleDrawerClose = () => {
+        navOverlay.close();
+        const newParams = new URLSearchParams(searchParams);
+        newParams.delete('recordId');
+        setSearchParams(newParams);
+    };
+    // Sync URL-based recordId to overlay state
+    useEffect(() => {
+        if (drawerRecordId && !navOverlay.isOpen) {
+            navOverlay.open({ id: drawerRecordId });
+        }
+        else if (!drawerRecordId && navOverlay.isOpen) {
+            navOverlay.close();
+        }
+    }, [drawerRecordId]);
+    // Render multi-view content via ListView plugin (for kanban, calendar, etc.)
+    const renderListView = useCallback(({ schema: listSchema, dataSource: ds, onEdit: editHandler, className, refreshKey: pluginRefreshKey }) => {
+        // Combine local refreshKey with the plugin ObjectView's refreshKey for full propagation
+        const combinedRefreshKey = refreshKey + (pluginRefreshKey || 0);
+        const key = `${objectName}-${activeView.id}-${combinedRefreshKey}`;
+        const viewDef = activeView;
+        // Warn in dev mode if flat properties are used instead of nested spec format
+        if (process.env.NODE_ENV === 'development') {
+            const flatKeys = ['startDateField', 'endDateField', 'dateField', 'groupBy', 'groupField',
+                'locationField', 'imageField', 'chartType', 'xAxisField', 'dependenciesField',
+                'progressField', 'colorField', 'allDayField', 'subjectField', 'endField',
+                'latitudeField', 'longitudeField', 'zoom', 'center', 'cardFields', 'subtitleField',
+                'descriptionField', 'yAxisFields', 'aggregation', 'series'];
+            const nestedConfig = viewDef[viewDef.type] || {};
+            const found = flatKeys.filter(k => k in viewDef && !(k in nestedConfig));
+            if (found.length > 0) {
+                console.warn(`[Spec Compliance] View "${viewDef.id}" uses flat properties ${JSON.stringify(found)}. ` +
+                    `Move them under viewDef.${viewDef.type || '<type>'} per @objectstack/spec protocol.`);
+            }
+        }
+        if (viewDef.type === 'chart') {
+            const chartConfig = viewDef.chart || {};
+            return (_jsx(Suspense, { fallback: _jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading chart\u2026" }), children: _jsx(ObjectChart, { dataSource: ds, schema: {
+                        type: 'object-chart',
+                        objectName: objectDef.name,
+                        chartType: chartConfig.chartType,
+                        xAxisField: chartConfig.xAxisField,
+                        yAxisFields: chartConfig.yAxisFields,
+                        aggregation: chartConfig.aggregation,
+                        series: chartConfig.series,
+                        config: chartConfig.config,
+                        filter: chartConfig.filter,
+                    } }) }, key));
+        }
+        const fullSchema = {
+            ...listSchema,
+            // Propagate appearance/view-config properties for live preview
+            rowHeight: viewDef.rowHeight ?? listSchema.rowHeight,
+            densityMode: viewDef.densityMode ?? listSchema.densityMode,
+            inlineEdit: viewDef.inlineEdit ?? viewDef.editRecordsInline ?? listSchema.inlineEdit,
+            appearance: viewDef.showDescription != null
+                ? { showDescription: viewDef.showDescription }
+                : listSchema.appearance,
+            // Propagate toolbar/display flags for all view types
+            showSearch: viewDef.showSearch ?? listSchema.showSearch,
+            showSort: viewDef.showSort ?? listSchema.showSort,
+            showFilters: viewDef.showFilters ?? listSchema.showFilters,
+            showHideFields: viewDef.showHideFields ?? listSchema.showHideFields,
+            showGroup: viewDef.showGroup ?? listSchema.showGroup,
+            showColor: viewDef.showColor ?? listSchema.showColor,
+            showDensity: viewDef.showDensity ?? listSchema.showDensity,
+            allowExport: viewDef.allowExport ?? listSchema.allowExport,
+            exportOptions: viewDef.allowExport === false ? undefined : (viewDef.exportOptions ?? listSchema.exportOptions),
+            striped: viewDef.striped ?? listSchema.striped,
+            bordered: viewDef.bordered ?? listSchema.bordered,
+            color: viewDef.color ?? listSchema.color,
+            // Propagate view-config properties (Bug 4 / items 14-22)
+            wrapHeaders: viewDef.wrapHeaders ?? listSchema.wrapHeaders,
+            clickIntoRecordDetails: viewDef.clickIntoRecordDetails ?? listSchema.clickIntoRecordDetails,
+            addRecordViaForm: viewDef.addRecordViaForm ?? listSchema.addRecordViaForm,
+            addDeleteRecordsInline: viewDef.addDeleteRecordsInline ?? listSchema.addDeleteRecordsInline,
+            collapseAllByDefault: viewDef.collapseAllByDefault ?? listSchema.collapseAllByDefault,
+            fieldTextColor: viewDef.fieldTextColor ?? listSchema.fieldTextColor,
+            prefixField: viewDef.prefixField ?? listSchema.prefixField,
+            showDescription: viewDef.showDescription ?? listSchema.showDescription,
+            // Propagate new spec properties (P0/P1/P2)
+            navigation: viewDef.navigation ?? listSchema.navigation,
+            selection: viewDef.selection ?? listSchema.selection,
+            pagination: viewDef.pagination ?? listSchema.pagination,
+            searchableFields: viewDef.searchableFields ?? listSchema.searchableFields,
+            filterableFields: viewDef.filterableFields ?? listSchema.filterableFields,
+            resizable: viewDef.resizable ?? listSchema.resizable,
+            hiddenFields: viewDef.hiddenFields ?? listSchema.hiddenFields,
+            rowActions: viewDef.rowActions ?? listSchema.rowActions,
+            bulkActions: viewDef.bulkActions ?? listSchema.bulkActions,
+            sharing: viewDef.sharing ?? listSchema.sharing,
+            addRecord: viewDef.addRecord ?? listSchema.addRecord,
+            conditionalFormatting: viewDef.conditionalFormatting ?? listSchema.conditionalFormatting,
+            quickFilters: viewDef.quickFilters ?? listSchema.quickFilters,
+            userFilters: viewDef.userFilters ?? listSchema.userFilters,
+            showRecordCount: viewDef.showRecordCount ?? listSchema.showRecordCount,
+            allowPrinting: viewDef.allowPrinting ?? listSchema.allowPrinting,
+            virtualScroll: viewDef.virtualScroll ?? listSchema.virtualScroll,
+            emptyState: viewDef.emptyState ?? listSchema.emptyState,
+            aria: viewDef.aria ?? listSchema.aria,
+            tabs: listSchema.tabs,
+            // Propagate filter/sort as default filters/sort for data flow
+            ...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
+            ...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
+            options: {
+                kanban: {
+                    groupBy: viewDef.kanban?.groupByField || viewDef.kanban?.groupField || 'status',
+                    groupField: viewDef.kanban?.groupByField || viewDef.kanban?.groupField || 'status',
+                    titleField: viewDef.kanban?.titleField || objectDef.titleField || 'name',
+                    cardFields: viewDef.kanban?.columns,
+                },
+                calendar: {
+                    startDateField: viewDef.calendar?.startDateField || 'due_date',
+                    endDateField: viewDef.calendar?.endDateField,
+                    titleField: viewDef.calendar?.titleField || 'name',
+                    colorField: viewDef.calendar?.colorField,
+                    allDayField: viewDef.calendar?.allDayField,
+                    defaultView: viewDef.calendar?.defaultView,
+                },
+                timeline: {
+                    dateField: viewDef.timeline?.dateField || 'due_date',
+                    titleField: viewDef.timeline?.titleField || objectDef.titleField || 'name',
+                    descriptionField: viewDef.timeline?.descriptionField,
+                },
+                map: {
+                    locationField: viewDef.map?.locationField,
+                    titleField: viewDef.map?.titleField || objectDef.titleField || 'name',
+                    latitudeField: viewDef.map?.latitudeField,
+                    longitudeField: viewDef.map?.longitudeField,
+                    zoom: viewDef.map?.zoom,
+                    center: viewDef.map?.center,
+                },
+                gallery: {
+                    imageField: viewDef.gallery?.imageField || 'image',
+                    titleField: viewDef.gallery?.titleField || objectDef.titleField || 'name',
+                    subtitleField: viewDef.gallery?.subtitleField,
+                },
+                gantt: {
+                    startDateField: viewDef.gantt?.startDateField || 'start_date',
+                    endDateField: viewDef.gantt?.endDateField || 'end_date',
+                    titleField: viewDef.gantt?.titleField || 'name',
+                    progressField: viewDef.gantt?.progressField,
+                    dependenciesField: viewDef.gantt?.dependenciesField,
+                    colorField: viewDef.gantt?.colorField,
+                },
+                chart: {
+                    chartType: viewDef.chart?.chartType,
+                    xAxisField: viewDef.chart?.xAxisField,
+                    yAxisFields: viewDef.chart?.yAxisFields,
+                    aggregation: viewDef.chart?.aggregation,
+                    series: viewDef.chart?.series,
+                    config: viewDef.chart?.config,
+                },
+            },
+        };
+        return (_jsx(ListView, { schema: fullSchema, className: className, onEdit: editHandler, onRowClick: (record) => {
+                navOverlay.handleClick(record);
+            }, dataSource: ds }, key));
+    }, [activeView, objectDef, objectName, refreshKey, navOverlay]);
+    // Memoize the merged views array so PluginObjectView doesn't get a new
+    // reference on every render (which would trigger unnecessary data refetches).
+    const mergedViews = useMemo(() => views.map((v) => v.id === activeViewId && viewDraft && viewDraft.id === v.id
+        ? { ...v, ...viewDraft }
+        : v), [views, activeViewId, viewDraft]);
+    // Build the ObjectViewSchema for the plugin — reads from activeView (which merges draft)
+    const objectViewSchema = useMemo(() => ({
+        type: 'object-view',
+        objectName: objectDef.name,
+        layout: 'page',
+        showSearch: activeView?.showSearch !== false,
+        showFilters: activeView?.showFilters !== false,
+        showSort: activeView?.showSort !== false,
+        showCreate: false, // We render our own create button in the header
+        showRefresh: true,
+        allowCreateView: isAdmin,
+        viewActions: isAdmin ? [
+            { type: 'settings' },
+            { type: 'share' },
+            { type: 'duplicate' },
+            { type: 'delete' },
+        ] : [],
+        onNavigate: (recordId, mode) => {
+            if (mode === 'edit') {
+                onEdit?.({ id: recordId });
+            }
+            else if (mode === 'view') {
+                if (viewId) {
+                    navigate(`../../record/${encodeURIComponent(String(recordId))}`, { relative: 'path' });
+                }
+                else {
+                    navigate(`record/${encodeURIComponent(String(recordId))}`);
+                }
+            }
+        },
+    }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort, navigate, viewId, isAdmin]);
+    return (_jsxs(ActionProvider, { context: { objectName: objectDef.name, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: [_jsxs("div", { className: "h-full flex flex-col bg-background min-w-0 overflow-hidden", children: [_jsxs("div", { className: "flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10", children: [_jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [_jsx("div", { className: "bg-primary/10 p-1.5 sm:p-2 rounded-md shrink-0", children: (() => { const I = getIcon(objectDef?.icon); return _jsx(I, { className: "h-4 w-4 text-primary" }); })() }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-base sm:text-lg font-semibold tracking-tight text-foreground truncate", children: objectLabel(objectDef) }), objectDef.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate hidden sm:block max-w-md", children: objectDesc(objectDef) }))] })] }), _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
+                                            type: 'action:bar',
+                                            location: 'list_toolbar',
+                                            actions: objectDef.actions,
+                                            size: 'sm',
+                                            variant: 'outline',
+                                        } })), isAdmin && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", className: "shadow-none h-8 sm:h-9 px-2", title: t('console.objectView.designTools'), children: _jsx(Wrench, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [_jsxs(DropdownMenuItem, { onClick: toggleDebug, children: [_jsx(MetadataToggle, { open: showDebug, onToggle: toggleDebug, className: "hidden" }), t('console.objectView.metadataInspector')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => { setViewConfigPanelMode('edit'); setShowViewConfigPanel(prev => !prev); }, children: [_jsx(Settings2, { className: "h-4 w-4 mr-2" }), t('console.objectView.editView')] }), _jsxs(DropdownMenuItem, { onClick: () => { setViewConfigPanelMode('create'); setShowViewConfigPanel(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), t('console.objectView.addView')] })] })] }))] })] }), views.length > 1 && (_jsx("div", { className: "border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: _jsx(ViewTabBar, { views: views.map((view) => ({
+                                id: view.id,
+                                label: view.label,
+                                type: view.type,
+                                hasActiveFilters: Array.isArray(view.filter) && view.filter.length > 0,
+                                hasActiveSort: Array.isArray(view.sort) && view.sort.length > 0,
+                            })), activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: { reorderable: false } }) })), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
+                                    handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-auto p-3 sm:p-4", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
+                                                    navOverlay.handleClick(record);
+                                                }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }), typeof recordCount === 'number' && (_jsx("div", { "data-testid": "record-count-footer", className: "border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
+                                    const recordId = (record.id || record._id);
+                                    return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
+                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-auto p-3 sm:p-4", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
+                                            navOverlay.handleClick(record);
+                                        }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
+                                    { title: 'View Configuration', data: activeView },
+                                    { title: 'Object Definition', data: objectDef },
+                                ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
+                            handleDrawerClose(); }, title: objectDef.label, className: navOverlay.mode === 'drawer' ? 'w-[90vw] sm:max-w-2xl p-0 overflow-hidden' : undefined, children: (record) => {
+                            const recordId = (record.id || record._id);
+                            return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
+                        } }))] }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
+                    if (!open)
+                        setConfirmState({ open: false, message: '' });
+                } }), _jsx(ActionParamDialog, { state: paramState, onOpenChange: (open) => {
+                    if (!open)
+                        setParamState({ open: false, params: [] });
+                } })] }));
+}