@object-ui/app-shell 6.2.3 → 7.0.0

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 /**
  * PagePreview — renders a Page metadata record using the runtime
@@ -11,7 +11,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { SchemaRenderer } from '@object-ui/react';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
-export function PagePreview({ draft }) {
+import { OutlineStrip } from './OutlineStrip';
+import { PageBlockCanvas } from './PageBlockCanvas';
+import { InterfaceListPage } from '../../InterfaceListPage';
+import { t as tr } from '../i18n';
+export function PagePreview({ draft, editing, selection, onSelectionChange, onPatch, locale }) {
     const schema = React.useMemo(() => {
         // SchemaRenderer needs a `type` discriminator. Page schemas may
         // omit it (Page is the implicit type at this metadata level), so
@@ -19,8 +23,90 @@ export function PagePreview({ draft }) {
         const t = draft.type ?? 'page';
         return { ...draft, type: t };
     }, [draft]);
+    const designMode = !!(editing && onSelectionChange);
+    const canEdit = designMode && !!onPatch;
+    const selectedId = selection && selection.kind === 'block' ? selection.id : null;
+    // ADR-0047 interface pages are config-driven, not region-composed. The
+    // runtime (PageView) renders them via InterfaceListPage; the generic
+    // SchemaRenderer fallback would only produce a bare list shell with no
+    // source binding or user filters. Computed here, consumed after all hooks
+    // (the early return must not sit above later hooks — Rules of Hooks).
+    const isInterfacePage = !!draft?.interfaceConfig?.source;
+    // Pages may use either of two canonical shapes:
+    //   1. `regions: [{ name, components: [...] }]`  (ObjectStack spec, used by seeded pages)
+    //   2. `children: [...]`                         (raw SDUI tree shape)
+    // Detect which one is in use and surface chips/IDs accordingly.
+    const shape = React.useMemo(() => {
+        if (Array.isArray(draft.regions))
+            return 'regions';
+        return 'children';
+    }, [draft]);
+    const blockEntries = React.useMemo(() => {
+        if (shape === 'regions') {
+            const regions = draft.regions;
+            const out = [];
+            regions.forEach((r, i) => {
+                const comps = Array.isArray(r.components) ? r.components : [];
+                comps.forEach((c, j) => {
+                    out.push({
+                        id: `regions[${i}].components[${j}]`,
+                        label: c.id || c.type || `${r.name ?? `region ${i + 1}`} · ${j + 1}`,
+                    });
+                });
+            });
+            return out;
+        }
+        const children = Array.isArray(draft.children) ? draft.children : [];
+        return children.map((b, i) => ({ id: `children[${i}]`, label: b.id || b.type || `block ${i + 1}` }));
+    }, [draft, shape]);
+    const handleAddBlock = React.useCallback(() => {
+        if (!canEdit)
+            return;
+        // `container` is a safe default that renders an empty box and
+        // accepts further nested children — the user picks the real type
+        // from the inspector immediately after.
+        const newBlock = { type: 'container' };
+        if (shape === 'regions') {
+            const regions = Array.isArray(draft.regions) ? [...draft.regions] : [];
+            // Append to the last region; create a default region if none exist.
+            let targetIdx = regions.length - 1;
+            if (targetIdx < 0) {
+                regions.push({ name: 'main', components: [] });
+                targetIdx = 0;
+            }
+            const region = { ...regions[targetIdx] };
+            const comps = Array.isArray(region.components) ? [...region.components] : [];
+            comps.push(newBlock);
+            region.components = comps;
+            regions[targetIdx] = region;
+            onPatch({ regions });
+            onSelectionChange?.({ kind: 'block', id: `regions[${targetIdx}].components[${comps.length - 1}]`, label: newBlock.type });
+            return;
+        }
+        const children = Array.isArray(draft.children) ? draft.children : [];
+        const next = [...children, newBlock];
+        onPatch({ children: next });
+        onSelectionChange?.({ kind: 'block', id: `children[${next.length - 1}]`, label: newBlock.type });
+    }, [canEdit, draft, onPatch, onSelectionChange, shape]);
+    // Interface page → always mirror the runtime (InterfaceListPage), in BOTH
+    // design and preview modes. These pages are config-driven, not region-
+    // composed, so there is nothing to drag on a canvas: the author edits the
+    // Properties panel on the right and sees the real list (source view + user
+    // filters + data) update live on the left — no tab switch, no placeholder.
+    if (isInterfacePage) {
+        return (_jsx(PreviewShell, { hint: "page \u00B7 interface", children: _jsx(PreviewErrorBoundary, { fallbackHint: "The interface page references a source object/view that isn't available.", children: _jsx(InterfaceListPage, { page: draft, onConfigChange: canEdit ? (patch) => onPatch({ interfaceConfig: { ...((draft.interfaceConfig) || {}), ...patch } }) : undefined }) }) }));
+    }
+    // Empty draft → no preview; but if we're in design mode show the
+    // canvas so users can author from scratch.
     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 (_jsxs(PreviewShell, { hint: `page${designMode ? ' · design' : ''}`, children: [designMode && shape === 'regions' ? (_jsx(PageBlockCanvas, { draft: draft, onPatch: canEdit ? onPatch : undefined, selection: selection ?? null, onSelectionChange: onSelectionChange })) : designMode ? (_jsx(OutlineStrip, { title: tr('engine.inspector.pageBlock.outlineLabel', locale), entries: blockEntries, selectedId: selectedId, onSelect: (e) => onSelectionChange?.({ kind: 'block', id: e.id, label: e.label }), onAdd: canEdit ? handleAddBlock : undefined, addLabel: tr('engine.inspector.add.block', locale) })) : null, !designMode && _jsx(PreviewMessage, { children: "Add components to the page to see a preview." })] }));
+    }
+    // Design mode with regions shape — show the form-canvas style
+    // designer instead of the runtime renderer so authors can drag,
+    // rename, and add blocks inline. The outline strip becomes
+    // redundant in this view.
+    if (designMode && shape === 'regions') {
+        return (_jsx(PreviewShell, { hint: `page · design`, children: _jsx(PageBlockCanvas, { draft: draft, onPatch: canEdit ? onPatch : undefined, selection: selection ?? null, onSelectionChange: onSelectionChange }) }));
     }
-    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 }) }) }) }));
+    return (_jsx(PreviewShell, { hint: `page${designMode ? ' · design' : ''}`, children: _jsxs(PreviewErrorBoundary, { fallbackHint: "The Page schema is incomplete or references a component that hasn't been registered yet.", children: [designMode && (_jsx(OutlineStrip, { title: tr('engine.inspector.pageBlock.outlineLabel', locale), entries: blockEntries, selectedId: selectedId, onSelect: (e) => onSelectionChange?.({ kind: 'block', id: e.id, label: e.label }), onAdd: canEdit ? handleAddBlock : undefined, addLabel: tr('engine.inspector.add.block', locale) })), _jsx("div", { className: "min-h-[200px] max-h-[70vh] overflow-auto p-4", children: _jsx(SchemaRenderer, { schema: schema }) })] }) }));
 }

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

@@ -0,0 +1,27 @@
+/**
+ * PermissionPreview — read-only heatmap of a Permission Set draft.
+ *
+ * Permission Sets get edited as deeply-nested JSON in the generic
+ * form, which makes it nearly impossible to spot mistakes like
+ * "Account: edit without read" or "this set has zero objects". The
+ * preview renders the matrix that operators actually reason about:
+ *
+ *   1. Header strip: name, profile/permission-set flag, system perms
+ *      count, tab perms count, RLS rule count.
+ *   2. Object × CRUD-VAMA grid. Each row is one object; each column
+ *      is one capability (Create/Read/Edit/Delete/Transfer/Restore/
+ *      Purge/ViewAll/ModifyAll). Cells are colored chips — green when
+ *      granted, neutral when not, amber when "View All" or "Modify
+ *      All" is on (highlighting the bypass).
+ *   3. Field-level security: grouped by object, only fields with a
+ *      non-default setting are listed (read=false or editable=true).
+ *   4. System permissions + Tab visibility as compact chip lists.
+ *
+ * Sanity-check banner at the bottom flags risky combinations:
+ *   • allowEdit without allowRead (silently fails at runtime)
+ *   • allowDelete without allowRead
+ *   • modifyAllRecords without viewAllRecords
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function PermissionPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * PermissionPreview — read-only heatmap of a Permission Set draft.
+ *
+ * Permission Sets get edited as deeply-nested JSON in the generic
+ * form, which makes it nearly impossible to spot mistakes like
+ * "Account: edit without read" or "this set has zero objects". The
+ * preview renders the matrix that operators actually reason about:
+ *
+ *   1. Header strip: name, profile/permission-set flag, system perms
+ *      count, tab perms count, RLS rule count.
+ *   2. Object × CRUD-VAMA grid. Each row is one object; each column
+ *      is one capability (Create/Read/Edit/Delete/Transfer/Restore/
+ *      Purge/ViewAll/ModifyAll). Cells are colored chips — green when
+ *      granted, neutral when not, amber when "View All" or "Modify
+ *      All" is on (highlighting the bypass).
+ *   3. Field-level security: grouped by object, only fields with a
+ *      non-default setting are listed (read=false or editable=true).
+ *   4. System permissions + Tab visibility as compact chip lists.
+ *
+ * Sanity-check banner at the bottom flags risky combinations:
+ *   • allowEdit without allowRead (silently fails at runtime)
+ *   • allowDelete without allowRead
+ *   • modifyAllRecords without viewAllRecords
+ */
+import * as React from 'react';
+import { AlertTriangle, CheckCircle2, Circle, Eye, Layers, Lock, ShieldCheck, Star, Tag, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+const CAPS = [
+    { key: 'allowCreate', short: 'C', long: 'Create' },
+    { key: 'allowRead', short: 'R', long: 'Read' },
+    { key: 'allowEdit', short: 'U', long: 'Edit' },
+    { key: 'allowDelete', short: 'D', long: 'Delete' },
+    { key: 'allowTransfer', short: 'T', long: 'Transfer' },
+    { key: 'allowRestore', short: 'Re', long: 'Restore' },
+    { key: 'allowPurge', short: 'P', long: 'Purge', danger: true },
+    { key: 'viewAllRecords', short: 'V*', long: 'View All', danger: true },
+    { key: 'modifyAllRecords', short: 'M*', long: 'Modify All', danger: true },
+];
+function findWarnings(objects) {
+    const out = [];
+    for (const [obj, p] of Object.entries(objects)) {
+        if (p.allowEdit && !p.allowRead)
+            out.push({ object: obj, message: 'Edit granted without Read (record updates will fail).' });
+        if (p.allowDelete && !p.allowRead)
+            out.push({ object: obj, message: 'Delete granted without Read.' });
+        if (p.modifyAllRecords && !p.viewAllRecords)
+            out.push({ object: obj, message: 'Modify All without View All — modifications may target invisible records.' });
+        if (p.allowPurge && !p.allowDelete)
+            out.push({ object: obj, message: 'Purge (hard delete) granted without Delete.' });
+    }
+    return out;
+}
+export function PermissionPreview({ name, draft }) {
+    const d = draft;
+    const permName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? permName);
+    const isProfile = !!d.isProfile;
+    const objects = (d.objects ?? {});
+    const fields = (d.fields ?? {});
+    const systemPerms = Array.isArray(d.systemPermissions) ? d.systemPermissions : [];
+    const tabPerms = (d.tabPermissions ?? {});
+    const rls = Array.isArray(d.rowLevelSecurity) ? d.rowLevelSecurity : [];
+    const objectNames = React.useMemo(() => Object.keys(objects).sort(), [objects]);
+    const warnings = React.useMemo(() => findWarnings(objects), [objects]);
+    // Group field permissions by object name (key format: "<object>.<field>").
+    const fieldsByObject = React.useMemo(() => {
+        const out = new Map();
+        for (const [key, perm] of Object.entries(fields)) {
+            const [obj, ...rest] = key.split('.');
+            if (!obj || rest.length === 0)
+                continue;
+            const fname = rest.join('.');
+            // Only surface entries that diverge from the default (read=true, edit=false).
+            const isNonDefault = perm.readable === false || perm.editable === true;
+            if (!isNonDefault)
+                continue;
+            if (!out.has(obj))
+                out.set(obj, []);
+            out.get(obj).push({ field: fname, perm });
+        }
+        return out;
+    }, [fields]);
+    if (objectNames.length === 0 && systemPerms.length === 0 && Object.keys(tabPerms).length === 0) {
+        return (_jsx(PreviewShell, { hint: "permission", children: _jsx(PreviewMessage, { children: "Grant at least one object, system, or tab permission to see the matrix." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `permission · ${objectNames.length} object${objectNames.length === 1 ? '' : 's'}`, children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [isProfile ? (_jsx(Star, { className: "h-4 w-4 mt-0.5 text-amber-600 shrink-0" })) : (_jsx(ShieldCheck, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: permName }), _jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: isProfile ? 'Profile' : 'Permission Set' })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: Layers, label: `${objectNames.length} objects` }), _jsx(Pill, { icon: Tag, label: `${systemPerms.length} system perms` }), _jsx(Pill, { icon: Eye, label: `${Object.keys(tabPerms).length} tabs` }), _jsx(Pill, { icon: Lock, label: `${rls.length} RLS rules` })] })] })] }) }), objectNames.length > 0 && (_jsxs(Section, { title: "Object Permissions", count: objectNames.length, children: [_jsx("div", { className: "rounded border bg-background overflow-x-auto", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-muted/30 text-[10px] uppercase tracking-wider text-muted-foreground", children: [_jsx("th", { className: "px-2.5 py-1.5 text-left font-medium sticky left-0 bg-muted/30", children: "Object" }), CAPS.map((c) => (_jsx("th", { className: "px-1.5 py-1.5 text-center font-medium", title: c.long, children: c.short }, c.key)))] }) }), _jsx("tbody", { className: "divide-y", children: objectNames.map((obj) => {
+                                                const p = objects[obj] ?? {};
+                                                return (_jsxs("tr", { children: [_jsx("td", { className: "px-2.5 py-1 font-mono sticky left-0 bg-background", children: obj }), CAPS.map((c) => {
+                                                            const granted = !!p[c.key];
+                                                            return (_jsx("td", { className: "px-1.5 py-1 text-center", children: _jsx(Cell, { granted: granted, danger: c.danger }) }, c.key));
+                                                        })] }, obj));
+                                            }) })] }) }), _jsx(Legend, {})] })), fieldsByObject.size > 0 && (_jsx(Section, { title: "Field-Level Overrides", count: Array.from(fieldsByObject.values()).reduce((a, v) => a + v.length, 0), children: _jsx("div", { className: "rounded border bg-background divide-y text-xs", children: Array.from(fieldsByObject.entries()).sort().map(([obj, entries]) => (_jsxs("div", { className: "px-2.5 py-2", children: [_jsx("div", { className: "font-mono text-[11px] mb-1", children: obj }), _jsx("ul", { className: "flex flex-wrap gap-1", children: entries.map(({ field, perm }) => (_jsxs("li", { className: "inline-flex items-center gap-1 rounded border bg-muted/30 px-1.5 py-0.5", title: `readable=${perm.readable !== false}, editable=${!!perm.editable}`, children: [_jsx("span", { className: "font-mono", children: field }), perm.readable === false && (_jsx("span", { className: "text-[9px] uppercase text-red-700", children: "hidden" })), perm.editable && (_jsx("span", { className: "text-[9px] uppercase text-emerald-700", children: "editable" }))] }, field))) })] }, obj))) }) })), systemPerms.length > 0 && (_jsx(Section, { title: "System Permissions", count: systemPerms.length, children: _jsx("div", { className: "flex flex-wrap gap-1", children: systemPerms.map((s) => (_jsx("span", { className: "inline-flex items-center gap-1 rounded border bg-background px-1.5 py-0.5 text-[11px] font-mono", children: s }, s))) }) })), Object.keys(tabPerms).length > 0 && (_jsx(Section, { title: "Tab Visibility", count: Object.keys(tabPerms).length, children: _jsx("div", { className: "flex flex-wrap gap-1", children: Object.entries(tabPerms).map(([tab, vis]) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-background px-1.5 py-0.5 text-[11px]", children: [_jsx("span", { className: "font-mono", children: tab }), _jsx("span", { className: vis === 'hidden'
+                                            ? 'text-[9px] uppercase text-red-700'
+                                            : vis === 'visible' || vis === 'default_on'
+                                                ? 'text-[9px] uppercase text-emerald-700'
+                                                : 'text-[9px] uppercase text-muted-foreground', children: vis })] }, tab))) }) })), warnings.length > 0 && (_jsxs("div", { className: "rounded border border-amber-200 bg-amber-50 p-2.5 text-xs space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-amber-800", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), " ", warnings.length, " sanity check", warnings.length === 1 ? '' : 's', " failed"] }), _jsx("ul", { className: "space-y-0.5", children: warnings.map((w, i) => (_jsxs("li", { className: "text-amber-900", children: [_jsx("code", { className: "font-mono", children: w.object }), ": ", w.message] }, i))) })] }))] }) }) }));
+}
+function Cell({ granted, danger }) {
+    if (!granted) {
+        return _jsx(Circle, { className: "inline-block h-3 w-3 text-muted-foreground/40", "aria-label": "not granted" });
+    }
+    const cls = danger ? 'text-amber-600' : 'text-emerald-600';
+    return _jsx(CheckCircle2, { className: `inline-block h-3.5 w-3.5 ${cls}`, "aria-label": "granted" });
+}
+function Legend() {
+    return (_jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-600" }), " granted"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3 text-amber-600" }), " bypass (View/Modify All, Purge)"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Circle, { className: "h-3 w-3 text-muted-foreground/40" }), " not granted"] }), _jsx("span", { className: "ml-auto font-mono", children: "C R U D = CRUD \u00B7 T Re P = Transfer/Restore/Purge \u00B7 V* M* = View/Modify All" })] }));
+}
+function Section({ title, count, children }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [_jsx("span", { children: title }), count != null && _jsxs("span", { className: "opacity-70", children: ["(", count, ")"] })] }), children] }));
+}
+function Pill({ icon: Icon, label, }) {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { children: label })] }));
+}

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

