@object-ui/app-shell 3.3.0 → 3.3.1

package/dist/views/DashboardView.js

@@ -0,0 +1,357 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dashboard View Component
+ * Renders a dashboard based on the dashboardName parameter.
+ * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
+ * on the right side, following the same pattern as ListView.
+ */
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { DashboardRenderer, DashboardConfigPanel, WidgetConfigPanel, } from '@object-ui/plugin-dashboard';
+import { ModalForm } from '@object-ui/plugin-form';
+import { toast } from 'sonner';
+import { Empty, EmptyTitle, EmptyDescription, Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
+import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, Trash2, } from 'lucide-react';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { SkeletonDashboard } from '../skeletons';
+import { useMetadata } from '../providers/MetadataProvider';
+import { resolveI18nLabel } from '../utils';
+import { useAdapter } from '../providers/AdapterProvider';
+import { useObjectTranslation } from '@object-ui/i18n';
+// ---------------------------------------------------------------------------
+// Widget type palette for the add-widget toolbar
+// ---------------------------------------------------------------------------
+const WIDGET_TYPES = [
+    { type: 'metric', label: 'KPI Metric', Icon: TrendingUp },
+    { type: 'bar', label: 'Bar Chart', Icon: BarChart3 },
+    { type: 'line', label: 'Line Chart', Icon: LineChart },
+    { type: 'pie', label: 'Pie Chart', Icon: PieChart },
+    { type: 'table', label: 'Table', Icon: Table2 },
+    { type: 'grid', label: 'Grid', Icon: LayoutGrid },
+];
+let widgetCounter = 0;
+function createWidgetId() {
+    widgetCounter += 1;
+    return `widget_${Date.now()}_${widgetCounter}`;
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Ensure every widget in the schema has a unique id. */
+function ensureWidgetIds(schema) {
+    if (!schema.widgets?.length)
+        return schema;
+    const needsFix = schema.widgets.some((w) => !w.id);
+    if (!needsFix)
+        return schema;
+    return {
+        ...schema,
+        widgets: schema.widgets.map((w) => (w.id ? w : { ...w, id: createWidgetId() })),
+    };
+}
+/** Resolve a human-friendly default title for a new widget type. */
+function defaultWidgetTitle(type) {
+    const entry = WIDGET_TYPES.find((t) => t.type === type);
+    return entry ? `New ${entry.label}` : 'New Widget';
+}
+// ---------------------------------------------------------------------------
+// Helpers: flatten / unflatten widget config for WidgetConfigPanel
+// ---------------------------------------------------------------------------
+function flattenWidgetConfig(widget) {
+    return {
+        title: widget.title ?? '',
+        description: widget.description ?? '',
+        type: widget.type ?? 'metric',
+        object: widget.object ?? '',
+        categoryField: widget.categoryField ?? '',
+        valueField: widget.valueField ?? '',
+        aggregate: widget.aggregate ?? 'count',
+        layoutW: widget.layout?.w ?? 1,
+        layoutH: widget.layout?.h ?? 1,
+        colorVariant: widget.colorVariant ?? 'default',
+        actionUrl: widget.actionUrl ?? '',
+    };
+}
+function unflattenWidgetConfig(config, base) {
+    return {
+        title: config.title,
+        description: config.description,
+        type: config.type,
+        object: config.object,
+        categoryField: config.categoryField,
+        valueField: config.valueField,
+        aggregate: config.aggregate,
+        layout: { ...(base.layout || {}), w: config.layoutW, h: config.layoutH },
+        colorVariant: config.colorVariant,
+        actionUrl: config.actionUrl,
+    };
+}
+function extractDashboardConfig(schema) {
+    return {
+        columns: schema.columns ?? 3,
+        gap: schema.gap ?? 4,
+        rowHeight: String(schema.rowHeight ?? '120'),
+        refreshInterval: String(schema.refreshInterval ?? '0'),
+        title: schema.title ?? '',
+        showDescription: schema.showDescription ?? true,
+        theme: schema.theme ?? 'auto',
+    };
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function DashboardView({ dataSource }) {
+    const { dashboardName } = useParams();
+    const { showDebug } = useMetadataInspector();
+    const adapter = useAdapter();
+    const { t } = useObjectTranslation();
+    const [isLoading, setIsLoading] = useState(true);
+    const [configPanelOpen, setConfigPanelOpen] = useState(false);
+    const [selectedWidgetId, setSelectedWidgetId] = useState(null);
+    // Version counter — incremented on save to refresh the stable config reference
+    const [configVersion, setConfigVersion] = useState(0);
+    // Modal state for header action buttons that request a modal (e.g. New Opportunity)
+    const [modalState, setModalState] = useState(null);
+    const closeModal = useCallback((result) => {
+        setModalState((curr) => {
+            if (curr)
+                curr.resolve(result);
+            return null;
+        });
+    }, []);
+    const modalHandler = useCallback((schema) => new Promise((resolve) => {
+        // Normalize string schema (e.g. action.target = 'opportunity') to a
+        // ModalForm-compatible descriptor so header `modal` actions like
+        // { actionType: 'modal', actionUrl: 'opportunity' } open the create
+        // form for that object.
+        const normalized = typeof schema === 'string'
+            ? { objectName: schema, mode: 'create' }
+            : schema;
+        setModalState({ schema: normalized, resolve });
+    }), []);
+    const scriptHandlers = useMemo(() => ({
+        export_dashboard_pdf: async () => {
+            toast.info('Preparing PDF export…');
+            try {
+                window.print();
+                return { success: true };
+            }
+            catch (err) {
+                toast.error(`Export failed: ${err?.message || String(err)}`);
+                return { success: false, error: err?.message || String(err) };
+            }
+        },
+        forecast_dashboard: async () => {
+            toast.info('Forecast view coming soon');
+            return { success: true };
+        },
+    }), []);
+    useEffect(() => {
+        setIsLoading(true);
+        setEditSchema(null);
+        setConfigPanelOpen(false);
+        setSelectedWidgetId(null);
+        queueMicrotask(() => setIsLoading(false));
+    }, [dashboardName]);
+    const { dashboards, objects: metadataObjects, refresh } = useMetadata();
+    const dashboard = dashboards?.find((d) => d.name === dashboardName);
+    // Local schema state for live preview — initialized from metadata
+    const [editSchema, setEditSchema] = useState(null);
+    // When metadata refreshes (dashboard reference changes), discard stale
+    // editSchema if the config panel is already closed.
+    useEffect(() => {
+        if (!configPanelOpen) {
+            setEditSchema(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dashboard]);
+    // ---- Save helper --------------------------------------------------------
+    const saveSchema = useCallback(async (schema) => {
+        try {
+            if (adapter) {
+                await adapter.update('sys_dashboard', dashboardName, schema);
+                // Refresh metadata cache so closing the config panel shows saved data
+                refresh().catch(() => { });
+            }
+        }
+        catch (err) {
+            console.warn('[DashboardView] Auto-save failed:', err);
+        }
+    }, [adapter, dashboardName, refresh]);
+    // ---- Open / close config panel ------------------------------------------
+    const handleOpenConfigPanel = useCallback(() => {
+        setEditSchema(ensureWidgetIds(dashboard));
+        setConfigPanelOpen(true);
+        setConfigVersion((v) => v + 1);
+    }, [dashboard]);
+    const handleCloseConfigPanel = useCallback(() => {
+        setConfigPanelOpen(false);
+        setSelectedWidgetId(null);
+    }, []);
+    // ---- Widget management --------------------------------------------------
+    const addWidget = useCallback((type) => {
+        if (!editSchema)
+            return;
+        const id = createWidgetId();
+        const newWidget = {
+            id,
+            title: defaultWidgetTitle(type),
+            type,
+            layout: {
+                x: 0,
+                y: (editSchema.widgets?.length ?? 0),
+                w: editSchema.columns ?? 2,
+                h: 1,
+            },
+        };
+        const newSchema = { ...editSchema, widgets: [...(editSchema.widgets || []), newWidget] };
+        setEditSchema(newSchema);
+        saveSchema(newSchema);
+        setSelectedWidgetId(id);
+        setConfigVersion((v) => v + 1);
+    }, [editSchema, saveSchema]);
+    const removeWidget = useCallback((widgetId) => {
+        if (!editSchema)
+            return;
+        const newSchema = {
+            ...editSchema,
+            widgets: editSchema.widgets.filter((w) => w.id !== widgetId),
+        };
+        setEditSchema(newSchema);
+        saveSchema(newSchema);
+        if (selectedWidgetId === widgetId) {
+            setSelectedWidgetId(null);
+        }
+    }, [editSchema, selectedWidgetId, saveSchema]);
+    // ---- Dashboard config panel handlers ------------------------------------
+    // Stabilize config reference: only recompute after explicit actions (panel
+    // open, save, widget add). configVersion is incremented on those actions.
+    // This prevents useConfigDraft from resetting the draft on every live field
+    // change (same pattern as ViewConfigPanel's stableActiveView).
+    const dashboardConfig = useMemo(() => extractDashboardConfig(editSchema || dashboard), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configVersion]);
+    const handleDashboardConfigSave = useCallback((config) => {
+        if (!editSchema)
+            return;
+        const newSchema = {
+            ...editSchema,
+            columns: config.columns,
+            gap: config.gap,
+            rowHeight: config.rowHeight,
+            refreshInterval: Number(config.refreshInterval) || 0,
+            title: config.title,
+            showDescription: config.showDescription,
+            theme: config.theme,
+        };
+        setEditSchema(newSchema);
+        saveSchema(newSchema);
+        setConfigVersion((v) => v + 1);
+    }, [editSchema, saveSchema]);
+    const handleDashboardFieldChange = useCallback((field, value) => {
+        if (!editSchema)
+            return;
+        // Map config field keys to proper DashboardSchema updates for live preview
+        setEditSchema((prev) => {
+            if (!prev)
+                return prev;
+            if (field === 'refreshInterval') {
+                return { ...prev, refreshInterval: Number(value) || 0 };
+            }
+            return { ...prev, [field]: value };
+        });
+    }, [editSchema]);
+    // ---- Widget config panel handlers ---------------------------------------
+    const selectedWidget = editSchema?.widgets?.find((w) => w.id === selectedWidgetId);
+    // Stabilize widget config: only recompute after explicit actions (widget
+    // switch, save, add). configVersion is incremented on save/add, and
+    // selectedWidgetId changes on widget switch — this prevents useConfigDraft
+    // from resetting the draft on every live field change.
+    const widgetConfig = useMemo(() => (selectedWidget ? flattenWidgetConfig(selectedWidget) : {}), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedWidgetId, configVersion]);
+    const handleWidgetConfigSave = useCallback((config) => {
+        if (!editSchema || !selectedWidgetId || !selectedWidget)
+            return;
+        const updates = unflattenWidgetConfig(config, selectedWidget);
+        const newSchema = {
+            ...editSchema,
+            widgets: editSchema.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
+        };
+        setEditSchema(newSchema);
+        saveSchema(newSchema);
+        setConfigVersion((v) => v + 1);
+    }, [editSchema, selectedWidgetId, selectedWidget, saveSchema]);
+    const handleWidgetFieldChange = useCallback((field, value) => {
+        if (!selectedWidgetId)
+            return;
+        setEditSchema((prev) => {
+            if (!prev)
+                return prev;
+            const widget = prev.widgets?.find((w) => w.id === selectedWidgetId);
+            if (!widget)
+                return prev;
+            const flat = flattenWidgetConfig(widget);
+            flat[field] = value;
+            const updates = unflattenWidgetConfig(flat, widget);
+            return {
+                ...prev,
+                widgets: prev.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
+            };
+        });
+    }, [selectedWidgetId]);
+    // ---- Metadata-driven dropdown options -----------------------------------
+    const availableObjects = useMemo(() => {
+        if (!metadataObjects?.length)
+            return undefined;
+        return metadataObjects.map((obj) => ({
+            value: obj.name,
+            label: obj.label || obj.name,
+        }));
+    }, [metadataObjects]);
+    const availableFields = useMemo(() => {
+        const objectName = selectedWidget?.object;
+        if (!objectName || !metadataObjects?.length)
+            return undefined;
+        const obj = metadataObjects.find((o) => o.name === objectName);
+        if (!obj?.fields)
+            return undefined;
+        const fields = obj.fields;
+        if (Array.isArray(fields)) {
+            return fields
+                .filter((f) => f.name)
+                .map((f) => ({ value: f.name, label: f.label || f.name }));
+        }
+        // fields can be Record<string, FieldMetadata>
+        return Object.entries(fields).map(([key, f]) => ({
+            value: key,
+            label: f.label || key,
+        }));
+    }, [selectedWidget?.object, metadataObjects]);
+    // ---- Loading / not-found guards -----------------------------------------
+    if (isLoading) {
+        return _jsx(SkeletonDashboard, {});
+    }
+    if (!dashboard) {
+        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(LayoutDashboard, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Dashboard Not Found" }), _jsxs(EmptyDescription, { children: ["The dashboard \"", dashboardName, "\" could not be found. It may have been removed or renamed."] })] }) }));
+    }
+    const previewSchema = editSchema || dashboard;
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: resolveI18nLabel(dashboard.label, t) || dashboard.name }), dashboard.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: resolveI18nLabel(dashboard.description, t) }))] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, modalHandler: modalHandler, scriptHandlers: scriptHandlers }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
+                    type: 'object-form',
+                    formType: 'modal',
+                    objectName: modalState.schema.objectName,
+                    mode: modalState.schema.mode || 'create',
+                    recordId: modalState.schema.recordId,
+                    title: modalState.schema.title,
+                    description: modalState.schema.description,
+                    fields: modalState.schema.fields,
+                    open: true,
+                    onOpenChange: (open) => { if (!open)
+                        closeModal({ success: false }); },
+                    onSuccess: (data) => { closeModal({ success: true, reload: true, data }); },
+                    onCancel: () => { closeModal({ success: false }); },
+                    showSubmit: true,
+                    showCancel: true,
+                }, dataSource: adapter })) : modalState ? (_jsx(Dialog, { open: true, onOpenChange: (open) => { if (!open)
+                    closeModal({ success: false }); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: modalState.schema?.title || 'Action' }), modalState.schema?.description && (_jsx(DialogDescription, { children: modalState.schema.description }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => closeModal({ success: false }), children: "Cancel" }), _jsx(Button, { onClick: () => closeModal({ success: true }), children: "OK" })] })] }) })) : null] }));
+}

