@object-ui/app-shell 6.2.3 → 7.1.0

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;

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

@@ -15,16 +15,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * into a type. Pre-fetching all 27 counts on page load is wasteful.
  */
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { Search, Database, Layers, Workflow, Sparkles, Settings, ShieldCheck, Box } from 'lucide-react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Search, Database, Layers, Workflow, Sparkles, Settings, ShieldCheck, Box, AlertTriangle, Lock } from 'lucide-react';
 import { Input } from '@object-ui/components';
 import { Button } from '@object-ui/components';
 import { Badge } from '@object-ui/components';
 import { Kbd } from '@object-ui/components';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
-import { useMetadataClient, useMetadataTypes, } from './useMetadata';
+import { useMetadataClient, useMetadataTypes, useGlobalDiagnostics, } from './useMetadata';
 import { MetadataQuickFind } from './QuickFind';
 import { translateMetadataType, translateMetadataDomain, t, tFormat, detectLocale, } from './i18n';
+import { buildPackageScopeOptions } from './package-scope';
 const DOMAIN_ICONS = {
     data: Database,
     ui: Layers,
@@ -52,8 +53,12 @@ const DOMAIN_ORDER = [
  * `field` is managed in-context via the parent object's edit form
  * (master-detail widget). A flat global list of every field across
  * every object is rarely useful and clutters the admin surface.
+ *
+ * `package` is the Studio scope container itself. It has a dedicated
+ * management surface for create/publish/import/export flows, so exposing it
+ * as scoped metadata would mean "view packages inside a package".
  */
-const HIDDEN_TYPES = new Set(['field']);
+const HIDDEN_TYPES = new Set(['field', 'package']);
 export function MetadataDirectoryPage() {
     const client = useMetadataClient();
     const { loading, error, entries } = useMetadataTypes(client);
@@ -61,21 +66,81 @@ export function MetadataDirectoryPage() {
     const [query, setQuery] = React.useState('');
     const [domainFilter, setDomainFilter] = React.useState('all');
     const [writableOnly, setWritableOnly] = React.useState(false);
+    const [searchParams, setSearchParams] = useSearchParams();
+    // Studio is scoped to a single *project* package at a time (the sidebar
+    // `active_package` selector owns the scope via `?package=`). Load the
+    // installed packages and keep only project-scoped ones — anything not
+    // tagged `system`/`cloud` (a missing scope counts as project). System
+    // metadata therefore never appears on the directory landing.
+    const [projectPackages, setProjectPackages] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = await client.list('package');
+                if (cancelled)
+                    return;
+                setProjectPackages(buildPackageScopeOptions(list));
+            }
+            catch {
+                if (!cancelled)
+                    setProjectPackages([]);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    // Resolve the active package from the URL, validated against the project
+    // package set. `null` while packages are still loading (fail closed).
+    const urlPackage = searchParams.get('package');
+    const activePackage = React.useMemo(() => {
+        if (!projectPackages)
+            return null;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return urlPackage;
+        return projectPackages[0]?.id ?? null;
+    }, [projectPackages, urlPackage]);
+    // Repair `?package=` so the sidebar selector and deep-links agree on the
+    // active scope. Runs once packages resolve and the URL holds no valid
+    // project package.
+    React.useEffect(() => {
+        if (!projectPackages || projectPackages.length === 0)
+            return;
+        if (urlPackage && projectPackages.some((p) => p.id === urlPackage))
+            return;
+        const next = new URLSearchParams(searchParams);
+        next.set('package', projectPackages[0].id);
+        setSearchParams(next, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectPackages, urlPackage]);
+    // Scope the diagnostics sweep to the active project package so tile
+    // counts (and locked/invalid badges) reflect *that package only* and
+    // match what the scoped list pages show. `undefined` while packages are
+    // still resolving keeps the page in its loading state below.
+    const { byType: invalidByType, warnByType, summary: diagSummary, countsByType, lockedByType, packagesByType, loading: diagLoading, } = useGlobalDiagnostics(client, 'warning', activePackage ?? undefined);
+    // Base set: visible (non-hidden) metadata types contributed by the active
+    // project package. Fail closed — show nothing until a concrete project
+    // package is active, so system-only types never surface.
+    const scopedEntries = React.useMemo(() => entries.filter((e) => {
+        if (HIDDEN_TYPES.has(e.type))
+            return false;
+        if (!activePackage)
+            return false;
+        return (packagesByType[e.type] ?? []).includes(activePackage);
+    }), [entries, activePackage, packagesByType]);
     // Counts per domain for the filter chip bar.
     const domainCounts = React.useMemo(() => {
-        const visible = entries.filter((e) => !HIDDEN_TYPES.has(e.type));
-        const c = { all: visible.length };
-        for (const e of visible) {
+        const c = { all: scopedEntries.length };
+        for (const e of scopedEntries) {
             const d = e.domain ?? 'other';
             c[d] = (c[d] ?? 0) + 1;
         }
         return c;
-    }, [entries]);
-    const writableCount = entries.filter((e) => !HIDDEN_TYPES.has(e.type) && e.allowOrgOverride).length;
-    const filtered = entries.filter((e) => {
-        if (HIDDEN_TYPES.has(e.type))
-            return false;
-        if (writableOnly && !e.allowOrgOverride)
+    }, [scopedEntries]);
+    const writableCount = scopedEntries.filter((e) => e.allowOrgOverride || e.allowRuntimeCreate).length;
+    const filtered = scopedEntries.filter((e) => {
+        if (writableOnly && !(e.allowOrgOverride || e.allowRuntimeCreate))
             return false;
         if (domainFilter !== 'all' && (e.domain ?? 'other') !== domainFilter)
             return false;
@@ -83,6 +148,7 @@ export function MetadataDirectoryPage() {
             const q = query.toLowerCase();
             const hit = e.type.toLowerCase().includes(q) ||
                 (e.label ?? '').toLowerCase().includes(q) ||
+                translateMetadataType(e.type, locale, e.label).toLowerCase().includes(q) ||
                 (e.description ?? '').toLowerCase().includes(q);
             if (!hit)
                 return false;
@@ -101,7 +167,7 @@ export function MetadataDirectoryPage() {
             return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
         });
     }, [filtered]);
-    if (loading) {
+    if (loading || projectPackages === null || (activePackage && diagLoading)) {
         return _jsx("div", { className: "p-6 text-sm text-muted-foreground", children: t('engine.directory.loading', locale) });
     }
     if (error) {
@@ -109,12 +175,17 @@ export function MetadataDirectoryPage() {
     }
     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("h1", { className: "text-xl font-semibold", children: t('engine.directory.title', locale) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1 max-w-3xl", dangerouslySetInnerHTML: {
                             __html: tFormat('engine.directory.description', locale, {
-                                count: `<strong class="text-foreground">${entries.filter((e) => !HIDDEN_TYPES.has(e.type)).length}</strong>`,
+                                count: `<strong class="text-foreground">${scopedEntries.length}</strong>`,
                                 writable: writableCount,
                             }),
-                        } }), _jsxs("div", { className: "flex items-center gap-3 mt-4 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-lg", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.directory.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Button, { variant: writableOnly ? 'default' : 'outline', size: "sm", onClick: () => setWritableOnly((w) => !w), children: [t('engine.directory.writableOnly', locale), " (", writableCount, ")"] }), _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1.5", children: [t('engine.directory.quickFind', locale), " ", _jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "M" })] })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-3 flex-wrap", children: [_jsx(DomainChip, { domain: "all", label: t('engine.directory.all', locale), active: domainFilter === 'all', count: domainCounts.all ?? 0, onClick: () => setDomainFilter('all') }), DOMAIN_ORDER.filter((d) => domainCounts[d]).map((d) => (_jsx(DomainChip, { domain: d, label: translateMetadataDomain(d, locale), active: domainFilter === d, count: domainCounts[d] ?? 0, onClick: () => setDomainFilter(d) }, d)))] })] }), _jsxs("div", { className: "flex-1 overflow-auto p-6 space-y-6", children: [filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('engine.directory.noMatches', locale) }), _jsx(EmptyDescription, { children: t('engine.directory.noMatchesHint', locale) })] })), grouped.map(([domain, group]) => {
+                        } }), _jsxs("div", { className: "flex items-center gap-3 mt-4 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-lg", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.directory.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Button, { variant: writableOnly ? 'default' : 'outline', size: "sm", onClick: () => setWritableOnly((w) => !w), children: [t('engine.directory.writableOnly', locale), " (", writableCount, ")"] }), diagSummary.total > 0 && (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive", children: _jsxs(Link, { to: "./_diagnostics", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5 mr-1" }), tFormat('engine.directory.diagnosticsLink', locale, { count: diagSummary.total })] }) })), _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1.5", children: [t('engine.directory.quickFind', locale), " ", _jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "M" })] })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-3 flex-wrap", children: [_jsx(DomainChip, { domain: "all", label: t('engine.directory.all', locale), active: domainFilter === 'all', count: domainCounts.all ?? 0, onClick: () => setDomainFilter('all') }), DOMAIN_ORDER.filter((d) => domainCounts[d]).map((d) => (_jsx(DomainChip, { domain: d, label: translateMetadataDomain(d, locale), active: domainFilter === d, count: domainCounts[d] ?? 0, onClick: () => setDomainFilter(d) }, d)))] })] }), _jsxs("div", { className: "flex-1 overflow-auto p-6 space-y-6", children: [projectPackages.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No project packages installed" }), _jsx(EmptyDescription, { children: "Studio only shows metadata that belongs to a project software package. Install or create a project package to manage its metadata here." })] })), projectPackages.length > 0 && filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('engine.directory.noMatches', locale) }), _jsx(EmptyDescription, { children: t('engine.directory.noMatchesHint', locale) })] })), grouped.map(([domain, group]) => {
                         const Icon = DOMAIN_ICONS[domain] ?? Box;
-                        return (_jsxs("section", { className: "space-y-2", children: [_jsxs("h2", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), translateMetadataDomain(domain, locale), " (", group.length, ")"] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: group.map((e) => (_jsx(TypeTile, { entry: e, locale: locale }, e.type))) })] }, domain));
+                        return (_jsxs("section", { className: "space-y-2", children: [_jsxs("h2", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), translateMetadataDomain(domain, locale), " (", group.length, ")"] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: group.map((e) => {
+                                        // Carry the active project package into the list-page
+                                        // deep-link so scope survives navigation.
+                                        const totalCount = countsByType[e.type] ?? 0;
+                                        return (_jsx(TypeTile, { entry: e, locale: locale, invalidCount: invalidByType[e.type] ?? 0, warnCount: warnByType[e.type] ?? 0, lockedCount: lockedByType[e.type] ?? 0, itemCount: totalCount, packageFilter: activePackage ?? undefined }, e.type));
+                                    }) })] }, domain));
                     })] }), _jsx(MetadataQuickFind, {})] }));
 }
 function DomainChip({ domain, label, active, count, onClick, }) {
@@ -123,13 +194,19 @@ function DomainChip({ domain, label, active, count, onClick, }) {
                 ? 'bg-primary text-primary-foreground border-primary'
                 : 'bg-background hover:bg-accent border-border text-muted-foreground'), children: [label ?? domain, " ", _jsxs("span", { className: "opacity-70 ml-0.5", children: ["(", count, ")"] })] }));
 }
