@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/ScreenView.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ScreenView — the presentational body of a flow `screen` (framework
+ * screen-flow runtime, ADR-0019): the flat input-field list OR the named
+ * object's full create/edit form.
+ *
+ * Extracted from {@link FlowRunner} so the exact same renderer drives both the
+ * runtime (paused screen-flow → collect input → resume) and the Studio design
+ * preview ({@link ScreenPreview}). Keeping ONE renderer is deliberate: a
+ * separate preview reimplementation would drift from runtime — the
+ * simulator-vs-engine divergence fixed in #1927.
+ *
+ * It owns no submit/resume behaviour and no Dialog chrome — the caller frames
+ * it (the runtime wraps it in a Dialog + footer and resumes the run; the
+ * preview wraps it in a card and hides the persist bar).
+ */
+import { Input, Label, Textarea, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cn, } from '@object-ui/components';
+import { ObjectForm } from '@object-ui/plugin-form';
+/** Whether a screen renders the object-form body rather than the flat fields. */
+export function isObjectFormScreen(screen) {
+    return screen.kind === 'object-form' && !!screen.objectName;
+}
+/** Seed flat-field values from each field's `defaultValue`. */
+export function initialScreenValues(screen) {
+    const v = {};
+    for (const f of screen.fields)
+        if (f.defaultValue !== undefined)
+            v[f.name] = f.defaultValue;
+    return v;
+}
+export function ScreenView({ screen, values, onValueChange, dataSource, objects, objectForm, className }) {
+    if (isObjectFormScreen(screen)) {
+        const objectDef = Array.isArray(objects) ? objects.find((o) => o?.name === screen.objectName) : undefined;
+        const subforms = objectDef
+            ? (objectDef.form?.subforms ?? objectDef.formViews?.default?.subforms)
+            : undefined;
+        // Full object create/edit form (with inline master-detail grids). At runtime
+        // the form owns its own Save/Cancel bar; the preview hides it.
+        return (_jsx("div", { className: cn('py-2', className), children: dataSource ? (_jsx(ObjectForm, { schema: {
+                    type: 'object-form',
+                    formType: 'simple',
+                    objectName: screen.objectName,
+                    mode: screen.mode === 'edit' ? 'edit' : 'create',
+                    recordId: screen.mode === 'edit' ? screen.recordId : undefined,
+                    ...(screen.defaults ? { initialValues: screen.defaults } : {}),
+                    layout: 'vertical',
+                    subforms,
+                    onSuccess: objectForm?.onSuccess,
+                    onCancel: objectForm?.onCancel,
+                    showSubmit: objectForm?.showSubmit ?? true,
+                    showCancel: objectForm?.showCancel ?? true,
+                    submitText: objectForm?.submitText ?? 'Save & Continue',
+                    cancelText: objectForm?.cancelText ?? 'Cancel',
+                }, dataSource: dataSource }, screen.nodeId)) : (_jsx("div", { className: "text-sm text-destructive py-4", children: objectForm?.noDataSourceMessage ?? 'This step renders an object form but no data source is available.' })) }));
+    }
+    return (_jsx("div", { className: cn('space-y-4 py-2', className), children: screen.fields.map((f) => (_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `ff-${f.name}`, className: "text-sm", children: [f.label || f.name, f.required && _jsx("span", { className: "text-destructive", children: " *" })] }), _jsx(FieldInput, { field: f, value: values[f.name], onChange: (v) => onValueChange(f.name, v) })] }, f.name))) }));
+}
+export function FieldInput({ field, value, onChange }) {
+    const id = `ff-${field.name}`;
+    const t = (field.type || 'text').toLowerCase();
+    if (Array.isArray(field.options) && field.options.length > 0) {
+        return (_jsxs(Select, { value: value != null ? String(value) : undefined, onValueChange: (v) => onChange(v), children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: field.placeholder || 'Select…' }) }), _jsx(SelectContent, { children: field.options.map((o, i) => (_jsx(SelectItem, { value: String(o.value), children: o.label }, i))) })] }));
+    }
+    if (t === 'boolean' || t === 'checkbox') {
+        return _jsx(Checkbox, { id: id, checked: value === true, onCheckedChange: (c) => onChange(c === true) });
+    }
+    if (t === 'textarea' || t === 'markdown') {
+        return _jsx(Textarea, { id: id, value: value ?? '', placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) });
+    }
+    const htmlType = t === 'number' || t === 'currency' ? 'number' : t === 'email' ? 'email' : t === 'date' ? 'date' : 'text';
+    return (_jsx(Input, { id: id, type: htmlType, value: value ?? '', placeholder: field.placeholder, onChange: (e) => onChange(htmlType === 'number' ? (e.target.value === '' ? undefined : Number(e.target.value)) : e.target.value) }));
+}