package/dist/views/DesignDrawer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * DesignDrawer
+ *
+ * A right-side drawer that hosts visual editors (PageCanvasEditor / DashboardEditor)
+ * for inline editing with real-time preview.  Uses the Shadcn Sheet primitive so the
+ * main workspace remains visible while the user edits.
+ */
+export interface DesignDrawerProps {
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Called when the drawer requests close */
+    onOpenChange: (open: boolean) => void;
+    /** Human-readable title shown in the drawer header */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** The current schema (PageSchema | DashboardSchema) */
+    schema: any;
+    /** Called when the editor modifies the schema — parent updates its own state for live preview */
+    onSchemaChange: (updated: any) => void;
+    /** sys_page | sys_dashboard */
+    collection: string;
+    /** Record key for the update call */
+    recordName: string;
+    /** Render prop: receives (schema, onChange) and returns the editor JSX */
+    children: (schema: any, onChange: (updated: any) => void) => React.ReactNode;
+}
+export declare function DesignDrawer({ open, onOpenChange, title, description, schema, onSchemaChange, collection, recordName, children, }: DesignDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/DesignDrawer.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DesignDrawer
+ *
+ * A right-side drawer that hosts visual editors (PageCanvasEditor / DashboardEditor)
+ * for inline editing with real-time preview.  Uses the Shadcn Sheet primitive so the
+ * main workspace remains visible while the user edits.
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, } from '@object-ui/components';
+import { toast } from 'sonner';
+import { useAdapter } from '../providers/AdapterProvider';
+export function DesignDrawer({ open, onOpenChange, title, description, schema, onSchemaChange, collection, recordName, children, }) {
+    const dataSource = useAdapter();
+    const schemaRef = useRef(schema);
+    schemaRef.current = schema;
+    const saveSchema = useCallback(async (toSave) => {
+        try {
+            if (dataSource) {
+                await dataSource.update(collection, recordName, toSave);
+                return true;
+            }
+        }
+        catch (err) {
+            console.warn('[DesignDrawer] Auto-save failed:', err);
+            // Save errors are non-blocking; user can retry via Ctrl+S
+        }
+        return false;
+    }, [dataSource, collection, recordName]);
+    const handleChange = useCallback(async (updated) => {
+        onSchemaChange(updated);
+        await saveSchema(updated);
+    }, [onSchemaChange, saveSchema]);
+    // Ctrl+S / Cmd+S keyboard shortcut to explicitly save while drawer is open
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                saveSchema(schemaRef.current).then((ok) => {
+                    if (ok)
+                        toast.success(`${title} saved`);
+                });
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [open, saveSchema, title]);
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: false, children: _jsxs(SheetContent, { side: "right", hideOverlay: true, className: "w-full sm:w-[540px] sm:max-w-[540px] lg:w-[640px] lg:max-w-[640px] p-0 flex flex-col", "data-testid": "design-drawer", children: [_jsxs(SheetHeader, { className: "px-4 py-3 border-b shrink-0", children: [_jsx(SheetTitle, { children: title }), _jsx(SheetDescription, { className: description ? '' : 'sr-only', children: description || `Visual editor — configure and preview ${title}` })] }), _jsx("div", { className: "flex-1 overflow-auto p-4", children: children(schema, handleChange) })] }) }));
+}

