@object-ui/app-shell 6.1.0 → 6.2.0

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

@@ -0,0 +1,288 @@
+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.
+/**
+ * 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';
+import { useNavigate } from 'react-router-dom';
+import { Save, Loader2, History as HistoryIcon, AlertTriangle, ChevronDown, ChevronRight, } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Input } from '@object-ui/components';
+import { Label } from '@object-ui/components';
+import { Switch } from '@object-ui/components';
+import { Checkbox } 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 as translate, detectLocale } from './i18n';
+function getObjectActions(locale) {
+    return [
+        { key: 'allowCreate', short: 'C', tip: translate('perm.action.create', locale) },
+        { key: 'allowRead', short: 'R', tip: translate('perm.action.read', locale) },
+        { key: 'allowEdit', short: 'U', tip: translate('perm.action.edit', locale) },
+        { key: 'allowDelete', short: 'D', tip: translate('perm.action.delete', locale) },
+        { key: 'allowTransfer', short: 'Tr', tip: translate('perm.action.transfer', locale) },
+        { key: 'allowRestore', short: 'Re', tip: translate('perm.action.restore', locale) },
+        { key: 'allowPurge', short: 'Pu', tip: translate('perm.action.purge', locale) },
+        { key: 'viewAllRecords', short: 'VA', tip: translate('perm.action.viewAll', locale) },
+        { key: 'modifyAllRecords', short: 'MA', tip: translate('perm.action.modifyAll', locale) },
+    ];
+}
+/* ────────────────────────────────────────────────────────────────── */
+/* Component                                                          */
+/* ────────────────────────────────────────────────────────────────── */
+export function PermissionMatrixEditPage({ type, name }) {
+    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 = React.useMemo(() => detectLocale(), []);
+    const t = React.useCallback((k) => translate(k, locale), [locale]);
+    const OBJECT_ACTIONS = React.useMemo(() => getObjectActions(locale), [locale]);
+    const [draft, setDraft] = React.useState({
+        name,
+        objects: {},
+        fields: {},
+    });
+    const [objects, setObjects] = React.useState([]);
+    const [fieldsByObject, setFieldsByObject] = React.useState({});
+    const [expanded, setExpanded] = React.useState(new Set());
+    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 [filter, setFilter] = React.useState('');
+    const [showOnlyEnabled, setShowOnlyEnabled] = React.useState(false);
+    /* ── Load draft + object catalog ───────────────────────────── */
+    React.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        (async () => {
+            try {
+                const [lay, objList] = await Promise.all([
+                    client.layered(type, name).catch(() => null),
+                    client.list('object').catch(() => []),
+                ]);
+                if (cancelled)
+                    return;
+                const effective = (lay?.effective ??
+                    lay?.code ?? { name, objects: {} });
+                setDraft({
+                    ...effective,
+                    name: String(effective?.name ?? name),
+                    objects: effective?.objects ?? {},
+                    fields: effective?.fields ?? {},
+                });
+                const list = (objList ?? [])
+                    .map((row) => {
+                    const item = row?.item ?? row;
+                    return { name: String(item?.name ?? ''), label: item?.label };
+                })
+                    .filter((o) => !!o.name)
+                    .sort((a, b) => a.name.localeCompare(b.name));
+                setObjects(list);
+            }
+            catch (err) {
+                setError(err?.message ?? String(err));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, name]);
+    /* ── Lazy-load fields when an object is expanded ─────────── */
+    async function ensureFields(objectName) {
+        if (fieldsByObject[objectName])
+            return;
+        try {
+            // Fields are stored as `${object}__${field}` keys under the
+            // `field` metadata type. We resolve by listing then filtering
+            // on the `object` attribute of the item.
+            const items = await client.list('field');
+            const list = (items ?? [])
+                .map((row) => row?.item ?? row)
+                .filter((f) => String(f?.object ?? '') === objectName)
+                .map((f) => ({ name: String(f?.name ?? ''), label: f?.label }))
+                .filter((f) => !!f.name)
+                .sort((a, b) => a.name.localeCompare(b.name));
+            setFieldsByObject((prev) => ({ ...prev, [objectName]: list }));
+        }
+        catch {
+            setFieldsByObject((prev) => ({ ...prev, [objectName]: [] }));
+        }
+    }
+    function toggleExpand(objectName) {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(objectName))
+                next.delete(objectName);
+            else {
+                next.add(objectName);
+                ensureFields(objectName);
+            }
+            return next;
+        });
+    }
+    /* ── Mutators ───────────────────────────────────────────── */
+    function updateObjectPerm(objectName, action, value) {
+        setDraft((prev) => {
+            const cur = prev.objects[objectName] ?? {};
+            const nextObj = { ...cur, [action]: value };
+            // Cascade: viewAllRecords implies allowRead.
+            if (action === 'viewAllRecords' && value)
+                nextObj.allowRead = true;
+            if (action === 'modifyAllRecords' && value) {
+                nextObj.allowEdit = true;
+                nextObj.allowRead = true;
+            }
+            return {
+                ...prev,
+                objects: { ...prev.objects, [objectName]: nextObj },
+            };
+        });
+    }
+    function bulkSetObject(objectName, action) {
+        setDraft((prev) => {
+            const next = action === 'none'
+                ? {}
+                : action === 'all'
+                    ? Object.fromEntries(OBJECT_ACTIONS.map((a) => [a.key, true]))
+                    : action === 'crud'
+                        ? { allowCreate: true, allowRead: true, allowEdit: true, allowDelete: true }
+                        : { allowRead: true };
+            return {
+                ...prev,
+                objects: { ...prev.objects, [objectName]: next },
+            };
+        });
+    }
+    function updateFieldPerm(objectName, fieldName, action, value) {
+        const key = `${objectName}.${fieldName}`;
+        setDraft((prev) => {
+            const fields = { ...(prev.fields ?? {}) };
+            const cur = fields[key] ?? { readable: true, editable: false };
+            const next = { ...cur, [action]: value };
+            // Cascade: !readable implies !editable.
+            if (action === 'readable' && !value)
+                next.editable = false;
+            // Cascade: editable implies readable.
+            if (action === 'editable' && value)
+                next.readable = true;
+            fields[key] = next;
+            return { ...prev, fields };
+        });
+    }
+    /* ── Save ────────────────────────────────────────────────── */
+    async function doSave(force, pending) {
+        const payload = pending ?? draft;
+        setSaving(true);
+        setError(null);
+        try {
+            await client.save(type, payload.name, payload, {
+                force,
+            });
+            const lay = await client.layered(type, payload.name);
+            setDraft((lay.effective ?? payload));
+            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);
+        }
+    }
+    /* ── Render helpers ──────────────────────────────────────── */
+    const filteredObjects = React.useMemo(() => {
+        const q = filter.trim().toLowerCase();
+        return objects.filter((o) => {
+            if (showOnlyEnabled) {
+                const perm = draft.objects[o.name];
+                if (!perm || !Object.values(perm).some(Boolean))
+                    return false;
+            }
+            if (!q)
+                return true;
+            return (o.name.toLowerCase().includes(q) ||
+                (o.label ?? '').toLowerCase().includes(q));
+        });
+    }, [objects, filter, showOnlyEnabled, draft.objects]);
+    const stats = [
+        {
+            label: t('perm.stat.objectsGranted'),
+            value: Object.values(draft.objects).filter((p) => Object.values(p).some(Boolean)).length,
+        },
+        {
+            label: t('perm.stat.fieldOverrides'),
+            value: Object.keys(draft.fields ?? {}).length,
+        },
+    ];
+    if (loading) {
+        return (_jsx(PageShell, { entry: entry, itemName: name, children: _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('perm.loading').replace('{name}', name)] }) }));
+    }
+    return (_jsxs(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: draft.isProfile ? t('perm.subtitle.profile') : t('perm.subtitle.set'), stats: stats, actions: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`./history?type=${encodeURIComponent(type)}`), children: [_jsx(HistoryIcon, { className: "h-4 w-4 mr-1" }), " ", t('engine.edit.history')] }), writable && (_jsxs(Button, { size: "sm", onClick: () => doSave(false), disabled: saving, 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')] }))] }), children: [_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [error && (_jsxs("div", { className: "m-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 })] })), _jsxs("div", { className: "px-6 py-3 border-b bg-muted/30 flex flex-wrap items-end gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "perm-name", className: "text-xs", children: t('perm.field.name') }), _jsx(Input, { id: "perm-name", value: draft.name, disabled: !writable, onChange: (e) => setDraft((p) => ({ ...p, name: e.target.value })), className: "h-8 w-56" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "perm-label", className: "text-xs", children: t('perm.field.label') }), _jsx(Input, { id: "perm-label", value: draft.label ?? '', disabled: !writable, onChange: (e) => setDraft((p) => ({ ...p, label: e.target.value })), className: "h-8 w-72" })] }), _jsxs("div", { className: "flex items-center gap-2 pb-1", children: [_jsx(Switch, { id: "perm-is-profile", checked: !!draft.isProfile, disabled: !writable, onCheckedChange: (v) => setDraft((p) => ({ ...p, isProfile: !!v })) }), _jsx(Label, { htmlFor: "perm-is-profile", className: "text-xs", children: t('perm.field.isProfile') })] }), !writable && (_jsx(Badge, { variant: "secondary", className: "ml-auto", children: t('perm.readOnly') }))] }), _jsxs("div", { className: "px-6 py-3 border-b flex items-center gap-3", children: [_jsx(Input, { placeholder: t('perm.filter.placeholder'), value: filter, onChange: (e) => setFilter(e.target.value), className: "h-8 w-72" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "only-enabled", checked: showOnlyEnabled, onCheckedChange: (v) => setShowOnlyEnabled(!!v) }), _jsx(Label, { htmlFor: "only-enabled", className: "text-xs", children: t('perm.filter.onlyGranted') })] }), _jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [filteredObjects.length, " / ", objects.length, " ", t('perm.stat.objectsSuffix')] })] }), _jsx("div", { className: "flex-1 overflow-auto", children: _jsx(PermissionTable, { objects: filteredObjects, draft: draft, expanded: expanded, fieldsByObject: fieldsByObject, writable: writable, objectActions: OBJECT_ACTIONS, t: t, onToggleExpand: toggleExpand, onObjectPerm: updateObjectPerm, onFieldPerm: updateFieldPerm, onBulkSet: bulkSetObject }) })] }), _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')] }), _jsx(DialogDescription, { children: t('engine.edit.destructiveHint') })] }), _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') }), _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')] })] })] }) })] }));
+}
+function PermissionTable({ objects, draft, expanded, fieldsByObject, writable, objectActions, t, onToggleExpand, onObjectPerm, onFieldPerm, onBulkSet, }) {
+    return (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "sticky top-0 bg-background border-b z-10", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-4 py-2 font-medium w-72", children: t('perm.col.object') }), objectActions.map((a) => (_jsx("th", { className: "px-2 py-2 font-medium text-center w-14", title: a.tip, children: a.short }, a.key))), _jsx("th", { className: "px-2 py-2 font-medium w-44 text-right", children: t('perm.col.bulk') })] }) }), _jsxs("tbody", { children: [objects.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: objectActions.length + 2, className: "px-4 py-8 text-center text-muted-foreground", children: t('perm.filter.empty') }) })), objects.map((o) => {
+                        const perm = draft.objects[o.name] ?? {};
+                        const open = expanded.has(o.name);
+                        return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: "border-b hover:bg-muted/30", children: [_jsx("td", { className: "px-2 py-1.5 align-middle", children: _jsxs("button", { type: "button", onClick: () => onToggleExpand(o.name), className: "inline-flex items-center gap-1.5 hover:text-foreground", children: [open ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })), _jsx("span", { className: "font-medium", children: o.label ?? o.name }), o.label && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", o.name, ")"] }))] }) }), objectActions.map((a) => (_jsx("td", { className: "text-center px-2 py-1.5", children: _jsx(Checkbox, { checked: !!perm[a.key], disabled: !writable, onCheckedChange: (v) => onObjectPerm(o.name, a.key, !!v), "aria-label": `${o.name} ${a.tip}` }) }, a.key))), _jsxs("td", { className: "px-2 py-1.5 text-right space-x-1", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-6 px-1.5 text-xs", disabled: !writable, onClick: () => onBulkSet(o.name, 'read'), children: t('perm.bulk.read') }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 px-1.5 text-xs", disabled: !writable, onClick: () => onBulkSet(o.name, 'crud'), children: t('perm.bulk.crud') }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 px-1.5 text-xs", disabled: !writable, onClick: () => onBulkSet(o.name, 'all'), children: t('perm.bulk.all') }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 px-1.5 text-xs", disabled: !writable, onClick: () => onBulkSet(o.name, 'none'), children: t('perm.bulk.none') })] })] }), open && (_jsx("tr", { className: "bg-muted/10", children: _jsx("td", { colSpan: objectActions.length + 2, className: "px-12 py-3", children: _jsx(FieldsSubTable, { objectName: o.name, fields: fieldsByObject[o.name], fieldsState: draft.fields ?? {}, writable: writable, t: t, onFieldPerm: onFieldPerm }) }) }))] }, o.name));
+                    })] })] }));
+}
+function FieldsSubTable({ objectName, fields, fieldsState, writable, t, onFieldPerm, }) {
+    if (!fields) {
+        return (_jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), " ", t('perm.field.loading')] }));
+    }
+    if (fields.length === 0) {
+        return _jsx("div", { className: "text-xs text-muted-foreground", children: t('perm.field.empty') });
+    }
+    return (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-muted-foreground", children: [_jsx("th", { className: "text-left py-1 font-medium", children: t('perm.field.col.name') }), _jsx("th", { className: "px-2 py-1 font-medium w-16 text-center", title: t('perm.field.read'), children: t('perm.field.read') }), _jsx("th", { className: "px-2 py-1 font-medium w-16 text-center", title: t('perm.field.edit'), children: t('perm.field.edit') })] }) }), _jsx("tbody", { children: fields.map((f) => {
+                    const key = `${objectName}.${f.name}`;
+                    const cur = fieldsState[key] ?? { readable: true, editable: false };
+                    return (_jsxs("tr", { className: "border-t border-muted", children: [_jsxs("td", { className: "py-1", children: [f.label ?? f.name, f.label && (_jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", f.name, ")"] }))] }), _jsx("td", { className: "px-2 py-1 text-center", children: _jsx(Checkbox, { checked: !!cur.readable, disabled: !writable, onCheckedChange: (v) => onFieldPerm(objectName, f.name, 'readable', !!v), "aria-label": `${objectName}.${f.name} readable` }) }), _jsx("td", { className: "px-2 py-1 text-center", children: _jsx(Checkbox, { checked: !!cur.editable, disabled: !writable, onCheckedChange: (v) => onFieldPerm(objectName, f.name, 'editable', !!v), "aria-label": `${objectName}.${f.name} editable` }) })] }, f.name));
+                }) })] }));
+}

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1,152 @@
+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.
+/**
+ * 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';
+import { useNavigate } from 'react-router-dom';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '@object-ui/components';
+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 { useMetadataClient, useMetadataTypes, } from './useMetadata';
+import { detectLocale, t as tr } from './i18n';
+export function MetadataQuickFind({ appSlug } = {}) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries: typeEntries } = useMetadataTypes(client);
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const [items, setItems] = React.useState(null);
+    const [itemsLoading, setItemsLoading] = React.useState(false);
+    const [activeIdx, setActiveIdx] = React.useState(0);
+    const locale = React.useMemo(() => detectLocale(), []);
+    // Global Cmd+Shift+M listener (avoids clashing with the existing
+    // CommandPalette which owns Cmd+K).
+    React.useEffect(() => {
+        function onKey(e) {
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'm') {
+                e.preventDefault();
+                setOpen((v) => !v);
+            }
+        }
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+    // Lazy-fetch item index when palette first opens.
+    React.useEffect(() => {
+        if (!open || items != null || itemsLoading || typeEntries.length === 0)
+            return;
+        setItemsLoading(true);
+        let cancelled = false;
+        (async () => {
+            try {
+                // Index *all* types (read-only ones are fine — we just won't
+                // offer create/edit for them; users may still want to find code
+                // artifacts to inspect).
+                const all = [];
+                await Promise.all(typeEntries.map(async (t) => {
+                    try {
+                        const list = await client.list(t.type);
+                        for (const raw of list ?? []) {
+                            const item = (raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw) ?? {};
+                            const name = item?.name;
+                            if (!name)
+                                continue;
+                            all.push({
+                                kind: 'item',
+                                type: t.type,
+                                name: String(name),
+                                label: item?.label,
+                                description: item?.description,
+                            });
+                        }
+                    }
+                    catch {
+                        /* skip types that error */
+                    }
+                }));
+                if (!cancelled)
+                    setItems(all);
+            }
+            finally {
+                if (!cancelled)
+                    setItemsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [open, items, itemsLoading, typeEntries, client]);
+    // Compose results: typed matches first, then item matches.
+    const results = React.useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) {
+            // Empty query → show the type directory only.
+            return typeEntries.slice(0, 20).map((entry) => ({ kind: 'type', entry }));
+        }
+        const typeHits = typeEntries
+            .filter((e) => e.type.toLowerCase().includes(q) ||
+            (e.label ?? '').toLowerCase().includes(q) ||
+            (e.description ?? '').toLowerCase().includes(q))
+            .slice(0, 8)
+            .map((entry) => ({ kind: 'type', entry }));
+        const itemHits = (items ?? [])
+            .filter((i) => i.name.toLowerCase().includes(q) ||
+            (i.label ?? '').toLowerCase().includes(q) ||
+            (i.description ?? '').toLowerCase().includes(q) ||
+            i.type.toLowerCase().includes(q))
+            .slice(0, 40);
+        return [...typeHits, ...itemHits];
+    }, [query, typeEntries, items]);
+    React.useEffect(() => {
+        setActiveIdx(0);
+    }, [query, open]);
+    function navigateTo(r) {
+        setOpen(false);
+        const base = appSlug ? `/apps/${appSlug}` : '..';
+        if (r.kind === 'type') {
+            navigate(`${base}/component/metadata/resource?type=${encodeURIComponent(r.entry.type)}`);
+        }
+        else {
+            navigate(`${base}/component/metadata/resource/${encodeURIComponent(r.name)}?type=${encodeURIComponent(r.type)}`);
+        }
+    }
+    function onKeyDown(e) {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIdx((i) => Math.min(i + 1, results.length - 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIdx((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === 'Enter') {
+            if (results[activeIdx]) {
+                e.preventDefault();
+                navigateTo(results[activeIdx]);
+            }
+        }
+    }
+    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'
+                                ? `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/ResourceEditPage.d.ts

@@ -0,0 +1,7 @@
+export interface MetadataResourceEditPageProps {
+    type: string;
+    name: string;
+    /** When true, this is the Create flow (skip initial fetch). */
+    createMode?: boolean;
+}
+export declare function MetadataResourceEditPage({ type, name, createMode, }: MetadataResourceEditPageProps): import("react/jsx-runtime").JSX.Element;