@object-ui/app-shell 6.2.1 → 6.2.3

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

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Save, RotateCcw, History, Link2, Loader2, AlertTriangle, Layers3, } from 'lucide-react';
+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';
@@ -34,6 +34,7 @@ import { useMetadataClient, useMetadataTypes, } from './useMetadata';
 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 ?? '';
@@ -62,6 +63,15 @@ export function MetadataResourceEditPage({ type: typeProp, name: nameProp, creat
     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([]);
@@ -107,6 +117,7 @@ export function MetadataResourceEditPage({ type: typeProp, name: nameProp, creat
                 // Initial draft = effective if available, otherwise code.
                 const initial = (lay.effective ?? lay.code ?? {});
                 setDraft(initial);
+                draftSnapshotRef.current = initial;
                 setLoading(false);
             }
             catch (err) {
@@ -197,9 +208,15 @@ export function MetadataResourceEditPage({ type: typeProp, name: nameProp, creat
             // 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) {
                 navigate(`../${encodeURIComponent(savedName)}`);
             }
@@ -261,7 +278,10 @@ export function MetadataResourceEditPage({ type: typeProp, name: nameProp, creat
             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));
@@ -278,13 +298,38 @@ export function MetadataResourceEditPage({ type: typeProp, name: nameProp, creat
     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) => {
+    // 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 })), _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) => {
+                        }, 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/anchors.js

@@ -35,6 +35,8 @@ export function registerBuiltinAnchors() {
         anchors: [{
                 anchorType: 'object',
                 source: 'embedded',
+                editAs: 'field',
+                embeddedPath: 'fields',
                 extract: (parent) => mapOrArrayToList(parent.fields),
                 groupLabel: 'Fields',
                 order: 5,
@@ -46,6 +48,8 @@ export function registerBuiltinAnchors() {
         anchors: [{
                 anchorType: 'object',
                 source: 'embedded',
+                editAs: 'index',
+                embeddedPath: 'indexes',
                 extract: (parent) => {
                     const raw = parent.indexes;
                     if (!Array.isArray(raw))
@@ -67,6 +71,8 @@ export function registerBuiltinAnchors() {
         anchors: [{
                 anchorType: 'object',
                 source: 'embedded',
+                editAs: 'validation',
+                embeddedPath: 'validations',
                 extract: (parent) => mapOrArrayToList(parent.validations),
                 groupLabel: 'Embedded Validations',
                 order: 15,

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

@@ -29,5 +29,7 @@ export { translateMetadataType, translateMetadataDomain, t as translateMetadataA
 export type { SupportedLocale } from './i18n';
 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

@@ -36,4 +36,10 @@ registerBuiltinAnchors();
 // 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';

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

@@ -0,0 +1,43 @@
+/**
+ * MetadataPreviewRegistry — per-type "Preview" tab renderers for the
+ * metadata-admin engine.
+ *
+ * The Preview tab is opt-in: a type only gets a Preview tab when its
+ * type id is registered here. This matches the philosophy used for
+ * `DesignerTab` and the bespoke `EditPage` in `registry.ts` — generic
+ * by default, escape hatch when a type benefits from a richer surface.
+ *
+ * The renderer receives the **current draft** (not the saved layered
+ * record), so users see their unsaved edits live. Drafts can be
+ * incomplete or invalid — implementations must defensively read fields.
+ *
+ *   registerMetadataPreview('page', PagePreview);
+ *   const Preview = getMetadataPreview('page');
+ *   if (Preview) <Preview type="page" name="crm_welcome" draft={draft} />;
+ *
+ * If the type isn't registered, the engine simply omits the tab — no
+ * empty "preview not available" surface is shown.
+ */
+import type { ComponentType } from 'react';
+export interface MetadataPreviewProps {
+    /** The metadata type, e.g. 'page', 'dashboard'. */
+    type: string;
+    /** The item's primary-key name. May be empty string in create mode. */
+    name: string;
+    /**
+     * The live draft from the Form tab. Implementations should treat this
+     * as immutable and untrusted (validation may be in progress).
+     */
+    draft: Record<string, unknown>;
+}
+export type MetadataPreview = ComponentType<MetadataPreviewProps>;
+/**
+ * Register (or replace) the Preview tab renderer for a metadata type.
+ * Idempotent — re-registering overwrites the previous entry so app
+ * authors can swap implementations from their plugin bootstrap.
+ */
+export declare function registerMetadataPreview(type: string, component: MetadataPreview): void;
+/** Look up the registered preview for a type, if any. */
+export declare function getMetadataPreview(type: string): MetadataPreview | undefined;
+/** Snapshot of registered preview types (diagnostics). */
+export declare function listMetadataPreviewTypes(): string[];

package/dist/views/metadata-admin/preview-registry.js

@@ -0,0 +1,18 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+const REGISTRY = new Map();
+/**
+ * Register (or replace) the Preview tab renderer for a metadata type.
+ * Idempotent — re-registering overwrites the previous entry so app
+ * authors can swap implementations from their plugin bootstrap.
+ */
+export function registerMetadataPreview(type, component) {
+    REGISTRY.set(type, component);
+}
+/** Look up the registered preview for a type, if any. */
+export function getMetadataPreview(type) {
+    return REGISTRY.get(type);
+}
+/** Snapshot of registered preview types (diagnostics). */
+export function listMetadataPreviewTypes() {
+    return Array.from(REGISTRY.keys()).sort();
+}

package/dist/views/metadata-admin/previews/AppPreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function AppPreview({ name, draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/previews/AppPreview.js

@@ -0,0 +1,101 @@
+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.
+/**
+ * AppPreview — visual summary of an App metadata record's nav and
+ * landing route, since rendering a full nested AppShell inside the
+ * admin would be confusing (nav-within-nav).
+ *
+ * Shows:
+ *   • App label/icon + landing route
+ *   • Top-level navigation items (tabs/menu) as a clickable list —
+ *     each link opens the runtime app in a new tab so authors can
+ *     test the configured nav without leaving the editor.
+ *
+ * If the App schema doesn't follow the expected shape we degrade to
+ * a "no preview" hint rather than throw.
+ */
+import * as React from 'react';
+import { Compass, ExternalLink, LayoutDashboard, FileText, Database, BarChart3 } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+function normalizeNav(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    return raw
+        .map((it) => {
+        if (!it || typeof it !== 'object')
+            return null;
+        const label = String(it.label ?? it.title ?? it.name ?? it.path ?? '').trim();
+        if (!label && !it.children)
+            return null;
+        const path = it.path ?? it.href ?? it.route ?? it.url ?? undefined;
+        // Best-effort kind inference for icon selection.
+        let kind;
+        if (it.object || it.objectName)
+            kind = 'object';
+        else if (it.page || it.pageName)
+            kind = 'page';
+        else if (it.dashboard)
+            kind = 'dashboard';
+        else if (it.report)
+            kind = 'report';
+        else if (typeof path === 'string' && /^https?:/i.test(path))
+            kind = 'link';
+        else if (Array.isArray(it.children) && it.children.length)
+            kind = 'group';
+        const children = Array.isArray(it.children) ? normalizeNav(it.children) : undefined;
+        return { label: label || '(unnamed)', path, kind, children };
+    })
+        .filter((x) => x !== null);
+}
+function kindIcon(kind) {
+    switch (kind) {
+        case 'object':
+            return Database;
+        case 'page':
+            return FileText;
+        case 'dashboard':
+            return LayoutDashboard;
+        case 'report':
+            return BarChart3;
+        default:
+            return Compass;
+    }
+}
+export function AppPreview({ name, draft }) {
+    const appName = String(draft.name ?? name ?? '');
+    const label = draft.label ?? appName;
+    const landing = draft.landingRoute ?? draft.landing ?? draft.defaultRoute ?? '/';
+    const navItems = React.useMemo(() => {
+        // Accept the most common shapes used by app schemas in the wild.
+        const candidates = [
+            draft.nav,
+            draft.navigation,
+            draft.tabs,
+            draft.items,
+            draft.menu,
+        ];
+        for (const c of candidates) {
+            if (Array.isArray(c) && c.length)
+                return normalizeNav(c);
+        }
+        return [];
+    }, [draft]);
+    const baseRuntimeUrl = appName ? `/apps/${encodeURIComponent(appName)}/` : null;
+    return (_jsx(PreviewShell, { hint: "app", toolbar: baseRuntimeUrl && (_jsxs("a", { href: baseRuntimeUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", title: "Open this app in a new tab", children: ["Open ", _jsx(ExternalLink, { className: "h-3 w-3" })] })), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: String(label) }), _jsx("div", { className: "text-xs text-muted-foreground font-mono mt-0.5", children: appName }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: ["Landing: ", _jsx("code", { className: "font-mono", children: String(landing) })] })] }), navItems.length === 0 ? (_jsxs(PreviewMessage, { children: ["No top-level nav items. Add ", _jsx("code", { children: "nav" }), " / ", _jsx("code", { children: "tabs" }), " entries in the Form tab to populate the app's navigation."] })) : (_jsx("div", { className: "border rounded divide-y", children: navItems.map((item, i) => (_jsx(NavRow, { item: item, appName: appName, depth: 0 }, i))) }))] }) }) }));
+}
+function NavRow({ item, appName, depth }) {
+    const Icon = kindIcon(item.kind);
+    const url = buildUrl(appName, item.path);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent/40", style: { paddingLeft: `${12 + depth * 16}px` }, children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "font-medium truncate", children: item.label }), item.kind && (_jsx("span", { className: "text-[10px] uppercase tracking-wider opacity-60", children: item.kind })), url && (_jsxs("a", { href: url, target: "_blank", rel: "noreferrer", className: "ml-auto font-mono text-[10px] text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [item.path, " ", _jsx(ExternalLink, { className: "h-3 w-3" })] }))] }), item.children?.map((c, i) => (_jsx(NavRow, { item: c, appName: appName, depth: depth + 1 }, i)))] }));
+}
+function buildUrl(appName, path) {
+    if (!path)
+        return null;
+    if (/^https?:/i.test(path))
+        return path;
+    if (!appName)
+        return null;
+    // Treat path as relative to /apps/<appName>/ by default.
+    const trimmed = path.startsWith('/') ? path.slice(1) : path;
+    return `/apps/${encodeURIComponent(appName)}/${trimmed}`;
+}

package/dist/views/metadata-admin/previews/DashboardPreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function DashboardPreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/previews/DashboardPreview.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DashboardPreview — read-only render of a Dashboard metadata draft.
+ *
+ * Uses the same DashboardRenderer the runtime DashboardView uses, with
+ * the adapter from app-shell's AdapterProvider so widgets can query
+ * live data. `designMode` is OFF — this is preview, not edit.
+ *
+ * The plugin is loaded lazily to avoid pulling its dep graph into
+ * every metadata-admin page load.
+ */
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { useAdapter } from '../../../providers/AdapterProvider';
+import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+const DashboardRenderer = React.lazy(() => import('@object-ui/plugin-dashboard').then((m) => ({ default: m.DashboardRenderer })));
+export function DashboardPreview({ draft }) {
+    const adapter = useAdapter();
+    const widgets = Array.isArray(draft.widgets) ? draft.widgets : [];
+    if (widgets.length === 0) {
+        return (_jsx(PreviewShell, { hint: "dashboard", children: _jsx(PreviewMessage, { children: "Add at least one widget to see a preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `dashboard · ${widgets.length} widget${widgets.length === 1 ? '' : 's'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "A widget references an object or field that doesn't resolve.", children: _jsx(React.Suspense, { fallback: _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 dashboard renderer\u2026"] }), children: _jsx("div", { className: "p-3 max-h-[70vh] overflow-auto", children: _jsx(DashboardRenderer, { schema: draft, dataSource: adapter, designMode: false, hideHeaderText: true }) }) }) }) }));
+}

package/dist/views/metadata-admin/previews/EmailTemplatePreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function EmailTemplatePreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/previews/EmailTemplatePreview.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * EmailTemplatePreview — sandboxed HTML preview with `{{var}}` and
+ * `${var}` substitution from a tiny variables editor.
+ *
+ * Why an iframe? Email HTML is full-document content (`<html>`, inline
+ * styles, sometimes `<head>` blocks). Injecting it inline would let it
+ * style the host page. `srcdoc` + `sandbox="allow-same-origin"` gives
+ * us a clean visual without exposing the admin UI to template CSS.
+ *
+ * Subject / from / to are surfaced above the body so authors can see
+ * the full envelope at a glance.
+ */
+import * as React from 'react';
+import { Mail } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+function detectVariables(text) {
+    const out = new Set();
+    // {{ var }}  — Handlebars/Mustache style
+    for (const m of text.matchAll(/\{\{\s*([a-zA-Z_][\w.]*)\s*\}\}/g))
+        out.add(m[1]);
+    // ${ var } — JS template style
+    for (const m of text.matchAll(/\$\{\s*([a-zA-Z_][\w.]*)\s*\}/g))
+        out.add(m[1]);
+    return Array.from(out).sort();
+}
+function resolveVar(path, scope) {
+    return scope[path] ?? '';
+}
+function substitute(text, scope) {
+    return text
+        .replace(/\{\{\s*([a-zA-Z_][\w.]*)\s*\}\}/g, (_, p) => resolveVar(p, scope))
+        .replace(/\$\{\s*([a-zA-Z_][\w.]*)\s*\}/g, (_, p) => resolveVar(p, scope));
+}
+export function EmailTemplatePreview({ draft }) {
+    const subject = String(draft.subject ?? '');
+    const from = String(draft.from ?? draft.fromAddress ?? '');
+    const to = String(draft.to ?? '');
+    const bodyHtml = String(draft.bodyHtml ?? draft.html ?? draft.body ?? '');
+    const bodyText = String(draft.bodyText ?? draft.text ?? '');
+    const variables = React.useMemo(() => {
+        const all = new Set();
+        for (const v of detectVariables(subject))
+            all.add(v);
+        for (const v of detectVariables(bodyHtml))
+            all.add(v);
+        for (const v of detectVariables(bodyText))
+            all.add(v);
+        return Array.from(all).sort();
+    }, [subject, bodyHtml, bodyText]);
+    const [scope, setScope] = React.useState({});
+    const resolvedSubject = substitute(subject, scope);
+    const resolvedHtml = bodyHtml ? substitute(bodyHtml, scope) : substitute(bodyText, scope).replace(/\n/g, '<br/>');
+    // Wrap the body in a minimal HTML doc so emails missing their own
+    // `<html>` shell still render with a sensible default font.
+    const srcDoc = `<!doctype html><html><head><meta charset="utf-8"><style>
+    html,body{margin:0;padding:16px;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111;background:#fff;}
+    a{color:#2563eb;}
+  </style></head><body>${resolvedHtml || '<p style="color:#888">(empty body)</p>'}</body></html>`;
+    if (!bodyHtml && !bodyText && !subject) {
+        return (_jsx(PreviewShell, { hint: "email_template", children: _jsx(PreviewMessage, { children: "Fill in the subject / body in the Form tab to see a preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "email_template", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "grid lg:grid-cols-[1fr_220px] gap-0", children: [_jsxs("div", { className: "p-3 space-y-3 min-w-0", children: [_jsxs("div", { className: "rounded border bg-muted/30 px-3 py-2 text-xs space-y-0.5", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "w-12 text-muted-foreground shrink-0", children: "From" }), _jsx("span", { className: "font-mono truncate", children: from || '—' })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "w-12 text-muted-foreground shrink-0", children: "To" }), _jsx("span", { className: "font-mono truncate", children: to || '—' })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "w-12 text-muted-foreground shrink-0", children: "Subject" }), _jsx("span", { className: "font-medium truncate", children: resolvedSubject || '—' })] })] }), _jsx("iframe", { title: "Email preview", srcDoc: srcDoc, sandbox: "allow-same-origin", className: "w-full min-h-[400px] max-h-[60vh] border rounded bg-white" })] }), _jsxs("div", { className: "border-l bg-muted/20 p-3 text-xs space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-muted-foreground", children: [_jsx(Mail, { className: "h-3 w-3" }), " Variables"] }), variables.length === 0 ? (_jsxs("div", { className: "text-muted-foreground italic", children: ["No ", _jsx("code", { children: '{{var}}' }), " placeholders found."] })) : (_jsx("div", { className: "space-y-2", children: variables.map((v) => (_jsxs("label", { className: "block", children: [_jsx("span", { className: "block font-mono text-[10px] text-muted-foreground mb-0.5", children: v }), _jsx("input", { type: "text", value: scope[v] ?? '', onChange: (e) => setScope((s) => ({ ...s, [v]: e.target.value })), placeholder: `sample for ${v}`, className: "w-full text-xs px-2 py-1 border rounded bg-background" })] }, v))) }))] })] }) }) }));
+}

package/dist/views/metadata-admin/previews/ObjectPreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ObjectPreview({ name, draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/previews/ObjectPreview.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ObjectPreview — render the object exactly the way the console does it:
+ * via the same `object-view` SchemaRenderer the runtime route uses, with
+ * the live adapter behind it. Authors see real records, real localized
+ * column labels, real type-aware cell formatters (booleans → checkbox,
+ * dates → locale string, refs → links), real search / filter chrome.
+ *
+ * This is a deliberate change from the earlier hand-rolled table: keeping
+ * two implementations in sync was bound to drift, and the user explicitly
+ * asked for preview parity with the console.
+ */
+import * as React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+export function ObjectPreview({ name, draft }) {
+    const objectName = String(draft.name ?? name ?? '');
+    if (!objectName) {
+        return (_jsx(PreviewShell, { hint: "object", children: _jsx(PreviewMessage, { children: "Give the object a name to enable preview." }) }));
+    }
+    // Reuse the exact same SDUI component the runtime route renders, so the
+    // preview inherits localized headers, type-aware cell formatters, view
+    // switcher, search, filter, sort and pagination chrome out of the box.
+    const schema = React.useMemo(() => ({
+        type: 'object-view',
+        objectName,
+        defaultViewType: 'grid',
+        showSearch: true,
+        showFilters: true,
+        showCreate: false,
+        showRefresh: true,
+        showViewSwitcher: true,
+    }), [objectName]);
+    return (_jsx(PreviewShell, { hint: "object \u00B7 live data", children: _jsx(PreviewErrorBoundary, { fallbackHint: "The object metadata couldn't be rendered. Save the draft and reload to retry.", children: _jsx("div", { className: "max-h-[75vh] overflow-auto", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+}

package/dist/views/metadata-admin/previews/PagePreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function PagePreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/previews/PagePreview.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * PagePreview — renders a Page metadata record using the runtime
+ * SchemaRenderer so authors see exactly what end-users would see.
+ *
+ * Reads the live draft (not the server-saved record) so edits in the
+ * Form tab preview instantly. URL query params are intentionally not
+ * threaded in: previews run in a sandbox with no params context.
+ */
+import * as React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+export function PagePreview({ draft }) {
+    const schema = React.useMemo(() => {
+        // SchemaRenderer needs a `type` discriminator. Page schemas may
+        // omit it (Page is the implicit type at this metadata level), so
+        // we inject it if missing while preserving any explicit override.
+        const t = draft.type ?? 'page';
+        return { ...draft, type: t };
+    }, [draft]);
+    if (!schema || Object.keys(schema).length <= 1) {
+        return (_jsx(PreviewShell, { hint: "page", children: _jsx(PreviewMessage, { children: "Add components to the page to see a preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "page", children: _jsx(PreviewErrorBoundary, { fallbackHint: "The Page schema is incomplete or references a component that hasn't been registered yet.", children: _jsx("div", { className: "min-h-[200px] max-h-[70vh] overflow-auto p-4", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+}

package/dist/views/metadata-admin/previews/PreviewShell.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared chrome for Preview-tab renderers — gives every preview the
+ * same border, padding, header strip, and empty/error states so they
+ * feel like one feature instead of seven one-offs.
+ */
+import * as React from 'react';
+export interface PreviewShellProps {
+    /** Right-hand badge/label, e.g. the resolved view type or row count. */
+    hint?: React.ReactNode;
+    /** Optional title override. Defaults to `Preview`. */
+    title?: React.ReactNode;
+    /** Optional toolbar rendered on the right of the header. */
+    toolbar?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function PreviewShell({ hint, title, toolbar, children }: PreviewShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function PreviewMessage({ tone, children, }: {
+    tone?: 'info' | 'warn' | 'error';
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Catch render errors from third-party preview renderers so a buggy
+ * widget can't blank the whole edit page. Keeps the rest of the tabs
+ * (Form / Layers / References) usable.
+ */
+export declare class PreviewErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallbackHint?: string;
+}, {
+    error: Error | null;
+}> {
+    state: {
+        error: Error | null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/views/metadata-admin/previews/PreviewShell.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Shared chrome for Preview-tab renderers — gives every preview the
+ * same border, padding, header strip, and empty/error states so they
+ * feel like one feature instead of seven one-offs.
+ */
+import * as React from 'react';
+import { AlertCircle, Eye } from 'lucide-react';
+export function PreviewShell({ hint, title = 'Preview', toolbar, children }) {
+    return (_jsxs("div", { className: "rounded-lg border bg-background overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between border-b bg-muted/30 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), _jsx("span", { children: title }), hint != null && (_jsx("span", { className: "ml-1 text-[10px] uppercase tracking-wider opacity-70", children: hint }))] }), toolbar] }), _jsx("div", { className: "bg-background", children: children })] }));
+}
+export function PreviewMessage({ tone = 'info', children, }) {
+    const styles = tone === 'warn'
+        ? 'text-amber-800 bg-amber-50 border-amber-200'
+        : tone === 'error'
+            ? 'text-destructive bg-destructive/5 border-destructive/30'
+            : 'text-muted-foreground border-muted';
+    return (_jsxs("div", { className: `m-4 rounded border p-3 text-sm flex items-start gap-2 ${styles}`, children: [tone !== 'info' && _jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("div", { className: "flex-1", children: children })] }));
+}
+/**
+ * Catch render errors from third-party preview renderers so a buggy
+ * widget can't blank the whole edit page. Keeps the rest of the tabs
+ * (Form / Layers / References) usable.
+ */
+export class PreviewErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { error: null }
+        });
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error) {
+        // eslint-disable-next-line no-console
+        console.error('[MetadataPreview] render failed', error);
+    }
+    render() {
+        if (this.state.error) {
+            return (_jsxs(PreviewMessage, { tone: "error", children: [_jsx("div", { className: "font-medium", children: "Preview failed to render" }), _jsx("div", { className: "text-xs mt-1 font-mono opacity-80", children: this.state.error.message }), this.props.fallbackHint && (_jsx("div", { className: "text-xs mt-2 opacity-70", children: this.props.fallbackHint }))] }));
+        }
+        return this.props.children;
+    }
+}

package/dist/views/metadata-admin/previews/ReportPreview.d.ts

@@ -0,0 +1,2 @@
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ReportPreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;