@object-ui/app-shell 6.1.0 → 6.2.1

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

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * RelatedPanel — lists metadata items anchored to the current parent.
+ *
+ * Driven by the anchor registry (see `anchors.ts` / `registry.ts`). For
+ * each child type that declares it anchors at `parentType`, we issue
+ * one `client.list(childType)` call in parallel, filter the result with
+ * the anchor's match predicate, and render the survivors in collapsible
+ * groups.
+ *
+ * Why client-side filter? Anchoring lives in metadata bodies that are
+ * not indexed on the server today, and adding a parameterised list API
+ * for every potential anchor field would balloon the surface area. The
+ * Related tab is opened by humans on a specific object, so the cost of
+ * pulling 100-or-so items per child type is negligible — far cheaper
+ * than a network round-trip per row would have been.
+ *
+ * Visual model:
+ *   - One <details> per group (default open if non-empty).
+ *   - Rows are kebab-y: name, optional label, optional badge.
+ *   - Click → call `onOpen({ type, name })`; parent owns the drawer.
+ *   - A search input filters across all groups by name/label substring.
+ */
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Loader2, Search, Plus, ChevronRight, ExternalLink } from 'lucide-react';
+import { Badge, Button, Input, Empty, EmptyTitle, EmptyDescription, cn, } from '@object-ui/components';
+import { useMetadataClient } from './useMetadata';
+import { listAnchorsFor } from './registry';
+export function RelatedPanel({ type, name, parentItem, onOpen, }) {
+    const client = useMetadataClient();
+    const navigate = useNavigate();
+    const anchors = React.useMemo(() => listAnchorsFor(type), [type]);
+    const [groups, setGroups] = React.useState([]);
+    const [search, setSearch] = React.useState('');
+    const [collapsed, setCollapsed] = React.useState({});
+    React.useEffect(() => {
+        if (anchors.length === 0) {
+            setGroups([]);
+            return;
+        }
+        let cancelled = false;
+        // Seed groups in loading state, ordered by registry order. Embedded
+        // groups resolve synchronously from `parentItem`; list groups dispatch
+        // a `client.list(childType)` and filter.
+        const initial = [...anchors]
+            .sort((a, b) => (a.anchor.order ?? 999) - (b.anchor.order ?? 999))
+            .map((entry) => {
+            const isEmbedded = entry.anchor.source === 'embedded';
+            if (isEmbedded) {
+                const raw = entry.anchor.extract && parentItem
+                    ? entry.anchor.extract(parentItem)
+                    : [];
+                return {
+                    childType: entry.type,
+                    anchor: entry.anchor,
+                    loading: false,
+                    error: null,
+                    items: raw.map(normaliseItem),
+                };
+            }
+            return {
+                childType: entry.type,
+                anchor: entry.anchor,
+                loading: true,
+                error: null,
+                items: [],
+            };
+        });
+        setGroups(initial);
+        void Promise.all(initial.map(async (g) => {
+            if (g.anchor.source === 'embedded')
+                return g;
+            try {
+                const list = (await client.list(g.childType));
+                if (cancelled)
+                    return g;
+                const matchFn = g.anchor.match ?? (() => false);
+                const filtered = list
+                    .filter((item) => matchFn(item, name))
+                    .map((item) => normaliseItem(item));
+                return { ...g, loading: false, items: filtered };
+            }
+            catch (err) {
+                if (cancelled)
+                    return g;
+                return {
+                    ...g,
+                    loading: false,
+                    error: err instanceof Error ? err.message : String(err),
+                };
+            }
+        })).then((finished) => {
+            if (cancelled)
+                return;
+            setGroups(finished);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, name, anchors, parentItem]);
+    if (anchors.length === 0) {
+        return (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "No related metadata" }), _jsxs(EmptyDescription, { children: ["No metadata types are configured to anchor at ", _jsx("code", { children: type }), ". You can register one via", ' ', _jsx("code", { className: "font-mono", children: "registerMetadataResource" }), "."] })] }));
+    }
+    const totalCount = groups.reduce((sum, g) => sum + g.items.length, 0);
+    const anyLoading = groups.some((g) => g.loading);
+    const q = search.trim().toLowerCase();
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex-1 max-w-sm", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Search related\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-8 h-8 text-sm" })] }), _jsx("div", { className: "text-xs text-muted-foreground", children: anyLoading
+                            ? 'Scanning…'
+                            : `${totalCount} item${totalCount === 1 ? '' : 's'}` })] }), groups.map((g) => {
+                const matches = q
+                    ? g.items.filter((it) => it.name.toLowerCase().includes(q) ||
+                        (it.label ?? '').toLowerCase().includes(q))
+                    : g.items;
+                const isCollapsed = collapsed[g.childType] ?? false;
+                const visible = !q || matches.length > 0;
+                if (!visible && !g.loading)
+                    return null;
+                return (_jsxs("div", { className: "border rounded-lg overflow-hidden", children: [_jsxs("div", { className: "w-full flex items-center gap-2 px-3 py-2 bg-muted/40", children: [_jsxs("button", { type: "button", className: "flex items-center gap-2 flex-1 text-left hover:opacity-80", onClick: () => setCollapsed((s) => ({ ...s, [g.childType]: !isCollapsed })), children: [_jsx(ChevronRight, { className: cn('h-4 w-4 text-muted-foreground transition-transform', !isCollapsed && 'rotate-90') }), _jsx("div", { className: "text-sm font-medium", children: g.anchor.groupLabel ?? g.childType }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: g.loading ? '…' : matches.length })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2", onClick: () => {
+                                        if (g.anchor.source === 'embedded') {
+                                            // Embedded items are edited inside the parent's Form
+                                            // tab; jump there rather than to a nonexistent route.
+                                            if (typeof window !== 'undefined') {
+                                                const url = new URL(window.location.href);
+                                                url.searchParams.set('tab', 'form');
+                                                url.searchParams.delete('open');
+                                                window.location.assign(url.toString());
+                                            }
+                                            return;
+                                        }
+                                        navigate(`../../${encodeURIComponent(g.childType)}/_new?anchor=${encodeURIComponent(`${type}:${name}`)}`);
+                                    }, title: g.anchor.source === 'embedded'
+                                        ? `Edit in Form tab`
+                                        : `New ${g.childType}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] }), !isCollapsed && (_jsxs("div", { className: "divide-y", children: [g.loading && (_jsxs("div", { className: "px-3 py-3 text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), "Loading ", g.childType, "\u2026"] })), !g.loading && g.error && (_jsxs("div", { className: "px-3 py-3 text-xs text-destructive", children: ["Failed: ", g.error] })), !g.loading && !g.error && matches.length === 0 && (_jsx("div", { className: "px-3 py-3 text-xs text-muted-foreground", children: q ? 'No matches.' : 'Nothing here yet.' })), !g.loading &&
+                                    !g.error &&
+                                    matches.map((it, idx) => (_jsxs("button", { type: "button", onClick: () => onOpen(g.anchor.source === 'embedded'
+                                            ? {
+                                                kind: 'embedded',
+                                                parentType: type,
+                                                parentName: name,
+                                                groupLabel: g.anchor.groupLabel ?? g.childType,
+                                                itemName: it.name,
+                                                raw: it.raw,
+                                            }
+                                            : {
+                                                kind: 'metadata',
+                                                type: g.childType,
+                                                name: it.name,
+                                            }), className: "w-full text-left px-3 py-2 hover:bg-accent/50 flex items-center gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-mono text-xs truncate", children: it.name }), it.label && it.label !== it.name && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: it.label }))] }), _jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground" })] }, `${it.name}-${idx}`)))] }))] }, g.childType));
+            })] }));
+}
+function normaliseItem(raw) {
+    const nameVal = pickString(raw, ['name', 'id', 'key']) ?? '(unnamed)';
+    const labelVal = pickString(raw, ['label', 'title', 'displayName']);
+    const descVal = pickString(raw, ['description', 'summary']);
+    return {
+        name: nameVal,
+        label: labelVal,
+        description: descVal,
+        raw,
+    };
+}
+function pickString(obj, keys) {
+    for (const k of keys) {
+        const v = obj[k];
+        if (typeof v === 'string' && v.length > 0)
+            return v;
+    }
+    return undefined;
+}

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

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

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

@@ -0,0 +1,302 @@
+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, useParams } from 'react-router-dom';
+import { Save, RotateCcw, History, Link2, Loader2, AlertTriangle, Layers3, } 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, listAnchorsFor, } from './registry';
+import { RelatedPanel } from './RelatedPanel';
+import { MetadataDetailDrawer } from './MetadataDetailDrawer';
+export function MetadataResourceEditPage({ type: typeProp, name: nameProp, createMode = false, embedded = false, }) {
+    const params = useParams();
+    const type = typeProp ?? params.type ?? '';
+    const name = nameProp ?? params.name ?? '';
+    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);
+        }
+    }
+    // Related drawer state. `null` = closed. We avoid querystring round-
+    // trips on every keystroke; URL state is best-effort sync via effect
+    // below.
+    const [relatedTarget, setRelatedTarget] = React.useState(null);
+    const hasAnchors = React.useMemo(() => !createMode && !embedded && listAnchorsFor(type).length > 0, [type, createMode, embedded]);
+    // Read ?tab and ?open on first mount so deep-links work. Embedded
+    // items are not deep-linkable (they live in the parent body and need
+    // the parent payload to materialise) so we only restore metadata
+    // targets here.
+    const initialTabRef = React.useRef(null);
+    React.useEffect(() => {
+        if (typeof window === 'undefined' || embedded)
+            return;
+        const sp = new URLSearchParams(window.location.search);
+        const tab = sp.get('tab');
+        if (tab)
+            initialTabRef.current = tab;
+        const open = sp.get('open');
+        if (open && open.includes(':')) {
+            const [t, n] = open.split(':', 2);
+            if (t && n)
+                setRelatedTarget({ kind: 'metadata', type: t, name: n });
+        }
+        // intentionally empty deps — first mount only
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Reflect drawer target into the URL so refresh/share works.
+    React.useEffect(() => {
+        if (typeof window === 'undefined' || embedded)
+            return;
+        const url = new URL(window.location.href);
+        if (relatedTarget?.kind === 'metadata') {
+            url.searchParams.set('open', `${relatedTarget.type}:${relatedTarget.name}`);
+        }
+        else {
+            url.searchParams.delete('open');
+        }
+        window.history.replaceState({}, '', url.toString());
+    }, [relatedTarget, embedded]);
+    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) {
+                navigate(`../${encodeURIComponent(savedName)}`);
+            }
+        }
+        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;
+    const DesignerTab = !createMode ? customConfig?.DesignerTab : undefined;
+    const designerTabLabel = customConfig?.designerTabLabel ?? 'Designer';
+    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`), 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: initialTabRef.current ?? (DesignerTab ? 'designer' : 'form'), className: "w-full", onValueChange: (v) => {
+                            if (typeof window === 'undefined' || embedded)
+                                return;
+                            const url = new URL(window.location.href);
+                            url.searchParams.set('tab', v);
+                            window.history.replaceState({}, '', url.toString());
+                        }, children: [_jsxs(TabsList, { children: [DesignerTab && (_jsx(TabsTrigger, { value: "designer", children: designerTabLabel })), _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 }))] })), hasAnchors && (_jsxs(TabsTrigger, { value: "related", children: [_jsx(Layers3, { className: "h-3.5 w-3.5 mr-1" }), "Related"] }))] }), DesignerTab && (_jsx(TabsContent, { value: "designer", className: "mt-4", children: _jsx(DesignerTab, { type: type, name: name }) })), _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 }) })), hasAnchors && (_jsx(TabsContent, { value: "related", className: "mt-4", children: _jsx(RelatedPanel, { type: type, name: name, parentItem: draft, onOpen: (t) => setRelatedTarget(t) }) }))] })] }), _jsx(MetadataDetailDrawer, { target: relatedTarget, onClose: () => setRelatedTarget(null), parentContext: { type, name } }), _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: typeProp, name: nameProp, }: MetadataResourceHistoryPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,100 @@
+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, useParams } 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: typeProp, name: nameProp, }) {
+    const params = useParams();
+    const type = typeProp ?? params.type ?? '';
+    const name = nameProp ?? params.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)}`), 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: typeProp }: MetadataResourceListPageProps): import("react/jsx-runtime").JSX.Element;