@object-ui/app-shell 3.3.0 → 3.3.1

package/dist/views/ReportView.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { ReportViewer, ReportConfigPanel } from '@object-ui/plugin-report';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { Pencil, BarChart3, Loader2 } from 'lucide-react';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useAdapter } from '../providers/AdapterProvider';
+// Fallback fields when no schema is available
+const FALLBACK_FIELDS = [
+    { value: 'month', label: 'Month', type: 'text' },
+    { value: 'revenue', label: 'Revenue', type: 'number' },
+    { value: 'count', label: 'Count', type: 'number' },
+    { value: 'region', label: 'Region', type: 'text' },
+    { value: 'product', label: 'Product', type: 'text' },
+    { value: 'source', label: 'Lead Source', type: 'text' },
+    { value: 'stage', label: 'Stage', type: 'text' },
+    { value: 'amount', label: 'Amount', type: 'number' },
+];
+export function ReportView({ dataSource }) {
+    const { reportName } = useParams();
+    const { showDebug } = useMetadataInspector();
+    const adapter = useAdapter();
+    const [configPanelOpen, setConfigPanelOpen] = useState(false);
+    // Version counter — incremented on save to refresh the stable config reference
+    const [configVersion, setConfigVersion] = useState(0);
+    // Find report definition from API-driven metadata
+    const { reports, objects, loading, refresh } = useMetadata();
+    const initialReport = reports?.find((r) => r.name === reportName);
+    const [reportData, setReportData] = useState(initialReport);
+    // Local schema state for live preview — initialized from metadata
+    const [editSchema, setEditSchema] = useState(null);
+    // State for report runtime data
+    const [reportRuntimeData, setReportRuntimeData] = useState([]);
+    const [dataLoading, setDataLoading] = useState(false);
+    // Derive available fields from object schema for filter/sort editors
+    // Uses live editSchema when available to respond to objectName changes
+    const availableFields = useMemo(() => {
+        const liveReport = editSchema || reportData;
+        const objName = liveReport?.objectName || liveReport?.dataSource?.object || liveReport?.dataSource?.resource;
+        if (objName && objects?.length) {
+            const objDef = objects.find((o) => o.name === objName);
+            if (objDef?.fields) {
+                const fields = objDef.fields;
+                if (Array.isArray(fields)) {
+                    return fields.map((f) => typeof f === 'string'
+                        ? { value: f, label: f, type: 'text' }
+                        : { value: f.name, label: f.label || f.name, type: f.type || 'text' });
+                }
+                return Object.entries(fields).map(([name, def]) => ({
+                    value: name,
+                    label: def.label || name,
+                    type: def.type || 'text',
+                }));
+            }
+        }
+        return FALLBACK_FIELDS;
+    }, [editSchema, reportData, objects]);
+    // ---- Save helper --------------------------------------------------------
+    const saveSchema = useCallback(async (schema) => {
+        try {
+            if (adapter) {
+                await adapter.update('sys_report', reportName, schema);
+                refresh().catch(() => { });
+            }
+        }
+        catch (err) {
+            console.warn('[ReportView] Auto-save failed:', err);
+        }
+    }, [adapter, reportName, refresh]);
+    // ---- Open / close config panel ------------------------------------------
+    const handleOpenConfigPanel = useCallback(() => {
+        setEditSchema(reportData);
+        setConfigPanelOpen(true);
+        setConfigVersion((v) => v + 1);
+    }, [reportData]);
+    const handleCloseConfigPanel = useCallback(() => {
+        setConfigPanelOpen(false);
+    }, []);
+    // ---- Report config panel handlers --------------------------------------
+    // Stabilize config reference: only recompute after explicit actions (panel
+    // open, save). configVersion is incremented on those actions.
+    // This prevents useConfigDraft from resetting the draft on every live field
+    // change (same pattern as DashboardView's dashboardConfig).
+    const reportConfig = useMemo(() => editSchema || reportData, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configVersion]);
+    const handleReportConfigSave = useCallback((config) => {
+        setEditSchema(config);
+        saveSchema(config);
+        setConfigVersion((v) => v + 1);
+    }, [saveSchema]);
+    const handleReportFieldChange = useCallback((field, value) => {
+        setEditSchema((prev) => ({ ...prev, [field]: value }));
+    }, []);
+    // Sync reportData when metadata finishes loading or reportName changes
+    useEffect(() => {
+        setReportData(initialReport);
+    }, [initialReport]);
+    // When metadata refreshes, discard stale editSchema if the config panel
+    // is already closed.
+    useEffect(() => {
+        if (!configPanelOpen) {
+            setEditSchema(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialReport]);
+    // Load report runtime data when report definition changes.
+    // Use the live editSchema (when available) so that config panel changes
+    // to objectName, filters, or limit are immediately reflected in the preview.
+    const dataFetchSource = editSchema || reportData;
+    // Memoize serialized dependency keys to avoid re-fetching on every render
+    const filtersKey = useMemo(() => JSON.stringify(dataFetchSource?.filters), [dataFetchSource?.filters]);
+    const dataSourceKey = useMemo(() => JSON.stringify(dataFetchSource?.dataSource), [dataFetchSource?.dataSource]);
+    const inlineDataKey = useMemo(() => JSON.stringify(dataFetchSource?.data), [dataFetchSource?.data]);
+    useEffect(() => {
+        if (!dataFetchSource || !dataSource) {
+            setReportRuntimeData([]);
+            return;
+        }
+        // If report has inline data, use it directly
+        if (dataFetchSource.data && Array.isArray(dataFetchSource.data)) {
+            setReportRuntimeData(dataFetchSource.data);
+            return;
+        }
+        // If report has a dataSource config, fetch data using it
+        if (dataFetchSource.dataSource) {
+            const fetchDataFromSource = async () => {
+                setDataLoading(true);
+                try {
+                    // Use the dataSource configuration to fetch data
+                    const resource = dataFetchSource.dataSource.object || dataFetchSource.dataSource.resource;
+                    if (!resource) {
+                        console.warn('ReportView: dataSource missing object/resource property');
+                        setReportRuntimeData([]);
+                        return;
+                    }
+                    const result = await dataSource.find(resource, {
+                        $filter: dataFetchSource.dataSource.filter,
+                        $orderby: dataFetchSource.dataSource.sort,
+                        $top: dataFetchSource.dataSource.limit,
+                    });
+                    setReportRuntimeData(result.data || []);
+                }
+                catch (error) {
+                    console.error('ReportView: Failed to load data from dataSource', error);
+                    setReportRuntimeData([]);
+                }
+                finally {
+                    setDataLoading(false);
+                }
+            };
+            fetchDataFromSource();
+            return;
+        }
+        // If report has an objectName, fetch data from that object
+        if (dataFetchSource.objectName) {
+            const fetchDataFromObject = async () => {
+                setDataLoading(true);
+                try {
+                    const result = await dataSource.find(dataFetchSource.objectName, {
+                        $filter: dataFetchSource.filters,
+                        $orderby: dataFetchSource.sort,
+                        $top: dataFetchSource.limit || 100, // Default limit to avoid fetching too much data
+                    });
+                    setReportRuntimeData(result.data || []);
+                }
+                catch (error) {
+                    console.error('ReportView: Failed to load data from objectName', error);
+                    setReportRuntimeData([]);
+                }
+                finally {
+                    setDataLoading(false);
+                }
+            };
+            fetchDataFromObject();
+            return;
+        }
+        // No data source configured
+        setReportRuntimeData([]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        dataFetchSource?.objectName,
+        dataFetchSource?.limit,
+        filtersKey,
+        dataSourceKey,
+        inlineDataKey,
+        dataSource,
+    ]);
+    if (loading) {
+        return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }));
+    }
+    if (!initialReport || !reportData) {
+        if (!loading && !initialReport) {
+            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(BarChart3, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Report Not Found" }), _jsxs(EmptyDescription, { children: ["The report \"", reportName, "\" could not be found. It may have been removed or renamed."] })] }) }));
+        }
+        return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }));
+    }
+    // Wrap the report definition in the ReportViewer schema
+    // The ReportViewer expects a schema property which is of type ReportViewerSchema
+    // That schema has a 'report' property which is the actual report definition (ReportSchema)
+    // Map @objectstack/spec report format to @object-ui/types ReportSchema:
+    //   - 'label' → 'title'
+    //   - 'columns' (with 'field') → 'fields' (with 'name') + auto-generate 'sections'
+    const mapReportForViewer = (src) => {
+        const mapped = { ...src };
+        if (!mapped.title && mapped.label) {
+            mapped.title = mapped.label;
+        }
+        // Map spec 'columns' (field/label/aggregate) → ReportSchema 'fields' (name/label/aggregation)
+        if (!mapped.fields && Array.isArray(mapped.columns)) {
+            mapped.fields = mapped.columns.map((col) => ({
+                name: col.field || col.name,
+                label: col.label,
+                type: col.type,
+                format: col.format,
+                renderAs: col.renderAs,
+                colorMap: col.colorMap,
+                ...(col.aggregate ? { aggregation: col.aggregate, showInSummary: true } : {}),
+            }));
+        }
+        // Always regenerate sections from current fields so that live config
+        // changes (e.g. field picker updates) are immediately reflected in
+        // the preview.  This fixes the linkage bug where config panel edits
+        // did not update the rendered report.
+        if (mapped.fields && Array.isArray(mapped.fields) && mapped.fields.length > 0) {
+            const hasSummaryFields = mapped.fields.some((f) => f.showInSummary || f.aggregation);
+            const reportType = mapped.reportType || 'tabular';
+            const sections = [];
+            if (reportType === 'summary' || hasSummaryFields) {
+                sections.push({ type: 'summary', title: 'Key Metrics' });
+            }
+            sections.push({
+                type: 'table',
+                title: 'Details',
+                columns: mapped.fields.map((f) => ({
+                    name: f.name,
+                    label: f.label,
+                    type: f.type,
+                    format: f.format,
+                    renderAs: f.renderAs,
+                    colorMap: f.colorMap,
+                })),
+            });
+            // Generate chart section from chartConfig if configured
+            if (mapped.chartConfig?.chartType) {
+                sections.push({
+                    type: 'chart',
+                    title: 'Chart',
+                    chart: {
+                        type: 'chart',
+                        chartType: mapped.chartConfig.chartType,
+                        xAxisField: mapped.chartConfig.xAxisField,
+                        yAxisFields: mapped.chartConfig.yAxisFields,
+                    },
+                });
+            }
+            // Preserve any user-defined chart sections from the original schema
+            if (Array.isArray(src.sections)) {
+                const chartSections = src.sections.filter((s) => s.type === 'chart' && !mapped.chartConfig?.chartType);
+                sections.push(...chartSections);
+            }
+            mapped.sections = sections;
+        }
+        else if (!mapped.sections) {
+            // No fields and no sections — leave empty
+            mapped.sections = [];
+        }
+        return mapped;
+    };
+    // Use live-edited schema for preview (persists after closing panel until metadata refreshes)
+    const previewReport = editSchema || reportData;
+    const reportForViewer = mapReportForViewer(previewReport);
+    const viewerSchema = {
+        type: 'report-viewer',
+        report: reportForViewer, // The report definition
+        data: reportRuntimeData, // Runtime data fetched from the data source
+        showToolbar: true,
+        allowExport: true,
+        loading: dataLoading, // Loading state for data fetching
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] }) })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(ReportViewer, { schema: viewerSchema }) }) }), _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+}