-function TypeTile({ entry, locale }) {
+function TypeTile({ entry, locale, invalidCount = 0, warnCount = 0, itemCount = 0, lockedCount = 0, packageFilter, }) {
     // Prefer the locale-table translation; fall back to server's `label` (typically English).
     const label = translateMetadataType(entry.type, locale, entry.label);
-    return (_jsxs(Link, { to: `./${encodeURIComponent(entry.type)}`, className: "block p-4 border rounded-lg hover:border-primary hover:bg-accent transition-colors", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium truncate", children: label }), _jsx("code", { className: "text-xs text-muted-foreground font-mono", children: entry.type })] }), entry.allowOrgOverride ? (_jsx(Badge, { className: 'text-[10px] shrink-0 ' +
-                            (entry.overrideSource === 'env'
-                                ? 'bg-amber-100 text-amber-800 hover:bg-amber-100'
-                                : 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'), title: entry.overrideSource === 'env'
-                            ? 'Writable via OBJECTSTACK_METADATA_WRITABLE env var'
-                            : 'Writable per ADR-0005 overlay opt-in', children: "writable" })) : (_jsx(Badge, { variant: "outline", className: "text-[10px] shrink-0 text-muted-foreground", children: "read-only" }))] }), entry.description && (_jsx("div", { className: "text-xs text-muted-foreground mt-2 line-clamp-2", children: entry.description }))] }));
+    const href = packageFilter
+        ? `./${encodeURIComponent(entry.type)}?package=${encodeURIComponent(packageFilter)}`
+        : `./${encodeURIComponent(entry.type)}`;
+    return (_jsxs(Link, { to: href, className: 'block p-4 border rounded-lg hover:bg-accent transition-colors ' +
+            (invalidCount > 0
+                ? 'border-destructive/40 hover:border-destructive'
+                : 'hover:border-primary'), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "font-medium truncate flex items-center gap-1.5", children: [invalidCount > 0 && (_jsx("span", { title: tFormat('engine.directory.invalidTooltip', locale ?? 'en', { count: invalidCount }), "aria-label": tFormat('engine.directory.invalidTooltip', locale ?? 'en', { count: invalidCount }), children: _jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-destructive shrink-0" }) })), label] }), _jsx("code", { className: "text-xs text-muted-foreground font-mono", children: entry.type })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx(Badge, { variant: "secondary", className: "text-[10px] tabular-nums", title: tFormat('engine.directory.itemCountTooltip', locale ?? 'en', { count: itemCount }), children: itemCount }), invalidCount > 0 && (_jsx(Badge, { variant: "outline", className: "text-[10px] border-destructive/40 text-destructive bg-destructive/[0.06]", title: tFormat('engine.directory.invalidTooltip', locale ?? 'en', { count: invalidCount }), children: invalidCount })), warnCount > 0 && (_jsx(Badge, { variant: "outline", className: "text-[10px] border-amber-500/40 text-amber-700 dark:text-amber-300 bg-amber-500/[0.06]", title: tFormat('engine.directory.warnTooltip', locale ?? 'en', { count: warnCount }), children: warnCount })), lockedCount > 0 && (_jsxs(Badge, { variant: "outline", className: "text-[10px] border-amber-500/40 text-amber-700 dark:text-amber-300 bg-amber-500/[0.06] inline-flex items-center gap-0.5 px-1.5", title: `${lockedCount} locked item${lockedCount === 1 ? '' : 's'} — see ADR-0010`, "aria-label": `${lockedCount} locked items`, children: [_jsx(Lock, { className: "h-2.5 w-2.5" }), lockedCount] })), entry.allowOrgOverride ? (_jsx(Badge, { className: 'text-[10px] ' +
+                                    (entry.overrideSource === 'env'
+                                        ? 'bg-amber-100 text-amber-800 hover:bg-amber-100'
+                                        : 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'), title: entry.overrideSource === 'env'
+                                    ? 'Writable via OBJECTSTACK_METADATA_WRITABLE env var'
+                                    : 'Writable per ADR-0005 overlay opt-in', children: t('engine.badge.writable', locale) })) : entry.allowRuntimeCreate ? (_jsx(Badge, { className: "text-[10px] bg-sky-100 text-sky-800 hover:bg-sky-100", title: "Code-shipped items are locked; new items can be created at runtime", children: t('engine.badge.createOnly', locale) })) : (_jsx(Badge, { variant: "outline", className: "text-[10px] text-muted-foreground", children: t('engine.badge.readOnly', locale) }))] })] }), entry.description && (_jsx("div", { className: "text-xs text-muted-foreground mt-2 line-clamp-2", children: entry.description }))] }));
 }

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

