@object-ui/app-shell 6.2.2 → 7.0.0

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

@@ -15,14 +15,14 @@ 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';
 const DOMAIN_ICONS = {
@@ -52,8 +52,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 +65,94 @@ 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;
+                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
+                const rows = (list ?? [])
+                    .map((raw) => {
+                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
+                    const m = (item?.manifest ?? item ?? {});
+                    return {
+                        id: m.id,
+                        scope: m.scope,
+                        name: m.name || m.id,
+                    };
+                })
+                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
+                rows.sort((a, b) => a.name.localeCompare(b.name));
+                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+            }
+            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 +160,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 +179,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 +187,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 +206,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,37 @@
+/**
+ * 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;
+}
+export declare function JsonSourceEditor({ value, onChange, readOnly, issues, height, }: JsonSourceEditorProps): React.JSX.Element;
+export default JsonSourceEditor;

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

@@ -0,0 +1,178 @@
+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.
+ */
+/**
+ * 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';
+import { Skeleton } from '@object-ui/components';
+import * as jsonc from 'jsonc-parser';
+import { detectLocale, t } from './i18n';
+// Lazy: Monaco's React wrapper itself pulls in the editor core
+// (~3MB), so we keep it out of the initial app-shell chunk.
+const LazyMonaco = React.lazy(async () => {
+    const mod = await import('@monaco-editor/react');
+    return { default: mod.default };
+});
+function stringify(v) {
+    try {
+        return JSON.stringify(v ?? {}, null, 2);
+    }
+    catch {
+        return '{}';
+    }
+}
+/** Parse a dotted JSON path like `fields.owner.0.type` to segments. */
+function splitPath(p) {
+    if (!p)
+        return [];
+    return p.split('.').map((seg) => {
+        const n = Number(seg);
+        return Number.isInteger(n) && String(n) === seg ? n : seg;
+    });
+}
+export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '60vh', }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [text, setText] = React.useState(() => stringify(value));
+    const [parseError, setParseError] = React.useState(null);
+    const lastCommittedRef = React.useRef(text);
+    // Hold onto Monaco's editor + namespace so we can repaint markers
+    // when either the source text or the issues prop changes.
+    const editorRef = React.useRef(null);
+    const monacoRef = React.useRef(null);
+    // Match against the dark class our app-shell toggles on <html>; pick
+    // a Monaco theme that doesn't fight the rest of the chrome.
+    const [theme, setTheme] = React.useState(() => {
+        if (typeof document === 'undefined')
+            return 'light';
+        return document.documentElement.classList.contains('dark') ? 'vs-dark' : 'light';
+    });
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const update = () => setTheme(root.classList.contains('dark') ? 'vs-dark' : 'light');
+        const obs = new MutationObserver(update);
+        obs.observe(root, { attributes: true, attributeFilter: ['class'] });
+        return () => obs.disconnect();
+    }, []);
+    // Push markers from `issues` onto Monaco's model. We rebuild on
+    // every relevant change rather than diffing — sweeping `setModelMarkers`
+    // is cheap and avoids stale squigglies when issues drop off.
+    const applyMarkers = React.useCallback(() => {
+        const editor = editorRef.current;
+        const monaco = monacoRef.current;
+        if (!editor || !monaco)
+            return;
+        const model = editor.getModel();
+        if (!model)
+            return;
+        if (!issues || issues.length === 0) {
+            monaco.editor.setModelMarkers(model, 'objectui-diagnostics', []);
+            return;
+        }
+        let tree;
+        try {
+            tree = jsonc.parseTree(text);
+        }
+        catch {
+            tree = undefined;
+        }
+        const markers = issues.map((iss) => {
+            const segs = splitPath(iss.path);
+            let startLine = 1;
+            let startCol = 1;
+            let endLine = 1;
+            let endCol = 2;
+            const node = tree ? jsonc.findNodeAtLocation(tree, segs) : undefined;
+            if (node) {
+                const start = model.getPositionAt(node.offset);
+                const end = model.getPositionAt(node.offset + node.length);
+                startLine = start.lineNumber;
+                startCol = start.column;
+                endLine = end.lineNumber;
+                endCol = end.column;
+            }
+            const sev = iss.severity === 'warning'
+                ? monaco.MarkerSeverity.Warning
+                : monaco.MarkerSeverity.Error;
+            return {
+                severity: sev,
+                message: iss.path ? `${iss.path}: ${iss.message}` : iss.message,
+                startLineNumber: startLine,
+                startColumn: startCol,
+                endLineNumber: endLine,
+                endColumn: endCol,
+                source: 'metadata',
+            };
+        });
+        monaco.editor.setModelMarkers(model, 'objectui-diagnostics', markers);
+    }, [issues, text]);
+    React.useEffect(() => {
+        applyMarkers();
+    }, [applyMarkers]);
+    // Resync the buffer when the parent draft changes externally (Save,
+    // Reset, inspector-driven patches). Only sync when the upstream
+    // value differs from what we last committed so user keystrokes
+    // aren't clobbered while typing.
+    React.useEffect(() => {
+        const next = stringify(value);
+        if (next !== lastCommittedRef.current) {
+            setText(next);
+            lastCommittedRef.current = next;
+            setParseError(null);
+        }
+    }, [value]);
+    const handleChange = (next) => {
+        const v = next ?? '';
+        setText(v);
+        try {
+            const parsed = JSON.parse(v);
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                setParseError(null);
+                lastCommittedRef.current = v;
+                onChange(parsed);
+            }
+            else {
+                setParseError(t('engine.form.rootJsonObject', locale));
+            }
+        }
+        catch (err) {
+            setParseError(err?.message ?? t('engine.form.invalidJson', locale));
+        }
+    };
+    const handleMount = (editor, monaco) => {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+        // Defer one tick so the model has settled before the first paint.
+        setTimeout(applyMarkers, 0);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "border rounded overflow-hidden bg-background", style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsx(React.Suspense, { fallback: _jsx(Skeleton, { className: "w-full h-full" }), children: _jsx(LazyMonaco, { value: text, language: "json", theme: theme, onChange: handleChange, onMount: handleMount, options: {
+                            readOnly,
+                            minimap: { enabled: false },
+                            fontSize: 12,
+                            lineNumbers: 'on',
+                            scrollBeyondLastLine: false,
+                            automaticLayout: true,
+                            folding: true,
+                            wordWrap: 'on',
+                            tabSize: 2,
+                            renderLineHighlight: 'line',
+                            scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
+                        } }) }) }), parseError && (_jsxs("div", { className: "text-xs text-destructive flex items-start gap-1.5", children: [_jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx("span", { children: parseError })] }))] }));
+}
+export default JsonSourceEditor;