package/dist/views/SearchResultsPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SearchResultsPage
+ *
+ * A dedicated search results page accessible via /apps/:appName/search?q=...
+ * Extends the command palette with a full-page search experience, showing
+ * objects, dashboards, pages, and reports matching the query.
+ * @module
+ */
+export declare function SearchResultsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/views/SearchResultsPage.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SearchResultsPage
+ *
+ * A dedicated search results page accessible via /apps/:appName/search?q=...
+ * Extends the command palette with a full-page search experience, showing
+ * objects, dashboards, pages, and reports matching the query.
+ * @module
+ */
+import { useState, useMemo } from 'react';
+import { useSearchParams, Link, useParams } from 'react-router-dom';
+import { Input, Card, CardContent, Badge, } from '@object-ui/components';
+import { Search, Database, LayoutDashboard, FileText, BarChart3, ArrowLeft, } from 'lucide-react';
+import { useMetadata } from '../providers/MetadataProvider';
+/** Flatten nested navigation groups into a flat list of leaf items */
+function flattenNavigation(items) {
+    const result = [];
+    for (const item of items) {
+        if (item.type === 'group' && item.children) {
+            result.push(...flattenNavigation(item.children));
+        }
+        else {
+            result.push(item);
+        }
+    }
+    return result;
+}
+const TYPE_ICONS = {
+    object: Database,
+    dashboard: LayoutDashboard,
+    page: FileText,
+    report: BarChart3,
+};
+const TYPE_COLORS = {
+    object: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+    dashboard: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
+    page: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+    report: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
+};
+export function SearchResultsPage() {
+    const { appName } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const queryParam = searchParams.get('q') || '';
+    const [query, setQuery] = useState(queryParam);
+    const { apps: metadataApps } = useMetadata();
+    const apps = metadataApps || [];
+    const activeApp = apps.find((a) => a.name === appName) || apps[0];
+    const baseUrl = `/apps/${appName}`;
+    // Build searchable items from navigation
+    const allItems = useMemo(() => {
+        if (!activeApp)
+            return [];
+        const navItems = flattenNavigation(activeApp.navigation || []);
+        return navItems.map((item) => {
+            let href = '#';
+            if (item.type === 'object') {
+                href = `${baseUrl}/${item.objectName}`;
+                if (item.viewName)
+                    href += `/view/${item.viewName}`;
+            }
+            else if (item.type === 'dashboard')
+                href = `${baseUrl}/dashboard/${item.dashboardName}`;
+            else if (item.type === 'page')
+                href = `${baseUrl}/page/${item.pageName}`;
+            else if (item.type === 'report')
+                href = `${baseUrl}/report/${item.reportName}`;
+            return {
+                id: item.id,
+                label: item.label || item.objectName || item.dashboardName || item.pageName || item.reportName || '',
+                href,
+                type: item.type,
+                description: item.description,
+            };
+        }).filter((item) => item.href !== '#');
+    }, [activeApp, baseUrl]);
+    // Filter results
+    const results = useMemo(() => {
+        if (!query.trim())
+            return allItems;
+        const lower = query.toLowerCase();
+        return allItems.filter(item => item.label.toLowerCase().includes(lower) ||
+            item.type.toLowerCase().includes(lower) ||
+            (item.description && item.description.toLowerCase().includes(lower)));
+    }, [allItems, query]);
+    const handleSearch = (value) => {
+        setQuery(value);
+        setSearchParams(value ? { q: value } : {});
+    };
+    // Group results by type
+    const grouped = useMemo(() => {
+        var _a;
+        const groups = {};
+        for (const r of results) {
+            (groups[_a = r.type] || (groups[_a] = [])).push(r);
+        }
+        return groups;
+    }, [results]);
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6 max-w-4xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Link, { to: baseUrl, className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back"] }), _jsx("h1", { className: "text-xl font-semibold", children: "Search" })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: "search-results-input", className: "sr-only", children: "Search objects, dashboards, pages, reports" }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "search-results-input", value: query, onChange: (e) => handleSearch(e.target.value), placeholder: "Search objects, dashboards, pages, reports...", className: "pl-10 h-11 text-base", autoFocus: true })] }), _jsx("div", { className: "text-sm text-muted-foreground", children: query.trim()
+                    ? `${results.length} result${results.length !== 1 ? 's' : ''} for "${query}"`
+                    : `${allItems.length} items available` }), results.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Search, { className: "h-12 w-12 text-muted-foreground/30 mb-4" }), _jsx("p", { className: "text-lg font-medium text-muted-foreground", children: "No results found" }), _jsx("p", { className: "text-sm text-muted-foreground/80 mt-1", children: "Try adjusting your search terms" })] })) : (_jsx("div", { className: "space-y-6", children: Object.entries(grouped).map(([type, items]) => {
+                    const TypeIcon = TYPE_ICONS[type] || Database;
+                    return (_jsxs("div", { children: [_jsxs("h2", { className: "text-sm font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [_jsx(TypeIcon, { className: "h-4 w-4" }), type.charAt(0).toUpperCase() + type.slice(1), "s", _jsx(Badge, { variant: "secondary", className: "ml-1 text-xs", children: items.length })] }), _jsx("div", { className: "grid gap-2", children: items.map(item => {
+                                    const ItemIcon = TYPE_ICONS[item.type] || Database;
+                                    return (_jsx(Link, { to: item.href, className: "rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(Card, { className: "hover:bg-accent/50 transition-colors cursor-pointer", children: _jsxs(CardContent, { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded ${TYPE_COLORS[item.type] || ''}`, children: _jsx(ItemIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: item.label }), item.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate", children: item.description }))] }), _jsx(Badge, { variant: "outline", className: "text-xs shrink-0", children: item.type })] }) }) }, item.id));
+                                }) })] }, type));
+                }) }))] }));
+}