@@ -0,0 +1,33 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * DraftReviewPanel — ADR-0033 Phase B, §5.
+ *
+ * A GENERIC, type-agnostic review/diff: it compares a pending DRAFT against the
+ * last-published value and lists added / changed / removed top-level keys. It
+ * works for ANY metadata type (view, dashboard, flow, …) — the object designer
+ * keeps its richer per-field review (`ObjectFormCanvas`); this is the host-level
+ * fallback so every type gets a real "what will publishing change" view.
+ *
+ * It deliberately reuses {@link computeDiffRows} from `LayeredDiff` — the same
+ * structural diff engine the Layers tab uses — fed `(published, draft)` so
+ * "added" = in the draft but not yet published, "removed" = published key the
+ * draft drops, "modified" = value changed.
+ */
+import React from 'react';
+import { type SupportedLocale } from './i18n';
+/** Number of top-level keys that differ between the draft and the published value. */
+export declare function computeDraftChangeCount(published: unknown, draft: unknown): number;
+export interface DraftReviewPanelProps {
+    /** The last-published (effective) value — the diff baseline. */
+    published: unknown;
+    /** The pending draft body being reviewed. */
+    draft: unknown;
+    locale?: SupportedLocale | string;
+    className?: string;
+}
+export declare function DraftReviewPanel({ published, draft, locale, className }: DraftReviewPanelProps): React.JSX.Element;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * DraftReviewPanel — ADR-0033 Phase B, §5.
+ *
+ * A GENERIC, type-agnostic review/diff: it compares a pending DRAFT against the
+ * last-published value and lists added / changed / removed top-level keys. It
+ * works for ANY metadata type (view, dashboard, flow, …) — the object designer
+ * keeps its richer per-field review (`ObjectFormCanvas`); this is the host-level
+ * fallback so every type gets a real "what will publishing change" view.
+ *
+ * It deliberately reuses {@link computeDiffRows} from `LayeredDiff` — the same
+ * structural diff engine the Layers tab uses — fed `(published, draft)` so
+ * "added" = in the draft but not yet published, "removed" = published key the
+ * draft drops, "modified" = value changed.
+ */
+import React from 'react';
+import { computeDiffRows } from './LayeredDiff';
+import { t } from './i18n';
+const STATUS_BADGE = {
+    modified: 'bg-amber-100 text-amber-900 border border-amber-300 dark:bg-amber-950/60 dark:text-amber-200 dark:border-amber-800',
+    added: 'bg-emerald-100 text-emerald-900 border border-emerald-300 dark:bg-emerald-950/60 dark:text-emerald-200 dark:border-emerald-800',
+    removed: 'bg-rose-100 text-rose-900 border border-rose-300 dark:bg-rose-950/60 dark:text-rose-200 dark:border-rose-800',
+};
+const STATUS_ROW = {
+    modified: 'bg-amber-50/50 dark:bg-amber-950/20',
+    added: 'bg-emerald-50/50 dark:bg-emerald-950/20',
+    removed: 'bg-rose-50/50 dark:bg-rose-950/20',
+};
+function statusLabel(status, locale) {
+    if (status === 'added')
+        return t('designer.canvas.diffAdded', locale);
+    if (status === 'removed')
+        return t('designer.canvas.diffRemoved', locale);
+    return t('designer.canvas.diffChanged', locale);
+}
+function formatValue(v) {
+    if (v === undefined)
+        return '—';
+    if (v === null)
+        return 'null';
+    if (typeof v === 'string')
+        return v.length > 200 ? `${v.slice(0, 200)}…` : v;
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v);
+    try {
+        const s = JSON.stringify(v);
+        return s.length > 200 ? `${s.slice(0, 200)}…` : s;
+    }
+    catch {
+        return String(v);
+    }
+}
+/** Number of top-level keys that differ between the draft and the published value. */
+export function computeDraftChangeCount(published, draft) {
+    let n = 0;
+    for (const row of computeDiffRows(published, draft)) {
+        if (row.status !== 'unchanged')
+            n += 1;
+    }
+    return n;
+}
+export function DraftReviewPanel({ published, draft, locale, className }) {
+    const rows = React.useMemo(() => computeDiffRows(published, draft).filter((r) => r.status !== 'unchanged'), [published, draft]);
+    if (rows.length === 0) {
+        return (_jsx("div", { className: `p-4 text-sm text-muted-foreground ${className ?? ''}`, children: t('designer.draftReview.empty', locale) }));
+    }
+    return (_jsx("div", { className: `flex flex-col gap-1.5 ${className ?? ''}`, "data-testid": "draft-review-panel", children: rows.map((row) => {
+            const status = row.status;
+            return (_jsxs("div", { className: `flex flex-wrap items-baseline gap-2 rounded-md px-2.5 py-1.5 text-xs ${STATUS_ROW[status]}`, children: [_jsx("span", { className: `inline-flex shrink-0 items-center rounded px-1.5 py-px text-[10px] font-medium uppercase tracking-wide ${STATUS_BADGE[status]}`, children: statusLabel(status, locale) }), _jsx("code", { className: "font-mono font-medium text-foreground", children: row.key }), status === 'added' ? (_jsx("ins", { className: "text-emerald-700 no-underline dark:text-emerald-400", children: formatValue(row.effectiveValue) })) : status === 'removed' ? (_jsx("del", { className: "text-rose-700 dark:text-rose-400", children: formatValue(row.codeValue) })) : (_jsxs("span", { className: "inline-flex items-baseline gap-1.5 text-muted-foreground", children: [_jsx("del", { className: "text-rose-700 dark:text-rose-400", children: formatValue(row.codeValue) }), _jsx("span", { "aria-hidden": "true", children: "\u2192" }), _jsx("ins", { className: "text-emerald-700 no-underline dark:text-emerald-400", children: formatValue(row.effectiveValue) })] }))] }, row.key));
+        }) }));
+}

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

