@object-ui/app-shell 6.1.0 → 6.2.0

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

@@ -0,0 +1,256 @@
+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.
+/**
+ * MetadataResourceEditPage — generic AutoForm-driven editor (Phase 3c).
+ *
+ * What it does:
+ *   1. Fetches the layered view (`?layers=true`) so the user sees code
+ *      vs overlay vs effective.
+ *   2. Renders a SchemaForm against the JSONSchema in the type's
+ *      `/meta/types` registry row.
+ *   3. Save → PUT, with automatic destructive-change handling: a 409
+ *      `destructive_change` response opens a confirmation dialog
+ *      listing the issues, and on confirm we retry with `?force=true`.
+ *   4. Reset overlay → DELETE (overlay only).
+ *   5. References tab → calls `client.references()` and lists
+ *      back-pointers so admins know what will break before deleting.
+ *
+ * Works for any of the 27 metadata types — bespoke editors (Object,
+ * Field, View, Permission Matrix) opt out by registering a custom
+ * EditPage via `registerMetadataResource()`.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Save, RotateCcw, History, Link2, Loader2, AlertTriangle, } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@object-ui/components';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { PageShell } from './PageShell';
+import { LayeredDiff } from './LayeredDiff';
+import { SchemaForm } from './SchemaForm';
+import { useMetadataClient, useMetadataTypes, } from './useMetadata';
+import { getMetadataResource, resolveResourceConfig, } from './registry';
+export function MetadataResourceEditPage({ type, name, createMode = false, }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries } = useMetadataTypes(client);
+    const entry = entries.find((t) => t.type === type);
+    const config = resolveResourceConfig(type, entry);
+    // Custom editor takes over.
+    const customConfig = getMetadataResource(type);
+    if (customConfig?.EditPage && !createMode) {
+        const Custom = customConfig.EditPage;
+        return _jsx(Custom, { type: type, name: name });
+    }
+    if (customConfig?.CreatePage && createMode) {
+        const Custom = customConfig.CreatePage;
+        return _jsx(Custom, { type: type });
+    }
+    const [layered, setLayered] = React.useState(null);
+    const [draft, setDraft] = React.useState(createMode ? { name: '' } : {});
+    const [refs, setRefs] = React.useState(null);
+    const [loading, setLoading] = React.useState(!createMode);
+    const [saving, setSaving] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [issues, setIssues] = React.useState([]);
+    const [destructiveIssues, setDestructiveIssues] = React.useState(null);
+    const [pendingItem, setPendingItem] = React.useState(null);
+    // Prefetch object name list once — fuels the `ref:object` widget.
+    // We don't block render on it; the widget shows a "Loading…" state.
+    const [objectNames, setObjectNames] = React.useState([]);
+    const [objectsLoading, setObjectsLoading] = React.useState(true);
+    React.useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = (await client.list('object'));
+                if (cancelled)
+                    return;
+                setObjectNames(list.map((x) => x?.name).filter((n) => !!n).sort());
+            }
+            catch {
+                if (!cancelled)
+                    setObjectNames([]);
+            }
+            finally {
+                if (!cancelled)
+                    setObjectsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    const widgetContext = React.useMemo(() => ({ objectNames, objectsLoading }), [objectNames, objectsLoading]);
+    // Load layered view + initial draft.
+    React.useEffect(() => {
+        if (createMode) {
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const lay = await client.layered(type, name);
+                if (cancelled)
+                    return;
+                setLayered(lay);
+                // Initial draft = effective if available, otherwise code.
+                const initial = (lay.effective ?? lay.code ?? {});
+                setDraft(initial);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err?.message ?? String(err));
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, name, createMode]);
+    // Lazy-load references when the tab is opened.
+    const [refsLoading, setRefsLoading] = React.useState(false);
+    async function loadReferences() {
+        if (refs != null || refsLoading)
+            return;
+        setRefsLoading(true);
+        try {
+            const r = await client.references(type, name);
+            setRefs(r);
+        }
+        catch (err) {
+            // Surface as empty list; non-blocking.
+            setRefs([]);
+            console.error('references() failed', err);
+        }
+        finally {
+            setRefsLoading(false);
+        }
+    }
+    async function doSave(force) {
+        setSaving(true);
+        setError(null);
+        setIssues([]);
+        try {
+            // Ensure `name` is set on create.
+            const itemToSave = createMode
+                ? { ...draft, name: String(draft.name ?? name) }
+                : draft;
+            const savedName = String(itemToSave.name ?? name);
+            if (!savedName) {
+                setError('A name is required.');
+                setSaving(false);
+                return;
+            }
+            const result = await client.save(type, savedName, itemToSave, { force });
+            // Refresh layered after save.
+            const lay = await client.layered(type, savedName);
+            setLayered(lay);
+            setDraft((lay.effective ?? itemToSave));
+            setDestructiveIssues(null);
+            setPendingItem(null);
+            if (createMode) {
+                // Use absolute path — react-router resolves `../` against the
+                // matched route pattern (`/apps/:app/component/:ns/:name/*`),
+                // which overshoots and lands at `/apps/:app`. Anchor on the
+                // location's pathname for predictable behaviour.
+                const here = window.location.pathname; // .../resource/new
+                const parent = here.replace(/\/new\/?$/, '');
+                navigate(`${parent}/${encodeURIComponent(savedName)}?type=${encodeURIComponent(type)}`);
+            }
+        }
+        catch (err) {
+            // Map destructive change → confirmation dialog.
+            if (err?.status === 409 && err?.code === 'destructive_change') {
+                const i = err?.body?.issues ?? [];
+                setDestructiveIssues(Array.isArray(i) ? i : []);
+                setPendingItem(draft);
+            }
+            // Map schema validation → inline field errors.
+            else if (err?.status === 422 || err?.code === 'invalid_metadata' || err?.code === 'invalid_payload') {
+                const i = err?.body?.issues ?? [];
+                let mapped = (Array.isArray(i) ? i : []).map((x) => ({
+                    path: Array.isArray(x.path) ? x.path.join('.') : String(x.path ?? ''),
+                    message: String(x.message ?? 'Invalid'),
+                }));
+                // Backend's invalid_metadata sometimes returns a flat string like
+                // "<type>/<name> failed spec validation: <path>: <message>".
+                // Parse it into a single inline issue + summary so users see the
+                // real problem instead of "0 issues".
+                const raw = String(err?.body?.error ?? err?.message ?? '');
+                if (mapped.length === 0 && raw) {
+                    const m = raw.match(/failed spec validation:\s*(.+?):\s*(.+)$/);
+                    if (m) {
+                        mapped = [{ path: m[1].trim(), message: m[2].trim() }];
+                    }
+                    else {
+                        mapped = [{ path: '', message: raw }];
+                    }
+                }
+                setIssues(mapped);
+                if (mapped.length === 1 && !mapped[0].path) {
+                    setError(mapped[0].message);
+                }
+                else if (mapped.length === 1) {
+                    setError(`${mapped[0].path}: ${mapped[0].message}`);
+                }
+                else {
+                    setError(`Validation failed (${mapped.length} issues).`);
+                }
+            }
+            else {
+                setError(err?.message ?? String(err));
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function doReset() {
+        if (!confirm(`Reset overlay for ${type}/${name}? Code-level value will be restored.`)) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            await client.reset(type, name);
+            const lay = await client.layered(type, name);
+            setLayered(lay);
+            setDraft((lay.effective ?? lay.code ?? {}));
+        }
+        catch (err) {
+            setError(err?.message ?? String(err));
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    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" }), " Loading ", type, "/", name, "\u2026"] }) }));
+    }
+    const schema = entry?.schema ??
+        config.defaultSchema;
+    const readOnly = !entry?.allowOrgOverride && !createMode;
+    return (_jsxs(PageShell, { entry: entry ?? { type, label: type }, itemName: createMode ? '(new)' : name, subtitle: createMode ? 'Create new' : 'Edit overlay', actions: _jsxs(_Fragment, { children: [!createMode && entry?.allowOrgOverride && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: doReset, disabled: saving, children: [_jsx(RotateCcw, { className: "h-4 w-4 mr-1" }), "Reset overlay"] })), !createMode && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`./history?type=${encodeURIComponent(type)}`), children: [_jsx(History, { className: "h-4 w-4 mr-1" }), "History"] })), entry?.allowOrgOverride && (_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" })), "Save"] }))] }), children: [_jsxs("div", { className: "p-6 space-y-6 max-w-7xl", children: [error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), readOnly && (_jsxs("div", { className: "text-xs text-amber-800 border border-amber-300 bg-amber-50 rounded p-3", children: ["This type is read-only. To enable runtime editing, set", ' ', _jsx("code", { className: "font-mono", children: "OBJECTSTACK_METADATA_WRITABLE" }), " to include ", _jsx("code", { className: "font-mono", children: type }), ", or flip", ' ', _jsx("code", { className: "font-mono", children: "allowOrgOverride" }), " in the registry."] })), _jsxs(Tabs, { defaultValue: "form", className: "w-full", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "form", children: "Form" }), !createMode && (_jsxs(TabsTrigger, { value: "layers", children: ["Layers", layered?.overlay && (_jsx(Badge, { className: "ml-1.5 text-[10px] bg-emerald-600 text-emerald-50", children: "overlay" }))] })), !createMode && (_jsxs(TabsTrigger, { value: "references", onClick: loadReferences, children: [_jsx(Link2, { className: "h-3.5 w-3.5 mr-1" }), "References", refs && (_jsx(Badge, { variant: "outline", className: "ml-1.5 text-[10px]", children: refs.length }))] }))] }), _jsx(TabsContent, { value: "form", className: "mt-4", children: _jsx(SchemaForm, { schema: schema, form: entry?.form, value: draft, onChange: setDraft, issues: issues, hiddenFields: config.hiddenFields, fieldOrder: config.fieldOrder, readOnly: readOnly, createMode: createMode, widgetContext: widgetContext }) }), !createMode && (_jsx(TabsContent, { value: "layers", className: "mt-4", children: _jsx(LayeredDiff, { layered: layered }) })), !createMode && (_jsx(TabsContent, { value: "references", className: "mt-4", children: _jsx(ReferencesPanel, { refs: refs, loading: refsLoading }) }))] })] }), _jsx(Dialog, { open: destructiveIssues != null, onOpenChange: (open) => {
+                    if (!open) {
+                        setDestructiveIssues(null);
+                        setPendingItem(null);
+                    }
+                }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-5 w-5 text-amber-600" }), "Destructive change detected"] }), _jsx(DialogDescription, { children: "The framework refused this save because it would drop or narrow data already in use. Review the issues and confirm to override." })] }), _jsx("div", { className: "max-h-[300px] overflow-auto space-y-2 my-2", children: destructiveIssues?.map((i, idx) => (_jsxs("div", { className: "rounded border bg-amber-50 border-amber-200 p-2 text-xs", children: [_jsx("div", { className: "font-mono text-amber-900", children: i.kind ?? 'change' }), i.path && (_jsx("div", { className: "text-amber-800 font-mono mt-0.5", children: i.path })), _jsx("div", { className: "text-amber-900 mt-1", children: i.message })] }, idx))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setDestructiveIssues(null), children: "Cancel" }), _jsx(Button, { variant: "destructive", onClick: () => doSave(true), disabled: saving, children: saving ? 'Forcing…' : 'Force save' })] })] }) })] }));
+}
+function ReferencesPanel({ refs, loading, }) {
+    if (loading || refs == null) {
+        return (_jsxs("div", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Scanning references\u2026"] }));
+    }
+    if (refs.length === 0) {
+        return (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No references found" }), _jsx(EmptyDescription, { children: "Nothing in the metadata graph points at this item. Safe to delete." })] }));
+    }
+    return (_jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 text-left", children: "From type" }), _jsx("th", { className: "px-3 py-2 text-left", children: "From name" }), _jsx("th", { className: "px-3 py-2 text-left", children: "Path" })] }) }), _jsx("tbody", { className: "divide-y", children: refs.map((r, i) => (_jsxs("tr", { className: "hover:bg-accent/50", children: [_jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: "outline", className: "text-[10px] font-mono", children: r.fromType }) }), _jsx("td", { className: "px-3 py-2 font-mono text-xs", children: r.fromName }), _jsx("td", { className: "px-3 py-2 font-mono text-xs text-muted-foreground", children: r.path })] }, i))) })] }) }));
+}

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

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

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

@@ -0,0 +1,97 @@
+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.
+/**
+ * MetadataResourceHistoryPage — durable change log for one item
+ * (Phase 3c).
+ *
+ * Calls `client.history(type, name)`. The framework returns
+ * `{ events: MetadataEvent[] }` where each event records who saved
+ * what, with a monotonic `seq`. We render a vertical timeline; clicking
+ * an event expands its payload diff.
+ *
+ * Rollback is intentionally not exposed in MVP — restoring a previous
+ * version is just `client.save(type, name, oldPayload)` which already
+ * works, but a one-click revert needs a confirmation flow we'll add
+ * once admins ask for it.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, RefreshCw, Loader2 } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { PageShell } from './PageShell';
+import { useMetadataClient, useMetadataTypes, } from './useMetadata';
+export function MetadataResourceHistoryPage({ type, name, }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries } = useMetadataTypes(client);
+    const entry = entries.find((t) => t.type === type);
+    const [events, setEvents] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    const [expanded, setExpanded] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const result = await client.history(type, name, { limit: 100 });
+                if (cancelled)
+                    return;
+                const list = Array.isArray(result)
+                    ? result
+                    : Array.isArray(result?.events)
+                        ? result.events
+                        : [];
+                // Reverse chronological — most recent first.
+                const sorted = [...list].sort((a, b) => (b.seq ?? 0) - (a.seq ?? 0));
+                setEvents(sorted);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err?.message ?? String(err));
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, name, refreshKey]);
+    return (_jsx(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: "Version history", stats: [{ label: 'Events', value: events.length }], actions: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`../${encodeURIComponent(name)}?type=${encodeURIComponent(type)}`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Back to item"] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }), children: _jsxs("div", { className: "p-6 max-w-4xl", children: [loading && (_jsxs("div", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading history\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && events.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No history yet" }), _jsx(EmptyDescription, { children: "This item has never been edited via an overlay. The first save will create the initial history record." })] })), !loading && events.length > 0 && (_jsx("ol", { className: "space-y-2 relative pl-6 border-l", children: events.map((ev, i) => {
+                        const isOpen = expanded === i;
+                        return (_jsxs("li", { className: "relative", children: [_jsx("span", { className: "absolute -left-[27px] top-2 w-3 h-3 rounded-full bg-primary ring-4 ring-background" }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setExpanded(isOpen ? null : i), onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            setExpanded(isOpen ? null : i);
+                                        }
+                                    }, className: "border rounded-lg p-3 hover:border-primary/50 cursor-pointer transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Badge, { variant: "outline", className: "text-[10px] font-mono", children: ["seq ", ev.seq ?? '–'] }), ev.kind && (_jsx(Badge, { className: 'text-[10px] ' +
+                                                        (ev.kind === 'delete' || ev.kind === 'tombstone'
+                                                            ? 'bg-red-100 text-red-800 hover:bg-red-100'
+                                                            : ev.kind === 'create'
+                                                                ? 'bg-blue-100 text-blue-800 hover:bg-blue-100'
+                                                                : 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'), children: String(ev.kind) })), ev.actor && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["by", ' ', _jsx("span", { className: "font-mono", children: String(ev.actor) })] })), ev.at && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: formatWhen(ev.at) }))] }), isOpen && (_jsx("pre", { className: "mt-2 text-xs font-mono bg-muted/30 rounded p-2 overflow-auto max-h-[280px]", children: safeStringify(ev) }))] })] }, `${ev.seq ?? i}-${i}`));
+                    }) }))] }) }));
+}
+function formatWhen(at) {
+    try {
+        const d = typeof at === 'number' ? new Date(at) : new Date(at);
+        if (Number.isNaN(d.getTime()))
+            return String(at);
+        return d.toLocaleString();
+    }
+    catch {
+        return String(at);
+    }
+}
+function safeStringify(v) {
+    try {
+        return JSON.stringify(v, null, 2);
+    }
+    catch {
+        return String(v);
+    }
+}

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

@@ -0,0 +1,4 @@
+export interface MetadataResourceListPageProps {
+    type: string;
+}
+export declare function MetadataResourceListPage({ type }: MetadataResourceListPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,144 @@
+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.
+/**
+ * MetadataResourceListPage — generic list of items for a metadata type
+ * (Phase 3c).
+ *
+ * Reads `/meta/:type`, applies registry-driven columns + search +
+ * source/overlay filters, and renders an ObjectGrid-like table.
+ * Each row links to its EditPage at `./:name?type=…`.
+ *
+ * No virtualisation in MVP — metadata lists are typically < 200 items
+ * per type, well under the threshold where it'd matter.
+ */
+import * as React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Plus, Search, RefreshCw } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Input } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { PageShell } from './PageShell';
+import { useMetadataClient, useMetadataTypes, matchesQuery, } from './useMetadata';
+import { getMetadataResource, resolveResourceConfig, } from './registry';
+import { t, detectLocale } from './i18n';
+export function MetadataResourceListPage({ type }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries: typesEntries } = useMetadataTypes(client);
+    const entry = typesEntries.find((t) => t.type === type);
+    const config = resolveResourceConfig(type, entry);
+    // If a fully custom ListPage is registered, render it and bail.
+    const customConfig = getMetadataResource(type);
+    if (customConfig?.ListPage) {
+        const Custom = customConfig.ListPage;
+        return _jsx(Custom, { type: type });
+    }
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    const [sourceFilter, setSourceFilter] = React.useState('all');
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    React.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const list = await client.list(type);
+                if (cancelled)
+                    return;
+                const rows = (list ?? []).map((raw) => {
+                    const item = (raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw) ?? {};
+                    return {
+                        raw,
+                        item,
+                        source: raw?.source,
+                    };
+                });
+                setItems(rows);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err?.message ?? String(err));
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, refreshKey]);
+    const searchableFields = config.searchableFields ?? ['name', 'label', 'description'];
+    const filtered = items.filter((row) => {
+        if (!matchesQuery(row.item, query, searchableFields))
+            return false;
+        if (sourceFilter !== 'all' && row.source && row.source !== sourceFilter)
+            return false;
+        return true;
+    });
+    // Compute source counts for the filter dropdown.
+    const sourceCounts = React.useMemo(() => {
+        const c = { all: items.length, code: 0, overlay: 0, effective: 0 };
+        for (const r of items) {
+            if (r.source && c[r.source] !== undefined)
+                c[r.source]++;
+        }
+        return c;
+    }, [items]);
+    const columns = config.listColumns ?? defaultColumns(config.primaryKey ?? 'name');
+    const locale = detectLocale();
+    // Localise default column labels — registered columns keep their
+    // hand-authored labels (consumers may want bespoke wording).
+    const localizeColumnLabel = (col) => {
+        const tryKey = `engine.list.col.${col.key}`;
+        const translated = t(tryKey, locale);
+        return translated === tryKey ? col.label : translated;
+    };
+    return (_jsx(PageShell, { entry: entry ?? { type, label: type }, stats: [
+            { label: t('engine.list.items', locale), value: items.length },
+            { label: t('engine.list.filtered', locale), value: filtered.length },
+        ], actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), title: t('engine.list.refresh', locale), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), entry?.allowOrgOverride && (_jsxs(Button, { size: "sm", onClick: () => navigate(`./new?type=${encodeURIComponent(type)}`), children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), t('engine.list.create', locale)] }))] }), children: _jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[200px] max-w-md", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.list.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "all", children: [t('engine.list.allSources', locale), " (", sourceCounts.all, ")"] }), _jsxs(SelectItem, { value: "code", children: ["Code (", sourceCounts.code, ")"] }), _jsxs(SelectItem, { value: "overlay", children: ["Overlay (", sourceCounts.overlay, ")"] }), _jsxs(SelectItem, { value: "effective", children: ["Effective (", sourceCounts.effective, ")"] })] })] })] }), loading && (_jsxs("div", { className: "text-sm text-muted-foreground", children: [t('engine.edit.loading', locale), " ", type, "\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: items.length === 0
+                                ? `No ${type} items registered`
+                                : `No matches for "${query}"` }), _jsx(EmptyDescription, { children: config.emptyStateHint ??
+                                (entry?.allowOrgOverride
+                                    ? `Click "New" above to create the first ${type}.`
+                                    : `This type is read-only — instances are defined by code artifacts in packages.`) })] })), !loading && filtered.length > 0 && (_jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { className: "px-3 py-2 text-left font-medium", style: c.width ? { width: c.width } : undefined, children: localizeColumnLabel(c) }, c.key))), _jsx("th", { className: "px-3 py-2 text-right font-medium w-[80px]", children: t('engine.list.col.source', locale) })] }) }), _jsx("tbody", { className: "divide-y", children: filtered.map((row, i) => {
+                                    const pk = config.primaryKey ?? 'name';
+                                    const name = String(row.item[pk] ?? `(unnamed-${i})`);
+                                    return (_jsxs("tr", { className: "hover:bg-accent/50", children: [columns.map((c, ci) => {
+                                                const value = row.item[c.key];
+                                                const cell = c.render ? c.render(value, row.item) : defaultCell(value);
+                                                return (_jsx("td", { className: "px-3 py-2 align-top", children: ci === 0 ? (_jsx(Link, { to: `./${encodeURIComponent(name)}?type=${encodeURIComponent(type)}`, className: "text-primary hover:underline font-mono", children: cell })) : (cell) }, c.key));
+                                            }), _jsx("td", { className: "px-3 py-2 text-right align-top", children: row.source ? (_jsx(Badge, { variant: "outline", className: 'text-[10px] ' +
+                                                        (row.source === 'overlay'
+                                                            ? 'border-emerald-500 text-emerald-700'
+                                                            : ''), children: row.source })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" })) })] }, name + i));
+                                }) })] }) }))] }) }));
+}
+function defaultColumns(primaryKey) {
+    return [
+        { key: primaryKey, label: primaryKey, width: '30%' },
+        { key: 'label', label: 'Label', width: '30%' },
+        { key: 'description', label: 'Description' },
+    ];
+}
+function defaultCell(value) {
+    if (value == null || value === '') {
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    }
+    if (typeof value === 'boolean')
+        return value ? '✓' : '✗';
+    if (typeof value === 'object') {
+        try {
+            return (_jsx("code", { className: "font-mono text-xs", children: JSON.stringify(value).slice(0, 60) }));
+        }
+        catch {
+            return String(value);
+        }
+    }
+    return String(value);
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Props forwarded by `ComponentNavView` — it merges URL query-string
+ * into props, so we accept both `type` (from `?type=…`) and route
+ * nav `params: { type: 'object' }` style.
+ */
+export interface MetadataResourceRouterProps {
+    /** Singular metadata type, e.g. 'view'. */
+    type?: string;
+}
+export declare function MetadataResourceRouter({ type }: MetadataResourceRouterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { MetadataResourceListPage } from './ResourceListPage';
+import { MetadataResourceEditPage } from './ResourceEditPage';
+import { MetadataResourceHistoryPage } from './ResourceHistoryPage';
+export function MetadataResourceRouter({ type }) {
+    const location = useLocation();
+    const [search] = useSearchParams();
+    const resolvedType = type ?? search.get('type') ?? '';
+    if (!resolvedType) {
+        return (_jsx("div", { className: "p-8 h-full flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "Missing metadata type" }), _jsxs(EmptyDescription, { children: ["This page expects a ", _jsx("code", { className: "font-mono", children: "?type=" }), " query param (e.g. ", _jsx("code", { className: "font-mono", children: "?type=view" }), ") or a nav-metadata ", _jsxs("code", { className: "font-mono", children: ["params: ", `{ type: 'view' }`] }), "."] })] }) }));
+    }
+    // Parse the trailing wildcard. The parent route consumed
+    // `/apps/:appName/component/metadata/resource`, so what's left in
+    // location.pathname AFTER that prefix is our sub-path. We don't have
+    // the prefix exactly, but we can find `/resource/` and slice — it's
+    // unambiguous because `:ns/:name` are colon-joined → "metadata/resource".
+    const subPath = extractSubPath(location.pathname);
+    const segments = subPath.split('/').filter(Boolean);
+    // No sub-path → list page.
+    if (segments.length === 0) {
+        return _jsx(MetadataResourceListPage, { type: resolvedType });
+    }
+    // /new → create page.
+    if (segments[0] === 'new' && segments.length === 1) {
+        return (_jsx(MetadataResourceEditPage, { type: resolvedType, name: "", createMode: true }, `${resolvedType}:__new__`));
+    }
+    // /:name/history → history.
+    if (segments.length === 2 && segments[1] === 'history') {
+        return (_jsx(MetadataResourceHistoryPage, { type: resolvedType, name: decodeURIComponent(segments[0]) }));
+    }
+    // /:name → edit.
+    if (segments.length === 1) {
+        return (_jsx(MetadataResourceEditPage, { type: resolvedType, name: decodeURIComponent(segments[0]) }, `${resolvedType}:${segments[0]}`));
+    }
+    // Unknown sub-path.
+    return (_jsx("div", { className: "p-8 h-full flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "Unknown sub-path" }), _jsxs(EmptyDescription, { children: ["The path ", _jsx("code", { className: "font-mono", children: subPath }), " isn't recognized. Valid forms are ", _jsx("code", { className: "font-mono", children: "/" }), " (list),", ' ', _jsx("code", { className: "font-mono", children: "/new" }), " (create),", ' ', _jsx("code", { className: "font-mono", children: "/:name" }), " (edit),", ' ', _jsx("code", { className: "font-mono", children: "/:name/history" }), "."] })] }) }));
+}
+function extractSubPath(pathname) {
+    // Find the literal `/metadata/resource` prefix and return what follows.
+    const marker = '/metadata/resource';
+    const idx = pathname.indexOf(marker);
+    if (idx === -1)
+        return '';
+    return pathname.slice(idx + marker.length); // includes leading '/' if any
+}