@object-ui/app-shell 6.2.0 → 6.2.2

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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';
+import { Loader2, Save, AlertTriangle } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { SchemaForm } from './SchemaForm';
+import { useMetadataClient, useMetadataTypes } from './useMetadata';
+export function EmbeddedItemEditor({ parentType, parentName, embeddedPath, itemName, editAs, initialRaw, onSaved, }) {
+    const client = useMetadataClient();
+    const { entries } = useMetadataTypes(client);
+    const subEntry = editAs ? entries.find((e) => e.type === editAs) : undefined;
+    // Fallback inline schemas for sub-types the framework registers without
+    // a JSON-Schema (validation / index live in object.body but the
+    // registry only exposes their metadata, not their shape). The
+    // schemas below mirror the framework's Zod definitions and the
+    // shapes we see on disk under packages/data-objectstack fixtures.
+    const fallback = !subEntry?.schema && editAs ? FALLBACK_SCHEMAS[editAs] : undefined;
+    const schema = subEntry?.schema ?? fallback?.schema;
+    const form = subEntry?.form ?? fallback?.form;
+    const [draft, setDraft] = React.useState(initialRaw);
+    const [saving, setSaving] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [issues, setIssues] = React.useState([]);
+    const [savedAt, setSavedAt] = React.useState(null);
+    // Resync if a different item is opened in the drawer.
+    React.useEffect(() => {
+        setDraft(initialRaw);
+        setError(null);
+        setIssues([]);
+        setSavedAt(null);
+    }, [initialRaw, itemName, parentType, parentName]);
+    const readOnly = subEntry != null && !subEntry.allowOrgOverride;
+    async function doSave() {
+        if (!embeddedPath) {
+            setError('Cannot save: this item has no embeddedPath registered.');
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        setIssues([]);
+        try {
+            // 1. Re-fetch parent to avoid clobbering concurrent edits.
+            const layered = await client.layered(parentType, parentName);
+            const parent = (layered.effective ?? layered.code ?? {});
+            // 2. Splice modified item back into the parent collection.
+            const updated = spliceEmbedded(parent, embeddedPath, itemName, draft);
+            // 3. PUT the parent.
+            await client.save(parentType, parentName, updated);
+            setSavedAt(Date.now());
+            onSaved?.(draft);
+        }
+        catch (err) {
+            // Validation issues from the parent save apply to the embedded
+            // path. Try to scope them back to this item.
+            if (err?.status === 422 || err?.code === 'invalid_metadata' || err?.code === 'invalid_payload') {
+                const raw = err?.body?.issues ?? [];
+                const mapped = (Array.isArray(raw) ? raw : []).map((x) => {
+                    const fullPath = Array.isArray(x.path) ? x.path.join('.') : String(x.path ?? '');
+                    // Trim the `<embeddedPath>.<itemName>.` prefix so issues
+                    // align with the field they reference inside the sub-form.
+                    const prefix = `${embeddedPath}.${itemName}.`;
+                    const trimmed = fullPath.startsWith(prefix)
+                        ? fullPath.slice(prefix.length)
+                        : fullPath;
+                    return { path: trimmed, message: String(x.message ?? 'Invalid') };
+                });
+                setIssues(mapped);
+                setError(`Validation failed (${mapped.length} issue${mapped.length === 1 ? '' : 's'}).`);
+            }
+            else {
+                setError(err?.message ?? String(err));
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    // 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) => {
+                        try {
+                            setDraft(JSON.parse(e.target.value));
+                            setError(null);
+                        }
+                        catch (err) {
+                            setError(`Invalid JSON: ${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"] }) })] }));
+    }
+    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 a NEW parent object with the embedded item replaced. The
+ * collection at `path` may be either a name-keyed map (`object.fields`)
+ * or an array of `{ name, … }` entries (`object.indexes`); we keep the
+ * existing shape.
+ */
+function spliceEmbedded(parent, path, itemName, item) {
+    const segs = path.split('.');
+    const next = structuredClone(parent);
+    let cur = next;
+    for (let i = 0; i < segs.length - 1; i++) {
+        if (cur[segs[i]] == null)
+            cur[segs[i]] = {};
+        cur = cur[segs[i]];
+    }
+    const leaf = segs[segs.length - 1];
+    const existing = cur[leaf];
+    if (Array.isArray(existing)) {
+        const idx = existing.findIndex((x) => x && typeof x === 'object' && x.name === itemName);
+        if (idx >= 0) {
+            existing[idx] = item;
+        }
+        else {
+            existing.push(item);
+        }
+    }
+    else if (existing && typeof existing === 'object') {
+        // Strip the synthetic `name` we injected when extracting the map.
+        const { name: _n, ...rest } = item;
+        existing[itemName] = rest;
+    }
+    else {
+        // Path didn't exist — initialise as a map keyed by item name.
+        const { name: _n, ...rest } = item;
+        cur[leaf] = { [itemName]: rest };
+    }
+    return next;
+}
+/**
+ * Inline JSONSchema + form-spec fallbacks for sub-types that the
+ * framework's `/meta` registry doesn't expose a `schema`/`form` for.
+ *
+ * `index` is the only one we still need to ship here: it's an
+ * embedded-only sub-type (lives inside `object.indexes[]`) and is not
+ * registered as a standalone metadata type, so the server has no slot
+ * to publish a schema for it. Once / if the framework grows an
+ * embedded-sub-type registry, this can move server-side too.
+ *
+ * `validation` used to be here but is now published by the server via
+ * `HAND_CRAFTED_SCHEMAS.validation` in `objectql/protocol.ts`.
+ */
+const FALLBACK_SCHEMAS = {
+    index: {
+        schema: {
+            type: 'object',
+            required: ['fields'],
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    description: 'Synthesised from columns if omitted (e.g. idx_email).',
+                },
+                fields: {
+                    type: 'array',
+                    title: 'Fields',
+                    description: 'Columns to index, in order.',
+                    items: { type: 'string' },
+                },
+                type: {
+                    type: 'string',
+                    title: 'Algorithm',
+                    enum: ['btree', 'hash', 'gin', 'gist', 'brin'],
+                    default: 'btree',
+                },
+                unique: {
+                    type: 'boolean',
+                    title: 'Unique',
+                    description: 'Enforce uniqueness across the indexed columns.',
+                },
+                where: {
+                    type: 'string',
+                    title: 'Partial-index predicate',
+                    description: 'Optional WHERE clause for a partial index.',
+                },
+            },
+        },
+    },
+};

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,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { EmbeddedItemEditor } from './EmbeddedItemEditor';
+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(EmbeddedItemEditor, { parentType: target.parentType, parentName: target.parentName, embeddedPath: target.embeddedPath, itemName: target.itemName, editAs: target.editAs, initialRaw: target.raw }, `${target.parentType}/${target.parentName}/${target.embeddedPath}/${target.itemName}`))] })] }) }));
+}

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

@@ -15,7 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * page bodies stay focused on their domain logic.
  */
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Badge } from '@object-ui/components';
 import { ChevronRight } from 'lucide-react';
 import { detectLocale, t, translateMetadataType } from './i18n';
@@ -24,7 +24,14 @@ export function PageShell({ entry, itemName, subtitle, stats, actions, children,
     const locale = React.useMemo(() => detectLocale(), []);
     // Prefer locale-table translation over server's English label.
     const label = translateMetadataType(type, locale, entry?.label);
-    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: "../component/metadata/directory", className: "hover:text-foreground", children: t('engine.breadcrumb.allTypes', locale) }), _jsx(ChevronRight, { className: "h-3 w-3" }), _jsx(Link, { to: `../component/metadata/resource?type=${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] ' +
+    // 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'

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

@@ -123,10 +123,10 @@ export function MetadataQuickFind({ appSlug } = {}) {
         setOpen(false);
         const base = appSlug ? `/apps/${appSlug}` : '..';
         if (r.kind === 'type') {
-            navigate(`${base}/component/metadata/resource?type=${encodeURIComponent(r.entry.type)}`);
+            navigate(`${base}/metadata/${encodeURIComponent(r.entry.type)}`);
         }
         else {
-            navigate(`${base}/component/metadata/resource/${encodeURIComponent(r.name)}?type=${encodeURIComponent(r.type)}`);
+            navigate(`${base}/metadata/${encodeURIComponent(r.type)}/${encodeURIComponent(r.name)}`);
         }
     }
     function onKeyDown(e) {

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

@@ -0,0 +1,37 @@
+export interface RelatedPanelProps {
+    /** Parent metadata type, e.g. `object`. */
+    type: string;
+    /** Parent item name (e.g. `sys_user`). */
+    name: string;
+    /**
+     * Effective parent body — used to feed `source: 'embedded'` anchors
+     * (e.g. `object.fields[]`). Optional: if absent, embedded groups are
+     * skipped.
+     */
+    parentItem?: Record<string, unknown> | null;
+    /** Invoked when the user clicks a row. Parent should open a drawer. */
+    onOpen: (target: RelatedTarget) => void;
+}
+/**
+ * Target opened from a Related row. For first-class metadata items
+ * `kind: 'metadata'` carries the addressable (type, name). For embedded
+ * items we hand back the raw object plus the path it came from so the
+ * parent can render a focused detail view.
+ */
+export type RelatedTarget = {
+    kind: 'metadata';
+    type: string;
+    name: string;
+} | {
+    kind: 'embedded';
+    parentType: string;
+    parentName: string;
+    groupLabel: string;
+    itemName: string;
+    raw: Record<string, unknown>;
+    /** Metadata type whose schema drives the editor (e.g. 'field'). */
+    editAs?: string;
+    /** 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;

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

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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';
+import { useNavigate } from 'react-router-dom';
+import { Loader2, Search, Plus, ChevronRight, ExternalLink } from 'lucide-react';
+import { Badge, Button, Input, Empty, EmptyTitle, EmptyDescription, cn, } from '@object-ui/components';
+import { useMetadataClient } from './useMetadata';
+import { listAnchorsFor } from './registry';
+export function RelatedPanel({ type, name, parentItem, onOpen, }) {
+    const client = useMetadataClient();
+    const navigate = useNavigate();
+    const anchors = React.useMemo(() => listAnchorsFor(type), [type]);
+    const [groups, setGroups] = React.useState([]);
+    const [search, setSearch] = React.useState('');
+    const [collapsed, setCollapsed] = React.useState({});
+    React.useEffect(() => {
+        if (anchors.length === 0) {
+            setGroups([]);
+            return;
+        }
+        let cancelled = false;
+        // Seed groups in loading state, ordered by registry order. Embedded
+        // groups resolve synchronously from `parentItem`; list groups dispatch
+        // a `client.list(childType)` and filter.
+        const initial = [...anchors]
+            .sort((a, b) => (a.anchor.order ?? 999) - (b.anchor.order ?? 999))
+            .map((entry) => {
+            const isEmbedded = entry.anchor.source === 'embedded';
+            if (isEmbedded) {
+                const raw = entry.anchor.extract && parentItem
+                    ? entry.anchor.extract(parentItem)
+                    : [];
+                return {
+                    childType: entry.type,
+                    anchor: entry.anchor,
+                    loading: false,
+                    error: null,
+                    items: raw.map(normaliseItem),
+                };
+            }
+            return {
+                childType: entry.type,
+                anchor: entry.anchor,
+                loading: true,
+                error: null,
+                items: [],
+            };
+        });
+        setGroups(initial);
+        void Promise.all(initial.map(async (g) => {
+            if (g.anchor.source === 'embedded')
+                return g;
+            try {
+                const list = (await client.list(g.childType));
+                if (cancelled)
+                    return g;
+                const matchFn = g.anchor.match ?? (() => false);
+                const filtered = list
+                    .filter((item) => matchFn(item, name))
+                    .map((item) => normaliseItem(item));
+                return { ...g, loading: false, items: filtered };
+            }
+            catch (err) {
+                if (cancelled)
+                    return g;
+                return {
+                    ...g,
+                    loading: false,
+                    error: err instanceof Error ? err.message : String(err),
+                };
+            }
+        })).then((finished) => {
+            if (cancelled)
+                return;
+            setGroups(finished);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, name, anchors, parentItem]);
+    if (anchors.length === 0) {
+        return (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No related metadata" }), _jsxs(EmptyDescription, { children: ["No metadata types are configured to anchor at ", _jsx("code", { children: type }), ". You can register one via", ' ', _jsx("code", { className: "font-mono", children: "registerMetadataResource" }), "."] })] }));
+    }
+    const totalCount = groups.reduce((sum, g) => sum + g.items.length, 0);
+    const anyLoading = groups.some((g) => g.loading);
+    const q = search.trim().toLowerCase();
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex-1 max-w-sm", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Search related\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-8 h-8 text-sm" })] }), _jsx("div", { className: "text-xs text-muted-foreground", children: anyLoading
+                            ? 'Scanning…'
+                            : `${totalCount} item${totalCount === 1 ? '' : 's'}` })] }), groups.map((g) => {
+                const matches = q
+                    ? g.items.filter((it) => it.name.toLowerCase().includes(q) ||
+                        (it.label ?? '').toLowerCase().includes(q))
+                    : g.items;
+                const isCollapsed = collapsed[g.childType] ?? false;
+                const visible = !q || matches.length > 0;
+                if (!visible && !g.loading)
+                    return null;
+                return (_jsxs("div", { className: "border rounded-lg overflow-hidden", children: [_jsxs("div", { className: "w-full flex items-center gap-2 px-3 py-2 bg-muted/40", children: [_jsxs("button", { type: "button", className: "flex items-center gap-2 flex-1 text-left hover:opacity-80", onClick: () => setCollapsed((s) => ({ ...s, [g.childType]: !isCollapsed })), children: [_jsx(ChevronRight, { className: cn('h-4 w-4 text-muted-foreground transition-transform', !isCollapsed && 'rotate-90') }), _jsx("div", { className: "text-sm font-medium", children: g.anchor.groupLabel ?? g.childType }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: g.loading ? '…' : matches.length })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2", onClick: () => {
+                                        if (g.anchor.source === 'embedded') {
+                                            // Embedded items are edited inside the parent's Form
+                                            // tab; jump there rather than to a nonexistent route.
+                                            if (typeof window !== 'undefined') {
+                                                const url = new URL(window.location.href);
+                                                url.searchParams.set('tab', 'form');
+                                                url.searchParams.delete('open');
+                                                window.location.assign(url.toString());
+                                            }
+                                            return;
+                                        }
+                                        navigate(`../../${encodeURIComponent(g.childType)}/_new?anchor=${encodeURIComponent(`${type}:${name}`)}`);
+                                    }, title: g.anchor.source === 'embedded'
+                                        ? `Edit in Form tab`
+                                        : `New ${g.childType}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] }), !isCollapsed && (_jsxs("div", { className: "divide-y", children: [g.loading && (_jsxs("div", { className: "px-3 py-3 text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), "Loading ", g.childType, "\u2026"] })), !g.loading && g.error && (_jsxs("div", { className: "px-3 py-3 text-xs text-destructive", children: ["Failed: ", g.error] })), !g.loading && !g.error && matches.length === 0 && (_jsx("div", { className: "px-3 py-3 text-xs text-muted-foreground", children: q ? 'No matches.' : 'Nothing here yet.' })), !g.loading &&
+                                    !g.error &&
+                                    matches.map((it, idx) => (_jsxs("button", { type: "button", onClick: () => onOpen(g.anchor.source === 'embedded'
+                                            ? {
+                                                kind: 'embedded',
+                                                parentType: type,
+                                                parentName: name,
+                                                groupLabel: g.anchor.groupLabel ?? g.childType,
+                                                itemName: it.name,
+                                                raw: it.raw,
+                                                editAs: g.anchor.editAs,
+                                                embeddedPath: g.anchor.embeddedPath,
+                                            }
+                                            : {
+                                                kind: 'metadata',
+                                                type: g.childType,
+                                                name: it.name,
+                                            }), className: "w-full text-left px-3 py-2 hover:bg-accent/50 flex items-center gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-mono text-xs truncate", children: it.name }), it.label && it.label !== it.name && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: it.label }))] }), _jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground" })] }, `${it.name}-${idx}`)))] }))] }, g.childType));
+            })] }));
+}
+function normaliseItem(raw) {
+    const nameVal = pickString(raw, ['name', 'id', 'key']) ?? '(unnamed)';
+    const labelVal = pickString(raw, ['label', 'title', 'displayName']);
+    const descVal = pickString(raw, ['description', 'summary']);
+    return {
+        name: nameVal,
+        label: labelVal,
+        description: descVal,
+        raw,
+    };
+}
+function pickString(obj, keys) {
+    for (const k of keys) {
+        const v = obj[k];
+        if (typeof v === 'string' && v.length > 0)
+            return v;
+    }
+    return undefined;
+}

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

@@ -1,7 +1,13 @@
 export interface MetadataResourceEditPageProps {
-    type: string;
-    name: string;
+    type?: string;
+    name?: string;
     /** When true, this is the Create flow (skip initial fetch). */
     createMode?: boolean;
+    /**
+     * When true, the editor is rendered inside another surface (e.g.
+     * the Related drawer). Hides Related-tab and URL-sync so the inner
+     * page does not fight the outer page for `?tab` / `?open`.
+     */
+    embedded?: boolean;
 }
-export declare function MetadataResourceEditPage({ type, name, createMode, }: MetadataResourceEditPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataResourceEditPage({ type: typeProp, name: nameProp, createMode, embedded, }: MetadataResourceEditPageProps): import("react/jsx-runtime").JSX.Element;