@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,32 @@
+/**
+ * OutlineStrip — clickable chip strip that lets users select
+ * sub-elements inside a preview whose main canvas renders through a
+ * sealed external renderer (SchemaRenderer, ReportRenderer, …) and
+ * therefore can't intercept clicks directly.
+ *
+ * The strip sits above the canvas. Each chip emits a selection on
+ * click; the currently-selected one gets a ring. Empty list collapses
+ * the strip entirely so the canvas takes the full preview height
+ * outside design mode.
+ */
+import * as React from 'react';
+export interface OutlineEntry {
+    /** Selection id to emit. */
+    id: string;
+    /** Human-readable chip label. */
+    label: string;
+}
+export declare function OutlineStrip({ title, entries, selectedId, onSelect, onAdd, addLabel, }: {
+    title: string;
+    entries: OutlineEntry[];
+    selectedId: string | null;
+    onSelect: (entry: OutlineEntry) => void;
+    /**
+     * Optional: render a `+` chip at the end. Clicking it should append
+     * a new item to the underlying array, set selection to the new item,
+     * and let the inspector open immediately.
+     */
+    onAdd?: () => void;
+    /** Tooltip / aria-label for the Add chip. Defaults to "Add". */
+    addLabel?: string;
+}): React.JSX.Element | null;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from 'lucide-react';
+import { cn } from '@object-ui/components';
+export function OutlineStrip({ title, entries, selectedId, onSelect, onAdd, addLabel, }) {
+    if (entries.length === 0 && !onAdd)
+        return null;
+    return (_jsxs("div", { className: "border-b bg-muted/30 px-3 py-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground mb-1.5", children: title }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [entries.map((e) => (_jsx("button", { type: "button", onClick: (ev) => { ev.stopPropagation(); onSelect(e); }, className: cn('rounded border bg-background px-2 py-0.5 text-xs hover:border-primary/50 cursor-pointer', selectedId === e.id && 'ring-2 ring-primary border-primary'), children: e.label }, e.id))), onAdd && (_jsxs("button", { type: "button", onClick: (ev) => { ev.stopPropagation(); onAdd(); }, className: "rounded border border-dashed bg-background px-2 py-0.5 text-xs text-muted-foreground hover:border-primary hover:text-primary cursor-pointer inline-flex items-center gap-1", "aria-label": addLabel ?? 'Add', title: addLabel ?? 'Add', children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx("span", { children: addLabel ?? 'Add' })] }))] })] }));
+}

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

