@object-ui/app-shell 6.2.0 → 6.2.2

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

@@ -20,8 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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 { useNavigate, useParams } from 'react-router-dom';
+import { Save, RotateCcw, History, Link2, Loader2, AlertTriangle, Layers3, Eye, Pencil, X, } from 'lucide-react';
 import { Button } from '@object-ui/components';
 import { Badge } from '@object-ui/components';
 import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@object-ui/components';
@@ -31,8 +31,14 @@ 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, }) {
+import { getMetadataResource, resolveResourceConfig, listAnchorsFor, } from './registry';
+import { RelatedPanel } from './RelatedPanel';
+import { MetadataDetailDrawer } from './MetadataDetailDrawer';
+import { getMetadataPreview } from './preview-registry';
+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);
@@ -57,6 +63,15 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
     const [issues, setIssues] = React.useState([]);
     const [destructiveIssues, setDestructiveIssues] = React.useState(null);
     const [pendingItem, setPendingItem] = React.useState(null);
+    // Form edit mode. The form is read-only by default — admins land in a
+    // "view" state and must click Edit to mutate, mirroring the Salesforce /
+    // Notion convention. createMode is always editing (you can't view what
+    // doesn't exist yet). Truly read-only types (no allowOrgOverride) stay
+    // read-only regardless.
+    const [editing, setEditing] = React.useState(!!createMode);
+    // Snapshot of the last saved draft. Used by Cancel to revert in-flight
+    // edits, and as the source-of-truth when entering edit mode.
+    const draftSnapshotRef = React.useRef(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([]);
@@ -102,6 +117,7 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
                 // Initial draft = effective if available, otherwise code.
                 const initial = (lay.effective ?? lay.code ?? {});
                 setDraft(initial);
+                draftSnapshotRef.current = initial;
                 setLoading(false);
             }
             catch (err) {
@@ -134,6 +150,45 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
             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);
@@ -153,17 +208,17 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
             // Refresh layered after save.
             const lay = await client.layered(type, savedName);
             setLayered(lay);
-            setDraft((lay.effective ?? itemToSave));
+            const fresh = (lay.effective ?? itemToSave);
+            setDraft(fresh);
+            draftSnapshotRef.current = fresh;
             setDestructiveIssues(null);
             setPendingItem(null);