@@ -1,3 +1,19 @@
+/**
+ * EmbeddedItemEditor — full-form editor for items that live INSIDE a
+ * parent metadata body (e.g. `object.fields.email`).
+ *
+ * Embedded items don't have their own HTTP endpoint (`PUT /meta/field/email`
+ * does NOT exist for object-scoped fields) — so we:
+ *   1. Re-fetch the parent's effective body.
+ *   2. Render a SchemaForm using the registered sub-type's schema / form
+ *      (e.g. `field` for `object.fields`).
+ *   3. On save: deep-clone the parent, splice the modified item back
+ *      under `parent.<embeddedPath>.<itemName>`, and PUT the parent.
+ *
+ * If the sub-type isn't registered (e.g. `index` has no `editAs`), we
+ * fall back to a raw-JSON editor so users can still hand-edit and save.
+ */
+import * as React from 'react';
 export interface EmbeddedItemEditorProps {
     parentType: string;
     parentName: string;
@@ -12,4 +28,4 @@ export interface EmbeddedItemEditorProps {
     /** Called after a successful save with the freshly-saved item. */
     onSaved?: (item: Record<string, unknown>) => void;
 }
-export declare function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemName, editAs, initialRaw, onSaved, }: EmbeddedItemEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemName, editAs, initialRaw, onSaved, }: EmbeddedItemEditorProps): React.JSX.Element;

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