@@ -5,19 +5,42 @@
  */
 import * as React from 'react';
 export interface PreviewShellProps {
-    /** Right-hand badge/label, e.g. the resolved view type or row count. */
+    /**
+     * Right-hand badge/label, e.g. the resolved view type or row count.
+     * Kept in the type signature for backward-compat with existing call
+     * sites, but no longer rendered — the breadcrumb + canvas toolbar
+     * already identify the resource, and the design/preview toggle says
+     * which mode we're in. Showing it again here was just chrome.
+     */
     hint?: React.ReactNode;
-    /** Optional title override. Defaults to `Preview`. */
+    /** Optional title override. No longer rendered (see `hint`). */
     title?: React.ReactNode;
-    /** Optional toolbar rendered on the right of the header. */
+    /**
+     * Optional toolbar rendered on the right of a slim 32px header. When
+     * omitted the header is fully suppressed so the preview body extends
+     * edge-to-edge inside the canvas border.
+     */
     toolbar?: React.ReactNode;
     children: React.ReactNode;
 }
-export declare function PreviewShell({ hint, title, toolbar, children }: PreviewShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function PreviewShell({ toolbar, children }: PreviewShellProps): React.JSX.Element;
 export declare function PreviewMessage({ tone, children, }: {
     tone?: 'info' | 'warn' | 'error';
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+/**
+ * Centered placeholder for empty/onboarding preview states (e.g. "no
+ * source object yet", "no columns defined"). Fills the canvas
+ * vertically so the empty-state feels intentional instead of looking
+ * like a tiny banner stranded above a vast blank canvas.
+ */
+export declare function PreviewEmptyState({ icon, title, description, action, tone, }: {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    tone?: 'info' | 'warn';
+}): React.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
@@ -36,5 +59,5 @@ export declare class PreviewErrorBoundary extends React.Component<{
         error: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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 })] }));