+            // Exit edit mode on successful save (unless we were creating —
+            // navigation to the new record's URL will reset state anyway).
+            if (!createMode)
+                setEditing(false);
             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)}`);
+                navigate(`../${encodeURIComponent(savedName)}`);
             }
         }
         catch (err) {
@@ -223,7 +278,10 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
             await client.reset(type, name);
             const lay = await client.layered(type, name);
             setLayered(lay);
-            setDraft((lay.effective ?? lay.code ?? {}));
+            const fresh = (lay.effective ?? lay.code ?? {});
+            setDraft(fresh);
+            draftSnapshotRef.current = fresh;
+            setEditing(false);
         }
         catch (err) {
             setError(err?.message ?? String(err));
@@ -238,7 +296,40 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
     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) => {
+    const DesignerTab = !createMode ? customConfig?.DesignerTab : undefined;
+    const designerTabLabel = customConfig?.designerTabLabel ?? 'Designer';
+    // Preview tab — opt-in via `registerMetadataPreview()`. Hidden in
+    // create mode (nothing to preview yet) and inside the embedded
+    // drawer (the parent context owns the preview surface).
+    const PreviewComponent = !createMode && !embedded ? getMetadataPreview(type) : undefined;
+    // Cancel edits: revert the draft to the last saved snapshot and exit
+    // edit mode. Safe to call even with no snapshot (no-op).
+    function doCancelEdit() {
+        if (draftSnapshotRef.current) {
+            setDraft(draftSnapshotRef.current);
+        }
+        setIssues([]);
+        setError(null);
+        setEditing(false);
+    }
+    // When the form is "live" but not yet in edit mode, it renders as
+    // read-only. createMode is always editing; truly read-only types
+    // (no allowOrgOverride) ignore the editing toggle entirely.
+    const formReadOnly = readOnly || (!editing && !createMode);
+    // Default tab priority:
+    //   1. URL ?tab= (explicit user nav / deep link)
+    //   2. Designer (custom rich editor present)
+    //   3. Preview  (live preview present — most informative landing)
+    //   4. Form
+    const defaultTab = initialTabRef.current ??
+        (DesignerTab ? 'designer' : PreviewComponent ? 'preview' : 'form');
+    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 && !createMode && !editing && (_jsxs(Button, { size: "sm", onClick: () => setEditing(true), children: [_jsx(Pencil, { className: "h-4 w-4 mr-1" }), "Edit"] })), entry?.allowOrgOverride && !createMode && editing && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: doCancelEdit, disabled: saving, children: [_jsx(X, { className: "h-4 w-4 mr-1" }), "Cancel"] })), entry?.allowOrgOverride && (editing || createMode) && (_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: defaultTab, 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 })), PreviewComponent && (_jsxs(TabsTrigger, { value: "preview", children: [_jsx(Eye, { className: "h-3.5 w-3.5 mr-1" }), "Preview"] })), _jsx(TabsTrigger, { value: "form", children: "Detail" }), !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 }) })), _jsxs(TabsContent, { value: "form", className: "mt-4 space-y-3", children: [formReadOnly && !readOnly && entry?.allowOrgOverride && !createMode && (_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-muted-foreground border rounded p-2.5 bg-muted/30", children: [_jsxs("span", { children: ["Viewing in read-only mode. Click ", _jsx("strong", { children: "Edit" }), " to make changes."] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setEditing(true), children: [_jsx(Pencil, { className: "h-3.5 w-3.5 mr-1" }), "Edit"] })] })), _jsx(SchemaForm, { schema: schema, form: entry?.form, value: draft, onChange: setDraft, issues: issues, hiddenFields: config.hiddenFields, fieldOrder: config.fieldOrder, readOnly: formReadOnly, createMode: createMode, widgetContext: widgetContext })] }), PreviewComponent && (_jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsx(PreviewComponent, { type: type, name: name, draft: draft }) })), !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);

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

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

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

@@ -15,14 +15,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * once admins ask for it.
  */
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+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, name, }) {
+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);
@@ -62,7 +65,7 @@ export function MetadataResourceHistoryPage({ type, name, }) {
             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) => {
+    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 === ' ') {

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

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

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

@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * per type, well under the threshold where it'd matter.
  */
 import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Plus, Search, RefreshCw } from 'lucide-react';
 import { Button } from '@object-ui/components';
 import { Input } from '@object-ui/components';
@@ -23,7 +23,9 @@ import { PageShell } from './PageShell';
 import { useMetadataClient, useMetadataTypes, matchesQuery, } from './useMetadata';
 import { getMetadataResource, resolveResourceConfig, } from './registry';
 import { t, detectLocale } from './i18n';
-export function MetadataResourceListPage({ type }) {
+export function MetadataResourceListPage({ type: typeProp }) {
+    const params = useParams();
+    const type = typeProp ?? params.type ?? '';
     const navigate = useNavigate();
     const client = useMetadataClient();
     const { entries: typesEntries } = useMetadataTypes(client);
@@ -101,7 +103,7 @@ export function MetadataResourceListPage({ type }) {
     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
+        ], 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`), 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
@@ -112,7 +114,7 @@ export function MetadataResourceListPage({ type }) {
                                     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));