@@ -20,7 +20,9 @@ import { Loader2, Save, AlertTriangle } from 'lucide-react';
 import { Button } from '@object-ui/components';
 import { SchemaForm } from './SchemaForm';
 import { useMetadataClient, useMetadataTypes } from './useMetadata';
+import { detectLocale, t, tFormat, translateValidationMessage } from './i18n';
 export function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemName, editAs, initialRaw, onSaved, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
     const client = useMetadataClient();
     const { entries } = useMetadataTypes(client);
     const subEntry = editAs ? entries.find((e) => e.type === editAs) : undefined;
@@ -44,10 +46,10 @@ export function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemN
         setIssues([]);
         setSavedAt(null);
     }, [initialRaw, itemName, parentType, parentName]);
-    const readOnly = subEntry != null && !subEntry.allowOrgOverride;
+    const readOnly = subEntry != null && !subEntry.allowOrgOverride && !subEntry.allowRuntimeCreate;
     async function doSave() {
         if (!embeddedPath) {
-            setError('Cannot save: this item has no embeddedPath registered.');
+            setError(t('engine.embedded.saveNoPath', locale));
             return;
         }
         setSaving(true);
@@ -77,10 +79,12 @@ export function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemN
                     const trimmed = fullPath.startsWith(prefix)
                         ? fullPath.slice(prefix.length)
                         : fullPath;
-                    return { path: trimmed, message: String(x.message ?? 'Invalid') };
+                    return { path: trimmed, message: translateValidationMessage(String(x.message ?? 'Invalid'), locale) };
                 });
                 setIssues(mapped);
