@object-ui/app-shell 6.2.3 → 7.0.0

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;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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';
+import { Link } from 'react-router-dom';
+import { AlertTriangle, RefreshCw, ArrowLeft } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { useMetadataClient, useMetadataTypes, useGlobalDiagnostics, } from './useMetadata';
+import { t, tFormat, translateMetadataType, detectLocale } from './i18n';
+export function MetadataDiagnosticsPage() {
+    const client = useMetadataClient();
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [severity, setSeverity] = React.useState('error');
+    const { loading, error, summary, reload } = useGlobalDiagnostics(client, severity);
+    const { entries: typesEntries } = useMetadataTypes(client);
+    // Index by type so we can look up the human label per-type without
+    // scanning the typesEntries array each row.
+    const typeLabel = React.useMemo(() => {
+        const m = {};
+        for (const e of typesEntries) {
+            m[e.type] = translateMetadataType(e.type, locale, e.label);
+        }
+        return m;
+    }, [typesEntries, locale]);
+    // Group entries by type, ordered by descending count.
+    const groups = React.useMemo(() => {
+        var _a;
+        const map = {};
+        for (const e of summary.entries)
+            (map[_a = e.type] ?? (map[_a] = [])).push(e);
+        return Object.entries(map).sort(([, a], [, b]) => b.length - a.length);
+    }, [summary]);
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [_jsxs("div", { className: "px-6 pt-5 pb-4 border-b bg-background", children: [_jsx("nav", { className: "text-xs text-muted-foreground mb-2", children: _jsxs(Link, { to: "..", className: "hover:text-foreground inline-flex items-center gap-1", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), t('engine.diagnostics.back', locale)] }) }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsxs("h1", { className: "text-xl font-semibold flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-5 w-5 text-destructive" }), t('engine.diagnostics.title', locale)] }), _jsx(Badge, { variant: "outline", className: "text-[11px] border-destructive/40 text-destructive bg-destructive/[0.06]", children: tFormat('engine.diagnostics.summary', locale, {
+                                    count: summary.total,
+                                    items: summary.scannedItems,
+                                    types: summary.scannedTypes,
+                                }) }), _jsx("div", { className: "flex-1" }), _jsx("div", { role: "tablist", className: "inline-flex items-center rounded-md border bg-muted/40 p-0.5 text-xs", children: ['error', 'warning'].map((s) => (_jsx("button", { role: "tab", type: "button", "aria-selected": severity === s, onClick: () => setSeverity(s), className: 'px-2.5 py-1 rounded transition-colors ' +
+                                        (severity === s
+                                            ? 'bg-background shadow-sm text-foreground'
+                                            : 'text-muted-foreground hover:text-foreground'), children: t(`engine.diagnostics.severity.${s}`, locale) }, s))) }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: reload, children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5 mr-1" }), t('engine.diagnostics.refresh', locale)] })] }), _jsx("p", { className: "text-sm text-muted-foreground mt-2 max-w-3xl", children: t('engine.diagnostics.description', locale) })] }), _jsxs("div", { className: "flex-1 overflow-auto p-6 space-y-6", children: [loading && (_jsx("div", { className: "text-sm text-muted-foreground", children: t('engine.diagnostics.loading', locale) })), !loading && error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/[0.06]", children: tFormat('engine.diagnostics.loadFailed', locale, { error }) })), !loading && !error && groups.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('engine.diagnostics.cleanTitle', locale) }), _jsx(EmptyDescription, { children: tFormat('engine.diagnostics.cleanHint', locale, {
+                                    items: summary.scannedItems,
+                                    types: summary.scannedTypes,
+                                }) })] })), groups.map(([type, rows]) => (_jsxs("section", { className: "space-y-2", children: [_jsxs("h2", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2", children: [_jsx(Link, { to: `../${encodeURIComponent(type)}`, className: "hover:text-foreground hover:underline", children: typeLabel[type] ?? type }), _jsx("span", { className: "font-mono normal-case tracking-normal text-[10px] opacity-70", children: type }), _jsx(Badge, { variant: "outline", className: "text-[10px] border-destructive/40 text-destructive bg-destructive/[0.06]", children: rows.length })] }), _jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left font-medium w-[28%]", children: t('engine.diagnostics.col.name', locale) }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: t('engine.diagnostics.col.issues', locale) })] }) }), _jsx("tbody", { className: "divide-y", children: rows.map((row) => {
+                                                const errs = row.diagnostics.errors ?? [];
+                                                const warns = row.diagnostics.warnings ?? [];
+                                                const head = (severity === 'warning' && errs.length === 0 ? warns : errs).slice(0, 3);
+                                                const rest = Math.max(0, (errs.length || warns.length) - head.length);
+                                                return (_jsxs("tr", { className: "hover:bg-accent/50 align-top", children: [_jsxs("td", { className: "px-3 py-2 align-top", children: [_jsx(Link, { to: `../${encodeURIComponent(type)}/${encodeURIComponent(row.name)}`, className: "text-primary hover:underline font-mono", children: row.name }), errs.length > 0 && (_jsx(Badge, { variant: "outline", className: "ml-2 text-[10px] border-destructive/40 text-destructive", children: tFormat('engine.diagnostics.errorN', locale, { count: errs.length }) })), warns.length > 0 && (_jsx(Badge, { variant: "outline", className: "ml-2 text-[10px] border-amber-500/40 text-amber-700 dark:text-amber-300", children: tFormat('engine.diagnostics.warnN', locale, { count: warns.length }) }))] }), _jsx("td", { className: "px-3 py-2 align-top", children: _jsxs("ul", { className: "space-y-0.5 font-mono text-[11px]", children: [head.map((d, i) => (_jsxs("li", { className: "truncate", children: [_jsx("span", { className: "text-muted-foreground", children: d.path || '(root)' }), _jsx("span", { className: "text-muted-foreground", children: ": " }), d.message] }, i))), rest > 0 && (_jsx("li", { className: "text-muted-foreground", children: tFormat('engine.diagnostics.more', locale, { count: rest }) }))] }) })] }, row.name));
+                                            }) })] }) })] }, type)))] })] }));
+}

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

@@ -1 +1,16 @@
-export declare function MetadataDirectoryPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * MetadataDirectoryPage — registry-driven landing page (Phase 3c).
+ *
+ * Replaces the Phase 3b placeholder. Improvements:
+ *   • Search across type id + label + description.
+ *   • Domain filter chips with counts.
+ *   • "Writable only" toggle for admins triaging permissions work.
+ *   • Tiles show: label, machine name, item count (lazy fetched per
+ *     type when in view), badges (writable / overlay), description.
+ *
+ * Item counts are lazy — we only fetch when the user lands on a
+ * domain that has it. For MVP we just show "—" until the user clicks
+ * into a type. Pre-fetching all 27 counts on page load is wasteful.
+ */
+import * as React from 'react';
+export declare function MetadataDirectoryPage(): React.JSX.Element;