+import { AlertCircle, Inbox } from 'lucide-react';
+export function PreviewShell({ toolbar, children }) {
+    return (_jsxs("div", { className: "rounded-lg border bg-background overflow-hidden flex flex-col h-full", children: [toolbar != null && (_jsx("div", { className: "flex items-center justify-end border-b bg-muted/20 px-2 py-1 min-h-[32px]", children: toolbar })), _jsx("div", { className: "bg-background flex-1 min-h-0 overflow-auto", children: children })] }));
 }
 export function PreviewMessage({ tone = 'info', children, }) {
     const styles = tone === 'warn'
@@ -18,6 +18,19 @@ export function PreviewMessage({ tone = 'info', children, }) {
             : '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 })] }));
 }
+/**
+ * Centered placeholder for empty/onboarding preview states (e.g. "no
+ * source object yet", "no columns defined"). Fills the canvas
+ * vertically so the empty-state feels intentional instead of looking
+ * like a tiny banner stranded above a vast blank canvas.
+ */
+export function PreviewEmptyState({ icon, title, description, action, tone = 'info', }) {
+    const toneStyles = tone === 'warn'
+        ? 'text-amber-700 bg-amber-50/40 border-amber-200/60'
+        : 'text-muted-foreground border-dashed border-muted-foreground/25 bg-muted/10';
+    const iconNode = icon ?? _jsx(Inbox, { className: "h-8 w-8 opacity-50" });
+    return (_jsx("div", { className: "h-full w-full flex items-center justify-center p-6", children: _jsxs("div", { className: `max-w-md w-full rounded-lg border ${toneStyles} px-6 py-10 flex flex-col items-center gap-3 text-center`, children: [_jsx("div", { className: "text-foreground/60", children: iconNode }), _jsx("div", { className: "text-sm font-medium text-foreground/90", children: title }), description && _jsx("div", { className: "text-xs leading-relaxed", children: description }), action && _jsx("div", { className: "mt-1", children: action })] }) }));
+}
 /**
  * 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

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

@@ -1,2 +1,19 @@
+/**
+ * ReportPreview — runs the live Report draft through the SAME dataset-bound
+ * renderer the runtime ReportView uses (ADR-0021 single-form).
+ *
+ * A 9.0 report binds a semantic-layer `dataset` and selects its measures
+ * (`values`) grouped by dimensions (`rows`, plus `columns` across for a
+ * matrix); rendering through plugin-report's `ReportRenderer` keeps the
+ * studio preview pixel-equal with the runtime — including the matrix
+ * cross-tab — and the numbers consistent with every other surface on the
+ * same dataset (`adapter.queryDataset`). Drill-down stays inert here: the
+ * preview passes no `onDrill` sink.
+ *
+ * A draft without a dataset binding (e.g. stored pre-9.0 query-form JSON)
+ * gets an actionable empty state pointing at the inspector's Dataset control
+ * instead of the retired legacy renderer.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function ReportPreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReportPreview({ draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -1,27 +1,35 @@
 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.
+ * ReportPreview — runs the live Report draft through the SAME dataset-bound
+ * renderer the runtime ReportView uses (ADR-0021 single-form).
  *
- * Uses the app-shell AdapterProvider's data source so previews see
- * actual rows. Lazy-loaded to keep the metadata-admin bundle small.
+ * A 9.0 report binds a semantic-layer `dataset` and selects its measures
+ * (`values`) grouped by dimensions (`rows`, plus `columns` across for a
+ * matrix); rendering through plugin-report's `ReportRenderer` keeps the
+ * studio preview pixel-equal with the runtime — including the matrix
+ * cross-tab — and the numbers consistent with every other surface on the
+ * same dataset (`adapter.queryDataset`). Drill-down stays inert here: the
+ * preview passes no `onDrill` sink.
+ *
+ * A draft without a dataset binding (e.g. stored pre-9.0 query-form JSON)
+ * gets an actionable empty state pointing at the inspector's Dataset control
+ * instead of the retired legacy renderer.
  */
 import * as React from 'react';
-import { Loader2 } from 'lucide-react';
+import { Database, Loader2 } from 'lucide-react';
 import { useAdapter } from '../../../providers/AdapterProvider';
-import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+import { PreviewShell, PreviewErrorBoundary, PreviewEmptyState } 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." }) }));
+    // ADR-0021 single-form: a report binds a semantic-layer dataset.
+    if (typeof draft.dataset === 'string' && draft.dataset) {
+        const rows = Array.isArray(draft.rows) ? draft.rows.filter(Boolean) : [];
+        return (_jsx(PreviewShell, { hint: `report · dataset "${draft.dataset}"${rows.length ? ' · by ' + rows.join(', ') : ''}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The Report references a dataset/measure that doesn't resolve, or its config is incomplete.", children: _jsx(React.Suspense, { fallback: _jsxs("div", { className: "flex items-center gap-2 p-4 text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading report renderer\u2026"] }), children: _jsx("div", { className: "p-3 min-h-[200px] max-h-[70vh] overflow-auto", children: _jsx(ReportRenderer, { schema: draft, dataSource: adapter }) }) }) }) }));
     }
-    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 }) }) }) }) }));
+    // No dataset bound — either a fresh draft or stored pre-9.0 query-form
+    // JSON (objectName/columns), whose inline-query renderer was retired with
+    // the 9.0 cutover. Point the author at the dataset binding.
+    return (_jsx(PreviewShell, { children: _jsx(PreviewEmptyState, { icon: _jsx(Database, { className: "h-8 w-8" }), title: "Bind a dataset to preview this report", description: "Since the 9.0 single-form cutover a report renders its dataset's measures (values) grouped by dimensions (rows). Choose a Dataset in the right panel to start designing." }) }));
 }

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

@@ -0,0 +1,19 @@
+/**
+ * RolePreview — read-only summary of a Role draft.
+ *
+ * The Role schema is intentionally minimal — name / label / parent /
+ * description. The preview's job is therefore to put those four
+ * fields into the mental model an operator carries:
+ *
+ *   • Header card with label and machine name.
+ *   • Hierarchy breadcrumb — the role itself plus a chip for the
+ *     declared parent. We cannot resolve the full chain from a single
+ *     draft, but we surface the immediate parent prominently.
+ *   • Description block.
+ *   • A "permissions are managed separately" note pointing the user
+ *     to PermissionSets / Profiles that grant CRUD-VAMA — this is
+ *     the most common confusion when first authoring a role.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function RolePreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CornerDownRight, IdCard, ShieldCheck, Users } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+export function RolePreview({ name, draft }) {
+    const d = draft;
+    const roleName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? roleName);
+    const description = d.description ?? '';
+    const parent = d.parent;
+    if (!roleName) {
+        return (_jsx(PreviewShell, { hint: "role", children: _jsx(PreviewMessage, { children: "Give the role a name to see the preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "role", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Users, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: roleName })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description }))] })] }) }), _jsxs("div", { children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Hierarchy" }), _jsx("div", { className: "rounded border bg-background p-2.5 text-xs", children: parent ? (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(IdCard, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground", children: "Parent:" }), _jsx("code", { className: "font-mono", children: parent })] }), _jsxs("div", { className: "flex items-center gap-1.5 pl-4", children: [_jsx(CornerDownRight, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "rounded bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 text-[11px] font-mono text-emerald-800", children: roleName }), _jsx("span", { className: "text-[10px] text-muted-foreground italic", children: "this role" })] }), _jsx("div", { className: "text-[10px] text-muted-foreground pt-1", children: "Open the parent role to walk further up the chain." })] })) : (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "rounded bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 text-[11px] font-mono text-emerald-800", children: roleName }), _jsx("span", { className: "text-[10px] text-muted-foreground italic", children: "root role \u2014 no parent" })] })) })] }), _jsx("div", { className: "rounded border border-blue-200 bg-blue-50 p-2.5 text-[11px] text-blue-900", children: _jsxs("div", { className: "flex items-start gap-1.5", children: [_jsx(ShieldCheck, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Roles don't grant data access on their own." }), _jsxs("div", { className: "opacity-90 mt-0.5", children: ["Bind ", _jsx("code", { className: "font-mono", children: roleName }), " to one or more ", _jsx("strong", { children: "Permission Sets" }), ' ', "or assign it to a ", _jsx("strong", { children: "Profile" }), " to control CRUD-VAMA, field access, and tab visibility."] })] })] }) })] }) }) }));
+}

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

@@ -0,0 +1,22 @@
+/**
+ * SkillPreview — read-only summary of an AI Skill draft.
+ *
+ * Skills are reusable bundles of (instructions + tool whitelist +
+ * trigger conditions) that agents pull in. The preview surfaces:
+ *
+ *   • Header pills: active flag, permission requirements, model
+ *     hint if present.
+ *   • Description block.
+ *   • Instructions — the prompt fragment injected into the agent's
+ *     system prompt, in a soft code block so the operator can read
+ *     it the way the LLM will.
+ *   • Tools — chip list. Wildcards (`*`, `prefix.*`) get highlighted
+ *     because they expand the agent's tool surface significantly.
+ *   • Trigger phrases — the natural-language hints that route a user
+ *     message into this skill.
+ *   • Trigger conditions — CEL/structured conditions, rendered as a
+ *     compact table.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function SkillPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Asterisk, BookOpen, Filter, MessagesSquare, Power, ShieldCheck, Sparkles, Wrench, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+export function SkillPreview({ name, draft }) {
+    const d = draft;
+    const skillName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? skillName);
+    const description = d.description ?? '';
+    const instructions = d.instructions ?? '';
+    const tools = Array.isArray(d.tools) ? d.tools : [];
+    const triggerPhrases = Array.isArray(d.triggerPhrases) ? d.triggerPhrases : [];
+    const triggerConditions = Array.isArray(d.triggerConditions)
+        ? d.triggerConditions
+        : [];
+    const permissions = Array.isArray(d.permissions) ? d.permissions : [];
+    const active = d.active !== false;
+    const model = d.model ?? undefined;
+    if (!skillName) {
+        return (_jsx(PreviewShell, { hint: "skill", children: _jsx(PreviewMessage, { children: "Give the skill a name and at least an instructions block to see the preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "skill", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Sparkles, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: skillName })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: Power, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), model && _jsx(Pill, { label: `model: ${model}`, mono: true }), permissions.length > 0 && (_jsx(Pill, { icon: ShieldCheck, label: `${permissions.length} required perm${permissions.length === 1 ? '' : 's'}` }))] })] })] }) }), _jsx(Section, { title: "Instructions", icon: BookOpen, children: instructions ? (_jsx("pre", { className: "rounded border bg-background p-2.5 text-xs font-mono whitespace-pre-wrap break-words max-h-64 overflow-auto", children: instructions })) : (_jsx("div", { className: "text-xs text-amber-700", children: "No instructions yet \u2014 the skill will contribute nothing to the prompt." })) }), _jsxs(Section, { title: `Tools (${tools.length})`, icon: Wrench, children: [tools.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground italic", children: "No tools whitelisted." })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: tools.map((t) => {
+                                    const isWild = t.includes('*');
+                                    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-mono border ${isWild ? 'border-amber-300 bg-amber-50 text-amber-900' : 'border-border bg-muted/40'}`, children: [isWild && _jsx(Asterisk, { className: "h-3 w-3" }), t] }, t));
+                                }) })), tools.some((t) => t.includes('*')) && (_jsx("div", { className: "mt-1 text-[10px] text-amber-700", children: "Wildcards expand to many tools at runtime \u2014 review the matching set in the agent before activating." }))] }), triggerPhrases.length > 0 && (_jsx(Section, { title: `Trigger Phrases (${triggerPhrases.length})`, icon: MessagesSquare, children: _jsx("ul", { className: "rounded border bg-background divide-y text-xs", children: triggerPhrases.map((p, i) => (_jsxs("li", { className: "px-2.5 py-1.5", children: [_jsx("span", { className: "text-muted-foreground mr-2", children: "\"" }), p, _jsx("span", { className: "text-muted-foreground ml-2", children: "\"" })] }, i))) }) })), triggerConditions.length > 0 && (_jsx(Section, { title: `Trigger Conditions (${triggerConditions.length})`, icon: Filter, children: _jsx("div", { className: "rounded border bg-background overflow-hidden", children: _jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { className: "divide-y", children: triggerConditions.map((cond, i) => (_jsxs("tr", { children: [_jsx("td", { className: "px-2.5 py-1.5 align-top w-24 text-muted-foreground text-[10px] uppercase", children: cond.type ?? 'cond' }), _jsx("td", { className: "px-2.5 py-1.5 font-mono break-all", children: cond.expression ??
+                                                    cond.value ??
+                                                    JSON.stringify(cond) })] }, i))) }) }) }) })), permissions.length > 0 && (_jsx(Section, { title: "Required Permissions", icon: ShieldCheck, children: _jsx("div", { className: "flex flex-wrap gap-1", children: permissions.map((p) => (_jsx("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: p }, p))) }) }))] }) }) }));
+}
+function Section({ title, icon: Icon, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [Icon && _jsx(Icon, { className: "h-3 w-3" }), _jsx("span", { children: title })] }), children] }));
+}
+function Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green' ? 'text-emerald-700' : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: `${cls} ${mono ? 'font-mono' : ''}`, children: label })] }));
+}

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

@@ -0,0 +1,25 @@
+/**
+ * ToolPreview — read-only summary of an AI Tool metadata draft.
+ *
+ * AI tools are LLM-callable functions whose contract is a JSON Schema
+ * in `parameters`. The preview renders:
+ *
+ *   1. A header strip: machine name, category, target object, flags
+ *      (active, requiresConfirmation, builtIn).
+ *   2. The description verbatim (this is what the LLM reads to decide
+ *      when to call the tool, so authors must be able to skim it).
+ *   3. An **input parameters** table extracted from the JSON Schema:
+ *      one row per top-level property with type, required marker,
+ *      description, enum hints, and default value.
+ *   4. An **output schema** mirror table when `outputSchema` is set.
+ *   5. A skeletal "example invocation" panel showing what the LLM
+ *      would emit if it called the tool with required fields stubbed.
+ *
+ * We do not run the tool from the preview — invocation requires auth,
+ * permission checks, and live datasource access that the preview
+ * sandbox doesn't provide. Authors get an `Open in API Console` link
+ * for end-to-end testing.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function ToolPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;