package/dist/views/ViewConfigPanel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * ViewConfigPanel — Schema-Driven
+ *
+ * Airtable-style right-side configuration panel for inline view editing.
+ * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
+ * useConfigDraft, replacing ~1600 lines of imperative code with a
+ * declarative schema factory.
+ *
+ * All changes are buffered in a local draft state. Clicking Save commits
+ * the draft via onSave; Discard resets to the original activeView.
+ */
+/** Editor panel types that can be opened from clickable rows */
+export type EditorPanelType = 'columns' | 'filter' | 'sort';
+export interface ViewConfigPanelProps {
+    /** Whether the panel is open */
+    open: boolean;
+    /** Close callback */
+    onClose: () => void;
+    /** Panel mode: "edit" for existing views, "create" for new views */
+    mode?: 'create' | 'edit';
+    /** The active view definition */
+    activeView: {
+        id: string;
+        label?: string;
+        type?: string;
+        columns?: string[];
+        filter?: any[];
+        sort?: any[];
+        description?: string;
+        showSearch?: boolean;
+        showFilters?: boolean;
+        showSort?: boolean;
+        allowExport?: boolean;
+        showDescription?: boolean;
+        addRecordViaForm?: boolean;
+        exportOptions?: any;
+        [key: string]: any;
+    };
+    /** The object definition */
+    objectDef: {
+        name: string;
+        label?: string;
+        description?: string;
+        fields?: Record<string, any>;
+        [key: string]: any;
+    };
+    /** Optional record count to display */
+    recordCount?: number;
+    /** Called when any view config field changes (local draft update) */
+    onViewUpdate?: (field: string, value: any) => void;
+    /** Called to persist all draft changes */
+    onSave?: (draft: Record<string, any>) => void;
+    /** Called when create-mode view is created */
+    onCreate?: (config: Record<string, any>) => void;
+}
+export declare function ViewConfigPanel({ open, onClose, mode, activeView, objectDef, onViewUpdate, onSave, onCreate }: ViewConfigPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/ViewConfigPanel.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ViewConfigPanel — Schema-Driven
+ *
+ * Airtable-style right-side configuration panel for inline view editing.
+ * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
+ * useConfigDraft, replacing ~1600 lines of imperative code with a
+ * declarative schema factory.
+ *
+ * All changes are buffered in a local draft state. Clicking Save commits
+ * the draft via onSave; Discard resets to the original activeView.
+ */
+import { useMemo, useEffect, useRef, useCallback } from 'react';
+import { ConfigPanelRenderer, useConfigDraft } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { buildViewConfigSchema, deriveFieldOptions, toFilterGroup, toSortItems, VIEW_TYPE_LABELS, } from '@object-ui/plugin-view';
+export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, objectDef, onViewUpdate, onSave, onCreate }) {
+    const { t } = useObjectTranslation();
+    const panelRef = useRef(null);
+    // Default empty view for create mode
+    const defaultNewView = useMemo(() => ({
+        id: `view_${Date.now()}`,
+        label: t('console.objectView.newView'),
+        type: 'grid',
+        columns: [],
+        filter: [],
+        sort: [],
+        showSearch: true,
+        showFilters: true,
+        showSort: true,
+    }), []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Stabilize source reference: only change when view ID changes.
+    // This prevents useConfigDraft from resetting on every parent re-render
+    // (same behavior as original useEffect with [activeView.id] dependency).
+    const stableKey = mode === 'create' ? 'create' : activeView.id;
+    const stableActiveView = useMemo(() => ({ ...activeView }), [stableKey]);
+    const effectiveActiveView = mode === 'create' ? defaultNewView : stableActiveView;
+    // Schema-driven draft state management
+    const { draft, isDirty, updateField, discard, undo, redo, canUndo, canRedo } = useConfigDraft(effectiveActiveView, {
+        mode,
+        onUpdate: onViewUpdate,
+    });
+    // Focus the panel when it opens for keyboard accessibility
+    useEffect(() => {
+        if (open && panelRef.current) {
+            panelRef.current.focus();
+        }
+    }, [open]);
+    // Derive field options from objectDef
+    const fieldOptions = useMemo(() => deriveFieldOptions(objectDef), [objectDef.fields]);
+    // Bridge: filter/sort → builder format
+    const filterGroupValue = useMemo(() => toFilterGroup(draft.filter), [draft.filter]);
+    const sortItemsValue = useMemo(() => toSortItems(draft.sort), [draft.sort]);
+    // Build schema
+    const schema = useMemo(() => buildViewConfigSchema({
+        t,
+        fieldOptions,
+        objectDef,
+        updateField,
+        filterGroupValue,
+        sortItemsValue,
+    }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue]);
+    // Override breadcrumb with dynamic view type
+    const viewType = draft.type || 'grid';
+    const dynamicSchema = useMemo(() => ({
+        ...schema,
+        breadcrumb: [t('console.objectView.page'), VIEW_TYPE_LABELS[viewType] || viewType],
+    }), [schema, t, viewType]);
+    // Save/discard handlers with create mode support
+    const handleSave = useCallback(() => {
+        if (mode === 'create') {
+            onCreate?.(draft);
+        }
+        else {
+            onSave?.(draft);
+        }
+        // Clear dirty state after save while preserving draft values
+        discard();
+    }, [draft, onSave, onCreate, mode, discard]);
+    const handleDiscard = useCallback(() => {
+        if (mode === 'create') {
+            onClose();
+            return;
+        }
+        discard();
+    }, [discard, mode, onClose]);
+    const panelTitle = mode === 'create'
+        ? t('console.objectView.createView')
+        : t('console.objectView.configureView');
+    return (_jsx(ConfigPanelRenderer, { open: open, onClose: onClose, schema: dynamicSchema, draft: draft, isDirty: isDirty, onFieldChange: updateField, onSave: handleSave, onDiscard: handleDiscard, onUndo: undo, onRedo: redo, canUndo: canUndo, canRedo: canRedo, undoLabel: t('designer.undo'), redoLabel: t('designer.redo'), objectDef: objectDef, saveLabel: t('console.objectView.save'), discardLabel: t('console.objectView.discard'), panelRef: panelRef, role: "complementary", ariaLabel: panelTitle, tabIndex: -1, testId: "view-config-panel", closeTitle: t('console.objectView.closePanel'), footerTestId: "view-config-footer", saveTestId: "view-config-save", discardTestId: "view-config-discard", className: "transition-all overflow-hidden" }));
+}

package/dist/views/index.d.ts

@@ -0,0 +1,11 @@
+export { ObjectView } from './ObjectView';
+export { RecordDetailView } from './RecordDetailView';
+export { DashboardView } from './DashboardView';
+export { PageView } from './PageView';
+export { ReportView } from './ReportView';
+export { SearchResultsPage } from './SearchResultsPage';
+export { ActionConfirmDialog } from './ActionConfirmDialog';
+export { ActionParamDialog } from './ActionParamDialog';
+export { MetadataToggle, MetadataPanel } from './MetadataInspector';
+export { ViewConfigPanel } from './ViewConfigPanel';
+export { DesignDrawer } from './DesignDrawer';

package/dist/views/index.js

@@ -0,0 +1,11 @@
+export { ObjectView } from './ObjectView';
+export { RecordDetailView } from './RecordDetailView';
+export { DashboardView } from './DashboardView';
+export { PageView } from './PageView';
+export { ReportView } from './ReportView';
+export { SearchResultsPage } from './SearchResultsPage';
+export { ActionConfirmDialog } from './ActionConfirmDialog';
+export { ActionParamDialog } from './ActionParamDialog';
+export { MetadataToggle, MetadataPanel } from './MetadataInspector';
+export { ViewConfigPanel } from './ViewConfigPanel';
+export { DesignDrawer } from './DesignDrawer';