@object-ui/app-shell 6.1.0 → 6.2.1

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DesignerEditorWrapper — Phase 3d.
+ *
+ * Generic "load metadata → hand to a controlled designer component →
+ * save on commit" wrapper. Lets us plug existing bespoke designers
+ * (ObjectViewConfigurator, DashboardEditor, PageDesigner, …) into the
+ * unified Setup-app shell without rewriting them.
+ *
+ * Each designer takes a different prop shape, so we accept a
+ * `renderDesigner` callback that gets `(value, onChange, readOnly)`
+ * and returns whatever the designer needs.
+ *
+ * Wiring is dead simple — see `builtinComponents.tsx`:
+ *
+ *   registerMetadataResource({
+ *     type: 'view',
+ *     EditPage: (props) => (
+ *       <DesignerEditorWrapper
+ *         {...props}
+ *         renderDesigner={(value, onChange, readOnly) => (
+ *           <ObjectViewConfigurator config={value} onChange={onChange} readOnly={readOnly} />
+ *         )}
+ *       />
+ *     ),
+ *   });
+ *
+ * The wrapper handles:
+ *   • Initial fetch via `client.layered()` (so admins see overlay vs code).
+ *   • Local edit state with Save / Revert.
+ *   • Destructive-change confirmation (409 → dialog → retry with force).
+ *   • Reset overlay button (DELETE).
+ *   • Read-only fallback when the type isn't allowed to override at runtime
+ *     (driven by /meta/types#allowOrgOverride).
+ *
+ * Validation errors (422) are surfaced as an error banner; bespoke
+ * designers usually handle their own field-level UX.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Save, Loader2, RotateCcw, History as HistoryIcon, AlertTriangle, RefreshCw, } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@object-ui/components';
+import { PageShell } from './PageShell';
+import { useMetadataClient, useMetadataTypes } from './useMetadata';
+import { resolveResourceConfig } from './registry';
+import { t, detectLocale } from './i18n';
+export function DesignerEditorWrapper(props) {
+    return _jsx(DesignerEditorBody, { ...props, withChrome: true });
+}
+/**
+ * Embedded variant — same state machine, but no surrounding `PageShell`.
+ * Used by `ResourceEditPage` to host the designer inside a tab alongside
+ * the generic Form / Layers / References tabs. The action toolbar (Save /
+ * Reset / Refresh) is rendered inline at the top of the panel so the tab
+ * remains self-sufficient.
+ */
+export function DesignerEditorBody({ type, name, renderDesigner, fromMetadata, toMetadata, withChrome = false, }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries } = useMetadataTypes(client);
+    const entry = entries.find((t) => t.type === type);
+    const resolved = resolveResourceConfig(type, entry);
+    const writable = !!resolved.allowOrgOverride;
+    const locale = detectLocale();
+    const [value, setValue] = React.useState(null);
+    const [original, setOriginal] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    const [saving, setSaving] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [destructive, setDestructive] = React.useState(null);
+    const dirty = React.useMemo(() => {
+        try {
+            return JSON.stringify(value) !== JSON.stringify(original);
+        }
+        catch {
+            return true;
+        }
+    }, [value, original]);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const lay = await client.layered(type, name);
+            const raw = (lay.effective ?? lay.code ?? {});
+            const v = (fromMetadata ? fromMetadata(raw) : raw);
+            setValue(v);
+            setOriginal(v);
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, type, name, fromMetadata]);
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    async function doSave(force, pending) {
+        const payload = pending ?? value;
+        if (payload == null)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const body = toMetadata ? toMetadata(payload) : payload;
+            // Ensure `name` is set — designers may not carry it.
+            const finalBody = body && typeof body === 'object'
+                ? { ...body, name: body.name ?? name }
+                : body;
+            await client.save(type, name, finalBody, { force });
+            await load();
+            setDestructive(null);
+        }
+        catch (err) {
+            if (err?.status === 409 && err?.code === 'destructive_change') {
+                const issues = err?.body?.issues ?? [];
+                setDestructive({ issues: Array.isArray(issues) ? issues : [], pending: payload });
+            }
+            else {
+                setError(err?.message ?? String(err));
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function doReset() {
+        if (!confirm(t('engine.edit.resetConfirm', locale).replace('{type}', type).replace('{name}', name)))
+            return;
+        setSaving(true);
+        try {
+            await client.reset(type, name);
+            await load();
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    if (loading || value == null) {
+        const loadingBody = (_jsxs("div", { className: "p-6 text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " ", t('engine.edit.loading', locale), " ", type, "/", name, "\u2026"] }));
+        return withChrome ? (_jsx(PageShell, { entry: entry, itemName: name, children: loadingBody })) : (loadingBody);
+    }
+    const toolbarButtons = (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: load, disabled: saving, children: [_jsx(RefreshCw, { className: "h-4 w-4 mr-1" }), " ", t('engine.list.refresh', locale)] }), withChrome && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`./history`), children: [_jsx(HistoryIcon, { className: "h-4 w-4 mr-1" }), " ", t('engine.edit.history', locale)] })), writable && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: doReset, disabled: saving, children: [_jsx(RotateCcw, { className: "h-4 w-4 mr-1" }), " ", t('engine.edit.reset', locale)] })), writable && (_jsxs(Button, { size: "sm", onClick: () => doSave(false), disabled: saving || !dirty, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), t('engine.edit.save', locale)] }))] }));
+    const banners = (_jsxs(_Fragment, { children: [!writable && (_jsx("div", { className: "mx-6 mt-4 rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: t('engine.edit.readOnlyHint', locale) })), error && (_jsxs("div", { className: "mx-6 mt-4 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive flex items-start gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: error })] })), dirty && writable && (_jsxs("div", { className: "mx-6 mt-3 flex items-center gap-2 rounded-md border border-amber-300/50 bg-amber-50 dark:bg-amber-950/30 px-3 py-1.5 text-xs", children: [_jsx(Badge, { variant: "outline", children: t('engine.edit.unsaved', locale) }), _jsx("span", { children: t('engine.edit.unsavedHint', locale) })] }))] }));
+    const designerArea = (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: renderDesigner(value, (next) => setValue(next), !writable) }));
+    const destructiveDialog = (_jsx(Dialog, { open: !!destructive, onOpenChange: (open) => !open && setDestructive(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500" }), " ", t('engine.edit.destructive', locale)] }), _jsx(DialogDescription, { children: t('engine.edit.destructiveHint', locale) })] }), _jsx("ul", { className: "text-sm space-y-1 max-h-64 overflow-auto", children: destructive?.issues.map((i, idx) => (_jsxs("li", { className: "border-l-2 border-amber-500 pl-2", children: [i.kind && _jsx(Badge, { variant: "outline", className: "mr-2", children: i.kind }), i.message ?? JSON.stringify(i)] }, idx))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setDestructive(null), children: t('engine.cancel', locale) }), _jsxs(Button, { variant: "destructive", onClick: () => destructive && doSave(true, destructive.pending), disabled: saving, children: [saving && _jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" }), t('engine.edit.forceSave', locale)] })] })] }) }));
+    if (!withChrome) {
+        return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [_jsx("div", { className: "flex items-center justify-end gap-1 px-6 pt-3", children: toolbarButtons }), banners, designerArea, destructiveDialog] }));
+    }
+    return (_jsxs(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: t('engine.edit.bespokeDesigner', locale), actions: toolbarButtons, children: [_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [banners, designerArea] }), destructiveDialog] }));
+}

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