+                                                return (_jsx("td", { className: "px-3 py-2 align-top", children: ci === 0 ? (_jsx(Link, { to: `./${encodeURIComponent(name)}`, 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'

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

@@ -321,7 +321,16 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
     }
     // Boolean → Switch (no redundant "true/false" text; the toggle state
     // already conveys the value).
-    if (schema?.type === 'boolean') {
+    //
+    // We must also honor `widget === 'switch'` (resolved by inferWidget from
+    // `fieldSpec.type === 'boolean'` / `'toggle'`), because for composite
+    // sub-fields the JSON schema fragment is often `{}` — the parent declares
+    // `additionalProperties: true` and no per-property `properties`, so
+    // `schema?.type` is undefined even though the form spec clearly marks
+    // the sub-field as boolean. Without this, capability toggles inside the
+    // Object editor's "Capabilities" section fell through to RawJsonEditor
+    // and rendered as empty textareas.
+    if (schema?.type === 'boolean' || widget === 'switch' || fieldSpec?.type === 'boolean' || fieldSpec?.type === 'toggle') {
         return (_jsx(Switch, { id: id, checked: !!value, onCheckedChange: (c) => onChange(c), disabled: readOnly }));
     }
     // Number / integer → numeric input with min/max from fieldSpec.

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

@@ -0,0 +1 @@
+export declare function registerBuiltinAnchors(): void;

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

@@ -0,0 +1,235 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Built-in anchor relationships for the Related tab.
+ *
+ * Each entry tells the metadata-admin engine "items of type X belong to
+ * (are anchored at) items of type Y when this predicate matches". The
+ * Related panel on the parent's edit page uses this registry to decide
+ * which `client.list(type)` calls to make and how to group the results.
+ *
+ * Adding a new relationship is intentionally a one-liner — declare it
+ * here (or in your own plugin's bootstrap) and the UI picks it up with
+ * no further wiring. Predicates are kept tiny because they run client-
+ * side over every item returned from `list()`.
+ *
+ * Why not parse the schema and infer this? Some types nest the anchor
+ * deep in `data.object` or `list.data.object`; some types live on the
+ * parent (e.g. `fields` is embedded inside the object item itself).
+ * Hand-rolled declarations are clearer than schema-walking heuristics.
+ */
+import { registerMetadataResource, anchorByField } from './registry';
+export function registerBuiltinAnchors() {
+    // ── EMBEDDED: items stored inside the object body itself ──────────
+    //
+    // Fields, indexes, and embedded validations don't have a top-level
+    // metadata type; they live under `object.fields`, `object.indexes[]`,
+    // `object.validations[]`. We surface them with `source: 'embedded'`
+    // so the Related panel can list them without a separate API call.
+    //
+    // `fields` is stored as a NAME-KEYED MAP (`{ email: {...}, name: {...} }`)
+    // — not an array — so we adapt it into an array carrying the key as
+    // `name` for the panel to render.
+    registerMetadataResource({
+        type: '__object_field',
+        label: 'Field',
+        anchors: [{
+                anchorType: 'object',
+                source: 'embedded',
+                editAs: 'field',
+                embeddedPath: 'fields',
+                extract: (parent) => mapOrArrayToList(parent.fields),
+                groupLabel: 'Fields',
+                order: 5,
+            }],
+    });
+    registerMetadataResource({
+        type: '__object_index',
+        label: 'Index',
+        anchors: [{
+                anchorType: 'object',
+                source: 'embedded',
+                editAs: 'index',
+                embeddedPath: 'indexes',
+                extract: (parent) => {
+                    const raw = parent.indexes;
+                    if (!Array.isArray(raw))
+                        return [];
+                    // Indexes have no `name`; synthesise one from their column list.
+                    return raw.map((idx, i) => {
+                        const fields = Array.isArray(idx.fields) ? idx.fields.join(',') : '';
+                        const synthesised = fields ? `idx_${fields}` : `index_${i}`;
+                        return { name: synthesised, ...idx };
+                    });
+                },
+                groupLabel: 'Indexes',
+                order: 10,
+            }],
+    });
+    registerMetadataResource({
+        type: '__object_validation',
+        label: 'Embedded validation',
+        anchors: [{
+                anchorType: 'object',
+                source: 'embedded',
+                editAs: 'validation',
+                embeddedPath: 'validations',
+                extract: (parent) => mapOrArrayToList(parent.validations),
+                groupLabel: 'Embedded Validations',
+                order: 15,
+            }],
+    });
+    // ── LIST: standalone child metadata types ─────────────────────────
+    // hook.object → object (beforeInsert / afterUpdate / …)
+    registerMetadataResource({
+        type: 'hook',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField('object'),
+                groupLabel: 'Hooks',
+                order: 20,
+            }],
+    });
+    // approval.object → object (approval processes targeting this object)
+    registerMetadataResource({
+        type: 'approval',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField('object'),
+                groupLabel: 'Approval Processes',
+                order: 70,
+            }],
+    });
+    // page.object → object (auto-generated record pages, etc.)
+    registerMetadataResource({
+        type: 'page',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField('object'),
+                groupLabel: 'Pages',
+                order: 40,
+            }],
+    });
+    // view binds to an object via data.object (list view / form view variants)
+    registerMetadataResource({
+        type: 'view',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField([
+                    'data.object',
+                    'list.data.object',
+                    'form.data.object',
+                    'object',
+                ]),
+                groupLabel: 'Views',
+                order: 30,
+            }],
+    });
+    // flow / workflow may reference an object at the root or under `on`
+    registerMetadataResource({
+        type: 'flow',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField(['object', 'on.object', 'trigger.object']),
+                groupLabel: 'Flows',
+                order: 50,
+            }],
+    });
+    registerMetadataResource({
+        type: 'workflow',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField(['object', 'on.object']),
+                groupLabel: 'Workflow Rules',
+                order: 51,
+            }],
+    });
+    // trigger.object → object (low-level DB-style triggers)
+    registerMetadataResource({
+        type: 'trigger',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField(['object', 'on.object']),
+                groupLabel: 'Triggers',
+                order: 52,
+            }],
+    });
+    // validation: usually embedded in the object, but standalone variants
+    // do exist. Match anything whose `object` points back at us.
+    registerMetadataResource({
+        type: 'validation',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField('object'),
+                groupLabel: 'Validations',
+                order: 25,
+            }],
+    });
+    // permission has a sparse object-keyed map under `objects`. Match by
+    // membership of the parent name in that map.
+    registerMetadataResource({
+        type: 'permission',
+        anchors: [{
+                anchorType: 'object',
+                match: (item, name) => {
+                    const objs = item?.objects;
+                    return !!objs && typeof objs === 'object' && name in objs;
+                },
+                groupLabel: 'Permissions',
+                order: 60,
+            }],
+    });
+    // action — both record-scoped and object-scoped actions live here.
+    // Schemas vary, so accept any of the three common shapes.
+    registerMetadataResource({
+        type: 'action',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField([
+                    'object',
+                    'target.object',
+                    'on.object',
+                ]),
+                groupLabel: 'Actions',
+                order: 55,
+            }],
+    });
+    // dashboard / report — surface ones bound to a specific object.
+    // Many will not have an explicit anchor; those simply don't appear.
+    registerMetadataResource({
+        type: 'dashboard',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField(['object', 'data.object']),
+                groupLabel: 'Dashboards',
+                order: 80,
+            }],
+    });
+    registerMetadataResource({
+        type: 'report',
+        anchors: [{
+                anchorType: 'object',
+                match: anchorByField(['object', 'data.object']),
+                groupLabel: 'Reports',
+                order: 81,
+            }],
+    });
+}
+/**
+ * Coerce an embedded "collection" into a list of `{ name, …rest }`.
+ *
+ * ObjectStack stores some embedded collections as name-keyed maps
+ * (`object.fields`) and others as arrays (`object.indexes`). Both want
+ * to render the same way in Related; this helper papers over the gap
+ * by injecting the map key as `name` when needed.
+ */
+function mapOrArrayToList(raw) {
+    if (Array.isArray(raw))
+        return raw;
+    if (raw && typeof raw === 'object') {
+        return Object.entries(raw).map(([k, v]) => {
+            const body = v && typeof v === 'object' ? v : {};
+            return { name: k, ...body };
+        });
+    }
+    return [];
+}

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

