@object-ui/app-shell 6.2.3 → 7.0.0

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

@@ -0,0 +1,395 @@
+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.
+/**
+ * PackagesPage — the package management entry point for Studio.
+ *
+ * Studio previously exposed packages only through the sidebar `active_package`
+ * *filter* dropdown; there was no surface to see all packages, create one, or
+ * act on one (publish / revert / enable / disable). This page fills that gap.
+ *
+ * It is the authoring home for the Studio → package → publish workflow:
+ *   1. Create a package (POST /api/v1/packages with a minimal manifest).
+ *   2. Author metadata bound to it (via the sidebar scope + ResourceEditPage).
+ *   3. Publish it (POST /api/v1/packages/:id/publish).
+ *
+ * Backed entirely by the existing `/api/v1/packages` REST surface
+ * (see framework `http-dispatcher.handlePackages`).
+ */
+import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Package as PackageIcon, Plus, RefreshCw, Search, Upload, Download, FileUp, Undo2, Power, PowerOff, ExternalLink, AlertTriangle, Trash2, } from 'lucide-react';
+import { Button, Input, Badge, Switch, Label, Separator, Skeleton, Empty, EmptyTitle, EmptyDescription, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
+import { detectLocale, t, tFormat } from './i18n';
+const API = '/api/v1/packages';
+async function apiJson(path, init) {
+    const res = await fetch(path, {
+        credentials: 'include',
+        headers: { Accept: 'application/json', ...(init?.headers || {}) },
+        ...init,
+    });
+    const text = await res.text();
+    const payload = text ? JSON.parse(text) : null;
+    if (!res.ok || payload?.success === false) {
+        const msg = payload?.error?.message ||
+            payload?.error ||
+            payload?.message ||
+            `Request failed (${res.status})`;
+        throw new Error(typeof msg === 'string' ? msg : `Request failed (${res.status})`);
+    }
+    // Runtime wraps successful payloads in { data, ... } or returns the object directly.
+    return (payload?.data ?? payload);
+}
+/* -------------------------------------------------------------------------- */
+/* Scope badge                                                                 */
+/* -------------------------------------------------------------------------- */
+function ScopeBadge({ scope }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const s = scope ?? 'project';
+    const variant = s === 'project' ? 'default' : s === 'system' ? 'secondary' : 'outline';
+    const labelKey = s === 'project'
+        ? 'engine.packages.scope.project'
+        : s === 'system'
+            ? 'engine.packages.scope.system'
+            : s === 'cloud'
+                ? 'engine.packages.scope.cloud'
+                : '';
+    return _jsx(Badge, { variant: variant, children: labelKey ? t(labelKey, locale) : s });
+}
+function StatusBadge({ pkg }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const enabled = pkg.enabled !== false && pkg.status !== 'disabled';
+    return (_jsx(Badge, { variant: enabled ? 'default' : 'outline', children: enabled ? t('engine.packages.status.enabled', locale) : t('engine.packages.status.disabled', locale) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Create-package dialog                                                       */
+/* -------------------------------------------------------------------------- */
+const ID_RE = /^[a-z0-9][a-z0-9._-]{1,254}$/i;
+const VERSION_RE = /^\d+\.\d+\.\d+$/;
+function CreatePackageDialog({ open, onOpenChange, onCreated, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [id, setId] = React.useState('');
+    const [name, setName] = React.useState('');
+    const [version, setVersion] = React.useState('0.1.0');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        if (open) {
+            setId('');
+            setName('');
+            setVersion('0.1.0');
+            setError(null);
+            setBusy(false);
+        }
+    }, [open]);
+    const idValid = ID_RE.test(id);
+    const versionValid = VERSION_RE.test(version);
+    const canSubmit = idValid && versionValid && !!name.trim() && !busy;
+    async function submit() {
+        if (!canSubmit)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await apiJson(API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    manifest: {
+                        id: id.trim(),
+                        name: name.trim(),
+                        version: version.trim(),
+                        type: 'app',
+                        scope: 'project',
+                    },
+                }),
+            });
+            onCreated(id.trim());
+            onOpenChange(false);
+        }
+        catch (e) {
+            setError(e?.message ?? t('engine.packages.create.failed', locale));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('engine.packages.create.title', locale) }), _jsx(DialogDescription, { children: tFormat('engine.packages.create.description', locale, { example: 'com.acme.crm' }) })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-id", children: t('engine.packages.create.id', locale) }), _jsx(Input, { id: "pkg-id", placeholder: "com.acme.crm", value: id, onChange: (e) => setId(e.target.value), "aria-invalid": !!id && !idValid }), !!id && !idValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.idInvalid', locale) }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-name", children: t('engine.packages.create.name', locale) }), _jsx(Input, { id: "pkg-name", placeholder: "Acme CRM", value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-version", children: t('engine.packages.create.version', locale) }), _jsx(Input, { id: "pkg-version", placeholder: "0.1.0", value: version, onChange: (e) => setVersion(e.target.value), "aria-invalid": !!version && !versionValid }), !!version && !versionValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.versionInvalid', locale) }))] }), error && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t('engine.cancel', locale) }), _jsx(Button, { onClick: submit, disabled: !canSubmit, children: busy ? t('engine.packages.create.creating', locale) : t('engine.packages.create.submit', locale) })] })] }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Detail sheet — manifest + lifecycle actions                                 */
+/* -------------------------------------------------------------------------- */
+function DetailRow({ label, children }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-4 py-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("span", { className: "text-sm font-medium text-right break-all", children: children })] }));
+}
+function PackageDetailSheet({ pkg, appBase, open, onOpenChange, onChanged, }) {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const [busy, setBusy] = React.useState(null);
+    const [msg, setMsg] = React.useState(null);
+    // ADR-0033 — pending DRAFT items bound to this package. AI-authored metadata
+    // lands as drafts that the active-only browsers hide, so without this the
+    // package looks empty right after a build. We list them here with a link to
+    // the existing per-item review/diff (?review=1) so the user can publish them.
+    const [drafts, setDrafts] = React.useState(null);
+    React.useEffect(() => {
+        setMsg(null);
+        setBusy(null);
+    }, [pkg?.manifest.id]);
+    React.useEffect(() => {
+        const pid = pkg?.manifest.id;
+        if (!open || !pid) {
+            setDrafts(null);
+            return;
+        }
+        let cancelled = false;
+        apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(pid)}`)
+            .then((r) => {
+            if (!cancelled)
+                setDrafts(r?.drafts ?? []);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setDrafts([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, pkg?.manifest.id]);
+    if (!pkg)
+        return null;
+    const id = pkg.manifest.id;
+    const enabled = pkg.enabled !== false && pkg.status !== 'disabled';
+    const isKernel = pkg.manifest.scope === 'system' || pkg.manifest.scope === 'cloud';
+    async function run(action, fn, okText) {
+        setBusy(action);
+        setMsg(null);
+        try {
+            await fn();
+            setMsg({ kind: 'ok', text: okText });
+            onChanged();
+        }
+        catch (e) {
+            setMsg({ kind: 'err', text: e?.message ?? t('engine.packages.detail.actionFailed', locale) });
+        }
+        finally {
+            setBusy(null);
+        }
+    }
+    const publish = () => run('publish', () => apiJson(`${API}/${encodeURIComponent(id)}/publish`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+    }).then((r) => {
+        if (r && r.success === false) {
+            const n = r.validationErrors?.length ?? 0;
+            throw new Error(n
+                ? tFormat('engine.packages.detail.publishBlocked', locale, { count: n })
+                : r.validationErrors?.[0]?.message || t('engine.packages.detail.nothingToPublish', locale));
+        }
+        return r;
+    }), t('engine.packages.detail.published', locale));
+    // ADR-0033 — publish every pending draft of this app in one shot, then
+    // refresh the pending list (it should now be empty). Distinct from the
+    // registry-based `publish` above; this hits `/publish-drafts`.
+    const publishDrafts = () => run('publish-drafts', () => apiJson(`${API}/${encodeURIComponent(id)}/publish-drafts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) }).then(async (r) => {
+        try {
+            const fresh = await apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(id)}`);
+            setDrafts(fresh?.drafts ?? []);
+        }
+        catch {
+            setDrafts([]);
+        }
+        if (r?.failedCount) {
+            throw new Error(tFormat('engine.packages.detail.publishDraftsPartial', locale, {
+                published: r.publishedCount ?? 0,
+                failed: r.failedCount,
+            }));
+        }
+        return r;
+    }), t('engine.packages.detail.publishDraftsOk', locale));
+    const revert = () => run('revert', () => apiJson(`${API}/${encodeURIComponent(id)}/revert`, { method: 'POST' }), t('engine.packages.detail.reverted', locale));
+    // ADR-0033 — discard every pending draft of this app in one shot, reverting
+    // it to the last published baseline. NON-destructive: published metadata and
+    // data are untouched. Distinct from the metadata-service `/revert` above —
+    // this hits the robust `/discard-drafts` (sys_metadata) path.
+    const discardDrafts = () => run('discard-drafts', () => apiJson(`${API}/${encodeURIComponent(id)}/discard-drafts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) }).then(async (r) => {
+        try {
+            const fresh = await apiJson(`/api/v1/meta/_drafts?packageId=${encodeURIComponent(id)}`);
+            setDrafts(fresh?.drafts ?? []);
+        }
+        catch {
+            setDrafts([]);
+        }
+        if (r?.failedCount) {
+            throw new Error(tFormat('engine.packages.detail.discardDraftsPartial', locale, {
+                discarded: r.discardedCount ?? 0,
+                failed: r.failedCount,
+            }));
+        }
+        return r;
+    }), t('engine.packages.detail.discardDraftsOk', locale));
+    // ADR-0033 — delete the WHOLE package: every metadata row (active + draft)
+    // plus each object's physical table (DESTRUCTIVE). Confirmed, then closes the
+    // sheet on success. Errors stay visible (sheet kept open).
+    const deleteApp = async () => {
+        const ok = window.confirm(tFormat('engine.packages.detail.deleteConfirm', locale, { name: pkg?.manifest.name || id }));
+        if (!ok)
+            return;
+        setBusy('delete');
+        setMsg(null);
+        try {
+            await apiJson(`${API}/${encodeURIComponent(id)}`, { method: 'DELETE' });
+            onChanged();
+            onOpenChange(false);
+        }
+        catch (e) {
+            setMsg({ kind: 'err', text: e?.message ?? t('engine.packages.detail.deleteFailed', locale) });
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const toggleEnable = () => run('toggle', () => apiJson(`${API}/${encodeURIComponent(id)}/${enabled ? 'disable' : 'enable'}`, {
+        method: 'PATCH',
+    }), enabled ? t('engine.packages.detail.disabled', locale) : t('engine.packages.detail.enabled', locale));
+    const exportPkg = () => run('export', async () => {
+        const manifest = await apiJson(`${API}/${encodeURIComponent(id)}/export`);
+        const blob = new Blob([JSON.stringify(manifest, null, 2)], {
+            type: 'application/json',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${id}.package.json`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }, t('engine.packages.detail.exported', locale));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "w-full sm:max-w-md overflow-y-auto", children: [_jsxs(SheetHeader, { children: [_jsxs(SheetTitle, { className: "flex items-center gap-2", children: [_jsx(PackageIcon, { className: "h-4 w-4" }), pkg.manifest.name || id] }), _jsx(SheetDescription, { className: "font-mono text-xs", children: id })] }), _jsxs("div", { className: "mt-4", children: [_jsx(DetailRow, { label: t('engine.packages.col.version', locale), children: pkg.manifest.version || '—' }), _jsx(DetailRow, { label: t('engine.packages.detail.type', locale), children: pkg.manifest.type || '—' }), _jsx(DetailRow, { label: t('engine.packages.col.scope', locale), children: _jsx(ScopeBadge, { scope: pkg.manifest.scope }) }), _jsx(DetailRow, { label: t('engine.packages.col.status', locale), children: _jsx(StatusBadge, { pkg: pkg }) }), pkg.manifest.description && (_jsx(DetailRow, { label: t('engine.packages.detail.description', locale), children: pkg.manifest.description }))] }), _jsx(Separator, { className: "my-4" }), _jsxs(Link, { to: `${appBase}/metadata/object?package=${encodeURIComponent(id)}`, className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline", onClick: () => onOpenChange(false), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t('engine.packages.detail.browseMetadata', locale)] }), drafts && drafts.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [t('engine.packages.detail.pendingChanges', locale), _jsx(Badge, { variant: "secondary", children: drafts.length })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('engine.packages.detail.pendingHint', locale) }), !isKernel && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", onClick: publishDrafts, disabled: !!busy, children: [_jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'publish-drafts'
+                                                    ? t('engine.packages.detail.publishing', locale)
+                                                    : tFormat('engine.packages.detail.publishApp', locale, { count: drafts.length })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: discardDrafts, disabled: !!busy, children: [_jsx(Undo2, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'discard-drafts'
+                                                    ? t('engine.packages.detail.discarding', locale)
+                                                    : tFormat('engine.packages.detail.discardChanges', locale, { count: drafts.length })] })] })), _jsx("ul", { className: "space-y-1", children: drafts.map((d) => (_jsx("li", { children: _jsxs(Link, { to: `${appBase}/metadata/${encodeURIComponent(d.type)}/${encodeURIComponent(d.name)}?review=1`, className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline", onClick: () => onOpenChange(false), children: [_jsx(FileUp, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "font-mono text-xs", children: d.type }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), d.name] }) }, `${d.type}/${d.name}`))) })] })] })), _jsx(Separator, { className: "my-4" }), isKernel ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('engine.packages.detail.kernelReadOnly', locale) })) : (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.packages.detail.actions', locale) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", onClick: publish, disabled: !!busy, children: [_jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'publish' ? t('engine.packages.detail.publishing', locale) : t('engine.packages.detail.publish', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: revert, disabled: !!busy, children: [_jsx(Undo2, { className: "mr-1.5 h-3.5 w-3.5" }), t('engine.packages.detail.revert', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: toggleEnable, disabled: !!busy, children: [enabled ? (_jsx(PowerOff, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Power, { className: "mr-1.5 h-3.5 w-3.5" })), enabled ? t('engine.packages.detail.disable', locale) : t('engine.packages.detail.enable', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: exportPkg, disabled: !!busy, children: [_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'export' ? t('engine.packages.detail.exporting', locale) : t('engine.packages.detail.export', locale)] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: deleteApp, disabled: !!busy, className: "text-destructive hover:bg-destructive/10 hover:text-destructive", children: [_jsx(Trash2, { className: "mr-1.5 h-3.5 w-3.5" }), busy === 'delete' ? t('engine.packages.detail.deleting', locale) : t('engine.packages.detail.deleteApp', locale)] })] })] })), msg && (_jsx("div", { className: `mt-4 rounded-md border p-2 text-sm ${msg.kind === 'ok'
+                        ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+                        : 'border-destructive/40 bg-destructive/10 text-destructive'}`, children: msg.text }))] }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Main page                                                                   */
+/* -------------------------------------------------------------------------- */
+export function PackagesPage() {
+    const locale = React.useMemo(() => detectLocale(), []);
+    const { pathname } = useLocation();
+    // App base = path up to (and excluding) `/component/...`, so links to
+    // `/apps/:app/metadata/...` work regardless of nesting.
+    const appBase = React.useMemo(() => {
+        const idx = pathname.indexOf('/component');
+        return idx >= 0 ? pathname.slice(0, idx) : pathname;
+    }, [pathname]);
+    const [packages, setPackages] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    const [showKernel, setShowKernel] = React.useState(false);
+    const [createOpen, setCreateOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(null);
+    const [detailOpen, setDetailOpen] = React.useState(false);
+    const fileRef = React.useRef(null);
+    const [importing, setImporting] = React.useState(false);
+    const [importMsg, setImportMsg] = React.useState(null);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await apiJson(API);
+            const list = Array.isArray(data?.packages) ? data.packages : [];
+            list.sort((a, b) => {
+                // User (project) packages first, then by name.
+                const sa = a.manifest.scope === 'project' ? 0 : 1;
+                const sb = b.manifest.scope === 'project' ? 0 : 1;
+                if (sa !== sb)
+                    return sa - sb;
+                return (a.manifest.name || a.manifest.id).localeCompare(b.manifest.name || b.manifest.id);
+            });
+            setPackages(list);
+        }
+        catch (e) {
+            setError(e?.message ?? t('engine.packages.loadFailed', locale));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [locale]);
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    // Keep the open detail sheet in sync with refreshed data.
+    React.useEffect(() => {
+        if (!selected)
+            return;
+        const fresh = packages.find((p) => p.manifest.id === selected.manifest.id);
+        if (fresh && fresh !== selected)
+            setSelected(fresh);
+    }, [packages, selected]);
+    const filtered = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return packages.filter((p) => {
+            const kernel = p.manifest.scope === 'system' || p.manifest.scope === 'cloud';
+            if (kernel && !showKernel)
+                return false;
+            if (!q)
+                return true;
+            return (p.manifest.id.toLowerCase().includes(q) ||
+                (p.manifest.name || '').toLowerCase().includes(q));
+        });
+    }, [packages, query, showKernel]);
+    const openDetail = (pkg) => {
+        setSelected(pkg);
+        setDetailOpen(true);
+    };
+    const onImportFile = async (e) => {
+        const file = e.target.files?.[0];
+        e.target.value = ''; // allow re-selecting the same file
+        if (!file)
+            return;
+        setImporting(true);
+        setImportMsg(null);
+        try {
+            const text = await file.text();
+            let manifest;
+            try {
+                manifest = JSON.parse(text);
+            }
+            catch {
+                throw new Error(t('engine.packages.import.invalidJson', locale));
+            }
+            if (!manifest || typeof manifest !== 'object' || (!manifest.id && !manifest.name)) {
+                throw new Error(t('engine.packages.import.invalidPackage', locale));
+            }
+            const res = await apiJson('/api/v1/marketplace/install-local', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ manifest }),
+            });
+            setImportMsg({
+                kind: 'ok',
+                text: tFormat('engine.packages.import.success', locale, { id: res?.manifestId ?? manifest.id }),
+            });
+            await load();
+        }
+        catch (err) {
+            setImportMsg({ kind: 'err', text: err?.message ?? t('engine.packages.import.failed', locale) });
+        }
+        finally {
+            setImporting(false);
+        }
+    };
+    const kernelCount = packages.filter((p) => p.manifest.scope === 'system' || p.manifest.scope === 'cloud').length;
+    return (_jsxs("div", { className: "mx-auto w-full max-w-5xl px-6 py-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "rounded-lg bg-primary/10 p-2 text-primary", children: _jsx(PackageIcon, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight", children: t('engine.packages.title', locale) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('engine.packages.description', locale) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}` }), t('engine.packages.refresh', locale)] }), _jsx("input", { ref: fileRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onImportFile }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileRef.current?.click(), disabled: importing, children: [_jsx(FileUp, { className: "mr-1.5 h-3.5 w-3.5" }), importing ? t('engine.packages.importing', locale) : t('engine.packages.import', locale)] }), _jsxs(Button, { size: "sm", onClick: () => setCreateOpen(true), children: [_jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }), t('engine.packages.new', locale)] })] })] }), importMsg && (_jsx("div", { className: `mt-4 rounded-md border p-2 text-sm ${importMsg.kind === 'ok'
+                    ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+                    : 'border-destructive/40 bg-destructive/10 text-destructive'}`, children: importMsg.text })), _jsxs("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-xs", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.packages.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), kernelCount > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-kernel", checked: showKernel, onCheckedChange: setShowKernel }), _jsx(Label, { htmlFor: "show-kernel", className: "text-sm text-muted-foreground", children: tFormat('engine.packages.showPlatform', locale, { count: kernelCount }) })] }))] }), _jsx("div", { className: "mt-4 rounded-lg border", children: loading ? (_jsx("div", { className: "space-y-2 p-4", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })) : error ? (_jsxs("div", { className: "flex items-start gap-2 p-4 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] })) : filtered.length === 0 ? (_jsx("div", { className: "p-8", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('engine.packages.empty', locale) }), _jsx(EmptyDescription, { children: packages.length === 0
+                                    ? t('engine.packages.emptyCreate', locale)
+                                    : t('engine.packages.emptyFiltered', locale) })] }) })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('engine.packages.col.name', locale) }), _jsx(TableHead, { children: "ID" }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.version', locale) }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.scope', locale) }), _jsx(TableHead, { className: "w-24", children: t('engine.packages.col.status', locale) })] }) }), _jsx(TableBody, { children: filtered.map((p) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => openDetail(p), children: [_jsx(TableCell, { className: "font-medium", children: p.manifest.name || p.manifest.id }), _jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: p.manifest.id }), _jsx(TableCell, { children: p.manifest.version || '—' }), _jsx(TableCell, { children: _jsx(ScopeBadge, { scope: p.manifest.scope }) }), _jsx(TableCell, { children: _jsx(StatusBadge, { pkg: p }) })] }, p.manifest.id))) })] })) }), _jsx(CreatePackageDialog, { open: createOpen, onOpenChange: setCreateOpen, onCreated: async () => {
+                    await load();
+                } }), _jsx(PackageDetailSheet, { pkg: selected, appBase: appBase, open: detailOpen, onOpenChange: setDetailOpen, onChanged: () => void load() })] }));
+}
+export default PackagesPage;

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

