@object-ui/app-shell 6.2.3 → 7.1.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
@@ -9,9 +9,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * threaded in: previews run in a sandbox with no params context.
  */
 import * as React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, RecordContextProvider } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
+import { buildDefaultPageSchema } from '@object-ui/plugin-detail';
 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 +25,197 @@ 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]);
+    // ── Record binding ──────────────────────────────────────────────────────
+    // A `type: 'record'` page's `record:*` blocks (details / highlights / path /
+    // alert) read their data from <RecordContextProvider>. The metadata editor
+    // has no record route, so without binding a sample they render the
+    // "bind a record to preview" placeholder — i.e. the author designs blind.
+    // Fetch a handful of real records of the bound object + its schema and let
+    // the author pick which one to preview against (mirrors the runtime
+    // RecordDetailView's RecordContextProvider).
+    // Match the runtime resolver (usePageAssignment): a record page is keyed by
+    // either bare `type: 'record'` (editor draft shape) or `pageType: 'record'`
+    // (persisted envelope shape). Both must bind a sample record so record:*
+    // blocks render real data.
+    const isRecordPage = draft?.type === 'record'
+        || draft?.pageType === 'record';
+    const recordObject = isRecordPage ? draft?.object : undefined;
+    const [recordSamples, setRecordSamples] = React.useState([]);
+    const [recordSchema, setRecordSchema] = React.useState(null);
+    const [selectedRecordId, setSelectedRecordId] = React.useState(null);
+    React.useEffect(() => {
+        if (!recordObject) {
+            setRecordSamples([]);
+            setRecordSchema(null);
+            setSelectedRecordId(null);
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            try {
+                const opts = { headers: { accept: 'application/json' }, credentials: 'include' };
+                // Schema first: it tells us which fields are lookup/master_detail so we
+                // can `$expand` them. Without expansion record:details/highlights would
+                // show raw foreign-key IDs (e.g. "O4VKrNesnsj2JYMa") instead of display
+                // names — the runtime RecordDetailView $expands for exactly this reason.
+                const schemaRes = await fetch(`/api/v1/meta/object/${encodeURIComponent(recordObject)}`, opts);
+                const schemaJson = await schemaRes.json().catch(() => null);
+                const schema = schemaJson?.item ?? schemaJson?.data ?? schemaJson;
+                const expand = buildExpandFields(schema?.fields);
+                const query = expand.length > 0
+                    ? `?$top=50&$expand=${encodeURIComponent(expand.join(','))}`
+                    : `?$top=50`;
+                const recsRes = await fetch(`/api/v1/data/${encodeURIComponent(recordObject)}${query}`, opts);
+                const recsJson = await recsRes.json().catch(() => null);
+                // The REST data endpoint returns `{ object, records, total, hasMore }`;
+                // tolerate the other common envelopes too.
+                const recs = Array.isArray(recsJson?.records) ? recsJson.records
+                    : Array.isArray(recsJson?.items) ? recsJson.items
+                        : Array.isArray(recsJson?.data) ? recsJson.data
+                            : Array.isArray(recsJson) ? recsJson : [];
+                if (cancelled)
+                    return;
+                setRecordSamples(recs);
+                setRecordSchema(schema);
+                // Same id-resolution order as recordIdOf so the initial selection's
+                // value matches an <option> even for objects keyed only by `name`.
+                setSelectedRecordId((prev) => prev ?? (recs[0]?.id ?? recs[0]?._id ?? recs[0]?.name ?? null));
+            }
+            catch {
+                if (!cancelled) {
+                    setRecordSamples([]);
+                    setRecordSchema(null);
+                }
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [recordObject]);
+    const recordIdOf = (r) => r?.id ?? r?._id ?? r?.name;
+    const recordLabelOf = (r) => String(r?.name ?? r?.title ?? r?.label ?? r?.subject ?? recordIdOf(r) ?? '(record)');
+    const selectedRecord = React.useMemo(() => {
+        if (!recordSamples.length)
+            return null;
+        return recordSamples.find((r) => String(recordIdOf(r)) === String(selectedRecordId)) ?? recordSamples[0];
+    }, [recordSamples, selectedRecordId]);
+    // ── Slotted record page synthesis ────────────────────────────────────────
+    // A `kind: 'slotted'` page carries an empty `regions: []` plus a `slots` map
+    // of overrides, so the raw draft renders blank through SchemaRenderer (there
+    // are no regions to walk). Mirror the runtime RecordDetailView: synthesize the
+    // canonical default page from the bound object's schema and apply the slot
+    // overrides via the SAME `buildDefaultPageSchema(objectDef, { slots })` path,
+    // so omitted slots fall through to the synthesized header/details/discussion
+    // while authored slots (highlights/tabs/…) override in place. Non-slotted
+    // pages render their authored schema unchanged.
+    const isSlotted = draft?.kind === 'slotted';
+    const renderSchema = React.useMemo(() => {
+        if (!isSlotted)
+            return schema;
+        try {
+            const slots = draft?.slots ?? {};
+            // `recordSchema` arrives async; until then synthesize with no objectDef
+            // (structure renders immediately, field-level detail fills in on load).
+            return buildDefaultPageSchema(recordSchema ?? undefined, { slots });
+        }
+        catch {
+            return schema;
+        }
+    }, [isSlotted, schema, draft, recordSchema]);
+    // Wrap record-page content in the record context (+ a sample-record picker)
+    // so detail/highlights/path/alert blocks render real data. No-op for
+    // non-record pages and for record pages with no rows yet (renders the node
+    // unchanged so the existing placeholder still shows).
+    const withRecordBinding = (node) => {
+        if (!recordObject || !selectedRecord)
+            return node;
+        return (_jsxs(RecordContextProvider, { objectName: recordObject, recordId: recordIdOf(selectedRecord), data: selectedRecord, objectSchema: recordSchema ?? undefined, embedded: true, children: [recordSamples.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b bg-muted/30 text-xs", children: [_jsx("span", { className: "text-muted-foreground shrink-0", children: "Preview record" }), _jsx("select", { className: "h-7 rounded-md border bg-background px-2 text-xs max-w-[260px]", value: String(selectedRecordId ?? ''), onChange: (e) => setSelectedRecordId(e.target.value), children: recordSamples.map((r) => {
+                                const id = recordIdOf(r);
+                                return _jsx("option", { value: String(id), children: recordLabelOf(r) }, String(id));
+                            }) }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: [recordSamples.length, " sample", recordSamples.length === 1 ? '' : 's'] })] })), node] }));
+    };
+    // 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: withRecordBinding(_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) })), withRecordBinding(_jsx("div", { className: "min-h-[200px] max-h-[70vh] overflow-auto p-4", children: _jsx(SchemaRenderer, { schema: renderSchema }) }))] }) }));
 }

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/ScreenPreview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ScreenPreview — live design-time preview of a flow `screen` node, rendered
+ * exactly as the end user will see it at runtime.
+ *
+ * It builds a runtime `ScreenSpec` from the node's authored `config` and hands
+ * it to the shared {@link ScreenView} — the SAME renderer the runtime
+ * FlowRunner uses — so the preview can never drift from runtime (the
+ * design↔runtime divergence #1927 set out to kill). `{var}` references in the
+ * title/description are interpolated, and `fields` are gated by their
+ * `visibleWhen`, against the supplied `variables` (the flow's declared defaults
+ * in the inspector, or the live simulated values when paused in the Debug
+ * simulator).
+ *
+ * Object-form mode is fed the SAME enriched object list the runtime uses
+ * (`useMetadata().objects`, which derives inline master-detail `subforms` from
+ * `inlineEdit` relationships) so the preview renders those child grids too.
+ *
+ * Homes: the flow node inspector (live-updates as the config is edited) and the
+ * Debug simulator's paused-at-screen state.
+ */
+import * as React from 'react';
+import { type ScreenPreviewNode } from './screen-spec';
+export type { ScreenPreviewNode } from './screen-spec';
+export interface ScreenPreviewProps {
+    /** The screen node to preview. */
+    node: ScreenPreviewNode;
+    /**
+     * Variable values for `{var}` interpolation in the title/description AND for
+     * evaluating each field's `visibleWhen`. The inspector passes the flow's
+     * declared defaults; the simulator passes the live run state at the pause
+     * point. Unknown `{var}` refs stay literal, and fields whose `visibleWhen`
+     * can't be decided stay visible — the design preview never hides on missing
+     * data.
+     */
+    variables?: Record<string, unknown>;
+    className?: string;
+}
+export declare function ScreenPreview({ node, variables, className }: ScreenPreviewProps): React.JSX.Element;