@@ -15,17 +15,21 @@ export { MetadataDirectoryPage } from './DirectoryPage';
 export { MetadataResourceRouter } from './ResourceRouter';
 export { MetadataResourceListPage } from './ResourceListPage';
 export { MetadataResourceEditPage } from './ResourceEditPage';
+export { RelatedPanel } from './RelatedPanel';
+export { MetadataDetailDrawer } from './MetadataDetailDrawer';
 export { MetadataResourceHistoryPage } from './ResourceHistoryPage';
 export { MetadataQuickFind } from './QuickFind';
 export { PageShell as MetadataPageShell } from './PageShell';
 export { SchemaForm } from './SchemaForm';
 export { LayeredDiff } from './LayeredDiff';
 export { PermissionMatrixEditPage } from './PermissionMatrixEditor';
-export { DesignerEditorWrapper } from './DesignerEditorWrapper';
+export { DesignerEditorWrapper, DesignerEditorBody } from './DesignerEditorWrapper';
 export type { DesignerEditorWrapperProps } from './DesignerEditorWrapper';
 export { translateMetadataType, translateMetadataDomain, t as translateMetadataAdmin, detectLocale, } from './i18n';
 export type { SupportedLocale } from './i18n';
-export { registerMetadataResource, getMetadataResource, listMetadataResources, resolveResourceConfig, } from './registry';
-export type { MetadataResourceConfig, MetadataDomain, } from './registry';
+export { registerMetadataResource, getMetadataResource, listMetadataResources, listAnchorsFor, resolveResourceConfig, anchorByField, } from './registry';
+export type { MetadataResourceConfig, MetadataDomain, MetadataAnchor, } from './registry';
+export { registerMetadataPreview, getMetadataPreview, listMetadataPreviewTypes, } from './preview-registry';
+export type { MetadataPreview, MetadataPreviewProps } from './preview-registry';
 export { useMetadataClient, useMetadataTypes, useTypesIndex, matchesQuery, } from './useMetadata';
 export type { RichMetadataTypeEntry } from './useMetadata';

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

