@object-ui/app-shell 6.2.0 → 6.2.1

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, } 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,13 @@ 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';
+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);
@@ -134,6 +139,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);
@@ -157,13 +201,7 @@ export function MetadataResourceEditPage({ type, name, createMode = false, }) {
             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)}`);
+                navigate(`../${encodeURIComponent(savedName)}`);
             }
         }
         catch (err) {
@@ -238,7 +276,15 @@ 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';
+    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);

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,229 @@
+// 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',
+                extract: (parent) => mapOrArrayToList(parent.fields),
+                groupLabel: 'Fields',
+                order: 5,
+            }],
+    });
+    registerMetadataResource({
+        type: '__object_index',
+        label: 'Index',
+        anchors: [{
+                anchorType: 'object',
+                source: 'embedded',
+                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',
+                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,19 @@ 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 { useMetadataClient, useMetadataTypes, useTypesIndex, matchesQuery, } from './useMetadata';
 export type { RichMetadataTypeEntry } from './useMetadata';

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

@@ -16,15 +16,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 { 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.

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

@@ -64,11 +64,32 @@ export interface MetadataResourceConfig {
     }>;
     /**
      * Fully custom edit page. Receives `{ type, name }`.
+     *
+     * Use this when the bespoke editor replaces the JSONSchema form entirely
+     * (e.g. PermissionMatrix grid). For visual designers that should coexist
+     * with the generic Form/Layers/References tabs, prefer `DesignerTab`.
      */
     EditPage?: ComponentType<{
         type: string;
         name: string;
     }>;
+    /**
+     * Optional visual designer that renders inside its own dedicated tab on
+     * the generic edit page, alongside Form / Layers / References. Receives
+     * `{ type, name }` and should render without an outer `PageShell` — the
+     * generic engine owns the chrome.
+     *
+     * When both `EditPage` and `DesignerTab` are provided, `EditPage` wins
+     * (full takeover); the tab variant is only used when `EditPage` is unset.
+     */
+    DesignerTab?: ComponentType<{
+        type: string;
+        name: string;
+    }>;
+    /**
+     * Optional label for the Designer tab. Defaults to "Designer".
+     */
+    designerTabLabel?: string;
     /**
      * Fully custom create page. Receives `{ type }`.
      */
@@ -96,7 +117,80 @@ export interface MetadataResourceConfig {
      * If the server registry DOES return a `schema`, this is ignored.
      */
     defaultSchema?: Record<string, unknown>;
+    /**
+     * Declares that items of this type are "anchored" to one or more
+     * parent metadata types. The Related tab on the parent's edit page
+     * lists every item that matches the anchor predicate.
+     *
+     * For example, registering `hook` with
+     * `{ anchorType: 'object', match: (item, name) => item.object === name }`
+     * makes every `hook` whose `object` field equals `account` show up in
+     * the Account object's Related tab under a "Hooks" group.
+     *
+     * Multiple anchors are allowed (e.g. a field could anchor to both
+     * `object` and `view`). The Related panel groups by anchored type.
+     */
+    anchors?: MetadataAnchor[];
 }
+/**
+ * Anchor declaration — "items of type X are children of items of type Y
+ * when this predicate matches". Used to power the Related tab.
+ *
+ * The predicate runs in the client against the unwrapped item shape
+ * returned by `client.list(type)`. Keep it cheap (just property reads);
+ * we evaluate it once per item per render.
+ */
+export interface MetadataAnchor {
+    /** The parent metadata type whose Related tab should surface this. */
+    anchorType: string;
+    /**
+     * Where the anchored items live.
+     *   - 'list' (default): query `client.list(childType)` and filter with
+     *     `match()`. Used for first-class metadata types (hooks, views, …).
+     *   - 'embedded': items are stored inside the parent body itself
+     *     (e.g. `object.fields[]`). `extract()` plucks the array; no
+     *     network call is made.
+     */
+    source?: 'list' | 'embedded';
+    /**
+     * Returns true when the child `item` belongs to the parent identified
+     * by `anchorName`. The default helper `byField('object')` covers the
+     * common case of an explicit `object: 'foo'` reference. Required when
+     * `source === 'list'` (the default); ignored for `'embedded'`.
+     */
+    match?: (item: Record<string, unknown>, anchorName: string) => boolean;
+    /**
+     * For `source: 'embedded'` only. Returns the embedded items array
+     * given the fully-loaded parent body. Items should already carry a
+     * `name` (or be normalised by the renderer).
+     */
+    extract?: (parentItem: Record<string, unknown>) => Array<Record<string, unknown>>;
+    /**
+     * Optional override for the group label shown on the Related panel.
+     * Defaults to the child type's resolved label.
+     */
+    groupLabel?: string;
+    /**
+     * Optional icon override for the group header. Falls back to the
+     * child type's registered icon.
+     */
+    iconName?: string;
+    /**
+     * Optional explicit ordering hint inside the Related panel. Lower
+     * numbers float to the top. Defaults to 100 if unset.
+     */
+    order?: number;
+}
+/**
+ * Helper that returns a `match` reading a (possibly dotted) field path
+ * from the item and comparing it to the anchor name.
+ *
+ *   anchorByField('object')                  // item.object === name
+ *   anchorByField('data.object')             // item.data?.object === name
+ *   anchorByField(['list.data.object',
+ *                  'form.data.object'])      // either path matches
+ */
+export declare function anchorByField(paths: string | string[]): MetadataAnchor['match'];
 /**
  * Register (or merge) an entry. Idempotent — re-registering with the
  * same `type` merges the new fields with any existing entry so that
@@ -109,6 +203,19 @@ export declare function registerMetadataResource(config: MetadataResourceConfig)
 export declare function getMetadataResource(type: string): MetadataResourceConfig | undefined;
 /** Snapshot of all registered entries (diagnostics; directory page). */
 export declare function listMetadataResources(): MetadataResourceConfig[];
+/**
+ * Build the list of child types whose items can be "anchored to" a
+ * parent type. Used by the Related tab to decide which `client.list`
+ * calls to make.
+ *
+ * Returns an array of `{ type, anchor }` pairs, sorted by `anchor.order`
+ * (lower first) and then by child type label for stable rendering.
+ */
+export declare function listAnchorsFor(parentType: string): Array<{
+    type: string;
+    config: MetadataResourceConfig;
+    anchor: MetadataAnchor;
+}>;
 /**
  * Merge a registered config (if any) with server-side defaults from
  * `/meta/types`. Server fields win for label/description/domain