package/dist/views/SearchResultsPage.d.ts

@@ -6,4 +6,4 @@
  * objects, dashboards, pages, and reports matching the query.
  * @module
  */
-export declare function SearchResultsPage(): import("react/jsx-runtime").JSX.Element;
+export declare function SearchResultsPage(): import("react").JSX.Element;

package/dist/views/SearchResultsPage.js

@@ -13,6 +13,9 @@ import { Input, Card, CardContent, Badge, } from '@object-ui/components';
 import { Search, Database, LayoutDashboard, FileText, BarChart3, ArrowLeft, } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { useMetadata } from '../providers/MetadataProvider';
+import { matchAppBySegment } from '../utils/appRoute';
+import { resolveHref } from '@object-ui/layout';
+import { useAuth } from '@object-ui/auth';
 /** Flatten nested navigation groups into a flat list of leaf items */
 function flattenNavigation(items) {
     const result = [];
@@ -46,30 +49,17 @@ export function SearchResultsPage() {
     const [query, setQuery] = useState(queryParam);
     const { apps: metadataApps } = useMetadata();
     const apps = metadataApps || [];
-    const activeApp = apps.find((a) => a.name === appName) || apps[0];
+    const activeApp = matchAppBySegment(apps, appName) || apps[0];
     const baseUrl = `/apps/${appName}`;
+    const { user } = useAuth();
     // Build searchable items from navigation
     const allItems = useMemo(() => {
         if (!activeApp)
             return [];
         const navItems = flattenNavigation(activeApp.navigation || []);
+        const templateContext = { currentUserId: user?.id ?? null };
         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}`;
-            else if (item.type === 'component' && item.componentRef) {
-                const segs = String(item.componentRef).split(':').filter(Boolean);
-                href = `${baseUrl}/component/${segs.join('/')}`;
-            }
+            const { href } = resolveHref(item, baseUrl, templateContext);
             return {
                 id: item.id,
                 label: item.label || item.objectName || item.dashboardName || item.pageName || item.reportName || '',
@@ -78,7 +68,7 @@ export function SearchResultsPage() {
                 description: item.description,
             };
         }).filter((item) => item.href !== '#');
-    }, [activeApp, baseUrl]);
+    }, [activeApp, baseUrl, user?.id]);
     // Filter results
     const results = useMemo(() => {
         if (!query.trim())

package/dist/views/ViewConfigPanel.d.ts

@@ -1,15 +1,22 @@
 /**
- * ViewConfigPanel — Airtable-style simplified configuration panel.
+ * ViewConfigPanel — the runtime ObjectView's right-rail "view editor".
  *
- * Renders a focused, opinionated set of sections (Page / Data /
- * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
- * Airtable's Interface designer right rail. Power-user sections (records,
- * sharing, accessibility) are intentionally excluded to keep the panel
- * approachable; they can be re-introduced later as a dedicated "advanced"
- * settings dialog if needed.
+ * MIGRATED: this panel now hosts the studio's spec-driven
+ * {@link ViewVariantInspector} instead of the legacy `buildViewConfigSchema`
+ * engine, so the runtime and the metadata studio share ONE inspector. The
+ * inspector renders the per-view-type config fields straight from
+ * `@objectstack/spec` (grid / kanban / calendar / gallery / …) plus the
+ * shared column / filter / sort / toolbar sections.
  *
- * All changes are buffered in a local draft state. Clicking Save commits
- * the draft via onSave; Discard resets to the original activeView.
+ * The runtime ObjectView keeps the active view as a FLAT NamedListView; the
+ * inspector authors a canonical ViewItem draft. {@link view-config-adapter}
+ * bridges the two shapes so the `sys_view` persistence path is untouched:
+ * edits live as a ViewItem draft while the panel is open, then flatten back
+ * to the runtime view shape on update / save / create.
+ *
+ * Field loading is network-free: `objectDef.fields` is mapped into the
+ * inspector's `objectFieldsOverride` so neither the inspector nor its
+ * column editor issue a `client.get('object', …)` request.
  */
 /** Editor panel types that can be opened from clickable rows */
 export type EditorPanelType = 'columns' | 'filter' | 'sort';
@@ -29,13 +36,6 @@ export interface ViewConfigPanelProps {
         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 */
@@ -54,5 +54,12 @@ export interface ViewConfigPanelProps {
     onSave?: (draft: Record<string, any>) => void;
     /** Called when create-mode view is created */
     onCreate?: (config: Record<string, any>) => void;
+    /**
+     * Studio metadata client — drives saves and the ADR-0034 draft/publish
+     * chrome ({@link RuntimeDraftBar}).
+     */
+    metadataClient?: any;
+    /** Called after a publish / discard so the host can refresh its read. */
+    onAfterChange?: () => void;
 }
-export declare function ViewConfigPanel({ open, onClose, mode, activeView, objectDef, onViewUpdate, onSave, onCreate }: ViewConfigPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViewConfigPanel({ open, onClose, mode, activeView, objectDef, onViewUpdate, onSave, onCreate, metadataClient, onAfterChange }: ViewConfigPanelProps): import("react").JSX.Element;

package/dist/views/ViewConfigPanel.js

@@ -1,112 +1,156 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * ViewConfigPanel — Airtable-style simplified configuration panel.
+ * ViewConfigPanel — the runtime ObjectView's right-rail "view editor".
  *
- * Renders a focused, opinionated set of sections (Page / Data /
- * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
- * Airtable's Interface designer right rail. Power-user sections (records,
- * sharing, accessibility) are intentionally excluded to keep the panel
- * approachable; they can be re-introduced later as a dedicated "advanced"
- * settings dialog if needed.
+ * MIGRATED: this panel now hosts the studio's spec-driven
+ * {@link ViewVariantInspector} instead of the legacy `buildViewConfigSchema`
+ * engine, so the runtime and the metadata studio share ONE inspector. The
+ * inspector renders the per-view-type config fields straight from
+ * `@objectstack/spec` (grid / kanban / calendar / gallery / …) plus the
+ * shared column / filter / sort / toolbar sections.
  *
- * All changes are buffered in a local draft state. Clicking Save commits
- * the draft via onSave; Discard resets to the original activeView.
+ * The runtime ObjectView keeps the active view as a FLAT NamedListView; the
+ * inspector authors a canonical ViewItem draft. {@link view-config-adapter}
+ * bridges the two shapes so the `sys_view` persistence path is untouched:
+ * edits live as a ViewItem draft while the panel is open, then flatten back
+ * to the runtime view shape on update / save / create.
+ *
+ * Field loading is network-free: `objectDef.fields` is mapped into the
+ * inspector's `objectFieldsOverride` so neither the inspector nor its
+ * column editor issue a `client.get('object', …)` request.
  */
 import { useMemo, useEffect, useRef, useCallback, useState } from 'react';
-import { ConfigPanelRenderer, useConfigDraft, Button } from '@object-ui/components';
-import { Settings2 } from 'lucide-react';
+import { Button } 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 }) {
+import { ViewVariantInspector } from './metadata-admin/inspectors/ViewVariantInspector';
+import { RuntimeDraftBar } from './RuntimeDraftBar';
+import { isFormFamilyKey } from './metadata-admin/view-variant-model';
+import { detectLocale } from './metadata-admin/i18n';
+import { runtimeViewToInspectorDraft, inspectorDraftToRuntimeView, } from './view-config-adapter';
+/**
+ * Map an Object definition's `fields` record into the inspector's flat field
+ * catalog so it can render field-reference pickers (columns, groupByField, …)
+ * without a network fetch.
+ */
+function mapObjectFields(objectDef) {
+    const fields = objectDef.fields;
+    if (!fields || typeof fields !== 'object')
+        return [];
+    return Object.entries(fields).map(([name, def]) => {
+        const f = (def ?? {});
+        return {
+            name,
+            label: typeof f.label === 'string' && f.label ? f.label : name,
+            type: typeof f.type === 'string' ? f.type : 'text',
+            hidden: f.hidden === true,
+        };
+    });
+}
+export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, objectDef, onViewUpdate, onSave, onCreate, metadataClient, onAfterChange }) {
     const { t } = useObjectTranslation();
     const panelRef = useRef(null);
-    // "Show advanced settings" — when false (default), the panel only shows
-    // the Airtable-essential subset. When true, every section/field is
-    // surfaced for power users. Reset whenever the panel closes so reopening
-    // returns to the simplified view.
-    const [showAdvanced, setShowAdvanced] = useState(false);
-    useEffect(() => {
-        if (!open)
-            setShowAdvanced(false);
-    }, [open]);
-    // Default empty view for create mode
+    const locale = useMemo(() => detectLocale(), []);
+    // Provisional id for a create-mode view. A lazy useState initializer runs
+    // exactly once, keeping the impure `Date.now()` out of render; the backend
+    // assigns the real `name` on create, so this only needs to be unique
+    // within the draft.
+    const [newViewId] = useState(() => `view_${Date.now()}`);
+    // Default empty view used to seed create mode.
     const defaultNewView = useMemo(() => ({
-        id: `view_${Date.now()}`,
+        id: newViewId,
         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).
+    // Inspector draft state. Rebuilt only when the source view ID (or create
+    // mode) changes — not on every parent re-render — so in-flight edits are
+    // not clobbered (same stabilization the legacy panel used with stableKey).
     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
+    const initialDraft = useMemo(() => runtimeViewToInspectorDraft(mode === 'create' ? defaultNewView : activeView, objectDef.name), [stableKey, objectDef.name]);
+    const [draft, setDraft] = useState(initialDraft);
+    const [isDirty, setIsDirty] = useState(false);
+    // Bumped on each edit-mode save so the draft/publish chrome surfaces the
+    // "unpublished changes" indicator immediately (the save writes a draft).
+    const [savedSignal, setSavedSignal] = useState(0);
+    // Mirror the committed draft into a ref so `handlePatch` can compute the
+    // next draft synchronously without a side-effecting state updater.
+    const draftRef = useRef(draft);
+    // Reset the draft when the source view changes — derived from `initialDraft`
+    // during render (React's "adjust state on prop change" pattern) rather than
+    // in an effect, so there's no extra render pass.
+    const lastDraftRef = useRef(initialDraft);
+    if (lastDraftRef.current !== initialDraft) {
+        lastDraftRef.current = initialDraft;
+        draftRef.current = initialDraft;
+        setDraft(initialDraft);
+        setIsDirty(false);
+    }
+    useEffect(() => { draftRef.current = draft; }, [draft]);
+    // 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. essentialOnly is the default; the user can opt-in to the
-    // full advanced surface via the "Show advanced settings" toggle below.
-    const schema = useMemo(() => buildViewConfigSchema({
-        t,
-        fieldOptions,
-        objectDef,
-        updateField,
-        filterGroupValue,
-        sortItemsValue,
-        essentialOnly: !showAdvanced,
-    }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue, showAdvanced]);
-    // 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
+    // Network-free field catalog sourced from the object definition the host
+    // already holds.
+    const objectFields = useMemo(() => mapObjectFields(objectDef), [objectDef.fields]); // eslint-disable-line react-hooks/exhaustive-deps
+    const familyKey = isFormFamilyKey(draft.viewKind) ? 'form' : 'list';
+    // Shallow-merge an inspector patch into the draft, then mirror the
+    // flattened runtime view back to the host field-by-field (matching the
+    // legacy onViewUpdate(field, value) contract ObjectView expects).
+    const handlePatch = useCallback((patch) => {
+        const next = { ...draftRef.current, ...patch };
+        draftRef.current = next;
+        setDraft(next);
+        setIsDirty(true);
+        if (onViewUpdate) {
+            const flat = inspectorDraftToRuntimeView(next);
+            for (const [field, value] of Object.entries(flat)) {
+                if (field === 'id')
+                    continue;
+                onViewUpdate(field, value);
+            }
+        }
+    }, [onViewUpdate]);
     const handleSave = useCallback(() => {
+        const flat = inspectorDraftToRuntimeView(draft);
         if (mode === 'create') {
-            onCreate?.(draft);
+            onCreate?.(flat);
         }
         else {
-            onSave?.(draft);
+            onSave?.(flat);
+            setSavedSignal((s) => s + 1);
         }
-        // Clear dirty state after save while preserving draft values
-        discard();
-    }, [draft, onSave, onCreate, mode, discard]);
+        setIsDirty(false);
+    }, [draft, onSave, onCreate, mode]);
     const handleDiscard = useCallback(() => {
         if (mode === 'create') {
             onClose();
             return;
         }
-        discard();
-    }, [discard, mode, onClose]);
+        setDraft(initialDraft);
+        setIsDirty(false);
+    }, [initialDraft, mode, onClose]);
+    // ADR-0034 (#1515): resume a pending draft into the inspector when the
+    // panel reopens (flag-ON only; the bar never fires this when the flag is
+    // off). The stored body is the flat runtime view, so adapt it back to the
+    // inspector draft shape before seeding.
+    const handleResumeDraft = useCallback((body) => {
+        const resumed = runtimeViewToInspectorDraft(body, objectDef.name);
+        draftRef.current = resumed;
+        setDraft(resumed);
+        setIsDirty(false);
+    }, [objectDef.name]);
     const panelTitle = mode === 'create'
         ? t('console.objectView.createView')
         : t('console.objectView.configureView');
-    // Header-extra: "Show advanced" toggle button. Subtle gear icon button
-    // sitting next to undo/redo/close — clearly affordant but not visually
-    // dominant. Title swaps between "Show advanced settings" and "Show fewer
-    // settings" so the user always knows what the next click will do.
-    const advancedToggle = (_jsx(Button, { size: "sm", variant: showAdvanced ? 'secondary' : 'ghost', onClick: () => setShowAdvanced(v => !v), className: "h-7 w-7 p-0", "data-testid": "view-config-advanced-toggle", "aria-pressed": showAdvanced, title: showAdvanced
-            ? t('console.objectView.showFewerSettings', { defaultValue: 'Show fewer settings' })
-            : t('console.objectView.showAdvancedSettings', { defaultValue: 'Show advanced settings' }), children: _jsx(Settings2, { className: "h-3.5 w-3.5" }) }));
-    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", headerExtra: advancedToggle, className: "transition-all overflow-hidden" }));
+    if (!open) {
+        // Keep the slide container (owned by ObjectView) able to collapse to
+        // zero width without rendering inspector internals while hidden.
+        return _jsx("div", { ref: panelRef, tabIndex: -1, "data-testid": "view-config-panel", "aria-hidden": true });
+    }
+    return (_jsxs("div", { ref: panelRef, tabIndex: -1, role: "complementary", "aria-label": panelTitle, "data-testid": "view-config-panel", className: "flex h-full flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(ViewVariantInspector, { type: "view", name: draft.name, draft: draft, variantKey: "config", familyKey: familyKey, isHome: true, readOnly: false, locale: locale, objectFieldsOverride: objectFields, onPatch: handlePatch }) }), _jsxs("div", { "data-testid": "view-config-footer", className: "flex items-center justify-end gap-2 border-t px-4 py-2.5", children: [mode === 'edit' && (_jsx(RuntimeDraftBar, { type: "view", name: activeView.id, metadataClient: metadataClient, dirty: isDirty, onResume: handleResumeDraft, savedSignal: savedSignal, onAfterChange: onAfterChange })), _jsx(Button, { variant: "ghost", size: "sm", onClick: handleDiscard, "data-testid": "view-config-discard", children: t('console.objectView.discard') }), _jsx(Button, { size: "sm", onClick: handleSave, disabled: mode === 'edit' && !isDirty, "data-testid": "view-config-save", children: t('console.objectView.save') })] })] }));
 }

package/dist/views/index.d.ts

@@ -8,7 +8,7 @@ export { ReportView } from './ReportView';
 export { SearchResultsPage } from './SearchResultsPage';
 export { ActionConfirmDialog } from './ActionConfirmDialog';
 export { ActionParamDialog } from './ActionParamDialog';
+export { ActionResultDialog, type ResultDialogState } from './ActionResultDialog';
 export { MetadataToggle, MetadataPanel } from './MetadataInspector';
 export { ViewConfigPanel } from './ViewConfigPanel';
 export { CreateViewDialog } from './CreateViewDialog';
-export { DesignDrawer } from './DesignDrawer';

package/dist/views/index.js

@@ -7,7 +7,7 @@ export { ReportView } from './ReportView';
 export { SearchResultsPage } from './SearchResultsPage';
 export { ActionConfirmDialog } from './ActionConfirmDialog';
 export { ActionParamDialog } from './ActionParamDialog';
+export { ActionResultDialog } from './ActionResultDialog';
 export { MetadataToggle, MetadataPanel } from './MetadataInspector';
 export { ViewConfigPanel } from './ViewConfigPanel';
 export { CreateViewDialog } from './CreateViewDialog';
-export { DesignDrawer } from './DesignDrawer';

package/dist/views/metadata-admin/AuditPanel.d.ts

@@ -0,0 +1,28 @@
+/**
+ * AuditPanel — ADR-0010 §3.6 / Phase 4.1 protection-audit trail.
+ *
+ * Renders the rows in `sys_metadata_audit` for a single metadata
+ * item (type + name): every save/publish/rollback/delete/reset
+ * attempt, with the lock state at the moment of the call and the
+ * decision (`allowed` / `denied` / `forced`). This is the compliance
+ * surface promised by the metadata-protection ADR — denied attempts
+ * never reach the regular history log, so this is the only place
+ * where blocked writes are visible.
+ *
+ * Data source: `client.audit(type, name)` →
+ *   `GET /api/v1/meta/:type/:name/audit`.
+ *
+ * Empty state is friendly: a fresh install has no rows because the
+ * audit writer only fires on actual write attempts, so "no events"
+ * just means nobody has tried to change this item.
+ */
+import * as React from 'react';
+import type { MetadataClient } from '@object-ui/data-objectstack';
+import { type SupportedLocale } from './i18n';
+export interface AuditPanelProps {
+    type: string;
+    name: string;
+    client: MetadataClient;
+    locale?: SupportedLocale | string;
+}
+export declare function AuditPanel({ type, name, client, locale, }: AuditPanelProps): React.JSX.Element;

package/dist/views/metadata-admin/AuditPanel.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * AuditPanel — ADR-0010 §3.6 / Phase 4.1 protection-audit trail.
+ *
+ * Renders the rows in `sys_metadata_audit` for a single metadata
+ * item (type + name): every save/publish/rollback/delete/reset
+ * attempt, with the lock state at the moment of the call and the
+ * decision (`allowed` / `denied` / `forced`). This is the compliance
+ * surface promised by the metadata-protection ADR — denied attempts
+ * never reach the regular history log, so this is the only place
+ * where blocked writes are visible.
+ *
+ * Data source: `client.audit(type, name)` →
+ *   `GET /api/v1/meta/:type/:name/audit`.
+ *
+ * Empty state is friendly: a fresh install has no rows because the
+ * audit writer only fires on actual write attempts, so "no events"
+ * just means nobody has tried to change this item.
+ */
+import * as React from 'react';
+import { RefreshCw, Loader2, ShieldCheck, ShieldAlert, ShieldX } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { t } from './i18n';
+function fmtTime(iso) {
+    if (!iso)
+        return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return d.toLocaleString();
+}
+function outcomeBadge(outcome) {
+    const map = {
+        allowed: {
+            label: 'allowed',
+            cls: 'bg-emerald-50 text-emerald-700 border-emerald-200',
+            Icon: ShieldCheck,
+        },
+        denied: {
+            label: 'denied',
+            cls: 'bg-rose-50 text-rose-700 border-rose-200',
+            Icon: ShieldX,
+        },
+        forced: {
+            label: 'forced',
+            cls: 'bg-amber-50 text-amber-700 border-amber-200',
+            Icon: ShieldAlert,
+        },
+    };
+    const v = map[outcome] ?? map.allowed;
+    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide ${v.cls}`, children: [_jsx(v.Icon, { className: "h-3 w-3" }), v.label] }));
+}
+export function AuditPanel({ type, name, client, locale = 'en-US', }) {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [events, setEvents] = React.useState(null);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await client.audit(type, name, { limit: 100 });
+            setEvents(res.events ?? []);
+        }
+        catch (err) {
+            setError(String(err?.message ?? err));
+            setEvents([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, type, name]);
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-1 pb-2", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: [events?.length ?? 0, " ", t('engine.edit.auditCount', locale)] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => void load(), disabled: loading, className: "h-7 gap-1 text-xs", title: t('engine.edit.refresh', locale), children: [loading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3 w-3" })), t('engine.edit.refresh', locale)] })] }), error && (_jsx("div", { className: "m-2 rounded border border-rose-200 bg-rose-50 p-2 text-xs text-rose-700", children: error })), _jsx("div", { className: "flex-1 overflow-auto", children: loading && (!events || events.length === 0) ? (_jsxs("div", { className: "flex h-32 items-center justify-center text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }), t('engine.edit.loading', locale)] })) : !events || events.length === 0 ? (_jsxs(Empty, { className: "py-10", children: [_jsx(EmptyTitle, { children: t('engine.edit.auditEmptyTitle', locale) }), _jsx(EmptyDescription, { children: t('engine.edit.auditEmptyDescription', locale) })] })) : (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "sticky top-0 bg-muted/40 text-left text-[10px] uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColTime', locale) }), _jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColActor', locale) }), _jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColOperation', locale) }), _jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColOutcome', locale) }), _jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColLock', locale) }), _jsx("th", { className: "px-2 py-1.5 font-medium", children: t('engine.edit.auditColNote', locale) })] }) }), _jsx("tbody", { children: events.map((ev) => (_jsxs("tr", { className: "border-t border-border/50 align-top hover:bg-muted/20", children: [_jsx("td", { className: "whitespace-nowrap px-2 py-1.5 font-mono text-[11px]", children: fmtTime(ev.occurredAt) }), _jsx("td", { className: "px-2 py-1.5", children: ev.actor }), _jsx("td", { className: "px-2 py-1.5", children: _jsx(Badge, { variant: "outline", className: "text-[10px]", children: ev.operation }) }), _jsx("td", { className: "px-2 py-1.5", children: outcomeBadge(ev.outcome) }), _jsx("td", { className: "px-2 py-1.5", children: ev.lockState && ev.lockState !== 'none' ? (_jsxs("span", { className: "font-mono text-[11px]", children: [ev.lockState, ev.lockOverridden ? ' *' : ''] })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx("td", { className: "max-w-[28ch] truncate px-2 py-1.5 text-muted-foreground", title: ev.note ?? ev.code, children: ev.note ?? ev.code })] }, String(ev.id)))) })] })) })] }));
+}

package/dist/views/metadata-admin/DiagnosticsPage.d.ts

@@ -0,0 +1,20 @@
+/**
+ * MetadataDiagnosticsPage — governance overview.
+ *
+ * Renders the cross-type `/meta/diagnostics` sweep: every metadata
+ * item that fails load-time Zod validation, grouped by type, with a
+ * deep-link to its edit page. The framework computes this server-side
+ * (see `protocol.getMetaDiagnostics`); the client just paints it.
+ *
+ * Counterpart surfaces:
+ *   • DirectoryPage tile badges — per-type aggregate
+ *   • ResourceListPage row badges — per-item flag inside one type
+ *   • ResourceEditPage banner + inline SchemaForm errors — full
+ *     drill-down for a single item
+ *
+ * This page is the only one that shows everything in one view, so
+ * ops can answer "what's broken across the whole app?" without
+ * clicking into 27 type pages.
+ */
+import * as React from 'react';
+export declare function MetadataDiagnosticsPage(): React.JSX.Element;