-                setError(`Validation failed (${mapped.length} issue${mapped.length === 1 ? '' : 's'}).`);
+                setError(mapped.length === 1
+                    ? t('engine.validation.failedOne', locale)
+                    : tFormat('engine.validation.failed', locale, { count: mapped.length }));
             }
             else {
                 setError(err?.message ?? String(err));
@@ -92,17 +96,20 @@ export function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemN
     }
     // No schema registered for this sub-type: fall back to JSON editing.
     if (!schema) {
-        return (_jsxs("div", { className: "p-4 space-y-3", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: ["No form schema is registered for", ' ', _jsx("code", { className: "font-mono", children: editAs ?? 'this item' }), ". Edit the raw JSON below; saving will splice it back into", ' ', _jsxs("span", { className: "font-mono", children: [parentType, "/", parentName, ".", embeddedPath, ".", itemName] }), "."] }), _jsx("textarea", { className: "w-full h-[60vh] font-mono text-xs border rounded p-3 bg-muted/30", value: JSON.stringify(draft, null, 2), onChange: (e) => {
+        return (_jsxs("div", { className: "p-4 space-y-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: tFormat('engine.embedded.noSchema', locale, {
+                        type: editAs ?? 'this item',
+                        target: `${parentType}/${parentName}.${embeddedPath}.${itemName}`,
+                    }) }), _jsx("textarea", { className: "w-full h-[60vh] font-mono text-xs border rounded p-3 bg-muted/30", value: JSON.stringify(draft, null, 2), onChange: (e) => {
                         try {
                             setDraft(JSON.parse(e.target.value));
                             setError(null);
                         }
                         catch (err) {
-                            setError(`Invalid JSON: ${err.message}`);
+                            setError(`${t('engine.form.invalidJson', locale)}: ${err.message}`);
                         }
-                    } }), error && (_jsxs("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-2 bg-destructive/5", children: [_jsx(AlertTriangle, { className: "h-4 w-4 inline mr-1" }), " ", error] })), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: doSave, disabled: saving || !embeddedPath, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), "Save into parent"] }) })] }));
+                    } }), error && (_jsxs("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-2 bg-destructive/5", children: [_jsx(AlertTriangle, { className: "h-4 w-4 inline mr-1" }), " ", error] })), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: doSave, disabled: saving || !embeddedPath, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), tFormat('engine.embedded.saveIntoParent', locale, { parentType: 'parent' })] }) })] }));
     }
