@object-ui/app-shell 6.2.0 → 6.2.2

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;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ReportPreview — runs the live Report draft through the same
+ * ReportRenderer the runtime ReportView uses.
+ *
+ * Uses the app-shell AdapterProvider's data source so previews see
+ * actual rows. Lazy-loaded to keep the metadata-admin bundle small.
+ */
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { useAdapter } from '../../../providers/AdapterProvider';
+import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+const ReportRenderer = React.lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportRenderer })));
+export function ReportPreview({ draft }) {
+    const adapter = useAdapter();
+    // Different fixture sets use different keys for the source object:
+    //   • new schema: `object`
+    //   • legacy: `objectName`
+    //   • some reports embed it under `data.object`
+    const objectName = draft.object ?? draft.objectName ?? draft.data?.object;
+    const visualization = draft.visualization?.type ?? draft.type;
+    if (!objectName) {
+        return (_jsx(PreviewShell, { hint: "report", children: _jsx(PreviewMessage, { tone: "warn", children: "Pick an Object in the Form tab \u2014 Reports need a source object before they can render." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `report · ${visualization ?? 'table'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The Report references an object/field that doesn't resolve, or its visualization config is incomplete.", 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 report renderer\u2026"] }), children: _jsx("div", { className: "p-3 min-h-[300px] max-h-[70vh] overflow-auto", children: _jsx(ReportRenderer, { schema: draft, dataSource: adapter }) }) }) }) }));
+}

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

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

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ViewPreview — renders a View metadata draft using the same
+ * `object-view` SchemaRenderer the runtime ObjectView route uses,
+ * with the current draft's variants injected as `listViews` so the
+ * draft drives what authors see (not the saved version).
+ *
+ * If the draft is a "single-schema legacy" view (no list/form/kanban
+ * wrappers, just one top-level `type`), we pass the schema straight
+ * to SchemaRenderer.
+ */
+import * as React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+const VIEW_VARIANT_KEYS = [
+    'list',
+    'form',
+    'kanban',
+    'calendar',
+    'gantt',
+    'map',
+    'gallery',
+    'timeline',
+    'feed',
+    'detail',
+];
+function detectVariants(draft) {
+    const out = [];
+    for (const k of VIEW_VARIANT_KEYS) {
+        const v = draft[k];
+        if (v && typeof v === 'object' && !Array.isArray(v)) {
+            out.push({ key: k, schema: v });
+        }
+    }
+    return out;
+}
+function resolveObjectName(draft, variantSchema) {
+    const candidates = [
+        variantSchema?.object,
+        variantSchema?.data?.object,
+        variantSchema?.objectName,
+        draft.object,
+        draft.objectName,
+        draft.data?.object,
+        draft.list?.data?.object,
+        draft.list?.object,
+    ];
+    for (const c of candidates) {
+        if (typeof c === 'string' && c)
+            return c;
+    }
+    return undefined;
+}
+export function ViewPreview({ name, draft }) {
+    const variants = React.useMemo(() => detectVariants(draft), [draft]);
+    const objectName = React.useMemo(() => resolveObjectName(draft, variants[0]?.schema), [draft, variants]);
+    // Compose the listViews map: the draft IS the "default" — surface it as a
+    // primary named view FIRST so the view switcher picks it as default. Then
+    // append any saved sibling named listViews.
+    const { listViews, defaultViewId } = React.useMemo(() => {
+        const out = {};
+        const primaryVariant = variants.find((v) => v.key === 'list') ?? variants[0];
+        const primaryId = String(name) || primaryVariant?.key || 'default';
+        if (primaryVariant) {
+            out[primaryId] = {
+                ...primaryVariant.schema,
+                label: primaryVariant.schema.label ?? draft.label ?? name,
+            };
+        }
+        const saved = draft.listViews;
+        if (saved && typeof saved === 'object' && !Array.isArray(saved)) {
+            for (const [k, v] of Object.entries(saved)) {
+                if (v && typeof v === 'object' && k !== primaryId)
+                    out[k] = v;
+            }
+        }
+        return { listViews: out, defaultViewId: primaryVariant ? primaryId : undefined };
+    }, [draft, variants, name]);
+    // -------------------------------------------------------------------------
+    // Path A — single-schema legacy view: render directly.
+    // -------------------------------------------------------------------------
+    if (!variants.length && draft.type) {
+        const schema = { ...draft };
+        return (_jsx(PreviewShell, { hint: `view · ${schema.type}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view's `type` may not be registered, or required fields are missing.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+    }
+    if (!objectName) {
+        return (_jsx(PreviewShell, { hint: "view", children: _jsxs(PreviewMessage, { tone: "warn", children: ["This view has no object binding yet. Set ", _jsx("code", { children: "list.data.object" }), " in the Form tab to fetch live data."] }) }));
+    }
+    // -------------------------------------------------------------------------
+    // Path B — multi-variant view: delegate to `object-view`, which is what
+    // the runtime route uses. Inject the draft's listViews so the preview
+    // reflects unsaved edits.
+    // -------------------------------------------------------------------------
+    const defaultViewType = variants[0]?.schema?.type ?? 'grid';
+    const schema = React.useMemo(() => ({
+        type: 'object-view',
+        objectName,
+        defaultViewType,
+        defaultListView: defaultViewId,
+        listViews,
+        showSearch: true,
+        showFilters: true,
+        showCreate: false,
+        showRefresh: true,
+        showViewSwitcher: true,
+    }), [objectName, defaultViewType, defaultViewId, listViews]);
+    const variantHint = variants
+        .map((v) => v.key)
+        .slice(0, 3)
+        .join(' · ');
+    return (_jsx(PreviewShell, { hint: `view · ${variantHint || 'list'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The view references an object or field that doesn't resolve.", children: _jsx("div", { className: "min-h-[300px] max-h-[75vh] overflow-auto", children: _jsx(SchemaRenderer, { schema: schema }) }) }) }));
+}

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

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

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

@@ -0,0 +1,26 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Built-in Preview-tab registrations.
+ *
+ * Each registration is one line; new types are trivially added without
+ * touching `ResourceEditPage.tsx`. To opt OUT of a built-in preview in
+ * a downstream app, call `registerMetadataPreview(type, MyVersion)`
+ * after this module runs — `registerMetadataPreview` is last-write-wins.
+ */
+import { registerMetadataPreview } from '../preview-registry';
+import { PagePreview } from './PagePreview';
+import { ViewPreview } from './ViewPreview';
+import { DashboardPreview } from './DashboardPreview';
+import { ReportPreview } from './ReportPreview';
+import { AppPreview } from './AppPreview';
+import { ObjectPreview } from './ObjectPreview';
+import { EmailTemplatePreview } from './EmailTemplatePreview';
+export function registerBuiltinPreviews() {
+    registerMetadataPreview('page', PagePreview);
+    registerMetadataPreview('view', ViewPreview);
+    registerMetadataPreview('dashboard', DashboardPreview);
+    registerMetadataPreview('report', ReportPreview);
+    registerMetadataPreview('app', AppPreview);
+    registerMetadataPreview('object', ObjectPreview);
+    registerMetadataPreview('email_template', EmailTemplatePreview);
+}