@object-ui/app-shell 6.0.4 → 6.2.0

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;

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;