@@ -0,0 +1,49 @@
+/**
+ * PageBlockCanvas — form-designer-style preview for a Page metadata
+ * draft. Mirrors {@link ObjectFormCanvas}'s pattern: each block becomes
+ * a clickable card with a type badge, drag handle, and inline-rename
+ * affordance on its label. Regions become group sections that accept
+ * drops to reassign blocks.
+ *
+ * Supports only the canonical Page shape (`regions[].components[]`).
+ * Pages using the raw `children[]` shape fall back to the existing
+ * SchemaRenderer preview (no inline editing).
+ *
+ * Selection emits `{ kind: 'block', id: 'regions[i].components[j]' }`
+ * matching PageBlockInspector.
+ */
+import * as React from 'react';
+import type { MetadataSelection } from '../preview-registry';
+/** Build the schema handed to SchemaRenderer, neutralising overlay form types so
+ *  a live form block never mounts a modal over the design canvas. SchemaRenderer
+ *  needs a `type` discriminator; the block always carries one. */
+export declare function toCanvasSchema(block: Block): Record<string, unknown>;
+interface Block {
+    type?: string;
+    id?: string;
+    label?: string;
+    title?: string;
+    children?: Block[];
+    [k: string]: unknown;
+}
+interface Region {
+    name?: string;
+    width?: string;
+    components?: Block[];
+}
+export interface PageBlockCanvasProps {
+    draft: Record<string, unknown>;
+    onPatch?: (patch: Record<string, unknown>) => void;
+    selection?: MetadataSelection | null;
+    onSelectionChange?: (next: MetadataSelection | null) => void;
+}
+/** Canonical record-page slots, in render order. A `kind:'slotted'` page
+ *  overrides individual slots; unoverridden ones are filled by the synthesizer.
+ *  We surface all of them so an author can override an inherited slot too. */
+export declare const SLOT_ORDER: readonly ["header", "actions", "alerts", "highlights", "details", "tabs", "discussion"];
+/** slots object → one region per slot (single component normalised to array). */
+export declare function slotsToRegions(slots: Record<string, unknown> | undefined): Region[];
+/** regions (one per slot) → slots object; empty slots are omitted (= inherited). */
+export declare function regionsToSlots(regions: Region[]): Record<string, unknown>;
+export declare function PageBlockCanvas({ draft, onPatch, selection, onSelectionChange, }: PageBlockCanvasProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,510 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * PageBlockCanvas — form-designer-style preview for a Page metadata
+ * draft. Mirrors {@link ObjectFormCanvas}'s pattern: each block becomes
+ * a clickable card with a type badge, drag handle, and inline-rename
+ * affordance on its label. Regions become group sections that accept
+ * drops to reassign blocks.
+ *
+ * Supports only the canonical Page shape (`regions[].components[]`).
+ * Pages using the raw `children[]` shape fall back to the existing
+ * SchemaRenderer preview (no inline editing).
+ *
+ * Selection emits `{ kind: 'block', id: 'regions[i].components[j]' }`
+ * matching PageBlockInspector.
+ */
+import * as React from 'react';
+import { Badge, Button, cn, Popover, PopoverContent, PopoverTrigger, } from '@object-ui/components';
+import { GripVertical, Plus } from 'lucide-react';
+import { BLOCK_TYPE_META, TYPES_BY_CATEGORY, CATEGORY_LABEL_EN, UnknownBlockIcon, resolveBlockTone, } from './block-types';
+import { parsePath, hopsToPath, getByPath, setByPath } from '../inspectors/PageBlockInspector';
+import { SchemaRenderer, PreviewModeProvider } from '@object-ui/react';
+import { PreviewErrorBoundary } from './PreviewShell';
+import { isOverlayFormType } from './form-preview';
+/** Build the schema handed to SchemaRenderer, neutralising overlay form types so
+ *  a live form block never mounts a modal over the design canvas. SchemaRenderer
+ *  needs a `type` discriminator; the block always carries one. */
+export function toCanvasSchema(block) {
+    const schema = {
+        ...block,
+        type: String(block?.type ?? ''),
+    };
+    // formType lives under `properties` (canonical) but may also be hoisted to the
+    // top level; neutralise whichever carries an overlay type.
+    const props = schema.properties && typeof schema.properties === 'object'
+        ? schema.properties
+        : undefined;
+    const formType = (props?.formType ?? schema.formType);
+    if (isOverlayFormType(formType)) {
+        if (props)
+            schema.properties = { ...props, formType: 'simple' };
+        if ('formType' in schema)
+            schema.formType = 'simple';
+    }
+    return schema;
+}
+/** Defer mounting until an element scrolls near the viewport. Renders immediately
+ *  in non-browser / test environments (no real IntersectionObserver, or under
+ *  vitest) so server rendering and tests are unaffected; lazy only in the browser.
+ *  Once in view it stays mounted — re-mounting a data block would re-fetch. */
+function useLazyInView(rootMargin = '300px') {
+    const ref = React.useRef(null);
+    const [inView, setInView] = React.useState(() => {
+        if (typeof IntersectionObserver === 'undefined')
+            return true;
+        try {
+            if (import.meta.env?.MODE === 'test')
+                return true;
+        }
+        catch {
+            /* import.meta unavailable — fall through to lazy */
+        }
+        return false;
+    });
+    React.useEffect(() => {
+        if (inView)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        const io = new IntersectionObserver((entries) => {
+            if (entries.some((e) => e.isIntersecting)) {
+                setInView(true);
+                io.disconnect();
+            }
+        }, { rootMargin });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [inView, rootMargin]);
+    return { ref, inView };
+}
+/** Render a single block via the real runtime renderer, behind a click-trap, so
+ *  the design canvas mirrors the live preview. Mounting is deferred until the
+ *  block scrolls near the viewport: data-bound blocks (grids, related lists,
+ *  repeaters) each fetch on mount, so a tall page would otherwise fire every
+ *  query at once. Capped height keeps a tall widget from dominating the canvas. */
+function BlockLivePreview({ block, maxHeightClass = 'max-h-72' }) {
+    const typeStr = String(block?.type ?? '');
+    const { ref, inView } = useLazyInView();
+    return (_jsx("div", { ref: ref, className: cn('pointer-events-none select-none overflow-hidden p-3', maxHeightClass), children: inView ? (_jsx(PreviewErrorBoundary, { fallbackHint: `"${typeStr}" can't render with its current configuration — check its Properties.`, children: _jsx(PreviewModeProvider, { children: _jsx(SchemaRenderer, { schema: toCanvasSchema(block) }) }) })) : (_jsx("div", { className: "min-h-[64px] animate-pulse rounded bg-muted/40", "aria-hidden": "true" })) }));
+}
+/** Tailwind needs static class names — map a column count to a grid class. */
+const GRID_COLS_CLASS = {
+    1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3',
+    4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6',
+};
+/** Container blocks expose nested child arrays (issue #1499). Returns each
+ *  group's display label, the path suffix to its children array (relative to
+ *  the block), and the current children. */
+function childGroups(block) {
+    const props = block?.properties || {};
+    switch (block?.type) {
+        case 'page:tabs':
+        case 'page:accordion': {
+            const items = Array.isArray(props.items) ? props.items : [];
+            return items.map((it, i) => ({
+                label: it?.label || it?.key || `Item ${i + 1}`,
+                pathSuffix: `properties.items[${i}].children`,
+                children: Array.isArray(it?.children) ? it.children : [],
+            }));
+        }
+        case 'page:card': {
+            // Seeded cards nest under `properties.children`; older specs used
+            // `properties.body`. Prefer children, fall back to body so neither
+            // shape leaves the card's content unreachable on the canvas.
+            if (Array.isArray(props.body) && !Array.isArray(props.children)) {
+                return [{ label: 'Body', pathSuffix: 'properties.body', children: props.body }];
+            }
+            return [{ label: 'Body', pathSuffix: 'properties.children', children: Array.isArray(props.children) ? props.children : [] }];
+        }
+        case 'page:section':
+        case 'grid':
+            return [{ label: 'Content', pathSuffix: 'properties.children', children: Array.isArray(props.children) ? props.children : [] }];
+        default:
+            // Future-proof: any block carrying a `properties.children` array (e.g.
+            // `container`) exposes those children for selection/editing.
+            if (Array.isArray(props.children)) {
+                return [{ label: 'Content', pathSuffix: 'properties.children', children: props.children }];
+            }
+            return [];
+    }
+}
+/** Canonical record-page slots, in render order. A `kind:'slotted'` page
+ *  overrides individual slots; unoverridden ones are filled by the synthesizer.
+ *  We surface all of them so an author can override an inherited slot too. */
+export const SLOT_ORDER = ['header', 'actions', 'alerts', 'highlights', 'details', 'tabs', 'discussion'];
+/** slots object → one region per slot (single component normalised to array). */
+export function slotsToRegions(slots) {
+    const s = slots || {};
+    return SLOT_ORDER.map((name) => {
+        const v = s[name];
+        const components = Array.isArray(v) ? v : v != null ? [v] : [];
+        return { name, components };
+    });
+}
+/** regions (one per slot) → slots object; empty slots are omitted (= inherited). */
+export function regionsToSlots(regions) {
+    const slots = {};
+    for (const r of regions) {
+        const comps = Array.isArray(r.components) ? r.components : [];
+        if (comps.length === 0 || !r.name)
+            continue; // omit empty → inherit the default
+        slots[r.name] = comps;
+    }
+    return slots;
+}
+function readRegions(draft) {
+    // Slotted record page — edit the named slots (must win over an empty
+    // `regions: []`, which slotted pages carry).
+    const slots = draft.slots;
+    if (draft.kind === 'slotted' && slots && typeof slots === 'object' && !Array.isArray(slots)) {
+        return { regions: slotsToRegions(slots), shape: 'slots' };
+    }
+    const raw = draft.regions;
+    if (Array.isArray(raw))
+        return { regions: raw, shape: 'regions' };
+    const kids = draft.children;
+    if (Array.isArray(kids)) {
+        // Virtualise children[] as a single anonymous region.
+        return { regions: [{ name: 'children', components: kids }], shape: 'children' };
+    }
+    return { regions: [], shape: 'regions' };
+}
+/** Build a selection ID matching PageBlockInspector's parsePath regex.
+ *  - regions shape:  regions[i].components[j]
+ *  - children shape: children[j]  (flat, no nesting)
+ */
+function selectionId(shape, regionIdx, compIdx, slotName) {
+    if (shape === 'children')
+        return `children[${compIdx}]`;
+    if (shape === 'slots')
+        return `slot:${slotName}:${compIdx}`;
+    return `regions[${regionIdx}].components[${compIdx}]`;
+}
+function blockLabel(b) {
+    return ((typeof b.label === 'string' && b.label) ||
+        (typeof b.title === 'string' && b.title) ||
+        (typeof b.id === 'string' && b.id) ||
+        String(b.type ?? 'block'));
+}
+const DT_MIME = 'text/x-objectui-pageblock';
+export function PageBlockCanvas({ draft, onPatch, selection, onSelectionChange, }) {
+    const readOnly = !onPatch;
+    const { regions, shape } = React.useMemo(() => readRegions(draft), [draft]);
+    const selectedId = selection?.kind === 'block' ? String(selection.id) : null;
+    const writeRegions = React.useCallback((next) => {
+        if (shape === 'children') {
+            const comps = next.flatMap((r) => (Array.isArray(r.components) ? r.components : []));
+            onPatch?.({ children: comps });
+        }
+        else if (shape === 'slots') {
+            onPatch?.({ slots: regionsToSlots(next) });
+        }
+        else {
+            onPatch?.({ regions: next });
+        }
+    }, [onPatch, shape]);
+    /** Move a block from src path → dst region (append) or before/after target block. */
+    const moveBlock = React.useCallback((src, dst) => {
+        if (!onPatch)
+            return;
+        // Defensive copies — never mutate inputs.
+        const next = regions.map((r) => ({
+            ...r,
+            components: Array.isArray(r.components) ? [...r.components] : [],
+        }));
+        const srcComps = next[src.region]?.components;
+        if (!srcComps)
+            return;
+        const [moved] = srcComps.splice(src.comp, 1);
+        if (!moved)
+            return;
+        const dstComps = next[dst.region]?.components;
+        if (!dstComps)
+            return;
+        let insertAt = dstComps.length;
+        if ('appendEnd' in dst)
+            insertAt = dstComps.length;
+        else if (dst.before != null) {
+            // Adjust if moving within same region above the original
+            let idx = dst.before;
+            if (src.region === dst.region && src.comp < idx)
+                idx -= 1;
+            insertAt = idx;
+        }
+        else if (dst.after != null) {
+            let idx = dst.after + 1;
+            if (src.region === dst.region && src.comp < dst.after + 1)
+                idx -= 1;
+            insertAt = idx;
+        }
+        dstComps.splice(insertAt, 0, moved);
+        writeRegions(next);
+        // Re-issue selection so inspector follows the move.
+        const newId = selectionId(shape, dst.region, insertAt, next[dst.region]?.name);
+        onSelectionChange?.({ kind: 'block', id: newId, label: blockLabel(moved) });
+    }, [onPatch, onSelectionChange, regions, writeRegions, shape]);
+    const addBlock = React.useCallback((regionIdx, type) => {
+        if (!onPatch)
+            return;
+        const next = regions.map((r) => ({
+            ...r,
+            components: Array.isArray(r.components) ? [...r.components] : [],
+        }));
+        if (!next[regionIdx]) {
+            next[regionIdx] = { name: `region_${regionIdx + 1}`, components: [] };
+        }
+        const newBlock = { type };
+        next[regionIdx].components.push(newBlock);
+        writeRegions(next);
+        const idx = next[regionIdx].components.length - 1;
+        onSelectionChange?.({
+            kind: 'block',
+            id: selectionId(shape, regionIdx, idx, next[regionIdx]?.name),
+            label: blockLabel(newBlock),
+        });
+    }, [onPatch, onSelectionChange, regions, writeRegions, shape]);
+    const renameLabel = React.useCallback((regionIdx, compIdx, nextLabel) => {
+        if (!onPatch)
+            return;
+        const next = regions.map((r) => ({
+            ...r,
+            components: Array.isArray(r.components) ? [...r.components] : [],
+        }));
+        const target = next[regionIdx]?.components?.[compIdx];
+        if (!target)
+            return;
+        next[regionIdx].components[compIdx] = { ...target, label: nextLabel || undefined };
+        writeRegions(next);
+    }, [onPatch, regions, writeRegions]);
+    const addRegion = React.useCallback(() => {
+        if (!onPatch)
+            return;
+        const next = [...regions, { name: `region_${regions.length + 1}`, components: [] }];
+        writeRegions(next);
+    }, [onPatch, regions, writeRegions]);
+    // Append a block into a container's nested child array (issue #1499).
+    // `baseId` is the container's selection id (`regions[r].components[c]` or
+    // `slot:<name>:<idx>`); `pathSuffix` locates the children array within it.
+    const addNestedBlock = React.useCallback((baseId, pathSuffix, type) => {
+        if (!onPatch)
+            return;
+        const slot = /^slot:([a-zA-Z_]+):(\d+)$/.exec(baseId);
+        const subHops = parsePath(pathSuffix);
+        if (!subHops)
+            return;
+        const subPath = hopsToPath(subHops);
+        if (slot) {
+            const name = slot[1];
+            const idx = Number(slot[2]);
+            const slots = (draft.slots || {});
+            const v = slots[name];
+            const arr = Array.isArray(v) ? [...v] : v != null ? [v] : [];
+            const base = arr[idx];
+            if (!base)
+                return;
+            const cur = getByPath(base, subPath) || [];
+            arr[idx] = setByPath(base, subPath, [...cur, { type }]);
+            onPatch({ slots: { ...slots, [name]: arr } });
+            onSelectionChange?.({ kind: 'block', id: `${baseId}.${pathSuffix}[${cur.length}]`, label: type });
+        }
+        else {
+            const fullHops = parsePath(`${baseId}.${pathSuffix}`);
+            if (!fullHops)
+                return;
+            const fullPath = hopsToPath(fullHops);
+            const cur = getByPath(draft, fullPath) || [];
+            const next = setByPath(draft, fullPath, [...cur, { type }]);
+            onPatch({ [fullPath[0]]: next[fullPath[0]] });
+            onSelectionChange?.({ kind: 'block', id: `${baseId}.${pathSuffix}[${cur.length}]`, label: type });
+        }
+    }, [onPatch, draft, onSelectionChange]);
+    const handleBgClick = React.useCallback((e) => {
+        if (e.target === e.currentTarget && selectedId)
+            onSelectionChange?.(null);
+    }, [onSelectionChange, selectedId]);
+    // Empty draft → empty canvas with hint. (ADR-0047 interface pages never
+    // reach this canvas — PagePreview renders them as a live InterfaceListPage
+    // in both design and preview modes — so no interface-specific hint here.)
+    if (regions.length === 0) {
+        return (_jsx("div", { className: "h-full overflow-auto bg-muted/20", onClick: handleBgClick, children: _jsx("div", { className: "mx-auto max-w-3xl px-6 py-8", children: _jsxs("div", { className: "rounded-lg border-2 border-dashed bg-background py-16 px-6 text-center space-y-3", children: [_jsx("div", { className: "text-sm font-medium", children: "No regions yet" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "A Page is composed of regions (header / main / sidebar / \u2026). Add a region to start dropping blocks into it." }), !readOnly && (_jsx("div", { className: "pt-2", children: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5 border-dashed", onClick: addRegion, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Add region"] }) }))] }) }) }));
+    }
+    return (_jsx("div", { className: "h-full overflow-auto bg-muted/20", onClick: handleBgClick, children: _jsxs("div", { className: "mx-auto max-w-3xl px-6 py-6 space-y-5", onClick: handleBgClick, children: [regions.map((region, regionIdx) => (_jsx(RegionSection, { region: region, regionIdx: regionIdx, shape: shape, selectedId: selectedId, readOnly: readOnly, onSelectBlock: (compIdx, blk) => onSelectionChange?.({
+                        kind: 'block',
+                        id: selectionId(shape, regionIdx, compIdx, region.name),
+                        label: blockLabel(blk),
+                    }), onMoveBlock: moveBlock, onAddBlock: addBlock, onRenameLabel: renameLabel, baseIdOf: (compIdx) => selectionId(shape, regionIdx, compIdx, region.name), onSelectId: (sid, lbl) => onSelectionChange?.({ kind: 'block', id: sid, label: lbl }), onAddNested: addNestedBlock }, regionIdx))), !readOnly && shape === 'regions' && (_jsx("div", { className: "pt-1", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-muted-foreground", onClick: addRegion, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Add region"] }) }))] }) }));
+}
+/* ─────────────── Region section ─────────────── */
+function RegionSection({ region, regionIdx, shape, selectedId, readOnly, onSelectBlock, onMoveBlock, onAddBlock, onRenameLabel, onSelectId, onAddNested, }) {
+    const comps = Array.isArray(region.components) ? region.components : [];
+    const [active, setActive] = React.useState(false);
+    const handleDragOver = (e) => {
+        if (readOnly)
+            return;
+        const types = e.dataTransfer.types;
+        if (!types || !Array.from(types).includes(DT_MIME))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setActive(true);
+    };
+    const handleDragLeave = (e) => {
+        if (e.currentTarget === e.target)
+            setActive(false);
+    };
+    const handleDrop = (e) => {
+        if (readOnly)
+            return;
+        setActive(false);
+        if (e.defaultPrevented)
+            return;
+        e.preventDefault();
+        const raw = e.dataTransfer.getData(DT_MIME);
+        if (!raw)
+            return;
+        try {
+            const src = JSON.parse(raw);
+            if (typeof src.region !== 'number' || typeof src.comp !== 'number')
+                return;
+            onMoveBlock(src, { region: regionIdx, appendEnd: true });
+        }
+        catch { /* ignore */ }
+    };
+    return (_jsxs("section", { className: cn('rounded-md transition-colors', active && 'bg-primary/5 ring-1 ring-primary/30 -mx-1 px-1 py-1'), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsxs("div", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground pl-1 mb-2 flex items-center gap-2", children: [_jsx("span", { children: region.name || `region ${regionIdx + 1}` }), region.width && (_jsxs("span", { className: "normal-case text-[10px] text-muted-foreground/60", children: ["\u00B7 ", region.width] })), active && _jsx("span", { className: "text-primary normal-case text-[10px]", children: "drop here" })] }), _jsxs("div", { className: "space-y-2.5", children: [comps.length === 0 ? (_jsx("div", { className: "rounded border border-dashed bg-background/50 py-6 px-4 text-center text-xs text-muted-foreground", children: shape === 'slots'
+                            ? 'Inherited from the default page — add a block to override this slot.'
+                            : 'Empty region — drop a block here or use the add button below.' })) : (comps.map((blk, compIdx) => {
+                        const id = selectionId(shape, regionIdx, compIdx, region.name);
+                        return (_jsxs(React.Fragment, { children: [_jsx(BlockRow, { block: blk, regionIdx: regionIdx, compIdx: compIdx, selected: id === selectedId, readOnly: readOnly, onClick: () => onSelectBlock(compIdx, blk), onMoveBlock: onMoveBlock, onRenameLabel: (v) => onRenameLabel(regionIdx, compIdx, v) }), _jsx(NestedChildren, { block: blk, baseId: id, selectedId: selectedId, readOnly: readOnly, onSelectId: onSelectId, onAddNested: onAddNested })] }, `${regionIdx}:${compIdx}`));
+                    })), !readOnly && (_jsx("div", { className: "pt-1", children: _jsx(AddBlockButton, { onPick: (type) => onAddBlock(regionIdx, type) }) }))] })] }));
+}
+/* ─────────────── Block row ─────────────── */
+function BlockRow({ block, regionIdx, compIdx, selected, readOnly, onClick, onMoveBlock, onRenameLabel, }) {
+    const typeStr = String(block.type ?? '');
+    const meta = BLOCK_TYPE_META[typeStr];
+    const Icon = meta?.Icon ?? UnknownBlockIcon;
+    const tone = resolveBlockTone(typeStr);
+    const label = blockLabel(block);
+    const draggable = !readOnly;
+    const [dropZone, setDropZone] = React.useState(null);
+    const handleDragStart = (e) => {
+        e.dataTransfer.setData(DT_MIME, JSON.stringify({ region: regionIdx, comp: compIdx }));
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragOver = (e) => {
+        if (!draggable)
+            return;
+        const types = e.dataTransfer.types;
+        if (!types || !Array.from(types).includes(DT_MIME))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        const rect = e.currentTarget.getBoundingClientRect();
+        setDropZone(e.clientY - rect.top < rect.height / 2 ? 'before' : 'after');
+    };
+    const handleDragLeave = () => setDropZone(null);
+    const handleDrop = (e) => {
+        if (readOnly)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const pos = dropZone ?? 'before';
+        setDropZone(null);
+        const raw = e.dataTransfer.getData(DT_MIME);
+        if (!raw)
+            return;
+        try {
+            const src = JSON.parse(raw);
+            if (src.region === regionIdx && src.comp === compIdx)
+                return;
+            const dst = pos === 'before'
+                ? { region: regionIdx, before: compIdx }
+                : { region: regionIdx, after: compIdx };
+            onMoveBlock(src, dst);
+        }
+        catch { /* ignore */ }
+    };
+    // Inline label rename
+    const [editingLabel, setEditingLabel] = React.useState(false);
+    const [draft, setDraft] = React.useState(label);
+    React.useEffect(() => { setDraft(label); }, [label]);
+    const beginEdit = (e) => {
+        if (readOnly)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setDraft(label);
+        setEditingLabel(true);
+    };
+    const commitEdit = () => {
+        if (readOnly) {
+            setEditingLabel(false);
+            return;
+        }
+        const next = draft.trim();
+        if (next && next !== label)
+            onRenameLabel(next);
+        setEditingLabel(false);
+    };
+    const cancelEdit = () => { setDraft(label); setEditingLabel(false); };
+    // Container blocks (grid / card / tabs / section) render a slim title bar —
+    // their real content is the nested child cards shown below by NestedChildren.
+    // Leaf blocks render their REAL component so the canvas mirrors the preview.
+    const isContainer = childGroups(block).length > 0;
+    return (_jsxs("div", { className: cn('relative', dropZone === 'before' && 'pt-1.5'), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [dropZone === 'before' && (_jsx("div", { className: "absolute left-0 right-0 -top-0.5 h-0.5 bg-primary rounded-full" })), _jsx("div", { className: cn('group relative rounded-md border bg-card transition-colors hover:border-primary/40', selected ? 'border-primary ring-2 ring-primary/30 shadow-sm' : 'border-border'), children: isContainer ? (_jsxs("button", { type: "button", onClick: onClick, draggable: draggable, onDragStart: handleDragStart, className: cn('flex w-full items-center justify-between gap-2 rounded-md px-3.5 py-2.5 text-left', readOnly && 'cursor-default', draggable && 'cursor-grab active:cursor-grabbing'), "aria-pressed": selected, children: [_jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [draggable && (_jsx(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground/40 shrink-0 group-hover:text-muted-foreground/80", "aria-hidden": "true" })), _jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', tone.icon) }), editingLabel ? (_jsx("input", { autoFocus: true, value: draft, onChange: (e) => setDraft(e.target.value), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                        e.stopPropagation();
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            commitEdit();
+                                        }
+                                        else if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            cancelEdit();
+                                        }
+                                    }, onBlur: commitEdit, className: "text-sm font-medium px-1 py-0.5 -mx-1 -my-0.5 rounded border border-primary bg-background outline-none min-w-0 flex-1" })) : (_jsx("span", { className: cn('text-sm font-medium truncate', !readOnly && 'cursor-text'), onDoubleClick: beginEdit, title: !readOnly ? 'Double-click to rename' : undefined, children: label })), block.id && block.id !== label && (_jsxs("code", { className: "text-[10px] text-muted-foreground/70 font-mono truncate", children: ["#", block.id] }))] }), _jsx(Badge, { variant: "outline", className: cn('text-[10px] shrink-0 font-mono', tone.badge), children: typeStr })] })) : (_jsxs(_Fragment, { children: [_jsx(BlockLivePreview, { block: block }), _jsx("button", { type: "button", onClick: onClick, draggable: draggable, onDragStart: handleDragStart, "aria-label": `Select ${label}`, "aria-pressed": selected, className: cn('absolute inset-0 z-10 rounded-md', readOnly && 'cursor-default', draggable && 'cursor-grab active:cursor-grabbing') }), _jsxs("div", { className: cn('pointer-events-none absolute right-1.5 top-1.5 z-20 flex items-center gap-1 transition-opacity', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'), children: [draggable && _jsx(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground/60", "aria-hidden": "true" }), _jsx(Badge, { variant: "outline", className: cn('text-[10px] font-mono shadow-sm bg-background/90 backdrop-blur', tone.badge), children: typeStr })] })] })) }), dropZone === 'after' && (_jsx("div", { className: "absolute left-0 right-0 -bottom-1 h-0.5 bg-primary rounded-full" }))] }));
+}
+/* ─────────────── Nested container children (issue #1499) ─────────────── */
+function NestedChildren({ block, baseId, selectedId, readOnly, onSelectId, onAddNested, }) {
+    const groups = childGroups(block);
+    if (groups.length === 0)
+        return null;
+    // A grid lays its children in N columns at runtime — mirror that here so the
+    // design canvas matches the preview (other containers stack in one column).
+    const gridCols = block?.type === 'grid'
+        ? Math.min(6, Math.max(1, Number(block.properties?.columns) || 1))
+        : 1;
+    const colsClass = GRID_COLS_CLASS[gridCols] ?? 'grid-cols-1';
+    return (_jsx("div", { className: "ml-5 mt-1.5 space-y-2.5 border-l border-dashed border-border pl-3", children: groups.map((g, gi) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70", children: g.label }), g.children.length === 0 ? (_jsx("div", { className: "rounded border border-dashed bg-background/40 py-2 px-3 text-[11px] text-muted-foreground", children: "Empty \u2014 add a block." })) : (_jsx("div", { className: cn('grid gap-2', colsClass), children: g.children.map((child, ci) => {
+                        const cid = `${baseId}.${g.pathSuffix}[${ci}]`;
+                        const typeStr = String(child?.type ?? '');
+                        const childSelected = cid === selectedId;
+                        return (_jsxs("div", { className: cn('group relative rounded-md border bg-card transition-colors hover:border-primary/40', childSelected ? 'border-primary ring-2 ring-primary/30 shadow-sm' : 'border-border'), children: [_jsx(BlockLivePreview, { block: child, maxHeightClass: "max-h-56" }), _jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); onSelectId(cid, blockLabel(child)); }, "aria-label": `Select ${blockLabel(child)}`, "aria-pressed": childSelected, className: "absolute inset-0 z-10 rounded-md cursor-pointer" }), _jsx("div", { className: cn('pointer-events-none absolute right-1.5 top-1.5 z-20 transition-opacity', childSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'), children: _jsx(Badge, { variant: "outline", className: cn('text-[10px] font-mono shadow-sm bg-background/90 backdrop-blur', resolveBlockTone(typeStr).badge), children: typeStr }) })] }, ci));
+                    }) })), !readOnly && _jsx(AddBlockButton, { onPick: (type) => onAddNested(baseId, g.pathSuffix, type) })] }, gi))) }));
+}
+/* ─────────────── Add block picker ─────────────── */
+function AddBlockButton({ onPick }) {
+    const [open, setOpen] = React.useState(false);
+    const [filter, setFilter] = React.useState('');
+    const q = filter.trim().toLowerCase();
+    const groups = React.useMemo(() => {
+        if (!q)
+            return TYPES_BY_CATEGORY;
+        return TYPES_BY_CATEGORY
+            .map((g) => ({
+            category: g.category,
+            types: g.types.filter((id) => {
+                const m = BLOCK_TYPE_META[id];
+                return id.includes(q) || m.label.toLowerCase().includes(q);
+            }),
+        }))
+            .filter((g) => g.types.length > 0);
+    }, [q]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => { setOpen(o); if (!o)
+            setFilter(''); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5 border-dashed", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Add block"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[320px] p-0 max-h-[480px] overflow-hidden flex flex-col", children: [_jsx("div", { className: "p-2 border-b", children: _jsx("input", { autoFocus: true, value: filter, onChange: (e) => setFilter(e.target.value), placeholder: "Search block type\u2026", className: "h-7 w-full px-2 text-sm border rounded bg-background outline-none focus:ring-1 focus:ring-primary" }) }), _jsx("div", { className: "flex-1 overflow-auto p-1", children: groups.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground p-4 text-center", children: "No matching types." })) : (groups.map((g) => (_jsxs("div", { className: "mb-1", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground px-2 py-1", children: CATEGORY_LABEL_EN[g.category] }), g.types.map((id) => {
+                                    const m = BLOCK_TYPE_META[id];
+                                    const Icon = m.Icon;
+                                    const tone = resolveBlockTone(id);
+                                    return (_jsxs("button", { type: "button", onClick: () => { onPick(id); setOpen(false); setFilter(''); }, className: "w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [_jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', tone.icon) }), _jsx("span", { className: "truncate", children: m.label }), _jsx("code", { className: "ml-auto text-[10px] text-muted-foreground/70 font-mono truncate", children: id })] }, id));
+                                })] }, g.category)))) })] })] }));
+}

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

@@ -1,2 +1,11 @@
+/**
+ * PagePreview — renders a Page metadata record using the runtime
+ * SchemaRenderer so authors see exactly what end-users would see.
+ *
+ * Reads the live draft (not the server-saved record) so edits in the
+ * Form tab preview instantly. URL query params are intentionally not
+ * threaded in: previews run in a sandbox with no params context.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function PagePreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function PagePreview({ draft, editing, selection, onSelectionChange, onPatch, locale }: MetadataPreviewProps): React.JSX.Element;