package/dist/views/MetadataInspector.d.ts

@@ -0,0 +1,40 @@
+/**
+ * MetadataInspector
+ *
+ * Shared debug panel that shows raw JSON metadata for any view.
+ * Used across ObjectView, DashboardView, PageView, ReportView, and RecordDetailView.
+ */
+interface MetadataSection {
+    title: string;
+    data: any;
+}
+interface MetadataInspectorProps {
+    /** Sections of metadata to display */
+    sections: MetadataSection[];
+    /** Whether the panel is open */
+    open: boolean;
+    /** Toggle callback */
+    onToggle: () => void;
+}
+/**
+ * Toggle button for the metadata inspector.
+ * Place this in your header/toolbar area.
+ */
+export declare function MetadataToggle({ open, onToggle, className }: {
+    open: boolean;
+    onToggle: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The side panel that renders JSON metadata sections.
+ */
+export declare function MetadataPanel({ sections, open }: Omit<MetadataInspectorProps, 'onToggle'>): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to manage MetadataInspector open/close state.
+ * Automatically opens when `?__debug` URL parameter is present.
+ */
+export declare function useMetadataInspector(): {
+    showDebug: boolean;
+    toggleDebug: () => void;
+};
+export {};

package/dist/views/MetadataInspector.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MetadataInspector
+ *
+ * Shared debug panel that shows raw JSON metadata for any view.
+ * Used across ObjectView, DashboardView, PageView, ReportView, and RecordDetailView.
+ */
+import { useState, useMemo } from 'react';
+import { Button } from '@object-ui/components';
+import { Code2, Copy, Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { parseDebugFlags } from '@object-ui/core';
+/**
+ * Toggle button for the metadata inspector.
+ * Place this in your header/toolbar area.
+ */
+export function MetadataToggle({ open, onToggle, className }) {
+    return (_jsxs(Button, { size: "sm", variant: open ? 'secondary' : 'outline', onClick: onToggle, className: `shadow-none gap-2 ${className || ''}`, title: "Toggle Metadata Inspector", children: [_jsx(Code2, { className: "h-4 w-4" }), _jsx("span", { className: "hidden lg:inline", children: "Metadata" })] }));
+}
+/**
+ * The side panel that renders JSON metadata sections.
+ */
+export function MetadataPanel({ sections, open }) {
+    if (!open)
+        return null;
+    const [expandedSections, setExpandedSections] = useState(['0']);
+    const [copiedIndex, setCopiedIndex] = useState(null);
+    const handleCopy = async (data, index) => {
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+            setCopiedIndex(index);
+            setTimeout(() => setCopiedIndex(null), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    const toggleSection = (index) => {
+        setExpandedSections(prev => prev.includes(index)
+            ? prev.filter(i => i !== index)
+            : [...prev, index]);
+    };
+    return (_jsxs("div", { className: "w-80 border-l bg-background p-0 overflow-hidden flex flex-col shrink-0 z-20 transition-all", children: [_jsxs("div", { className: "px-4 py-3 border-b bg-muted/5 flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Metadata Inspector" }), _jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "JSON" })] }), _jsx("div", { className: "flex-1 overflow-auto", children: sections.map((section, index) => {
+                    const sectionId = String(index);
+                    const isExpanded = expandedSections.includes(sectionId);
+                    const isCopied = copiedIndex === index;
+                    return (_jsxs("div", { className: "border-b last:border-b-0", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 hover:bg-muted/5 transition-colors", children: [_jsxs("button", { onClick: () => toggleSection(sectionId), className: "flex-1 flex items-center justify-between text-left", children: [_jsx("h4", { className: "text-xs font-semibold text-foreground", children: section.title }), isExpanded ? (_jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground ml-2" })) : (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground ml-2" }))] }), _jsx("button", { onClick: () => handleCopy(section.data, index), className: "p-1 hover:bg-muted rounded transition-colors ml-2", title: "Copy JSON", children: isCopied ? (_jsx(Check, { className: "h-3 w-3 text-green-600" })) : (_jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) })] }), isExpanded && (_jsx("div", { className: "px-4 pb-4", children: _jsx("div", { className: "relative rounded-md border border-border/50 bg-muted/5 overflow-hidden", children: _jsx("pre", { className: "text-[11px] leading-relaxed p-3 overflow-auto max-h-96 font-mono text-foreground/90", children: JSON.stringify(section.data, null, 2) }) }) }))] }, index));
+                }) })] }));
+}
+/**
+ * Hook to manage MetadataInspector open/close state.
+ * Automatically opens when `?__debug` URL parameter is present.
+ */
+export function useMetadataInspector() {
+    const autoOpen = useMemo(() => {
+        try {
+            return typeof window !== 'undefined'
+                ? parseDebugFlags(window.location.search).enabled
+                : false;
+        }
+        catch {
+            return false;
+        }
+    }, []);
+    const [showDebug, setShowDebug] = useState(autoOpen);
+    return {
+        showDebug,
+        toggleDebug: () => setShowDebug((prev) => !prev),
+    };
+}

package/dist/views/ObjectView.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 '@object-ui/plugin-grid';
+import '@object-ui/plugin-kanban';
+import '@object-ui/plugin-calendar';
+export declare function ObjectView({ dataSource, objects, onEdit }: any): import("react/jsx-runtime").JSX.Element;