@@ -16,18 +16,30 @@ export { MetadataDirectoryPage } from './DirectoryPage';
 export { MetadataResourceRouter } from './ResourceRouter';
 export { MetadataResourceListPage } from './ResourceListPage';
 export { MetadataResourceEditPage } from './ResourceEditPage';
+export { RelatedPanel } from './RelatedPanel';
+export { MetadataDetailDrawer } from './MetadataDetailDrawer';
 export { MetadataResourceHistoryPage } from './ResourceHistoryPage';
 export { MetadataQuickFind } from './QuickFind';
 export { PageShell as MetadataPageShell } from './PageShell';
 export { SchemaForm } from './SchemaForm';
 export { LayeredDiff } from './LayeredDiff';
 export { PermissionMatrixEditPage } from './PermissionMatrixEditor';
-export { DesignerEditorWrapper } from './DesignerEditorWrapper';
+export { DesignerEditorWrapper, DesignerEditorBody } from './DesignerEditorWrapper';
 export { translateMetadataType, translateMetadataDomain, t as translateMetadataAdmin, detectLocale, } from './i18n';
-export { registerMetadataResource, getMetadataResource, listMetadataResources, resolveResourceConfig, } from './registry';
+export { registerMetadataResource, getMetadataResource, listMetadataResources, listAnchorsFor, resolveResourceConfig, anchorByField, } from './registry';
+// Side-effect: register the built-in anchor relationships so the Related
+// tab works out of the box for objects (hooks, views, pages, …).
+import { registerBuiltinAnchors } from './anchors';
+registerBuiltinAnchors();
 // Side-effect: register fallback JSONSchemas for the 12 writable types
 // so the generic SchemaForm renders a real form (vs raw-JSON fallback)
 // until the framework wires Zod→JSONSchema generation into /meta/types.
 import { registerDefaultMetadataSchemas } from './default-schemas';
 registerDefaultMetadataSchemas();
+// Side-effect: register built-in Preview-tab renderers (page, view,
+// dashboard, report, app, object, email_template). Plugins can add or
+// override entries via `registerMetadataPreview()`.
+import { registerBuiltinPreviews } from './previews';
+registerBuiltinPreviews();
+export { registerMetadataPreview, getMetadataPreview, listMetadataPreviewTypes, } from './preview-registry';
 export { useMetadataClient, useMetadataTypes, useTypesIndex, matchesQuery, } from './useMetadata';