@@ -31,4 +31,4 @@ export interface PageShellProps {
     /** Page body. */
     children: React.ReactNode;
 }
-export declare function PageShell({ entry, itemName, subtitle, stats, actions, children, }: PageShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageShell({ entry, itemName, subtitle, stats, actions, children, }: PageShellProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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
@@ -18,7 +18,7 @@ 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';
+import { detectLocale, t, translateMetadataType, translateMetadataDomain } from './i18n';
 export function PageShell({ entry, itemName, subtitle, stats, actions, children, }) {
     const type = entry?.type ?? '';
     const locale = React.useMemo(() => detectLocale(), []);
@@ -31,10 +31,15 @@ export function PageShell({ entry, itemName, subtitle, stats, actions, children,
         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] ' +
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [itemName ? (_jsxs("div", { className: "px-6 py-2.5 border-b bg-background flex items-center gap-3 min-h-[44px]", children: [_jsxs("nav", { className: "flex items-center gap-1.5 text-xs text-muted-foreground min-w-0", children: [_jsx(Link, { to: metadataBase, className: "hover:text-foreground shrink-0", children: t('engine.breadcrumb.allTypes', locale) }), _jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }), _jsx(Link, { to: `${metadataBase}/${encodeURIComponent(type)}`, className: "hover:text-foreground shrink-0", children: label }), _jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "text-foreground font-medium font-mono truncate", title: itemName, children: itemName })] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [entry?.domain && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase tracking-wider h-5 px-1.5", children: translateMetadataDomain(entry.domain, locale) })), entry?.allowOrgOverride ? (_jsx(Badge, { className: 'text-[10px] h-5 px-1.5 ' +
+                                    (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] h-5 px-1.5 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] h-5 px-1.5 text-muted-foreground", children: t('engine.badge.readOnly', locale) }))] }), subtitle && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: subtitle })), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [stats?.map((s, i) => (_jsxs("div", { className: "flex items-baseline gap-1 px-2 py-0.5 rounded border bg-muted/30", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: s.label }), _jsx("span", { className: "text-xs font-semibold tabular-nums", children: s.value })] }, i))), actions] })] })) : (_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("span", { className: "text-foreground font-medium", children: label })] }), _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: translateMetadataDomain(entry.domain, locale) })), 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 })] }));
+                                                    : '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) }))] }), 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

@@ -1,5 +1,39 @@
+/**
+ * PermissionMatrixEditor — custom editor for `type=permission` (Phase 3e).
+ *
+ * Renders the Salesforce-style matrix that lives behind a Permission
+ * Set / Profile metadata item:
+ *
+ *   • Top section — object-level CRUD + VAMA (View All / Modify All)
+ *     + lifecycle (Transfer / Restore / Purge).
+ *   • Lower section — field-level R/W for the fields of any object
+ *     selected from the table above.
+ *
+ * Data model (matches `PermissionSetSchema` in
+ * `packages/spec/src/security/permission.zod.ts`):
+ *
+ *   {
+ *     name: string,
+ *     label?: string,
+ *     isProfile?: boolean,
+ *     objects: { [object_name]: ObjectPermission },
+ *     fields?:  { [`${object_name}.${field_name}`]: FieldPermission },
+ *     systemPermissions?: string[],
+ *     tabPermissions?: Record<string, 'visible'|'hidden'|'default_on'|'default_off'>,
+ *   }
+ *
+ * Wiring: registered from `builtinComponents.tsx` as
+ *   registerMetadataResource({ type: 'permission', EditPage: PermissionMatrixEditPage })
+ *
+ * The component reads `/api/v1/meta/object` + `/api/v1/meta/field` to
+ * enumerate available objects and their fields. Saves through the
+ * standard metadata save flow (overlay-aware, OCC, destructive-change
+ * dialog already provided by the generic engine — we go through
+ * client.save() directly).
+ */
+import * as React from 'react';
 export interface PermissionMatrixEditPageProps {
     type: string;
     name: string;
 }
-export declare function PermissionMatrixEditPage({ type, name }: PermissionMatrixEditPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function PermissionMatrixEditPage({ type, name }: PermissionMatrixEditPageProps): React.JSX.Element;

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

@@ -1,5 +1,25 @@
+/**
+ * MetadataQuickFind — Cmd+K palette that searches across all
+ * metadata types (Phase 3c).
+ *
+ * Behaviour:
+ *   • Mounted as a side-effect via `<MetadataQuickFindMount />`.
+ *   • Listens for Cmd+K / Ctrl+K globally; opens a dialog with a
+ *     search input.
+ *   • Free-text search hits two pools:
+ *       (a) Metadata types from `/meta/types` (jump to directory entry).
+ *       (b) Items of any type — lazy-fetched the first time the palette
+ *           opens, cached for the session.
+ *   • Selecting a result navigates to the appropriate route.
+ *
+ * Trade-offs: For the MVP we eagerly fetch the item index on first
+ * open (one `/meta/:type` per writable type). For most workspaces
+ * that's a few hundred items total — well within a fast modal load.
+ * If usage grows we'll switch to server-side search.
+ */
+import * as React from 'react';
 export interface MetadataQuickFindProps {
     /** Optional app slug for routing; defaults to "setup" if unknown. */
     appSlug?: string;
 }
-export declare function MetadataQuickFind({ appSlug }?: MetadataQuickFindProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataQuickFind({ appSlug }?: MetadataQuickFindProps): React.JSX.Element;

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

@@ -25,9 +25,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '@object-ui/co
 import { Input } from '@object-ui/components';
 import { Badge } from '@object-ui/components';
 import { Kbd } from '@object-ui/components';
-import { Search, Loader2 } from 'lucide-react';
+import { Search, Loader2, Lock } from 'lucide-react';
 import { useMetadataClient, useMetadataTypes, } from './useMetadata';
-import { detectLocale, t as tr } from './i18n';
+import { detectLocale, t as tr, translateMetadataType } from './i18n';
 export function MetadataQuickFind({ appSlug } = {}) {
     const navigate = useNavigate();
     const client = useMetadataClient();
@@ -76,6 +76,8 @@ export function MetadataQuickFind({ appSlug } = {}) {
                                 name: String(name),
                                 label: item?.label,
                                 description: item?.description,
+                                lock: typeof item?._lock === 'string' ? item._lock : undefined,
+                                lockReason: typeof item?._lockReason === 'string' ? item._lockReason : undefined,
                             });
                         }
                     }
@@ -105,6 +107,7 @@ export function MetadataQuickFind({ appSlug } = {}) {
         const typeHits = typeEntries
             .filter((e) => e.type.toLowerCase().includes(q) ||
             (e.label ?? '').toLowerCase().includes(q) ||
+            translateMetadataType(e.type, locale, e.label).toLowerCase().includes(q) ||
             (e.description ?? '').toLowerCase().includes(q))
             .slice(0, 8)
             .map((entry) => ({ kind: 'type', entry }));
@@ -146,7 +149,7 @@ export function MetadataQuickFind({ appSlug } = {}) {
         }
     }
     return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-2xl p-0 overflow-hidden", children: [_jsx(DialogHeader, { className: "sr-only", children: _jsx(DialogTitle, { children: tr('engine.quickfind.title', locale) }) }), _jsxs("div", { className: "border-b px-3 py-2 flex items-center gap-2", children: [_jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), _jsx(Input, { autoFocus: true, placeholder: tr('engine.quickfind.placeholder', locale), value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: onKeyDown, className: "border-0 shadow-none focus-visible:ring-0 px-0" }), _jsx(Kbd, { children: "esc" })] }), _jsxs("div", { className: "max-h-[440px] overflow-auto", children: [itemsLoading && (_jsxs("div", { className: "px-3 py-4 text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), tr('engine.quickfind.indexing', locale), " ", typeEntries.length, "\u2026"] })), !itemsLoading && results.length === 0 && (_jsx("div", { className: "px-3 py-6 text-xs text-muted-foreground text-center", children: tr('engine.quickfind.noMatches', locale) })), _jsx("ul", { role: "listbox", children: results.map((r, i) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => navigateTo(r), onMouseEnter: () => setActiveIdx(i), className: 'w-full text-left px-3 py-2 flex items-center gap-3 hover:bg-accent ' +
-                                        (i === activeIdx ? 'bg-accent' : ''), children: [_jsx(Badge, { variant: "outline", className: "text-[10px] font-mono shrink-0", children: r.kind === 'type' ? 'type' : r.type }), _jsx("div", { className: "min-w-0 flex-1", children: r.kind === 'type' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm font-medium truncate", children: r.entry.label ?? r.entry.type }), r.entry.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: r.entry.description }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-sm font-mono truncate", children: [r.name, r.label && (_jsx("span", { className: "text-muted-foreground font-sans ml-2", children: r.label }))] }), r.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: r.description }))] })) })] }) }, r.kind === 'type'
+                                        (i === activeIdx ? 'bg-accent' : ''), children: [_jsx(Badge, { variant: "outline", className: "text-[10px] font-mono shrink-0", children: r.kind === 'type' ? 'type' : r.type }), _jsx("div", { className: "min-w-0 flex-1", children: r.kind === 'type' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm font-medium truncate", children: translateMetadataType(r.entry.type, locale, r.entry.label) }), r.entry.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: r.entry.description }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-sm font-mono truncate flex items-center gap-1.5", children: [r.lock && r.lock !== 'none' && (_jsx("span", { className: "text-amber-600 dark:text-amber-400 shrink-0", title: r.lockReason ?? `_lock=${r.lock}`, "aria-label": "locked", children: _jsx(Lock, { className: "h-3 w-3" }) })), r.name, r.label && (_jsx("span", { className: "text-muted-foreground font-sans ml-2", children: r.label }))] }), r.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: r.description }))] })) })] }) }, r.kind === 'type'
                                 ? `t:${r.entry.type}`
                                 : `i:${r.type}:${r.name}`))) })] }), _jsxs("div", { className: "border-t px-3 py-1.5 flex items-center gap-3 text-[10px] text-muted-foreground", children: [_jsxs("span", { children: [_jsx(Kbd, { children: "\u2191" }), " ", _jsx(Kbd, { children: "\u2193" }), " navigate"] }), _jsxs("span", { children: [_jsx(Kbd, { children: "\u21B5" }), " open"] }), _jsxs("span", { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "M" }), " toggle"] })] })] }) }));
 }

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