-    return (_jsxs("div", { className: "p-4 space-y-4", children: [error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), savedAt != null && !error && (_jsx("div", { className: "text-sm text-emerald-700 border border-emerald-300 bg-emerald-50 rounded p-2", children: "Saved." })), readOnly && (_jsx("div", { className: "text-xs text-amber-800 border border-amber-300 bg-amber-50 rounded p-2", children: "The parent type is read-only \u2014 saving will still attempt a PUT and may be refused by the server." })), _jsx(SchemaForm, { schema: schema, form: form, value: draft, onChange: setDraft, issues: issues }), _jsx("div", { className: "flex justify-end gap-2 pt-2 border-t", children: _jsxs(Button, { onClick: doSave, disabled: saving || !embeddedPath, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), "Save into ", parentType] }) }), !embeddedPath && (_jsxs("div", { className: "text-xs text-muted-foreground border rounded p-3", children: [_jsx("div", { className: "font-medium", children: "Read-only" }), _jsx("div", { children: "No embedded path registered \u2014 cannot determine where to write this item back." })] }))] }));
+    return (_jsxs("div", { className: "p-4 space-y-4", children: [error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), savedAt != null && !error && (_jsx("div", { className: "text-sm text-emerald-700 border border-emerald-300 bg-emerald-50 rounded p-2", children: t('engine.embedded.saved', locale) })), readOnly && (_jsx("div", { className: "text-xs text-amber-800 border border-amber-300 bg-amber-50 rounded p-2", children: t('engine.embedded.readOnlyParent', locale) })), _jsx(SchemaForm, { schema: schema, form: form, value: draft, onChange: setDraft, issues: issues }), _jsx("div", { className: "flex justify-end gap-2 pt-2 border-t", children: _jsxs(Button, { onClick: doSave, disabled: saving || !embeddedPath, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), tFormat('engine.embedded.saveIntoParent', locale, { parentType })] }) }), !embeddedPath && (_jsxs("div", { className: "text-xs text-muted-foreground border rounded p-3", children: [_jsx("div", { className: "font-medium", children: t('engine.embedded.readOnly', locale) }), _jsx("div", { children: t('engine.embedded.noPathHint', locale) })] }))] }));
 }
 /**
  * Return a NEW parent object with the embedded item replaced. The

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

@@ -0,0 +1,39 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * JsonSourceEditor — Monaco-backed JSON editor for the metadata
+ * designer's "Source" tab. Replaces the old textarea so power users
+ * get syntax highlighting, bracket matching, folding, and inline
+ * error squigglies driven by the server-side `_diagnostics` payload.
+ *
+ * Markers: `issues[]` use dotted (or array) JSON paths matching the
+ * Zod issue shape. We resolve each path to a Monaco range with
+ * `jsonc-parser` so the squiggle lands on the offending value (or
+ * the property key when the value is absent). Unresolved paths fall
+ * back to a marker on line 1, so nothing is silently lost.
+ */
+import React from 'react';
+export interface JsonIssue {
+    /** Dotted path (e.g. `fields.owner.type`) or empty for root. */
+    path: string;
+    message: string;
+    /** Defaults to `'error'`. */
+    severity?: 'error' | 'warning';
+}
+export interface JsonSourceEditorProps {
+    value: unknown;
+    onChange: (next: Record<string, unknown>) => void;
+    readOnly?: boolean;
+    issues?: JsonIssue[];
+    /** Pixel or CSS-length height. Defaults to `60vh`. */
+    height?: string | number;
+    /** Grace period (ms) before the textarea fallback engages. Test-tunable. */
+    fallbackDelayMs?: number;
+}
+export declare function JsonSourceEditor({ value, onChange, readOnly, issues, height, fallbackDelayMs, }: JsonSourceEditorProps): React.JSX.Element;
+export default JsonSourceEditor;