@@ -0,0 +1 @@
+export declare function MetadataDirectoryPage(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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';
+import { Link } from 'react-router-dom';
+import { Search, Database, Layers, Workflow, Sparkles, Settings, ShieldCheck, Box } 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 { MetadataQuickFind } from './QuickFind';
+import { translateMetadataType, translateMetadataDomain, t, tFormat, detectLocale, } from './i18n';
+const DOMAIN_ICONS = {
+    data: Database,
+    ui: Layers,
+    automation: Workflow,
+    ai: Sparkles,
+    system: Settings,
+    platform: Settings,
+    identity: ShieldCheck,
+    security: ShieldCheck,
+};
+const DOMAIN_ORDER = [
+    'data',
+    'ui',
+    'automation',
+    'ai',
+    'identity',
+    'security',
+    'system',
+    'platform',
+    'other',
+];
+/**
+ * Types intentionally hidden from the directory + list views.
+ *
+ * `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.
+ */
+const HIDDEN_TYPES = new Set(['field']);
+export function MetadataDirectoryPage() {
+    const client = useMetadataClient();
+    const { loading, error, entries } = useMetadataTypes(client);
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [query, setQuery] = React.useState('');
+    const [domainFilter, setDomainFilter] = React.useState('all');
+    const [writableOnly, setWritableOnly] = React.useState(false);
+    // 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 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)
+            return false;
+        if (domainFilter !== 'all' && (e.domain ?? 'other') !== domainFilter)
+            return false;
+        if (query) {
+            const q = query.toLowerCase();
+            const hit = e.type.toLowerCase().includes(q) ||
+                (e.label ?? '').toLowerCase().includes(q) ||
+                (e.description ?? '').toLowerCase().includes(q);
+            if (!hit)
+                return false;
+        }
+        return true;
+    });
+    // Group filtered by domain for display.
+    const grouped = React.useMemo(() => {
+        var _a;
+        const map = {};
+        for (const e of filtered)
+            (map[_a = e.domain ?? 'other'] ?? (map[_a] = [])).push(e);
+        return Object.entries(map).sort(([a], [b]) => {
+            const ai = DOMAIN_ORDER.indexOf(a);
+            const bi = DOMAIN_ORDER.indexOf(b);
+            return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
+        });
+    }, [filtered]);
+    if (loading) {
+        return _jsx("div", { className: "p-6 text-sm text-muted-foreground", children: t('engine.directory.loading', locale) });
+    }
+    if (error) {
+        return (_jsxs("div", { className: "p-6 text-sm text-destructive", children: [t('engine.directory.loadFailed', locale), ": ", error] }));
+    }
+    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>`,
+                                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]) => {
+                        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));
+                    })] }), _jsx(MetadataQuickFind, {})] }));
+}
+function DomainChip({ domain, label, active, count, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: 'px-2.5 py-1 rounded-full text-xs border transition-colors ' +
+            (active
+                ? '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 }) {
+    // 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 }))] }));
+}

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

@@ -0,0 +1,6 @@
+import type { MetadataLayered } from '@object-ui/data-objectstack';
+export interface LayeredDiffProps {
+    layered: MetadataLayered<Record<string, unknown>> | null;
+    loading?: boolean;
+}
+export declare function LayeredDiff({ layered, loading }: LayeredDiffProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+export function LayeredDiff({ layered, loading }) {
+    if (loading) {
+        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading layers\u2026" }));
+    }
+    if (!layered) {
+        return (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Layered view unavailable for this item." }));
+    }
+    const hasOverlay = layered.overlay != null;
+    return (_jsxs(Tabs, { defaultValue: "effective", className: "w-full", children: [_jsxs(TabsList, { className: "grid grid-cols-3 w-fit", children: [_jsxs(TabsTrigger, { value: "code", children: ["Code", _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "artifact" })] }), _jsxs(TabsTrigger, { value: "overlay", children: ["Overlay", hasOverlay ? (_jsx(Badge, { className: "ml-1.5 text-[10px] bg-emerald-600 text-emerald-50", children: layered.overlayScope ?? 'set' })) : (_jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px] text-muted-foreground", children: "none" }))] }), _jsxs(TabsTrigger, { value: "effective", children: ["Effective", _jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: "merged" })] })] }), _jsx(TabsContent, { value: "code", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.code, emptyHint: "No code-level artifact for this item. It may have been created at runtime as a pure overlay." }) }), _jsx(TabsContent, { value: "overlay", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.overlay, emptyHint: "No overlay set. The runtime is using the code-level value as-is." }) }), _jsx(TabsContent, { value: "effective", className: "mt-3", children: _jsx(LayerPanel, { payload: layered.effective, emptyHint: "No effective value resolved." }) })] }));
+}
+function LayerPanel({ payload, emptyHint, }) {
+    if (payload == null) {
+        return (_jsx("div", { className: "rounded border bg-muted/30 p-4 text-xs text-muted-foreground", children: emptyHint }));
+    }
+    let pretty;
+    try {
+        pretty = JSON.stringify(payload, null, 2);
+    }
+    catch {
+        pretty = String(payload);
+    }
+    return (_jsx("pre", { className: "rounded border bg-muted/30 p-3 text-xs font-mono overflow-auto max-h-[420px]", children: pretty }));
+}

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

@@ -0,0 +1,13 @@
+import type { RelatedTarget } from './RelatedPanel';
+export interface MetadataDetailDrawerProps {
+    /** When non-null, drawer is open and shows this target. */
+    target: RelatedTarget | null;
+    /** Called when the drawer requests close (overlay click, esc, close btn). */
+    onClose: () => void;
+    /** Optional context: parent's type / name, shown in the title. */
+    parentContext?: {
+        type: string;
+        name: string;
+    };
+}
+export declare function MetadataDetailDrawer({ target, onClose, parentContext, }: MetadataDetailDrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * MetadataDetailDrawer — slide-over editor for a related metadata item.
+ *
+ * Opens from the parent's Related tab without taking the user away
+ * from the parent's context. Internally we mount the same
+ * `MetadataResourceEditPage` used by the full-page route, so all the
+ * Save / Reset / Validate behaviour is shared. The drawer just frames
+ * it and adds a "Open full page ↗" affordance.
+ *
+ * Width is wide enough for forms (max 1100px) but capped at 92vw to
+ * leave a thin strip of the parent visible behind, reinforcing the
+ * "still in the same object" feel.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExternalLink } from 'lucide-react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, Button, Badge, cn, } from '@object-ui/components';
+import { MetadataResourceEditPage } from './ResourceEditPage';
+export function MetadataDetailDrawer({ target, onClose, parentContext, }) {
+    const navigate = useNavigate();
+    const isMetadata = target?.kind === 'metadata';
+    const isEmbedded = target?.kind === 'embedded';
+    const headerType = isMetadata
+        ? target.type
+        : isEmbedded
+            ? target.groupLabel
+            : '';
+    const headerName = isMetadata
+        ? target.name
+        : isEmbedded
+            ? target.itemName
+            : '';
+    return (_jsx(Sheet, { open: target !== null, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsxs(SheetContent, { side: "right", className: cn('w-[92vw] sm:max-w-[1100px] p-0 flex flex-col gap-0'), children: [_jsxs(SheetHeader, { className: "px-4 py-3 border-b space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: headerType }), _jsx(SheetTitle, { className: "font-mono text-base truncate", children: headerName }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: isMetadata && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                            navigate(`../../${encodeURIComponent(target.type)}/${encodeURIComponent(target.name)}`);
+                                            onClose();
+                                        }, title: "Open in full page", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5 mr-1" }), "Open full page"] })) })] }), parentContext && (_jsxs(SheetDescription, { className: "text-xs", children: [isEmbedded ? 'Embedded in ' : 'Related to ', _jsxs("span", { className: "font-mono", children: [parentContext.type, "/", parentContext.name] })] }))] }), _jsxs("div", { className: "flex-1 min-h-0 overflow-auto", children: [isMetadata && (_jsx(MetadataResourceEditPage, { type: target.type, name: target.name, embedded: true }, `${target.type}/${target.name}`)), isEmbedded && _jsx(EmbeddedItemView, { raw: target.raw })] })] }) }));
+}
+/**
+ * Read-only JSON preview for embedded items (fields, indexes, embedded
+ * validations). Editing happens via the parent's Form tab; jumping
+ * straight to that field is a future enhancement — for now the user
+ * can inspect the spec here and click "Edit in Form tab" in the panel.
+ */
+function EmbeddedItemView({ raw }) {
+    const json = React.useMemo(() => JSON.stringify(raw, null, 2), [raw]);
+    return (_jsxs("div", { className: "p-4 space-y-3", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: ["This item lives inside its parent's body. Edit it in the parent's", ' ', _jsx("span", { className: "font-medium", children: "Form" }), " tab."] }), _jsx("pre", { className: "text-xs font-mono bg-muted/40 border rounded p-3 overflow-auto whitespace-pre-wrap break-all", children: json })] }));
+}

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

@@ -0,0 +1,34 @@
+/**
+ * PageShell — common hero / breadcrumb / action bar for every metadata
+ * admin page (Phase 3c).
+ *
+ * Layout (top → bottom):
+ *   1. Breadcrumb: All Metadata Types › <type> [ › <item> ]
+ *   2. Hero: icon + label + writable badge + count chip
+ *   3. Description (one line)
+ *   4. Action toolbar (Create / Refresh / Reset / Delete)
+ *   5. Child content (list / form / history)
+ *
+ * Keeping the chrome here means every page looks consistent and
+ * page bodies stay focused on their domain logic.
+ */
+import * as React from 'react';
+import type { RichMetadataTypeEntry } from './useMetadata';
+export interface PageShellProps {
+    /** The type entry from `/meta/types` (or a synthesized stub). */
+    entry: RichMetadataTypeEntry | undefined;
+    /** Optional item name (shown in breadcrumb on edit/history). */
+    itemName?: string;
+    /** Sub-label below the title — e.g. "Edit overlay" / "Version history". */
+    subtitle?: string;
+    /** Right-side stat chips. */
+    stats?: Array<{
+        label: string;
+        value: React.ReactNode;
+    }>;
+    /** Right-side action buttons. */
+    actions?: React.ReactNode;
+    /** Page body. */
+    children: React.ReactNode;
+}
+export declare function PageShell({ entry, itemName, subtitle, stats, actions, children, }: PageShellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * PageShell — common hero / breadcrumb / action bar for every metadata
+ * admin page (Phase 3c).
+ *
+ * Layout (top → bottom):
+ *   1. Breadcrumb: All Metadata Types › <type> [ › <item> ]
+ *   2. Hero: icon + label + writable badge + count chip
+ *   3. Description (one line)
+ *   4. Action toolbar (Create / Refresh / Reset / Delete)
+ *   5. Child content (list / form / history)
+ *
+ * Keeping the chrome here means every page looks consistent and
+ * page bodies stay focused on their domain logic.
+ */
+import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Badge } from '@object-ui/components';
+import { ChevronRight } from 'lucide-react';
+import { detectLocale, t, translateMetadataType } from './i18n';
+export function PageShell({ entry, itemName, subtitle, stats, actions, children, }) {
+    const type = entry?.type ?? '';
+    const locale = React.useMemo(() => detectLocale(), []);
+    // Prefer locale-table translation over server's English label.
+    const label = translateMetadataType(type, locale, entry?.label);
+    // Compute base path up to /metadata so breadcrumb links work regardless
+    // of how deep the current route is (list, edit, history, …).
+    const { pathname } = useLocation();
+    const metadataBase = React.useMemo(() => {
+        const idx = pathname.indexOf('/metadata');
+        return idx >= 0 ? pathname.slice(0, idx + '/metadata'.length) : '/metadata';
+    }, [pathname]);
+    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: [_jsxs("nav", { className: "flex items-center gap-1.5 text-xs text-muted-foreground mb-2", children: [_jsx(Link, { to: metadataBase, className: "hover:text-foreground", children: t('engine.breadcrumb.allTypes', locale) }), _jsx(ChevronRight, { className: "h-3 w-3" }), _jsx(Link, { to: `${metadataBase}/${encodeURIComponent(type)}`, className: "hover:text-foreground", children: label }), itemName && (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "h-3 w-3" }), _jsx("span", { className: "text-foreground font-medium font-mono", children: itemName })] }))] }), _jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h1", { className: "text-xl font-semibold truncate", children: label }), _jsx("code", { className: "text-xs font-mono text-muted-foreground", children: type }), entry?.domain && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase tracking-wider", children: entry.domain })), 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: "writable" })) : (_jsx(Badge, { variant: "outline", className: "text-[10px] text-muted-foreground", children: "read-only" }))] }), subtitle && (_jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })), !subtitle && entry?.description && (_jsx("div", { className: "text-sm text-muted-foreground mt-1 max-w-3xl", children: entry.description }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [stats?.map((s, i) => (_jsxs("div", { className: "flex flex-col items-end px-3 py-1 rounded border bg-muted/30 min-w-[64px]", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: s.label }), _jsx("span", { className: "text-sm font-semibold tabular-nums", children: s.value })] }, i))), actions] })] })] }), _jsx("div", { className: "flex-1 overflow-auto", children: children })] }));
+}

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

@@ -0,0 +1,5 @@
+export interface PermissionMatrixEditPageProps {
+    type: string;
+    name: string;
+}
+export declare function PermissionMatrixEditPage({ type, name }: PermissionMatrixEditPageProps): import("react/jsx-runtime").JSX.Element;