@@ -1,3 +1,26 @@
+/**
+ * RelatedPanel — lists metadata items anchored to the current parent.
+ *
+ * Driven by the anchor registry (see `anchors.ts` / `registry.ts`). For
+ * each child type that declares it anchors at `parentType`, we issue
+ * one `client.list(childType)` call in parallel, filter the result with
+ * the anchor's match predicate, and render the survivors in collapsible
+ * groups.
+ *
+ * Why client-side filter? Anchoring lives in metadata bodies that are
+ * not indexed on the server today, and adding a parameterised list API
+ * for every potential anchor field would balloon the surface area. The
+ * Related tab is opened by humans on a specific object, so the cost of
+ * pulling 100-or-so items per child type is negligible — far cheaper
+ * than a network round-trip per row would have been.
+ *
+ * Visual model:
+ *   - One <details> per group (default open if non-empty).
+ *   - Rows are kebab-y: name, optional label, optional badge.
+ *   - Click → call `onOpen({ type, name })`; parent owns the drawer.
+ *   - A search input filters across all groups by name/label substring.
+ */
+import * as React from 'react';
 export interface RelatedPanelProps {
     /** Parent metadata type, e.g. `object`. */
     type: string;
@@ -34,4 +57,4 @@ export type RelatedTarget = {
     /** Dotted path inside parent where this collection lives (e.g. 'fields'). */
     embeddedPath?: string;
 };
-export declare function RelatedPanel({ type, name, parentItem, onOpen, }: RelatedPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelatedPanel({ type, name, parentItem, onOpen, }: RelatedPanelProps): React.JSX.Element;