@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,547 @@
+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.
+/**
+ * ObjectFormCanvas — form-designer-style preview for an Object
+ * metadata draft. Replaces the legacy CRUD grid in DesignerMode.
+ *
+ * Each field renders as the labeled input it will become at runtime
+ * (via {@link FieldStub}). Clicking a row selects it and the host
+ * swaps the inspector to {@link ObjectFieldInspector}. The trailing
+ * "+ Add field" button opens a categorized type picker — picking a
+ * type appends a fresh field and immediately selects it so authors
+ * can fill in name/label in the inspector.
+ *
+ * All edits go through the host's `onPatch` callback. Read-only
+ * surfaces (legacy tier objects, builtin objects) still render the
+ * preview but suppress selection chrome + the add button.
+ */
+import * as React from 'react';
+import { Badge, Button, cn, Popover, PopoverContent, PopoverTrigger, } from '@object-ui/components';
+import { GripVertical, Plus, ChevronDown, ChevronRight, Trash2, ArrowUp, ArrowDown, FolderPlus, FolderInput, ChevronsDownUp, ChevronsUpDown, CheckSquare, GitCompareArrows, Sparkles, X, } from 'lucide-react';
+import { requestAssistantOpen } from '../../../assistant/assistantBus';
+import { readFields, writeFields, newField, toFieldName, groupEntries, readGroups, addGroup, renameGroup, removeGroup, moveGroup, clearFieldGroup, diffFields, } from './object-fields-io';
+import { FIELD_TYPE_META, TYPES_BY_CATEGORY, CATEGORY_LABEL_EN, CATEGORY_LABEL_ZH, CATEGORY_TONE, } from './field-types';
+import { FieldStub } from './FieldStub';
+import { t, tFormat } from '../i18n';
+/* ─── locale helpers ─── */
+const isZh = (locale) => (locale ?? '').toLowerCase().startsWith('zh');
+/** Field-type display label in the active locale (data carries both). */
+const typeLabel = (meta, locale) => meta ? (isZh(locale) ? meta.labelZh : meta.label) : undefined;
+const categoryLabel = (cat, locale) => (isZh(locale) ? CATEGORY_LABEL_ZH : CATEGORY_LABEL_EN)[cat];
+export function ObjectFormCanvas({ objectName, draft, baseline, onPatch, selection, onSelectionChange, locale, }) {
+    const readOnly = !onPatch;
+    const view = React.useMemo(() => readFields(draft.fields), [draft]);
+    /* ─── Review/diff mode — draft vs last published ─── */
+    const diff = React.useMemo(() => (baseline ? diffFields(baseline.fields, draft.fields) : null), [baseline, draft]);
+    const changeCount = diff
+        ? diff.counts.added + diff.counts.changed + diff.counts.removed
+        : 0;
+    const [reviewMode, setReviewMode] = React.useState(false);
+    // Auto-exit review when nothing differs anymore (e.g. user reverted edits).
+    React.useEffect(() => {
+        if (reviewMode && changeCount === 0)
+            setReviewMode(false);
+    }, [reviewMode, changeCount]);
+    const reviewing = reviewMode && changeCount > 0;
+    const statusOf = (name) => reviewing ? diff?.byName[name]?.status : undefined;
+    const changedKeysOf = (name) => reviewing ? diff?.byName[name]?.changedKeys ?? [] : [];
+    const declaredGroups = React.useMemo(() => readGroups(draft.fieldGroups), [draft]);
+    const hasGroups = declaredGroups.length > 0;
+    // While editing, keep empty declared sections visible as drop targets.
+    const groups = React.useMemo(() => groupEntries(view, declaredGroups, { includeEmptyDeclared: !readOnly }), [view, declaredGroups, readOnly]);
+    // Collapse state is local UI — keyed by group key (null bucket → "").
+    const [collapsed, setCollapsed] = React.useState({});
+    const collapseKey = (key) => key ?? '__ungrouped__';
+    const toggleCollapse = React.useCallback((key) => {
+        const k = key ?? '__ungrouped__';
+        setCollapsed((prev) => ({ ...prev, [k]: !prev[k] }));
+    }, []);
+    const allCollapsed = groups.length > 0 && groups.every((g) => collapsed[collapseKey(g.key)]);
+    const setAllCollapsed = React.useCallback((value) => {
+        setCollapsed(() => {
+            const next = {};
+            for (const g of groups)
+                next[collapseKey(g.key)] = value;
+            return next;
+        });
+    }, [groups]);
+    const selectedName = selection?.kind === 'field' ? String(selection.id) : null;
+    const requiredCount = view.entries.filter((e) => !!e.def.required).length;
+    const selectField = React.useCallback((entry) => {
+        if (!onSelectionChange)
+            return;
+        onSelectionChange({
+            kind: 'field',
+            id: entry.name,
+            label: typeof entry.def.label === 'string' ? entry.def.label : entry.name,
+        });
+    }, [onSelectionChange]);
+    /* ─── Multi-select (bulk ops) — canvas-local; no host coupling ─── */
+    const [multiSel, setMultiSel] = React.useState(() => new Set());
+    const anchorRef = React.useRef(null);
+    // Flat rendered order, for Shift-range selection.
+    const flatNames = React.useMemo(() => groups.flatMap((g) => g.entries.map((e) => e.name)), [groups]);
+    // Drop names that no longer exist (e.g. after a bulk delete elsewhere).
+    React.useEffect(() => {
+        setMultiSel((prev) => {
+            if (prev.size === 0)
+                return prev;
+            const live = new Set([...prev].filter((n) => view.entries.some((e) => e.name === n)));
+            return live.size === prev.size ? prev : live;
+        });
+    }, [view]);
+    const handleRowClick = React.useCallback((entry, e) => {
+        const name = entry.name;
+        if (!readOnly && e && (e.metaKey || e.ctrlKey)) {
+            setMultiSel((prev) => {
+                const next = new Set(prev);
+                if (next.has(name))
+                    next.delete(name);
+                else
+                    next.add(name);
+                return next;
+            });
+            anchorRef.current = name;
+            return;
+        }
+        if (!readOnly && e && e.shiftKey && anchorRef.current && anchorRef.current !== name) {
+            const a = flatNames.indexOf(anchorRef.current);
+            const b = flatNames.indexOf(name);
+            if (a >= 0 && b >= 0) {
+                const [lo, hi] = a < b ? [a, b] : [b, a];
+                setMultiSel(new Set(flatNames.slice(lo, hi + 1)));
+                return;
+            }
+        }
+        // Plain click — clear multi-selection, single-select.
+        if (multiSel.size)
+            setMultiSel(new Set());
+        anchorRef.current = name;
+        selectField(entry);
+    }, [readOnly, flatNames, multiSel, selectField]);
+    const clearMulti = React.useCallback(() => setMultiSel(new Set()), []);
+    const bulkDelete = React.useCallback(() => {
+        if (!onPatch || multiSel.size === 0)
+            return;
+        const entries = view.entries.filter((e) => !multiSel.has(e.name));
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+        if (selectedName && multiSel.has(selectedName))
+            onSelectionChange?.(null);
+        setMultiSel(new Set());
+    }, [onPatch, multiSel, view, selectedName, onSelectionChange]);
+    const bulkSetGroup = React.useCallback((groupKey) => {
+        if (!onPatch || multiSel.size === 0)
+            return;
+        const entries = view.entries.map((e) => multiSel.has(e.name)
+            ? { name: e.name, def: { ...e.def, group: groupKey ?? undefined } }
+            : e);
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+    }, [onPatch, multiSel, view]);
+    const addField = React.useCallback((type, groupKey) => {
+        if (!onPatch)
+            return;
+        const existing = view.entries.map((e) => e.name);
+        const base = type === 'select' ? 'status' : type;
+        let i = 1;
+        let name = base;
+        while (existing.includes(name)) {
+            i += 1;
+            name = `${base}_${i}`;
+        }
+        const entry = newField(name, type);
+        if (groupKey)
+            entry.def = { ...entry.def, group: groupKey };
+        // Insert at the end of the target group's run so it lands in-section,
+        // otherwise append to the very end (ungrouped / no groups).
+        let insertAt = view.entries.length;
+        if (groupKey) {
+            for (let j = view.entries.length - 1; j >= 0; j -= 1) {
+                if (view.entries[j].def.group === groupKey) {
+                    insertAt = j + 1;
+                    break;
+                }
+            }
+        }
+        const entries = view.entries.slice();
+        entries.splice(insertAt, 0, entry);
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+        onSelectionChange?.({
+            kind: 'field',
+            id: name,
+            label: String(entry.def.label ?? name),
+        });
+    }, [onPatch, onSelectionChange, view]);
+    /* ─── Section (field group) operations ─── */
+    const addSection = React.useCallback(() => {
+        if (!onPatch)
+            return;
+        const label = tFormat('designer.canvas.sectionN', locale, {
+            n: declaredGroups.length + 1,
+        });
+        const next = addGroup(declaredGroups, label);
+        const created = next[next.length - 1];
+        onPatch({ fieldGroups: next });
+        // Reveal the new (empty) section if everything was collapsed.
+        setCollapsed((prev) => ({ ...prev, [created.key]: false }));
+    }, [onPatch, declaredGroups, locale]);
+    const renameSection = React.useCallback((key, label) => {
+        if (!onPatch)
+            return;
+        onPatch({ fieldGroups: renameGroup(declaredGroups, key, label) });
+    }, [onPatch, declaredGroups]);
+    const removeSection = React.useCallback((key) => {
+        if (!onPatch)
+            return;
+        // Drop the declaration AND clear `group` from its members so they
+        // fall back to the Ungrouped bucket rather than vanishing.
+        const clearedView = clearFieldGroup(view, key);
+        onPatch({
+            fieldGroups: removeGroup(declaredGroups, key),
+            fields: writeFields(clearedView),
+        });
+    }, [onPatch, declaredGroups, view]);
+    const moveSection = React.useCallback((key, dir) => {
+        if (!onPatch)
+            return;
+        onPatch({ fieldGroups: moveGroup(declaredGroups, key, dir) });
+    }, [onPatch, declaredGroups]);
+    // Reorder fields by moving `fromName` to the position of `toName`.
+    // Uses native HTML5 DnD — no library, no animations, just a working
+    // reorder for the most common designer interaction.
+    // If `toName`'s field is in a different group than the dragged field,
+    // adopt that group so cross-group drops are intuitive.
+    const reorderField = React.useCallback((fromName, toName, position) => {
+        if (!onPatch)
+            return;
+        if (fromName === toName)
+            return;
+        const entries = view.entries.slice();
+        const fromIdx = entries.findIndex((e) => e.name === fromName);
+        if (fromIdx < 0)
+            return;
+        const [moved] = entries.splice(fromIdx, 1);
+        const toIdx = entries.findIndex((e) => e.name === toName);
+        const targetEntry = toIdx >= 0 ? entries[toIdx] : undefined;
+        if (targetEntry) {
+            const targetGroup = typeof targetEntry.def.group === 'string' ? targetEntry.def.group : undefined;
+            const fromGroup = typeof moved.def.group === 'string' ? moved.def.group : undefined;
+            if (targetGroup !== fromGroup) {
+                moved.def = { ...moved.def, group: targetGroup };
+            }
+        }
+        if (toIdx < 0) {
+            entries.push(moved);
+        }
+        else {
+            entries.splice(position === 'before' ? toIdx : toIdx + 1, 0, moved);
+        }
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+    }, [onPatch, view]);
+    // Keyboard reorder (Alt+↑/↓): swap a field with its nearest neighbour
+    // in the SAME group so a focused row moves predictably within its
+    // section without ever changing groups.
+    const moveFieldByOffset = React.useCallback((name, dir) => {
+        if (!onPatch)
+            return;
+        const entries = view.entries.slice();
+        const idx = entries.findIndex((e) => e.name === name);
+        if (idx < 0)
+            return;
+        const grp = typeof entries[idx].def.group === 'string' ? entries[idx].def.group : null;
+        let j = idx + dir;
+        while (j >= 0 && j < entries.length) {
+            const g = typeof entries[j].def.group === 'string' ? entries[j].def.group : null;
+            if (g === grp)
+                break;
+            j += dir;
+        }
+        if (j < 0 || j >= entries.length)
+            return;
+        const tmp = entries[idx];
+        entries[idx] = entries[j];
+        entries[j] = tmp;
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+    }, [onPatch, view]);
+    // Drop a field into a group section's empty space (or onto its header).
+    // Reassigns Field.group and moves the entry to the end of that group's
+    // run in the source order so it visually lands where it was dropped.
+    const moveToGroup = React.useCallback((fromName, groupKey) => {
+        if (!onPatch)
+            return;
+        const entries = view.entries.slice();
+        const fromIdx = entries.findIndex((e) => e.name === fromName);
+        if (fromIdx < 0)
+            return;
+        const [moved] = entries.splice(fromIdx, 1);
+        const currentGroup = typeof moved.def.group === 'string' ? moved.def.group : null;
+        if (currentGroup === groupKey) {
+            // No group change — re-insert at original position (effectively no-op).
+            entries.splice(fromIdx, 0, moved);
+            return;
+        }
+        moved.def = { ...moved.def, group: groupKey ?? undefined };
+        // Find end of target group's run; if no members, append at end.
+        let insertAt = entries.length;
+        for (let i = entries.length - 1; i >= 0; i -= 1) {
+            const g = typeof entries[i].def.group === 'string' ? entries[i].def.group : null;
+            if (g === groupKey) {
+                insertAt = i + 1;
+                break;
+            }
+        }
+        entries.splice(insertAt, 0, moved);
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+    }, [onPatch, view]);
+    // Inline label rename — used by double-click on the field card label.
+    const renameLabel = React.useCallback((name, nextLabel) => {
+        if (!onPatch)
+            return;
+        const entries = view.entries.map((e) => e.name === name
+            ? { name, def: { ...e.def, label: nextLabel || undefined } }
+            : e);
+        onPatch({ fields: writeFields({ shape: view.shape, entries }) });
+    }, [onPatch, view]);
+    // Click anywhere on the empty canvas background to clear selection.
+    const handleBgClick = React.useCallback((e) => {
+        if (e.target === e.currentTarget && selectedName) {
+            onSelectionChange?.(null);
+        }
+    }, [onSelectionChange, selectedName]);
+    const emptyState = view.entries.length === 0;
+    // Section chrome (headers, collapse, drop-to-assign) only appears once
+    // groups exist — otherwise the canvas stays a flat field list.
+    const showSectionChrome = hasGroups || groups.length > 1;
+    return (_jsxs("div", { className: "h-full overflow-auto bg-muted/20", onClick: handleBgClick, "data-object-name": objectName, children: [!readOnly && multiSel.size > 0 && (_jsx(BulkActionBar, { count: multiSel.size, groups: declaredGroups, onMoveToGroup: bulkSetGroup, onDelete: bulkDelete, onClear: clearMulti, locale: locale })), _jsxs("div", { className: "mx-auto max-w-3xl px-6 py-6 space-y-4", onClick: handleBgClick, children: [!emptyState && (_jsx(CanvasToolbar, { fieldCount: view.entries.length, requiredCount: requiredCount, sectionCount: declaredGroups.length, allCollapsed: allCollapsed, onToggleAll: showSectionChrome ? () => setAllCollapsed(!allCollapsed) : undefined, reviewAvailable: changeCount > 0, reviewing: reviewing, diffCounts: diff?.counts, onToggleReview: () => setReviewMode((v) => !v), locale: locale })), emptyState ? (_jsx(EmptyCanvas, { onAdd: readOnly ? undefined : addField, locale: locale })) : (_jsx("div", { className: "space-y-5", children: groups.map((g) => {
+                            const declaredIdx = g.key
+                                ? declaredGroups.findIndex((d) => d.key === g.key)
+                                : -1;
+                            return (_jsxs(GroupSection, { groupKey: g.key, label: g.key === null ? t('designer.canvas.ungrouped', locale) : g.label, count: g.entries.length, showHeader: showSectionChrome, collapsed: !!collapsed[collapseKey(g.key)], onToggleCollapse: () => toggleCollapse(g.key), readOnly: readOnly, locale: locale, canMoveUp: declaredIdx > 0, canMoveDown: declaredIdx >= 0 && declaredIdx < declaredGroups.length - 1, onRename: g.key ? (label) => renameSection(g.key, label) : undefined, onRemove: g.key ? () => removeSection(g.key) : undefined, onMove: g.key ? (dir) => moveSection(g.key, dir) : undefined, onAddField: readOnly ? undefined : (type) => addField(type, g.key), onDropField: readOnly ? undefined : moveToGroup, children: [g.entries.map((entry) => (_jsx(FieldRow, { entry: entry, selected: entry.name === selectedName, multiSelected: multiSel.has(entry.name), diffStatus: statusOf(entry.name), changedKeys: changedKeysOf(entry.name), readOnly: readOnly, locale: locale, onClick: (e) => handleRowClick(entry, e), onReorder: readOnly ? undefined : reorderField, onRenameLabel: readOnly ? undefined : renameLabel, onMoveOffset: readOnly ? undefined : (dir) => moveFieldByOffset(entry.name, dir) }, entry.name))), g.entries.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed bg-background/40 px-3 py-4 text-center text-[11px] text-muted-foreground", children: readOnly
+                                            ? t('designer.canvas.emptySection', locale)
+                                            : t('designer.canvas.dropHint', locale) }))] }, g.key ?? '__ungrouped__'));
+                        }) })), reviewing && diff && diff.removed.length > 0 && (_jsxs("div", { className: "space-y-2.5", children: [_jsx("div", { className: "text-[11px] font-medium uppercase tracking-wider text-destructive/80 pl-1", children: t('designer.canvas.diffRemoved', locale) }), diff.removed.map((entry) => (_jsx(GhostFieldRow, { entry: entry, locale: locale }, entry.name)))] })), !emptyState && !readOnly && (_jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(AddFieldButton, { onPick: (type) => addField(type), locale: locale }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-muted-foreground hover:text-foreground", onClick: addSection, children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5" }), t('designer.canvas.addSection', locale)] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 ml-auto text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAi', locale)] })] }))] })] }));
+}
+/* ─────────────── Review toolbar ─────────────── */
+function CanvasToolbar({ fieldCount, requiredCount, sectionCount, allCollapsed, onToggleAll, reviewAvailable, reviewing, diffCounts, onToggleReview, locale, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 text-[11px] text-muted-foreground", children: [_jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: reviewing && diffCounts ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-emerald-600 dark:text-emerald-400", children: diffCounts.added }), ' ', t('designer.canvas.diffAdded', locale), _jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { className: "font-medium text-amber-600 dark:text-amber-400", children: diffCounts.changed }), ' ', t('designer.canvas.diffChanged', locale), _jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { className: "font-medium text-destructive", children: diffCounts.removed }), ' ', t('designer.canvas.diffRemoved', locale), _jsx("span", { className: "text-muted-foreground/40 normal-case ml-1", children: t('designer.canvas.reviewVsPublished', locale) })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-foreground/80", children: fieldCount }), ' ', t('designer.canvas.fields', locale), _jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { className: "font-medium text-foreground/80", children: requiredCount }), ' ', t('designer.canvas.required', locale), sectionCount > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50", children: "\u00B7" }), _jsx("span", { className: "font-medium text-foreground/80", children: sectionCount }), ' ', t('designer.canvas.sections', locale)] }))] })) }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [reviewAvailable && onToggleReview && (_jsxs("button", { type: "button", onClick: onToggleReview, className: cn('inline-flex items-center gap-1 rounded px-1.5 py-0.5 transition-colors', reviewing
+                            ? 'bg-primary/10 text-primary hover:bg-primary/15'
+                            : 'hover:bg-accent hover:text-foreground'), children: [_jsx(GitCompareArrows, { className: "h-3 w-3" }), reviewing
+                                ? t('designer.canvas.reviewExit', locale)
+                                : t('designer.canvas.reviewChanges', locale)] })), onToggleAll && (_jsxs("button", { type: "button", onClick: onToggleAll, className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-foreground transition-colors", children: [allCollapsed ? (_jsx(ChevronsUpDown, { className: "h-3 w-3" })) : (_jsx(ChevronsDownUp, { className: "h-3 w-3" })), allCollapsed
+                                ? t('designer.canvas.expandAll', locale)
+                                : t('designer.canvas.collapseAll', locale)] }))] })] }));
+}
+/* ─────────────── Bulk-action bar ─────────────── */
+function BulkActionBar({ count, groups, onMoveToGroup, onDelete, onClear, locale, }) {
+    const [open, setOpen] = React.useState(false);
+    return (_jsxs("div", { className: "sticky top-0 z-20 flex items-center gap-2 border-b border-primary/20 bg-primary/10 backdrop-blur px-6 py-2 text-sm", children: [_jsx("span", { className: "font-medium text-foreground", children: tFormat('designer.canvas.bulkSelected', locale, { n: count }) }), _jsx("span", { className: "text-muted-foreground text-[11px] hidden md:inline", children: t('designer.canvas.bulkHint', locale) }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [groups.length > 0 && (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1.5 bg-background/70", children: [_jsx(FolderInput, { className: "h-3.5 w-3.5" }), t('designer.canvas.bulkMoveTo', locale), _jsx(ChevronDown, { className: "h-3 w-3" })] }) }), _jsxs(PopoverContent, { align: "end", className: "w-52 p-1 max-h-[300px] overflow-auto", children: [_jsx("button", { type: "button", onClick: () => { onMoveToGroup(null); setOpen(false); }, className: "w-full text-left px-2 py-1.5 rounded text-sm hover:bg-accent", children: t('designer.canvas.ungrouped', locale) }), groups.map((g) => (_jsx("button", { type: "button", onClick: () => { onMoveToGroup(g.key); setOpen(false); }, className: "w-full text-left px-2 py-1.5 rounded text-sm hover:bg-accent truncate", children: g.label || g.key }, g.key)))] })] })), _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1.5 bg-background/70 text-destructive hover:text-destructive", onClick: onDelete, children: [_jsx(Trash2, { className: "h-3.5 w-3.5" }), t('designer.canvas.bulkDelete', locale)] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1.5", onClick: onClear, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('designer.canvas.bulkClear', locale)] })] })] }));
+}
+/* ─────────────── Building blocks ─────────────── */
+function GroupSection({ groupKey, label, count, showHeader, collapsed, onToggleCollapse, readOnly, locale, canMoveUp, canMoveDown, onRename, onRemove, onMove, onAddField, onDropField, children, }) {
+    const [active, setActive] = React.useState(false);
+    const handleDragOver = (e) => {
+        if (!onDropField)
+            return;
+        const types = e.dataTransfer.types;
+        if (!types || !Array.from(types).includes('text/x-objectui-field'))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setActive(true);
+    };
+    const handleDragLeave = (e) => {
+        // Only deactivate when leaving the section container itself, not its children.
+        if (e.currentTarget === e.target)
+            setActive(false);
+    };
+    const handleDrop = (e) => {
+        if (!onDropField)
+            return;
+        // Let inner FieldRow drops win — only handle if no row already consumed it.
+        if (e.defaultPrevented) {
+            setActive(false);
+            return;
+        }
+        e.preventDefault();
+        const from = e.dataTransfer.getData('text/x-objectui-field');
+        setActive(false);
+        if (from)
+            onDropField(from, groupKey);
+    };
+    return (_jsxs("section", { className: cn('space-y-2.5 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: [showHeader && (_jsx(SectionHeader, { label: label, count: count, collapsed: collapsed, onToggleCollapse: onToggleCollapse, readOnly: readOnly, locale: locale, canMoveUp: canMoveUp, canMoveDown: canMoveDown, dropActive: active, onRename: onRename, onRemove: onRemove, onMove: onMove, onAddField: onAddField })), !collapsed && _jsx("div", { className: "space-y-2.5", children: children })] }));
+}
+function SectionHeader({ label, count, collapsed, onToggleCollapse, readOnly, locale, canMoveUp, canMoveDown, dropActive, onRename, onRemove, onMove, onAddField, }) {
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(label);
+    React.useEffect(() => { setDraft(label); }, [label]);
+    const commit = () => {
+        if (!onRename) {
+            setEditing(false);
+            return;
+        }
+        const next = draft.trim();
+        if (next && next !== label)
+            onRename(next);
+        setEditing(false);
+    };
+    const Chevron = collapsed ? ChevronRight : ChevronDown;
+    return (_jsxs("div", { className: "group/sec flex items-center gap-1.5 pl-0.5 min-h-[24px]", children: [_jsx("button", { type: "button", onClick: onToggleCollapse, className: "flex items-center justify-center h-5 w-5 rounded text-muted-foreground hover:bg-accent hover:text-foreground transition-colors shrink-0", "aria-label": collapsed
+                    ? t('designer.canvas.expandSection', locale)
+                    : t('designer.canvas.collapseSection', locale), "aria-expanded": !collapsed, children: _jsx(Chevron, { className: "h-3.5 w-3.5" }) }), editing ? (_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();
+                        commit();
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        setDraft(label);
+                        setEditing(false);
+                    }
+                }, onBlur: commit, className: "text-[11px] font-medium uppercase tracking-wider px-1 py-0.5 -my-0.5 rounded border border-primary bg-background outline-none min-w-0 flex-1 max-w-[220px]" })) : (_jsx("span", { className: cn('text-[11px] font-medium uppercase tracking-wider text-muted-foreground truncate', onRename && 'cursor-text hover:text-foreground'), onDoubleClick: onRename ? () => { setDraft(label); setEditing(true); } : undefined, title: onRename ? t('designer.canvas.renameHint', locale) : undefined, children: label })), _jsx("span", { className: "text-[10px] text-muted-foreground/60 tabular-nums shrink-0", children: count }), dropActive && (_jsx("span", { className: "text-primary normal-case text-[10px] font-normal", children: t('designer.canvas.dropToAssign', locale) })), !readOnly && (onMove || onRemove || onAddField) && (_jsxs("div", { className: "ml-auto flex items-center gap-0.5 opacity-0 group-hover/sec:opacity-100 focus-within:opacity-100 transition-opacity", children: [onAddField && (_jsx(AddFieldButton, { onPick: onAddField, compact: true, locale: locale })), onMove && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onMove(-1), disabled: !canMoveUp, className: "h-5 w-5 flex items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30 disabled:pointer-events-none", "aria-label": t('designer.canvas.moveSectionUp', locale), children: _jsx(ArrowUp, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", onClick: () => onMove(1), disabled: !canMoveDown, className: "h-5 w-5 flex items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30 disabled:pointer-events-none", "aria-label": t('designer.canvas.moveSectionDown', locale), children: _jsx(ArrowDown, { className: "h-3 w-3" }) })] })), onRemove && (_jsx("button", { type: "button", onClick: onRemove, className: "h-5 w-5 flex items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", "aria-label": t('designer.canvas.removeSection', locale), title: t('designer.canvas.removeSectionHint', locale), children: _jsx(Trash2, { className: "h-3 w-3" }) }))] }))] }));
+}
+/** Read-only ghost of a field that exists in the baseline but was removed. */
+function GhostFieldRow({ entry, locale }) {
+    const def = entry.def;
+    const typeStr = typeof def.type === 'string' ? def.type : 'text';
+    const meta = FIELD_TYPE_META[typeStr];
+    const Icon = meta?.Icon;
+    const label = typeof def.label === 'string' ? def.label : entry.name;
+    return (_jsx("div", { className: "rounded-md border border-dashed border-destructive/30 bg-destructive/[0.03] px-3.5 py-2.5 opacity-80", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [Icon && _jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/50" }), _jsx("span", { className: "text-sm font-medium truncate line-through text-muted-foreground", children: label }), _jsx("code", { className: "text-[10px] text-muted-foreground/60 font-mono truncate line-through", children: entry.name })] }), _jsx(Badge, { className: "text-[10px] font-medium border-transparent bg-destructive/15 text-destructive shrink-0", children: t('designer.canvas.diffRemoved', locale) })] }) }));
+}
+function FieldRow({ entry, selected, multiSelected, diffStatus, changedKeys, readOnly, locale, onClick, onReorder, onRenameLabel, onMoveOffset, }) {
+    const def = entry.def;
+    const typeStr = typeof def.type === 'string' ? def.type : 'text';
+    const meta = FIELD_TYPE_META[typeStr];
+    const Icon = meta?.Icon;
+    const tone = CATEGORY_TONE[meta?.category ?? 'advanced'];
+    const label = typeof def.label === 'string' ? def.label : entry.name;
+    const required = !!def.required;
+    const description = typeof def.description === 'string' ? def.description : null;
+    const options = Array.isArray(def.options)
+        ? def.options.map((o) => ({
+            value: String(o.value ?? ''),
+            label: typeof o.label === 'string' ? o.label : undefined,
+        }))
+        : undefined;
+    const referenceTo = typeof def.reference === 'string' ? def.reference : undefined;
+    const formula = typeof def.formula === 'string' ? def.formula : undefined;
+    const placeholder = typeof def.placeholder === 'string' ? def.placeholder : undefined;
+    const [dropZone, setDropZone] = React.useState(null);
+    const draggable = !!onReorder;
+    const [editingLabel, setEditingLabel] = React.useState(false);
+    const [labelDraft, setLabelDraft] = React.useState(label);
+    React.useEffect(() => { setLabelDraft(label); }, [label]);
+    const beginEdit = (e) => {
+        if (!onRenameLabel)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setLabelDraft(label);
+        setEditingLabel(true);
+    };
+    const commitEdit = () => {
+        if (!onRenameLabel) {
+            setEditingLabel(false);
+            return;
+        }
+        const next = labelDraft.trim();
+        if (next && next !== label)
+            onRenameLabel(entry.name, next);
+        setEditingLabel(false);
+    };
+    const cancelEdit = () => {
+        setLabelDraft(label);
+        setEditingLabel(false);
+    };
+    const handleDragStart = (e) => {
+        e.dataTransfer.setData('text/x-objectui-field', entry.name);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragOver = (e) => {
+        if (!draggable)
+            return;
+        const types = e.dataTransfer.types;
+        if (!types || !Array.from(types).includes('text/x-objectui-field'))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        const rect = e.currentTarget.getBoundingClientRect();
+        const pos = e.clientY - rect.top < rect.height / 2 ? 'before' : 'after';
+        setDropZone(pos);
+    };
+    const handleDragLeave = () => setDropZone(null);
+    const handleDrop = (e) => {
+        if (!onReorder)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const from = e.dataTransfer.getData('text/x-objectui-field');
+        setDropZone(null);
+        if (from && from !== entry.name) {
+            onReorder(from, entry.name, dropZone ?? 'before');
+        }
+    };
+    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" })), _jsxs("div", { role: "button", tabIndex: readOnly ? -1 : 0, onClick: onClick, onKeyDown: (e) => {
+                    if (e.target !== e.currentTarget)
+                        return;
+                    if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+                        if (onMoveOffset) {
+                            e.preventDefault();
+                            onMoveOffset(e.key === 'ArrowUp' ? -1 : 1);
+                        }
+                        return;
+                    }
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onClick?.();
+                    }
+                }, draggable: draggable, onDragStart: handleDragStart, className: cn('group block w-full text-left rounded-md border bg-card px-3.5 py-2.5 transition-colors', 'hover:border-primary/40 hover:bg-card outline-none focus-visible:ring-2 focus-visible:ring-primary/40', selected ? 'border-primary ring-2 ring-primary/30 shadow-sm' : 'border-border', multiSelected && 'border-primary/60 ring-2 ring-primary/40 bg-primary/[0.04]', diffStatus === 'added' && 'border-l-[3px] border-l-emerald-500', diffStatus === 'changed' && 'border-l-[3px] border-l-amber-500', readOnly && 'cursor-default', draggable && 'cursor-grab active:cursor-grabbing'), "aria-pressed": selected || multiSelected, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [multiSelected && (_jsx(CheckSquare, { className: "h-3.5 w-3.5 text-primary shrink-0", "aria-hidden": "true" })), draggable && !multiSelected && (_jsx(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground/40 shrink-0 group-hover:text-muted-foreground/80", "aria-hidden": "true" })), Icon && _jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', tone.icon) }), editingLabel ? (_jsx("input", { autoFocus: true, value: labelDraft, onChange: (e) => setLabelDraft(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', onRenameLabel && 'cursor-text'), onDoubleClick: beginEdit, title: onRenameLabel ? t('designer.canvas.renameHint', locale) : undefined, children: label })), required && _jsx("span", { className: "text-destructive text-sm", children: "*" }), _jsx("code", { className: "text-[10px] text-muted-foreground/70 font-mono truncate", children: entry.name })] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [diffStatus === 'added' && (_jsx(Badge, { className: "text-[10px] font-medium border-transparent bg-emerald-500/15 text-emerald-700 dark:text-emerald-300", children: t('designer.canvas.diffAdded', locale) })), diffStatus === 'changed' && (_jsx(Badge, { className: "text-[10px] font-medium border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-300", title: changedKeys && changedKeys.length
+                                            ? tFormat('designer.canvas.diffChangedKeys', locale, { keys: changedKeys.join(', ') })
+                                            : undefined, children: t('designer.canvas.diffChanged', locale) })), _jsx(Badge, { variant: "outline", className: cn('text-[10px] font-medium', tone.badge), children: typeLabel(meta, locale) ?? typeStr })] })] }), description && (_jsx("div", { className: "text-[11px] text-muted-foreground mb-1.5 line-clamp-1", children: description })), _jsx(FieldStub, { type: typeStr, label: label, placeholder: placeholder, options: options, referenceTo: referenceTo, formula: formula, locale: locale })] }), dropZone === 'after' && (_jsx("div", { className: "absolute left-0 right-0 -bottom-1 h-0.5 bg-primary rounded-full" }))] }));
+}
+function EmptyCanvas({ onAdd, locale }) {
+    return (_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: t('designer.canvas.noFields', locale) }), _jsx("div", { className: "text-xs text-muted-foreground", children: t('designer.canvas.noFieldsHint', locale) }), onAdd && (_jsxs("div", { className: "pt-2 flex items-center justify-center gap-2", children: [_jsx(AddFieldButton, { onPick: onAdd, locale: locale }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAiGenerate', locale)] })] }))] }));
+}
+function AddFieldButton({ onPick, compact, locale }) {
+    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 = FIELD_TYPE_META[id];
+                return id.includes(q) || m.label.toLowerCase().includes(q) || m.labelZh.includes(filter.trim());
+            }),
+        }))
+            .filter((g) => g.types.length > 0);
+    }, [q, filter]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => {
+            setOpen(o);
+            if (!o)
+                setFilter('');
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: compact ? (_jsx("button", { type: "button", className: "h-5 w-5 flex items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": t('designer.canvas.addFieldToSection', locale), title: t('designer.canvas.addFieldToSection', locale), children: _jsx(Plus, { className: "h-3 w-3" }) })) : (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5 border-dashed", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), t('designer.canvas.addField', locale)] })) }), _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: t('designer.canvas.searchFieldType', locale), 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: t('designer.canvas.noMatchingTypes', locale) })) : (groups.map((g) => (_jsxs("div", { className: "mb-1", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground px-2 pt-2 pb-1", children: categoryLabel(g.category, locale) }), _jsx("div", { className: "grid grid-cols-2 gap-0.5", children: g.types.map((id) => {
+                                        const m = FIELD_TYPE_META[id];
+                                        const Icon = m.Icon;
+                                        return (_jsxs("button", { type: "button", onClick: () => {
+                                                onPick(id);
+                                                setOpen(false);
+                                                setFilter('');
+                                            }, className: "flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-accent", children: [_jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', CATEGORY_TONE[m.category].icon) }), _jsx("span", { className: "truncate", children: typeLabel(m, locale) })] }, id));
+                                    }) })] }, g.category)))) })] })] }));
+}
+// Internal helper for callers that want to normalize a name in their own UI.
+export { toFieldName };

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

@@ -1,2 +1,15 @@
+/**
+ * ObjectPreview — form-designer canvas for an Object metadata draft.
+ *
+ * Each field renders as the labeled input control it will become at
+ * runtime. Clicking a field selects it and the host swaps the right
+ * panel to {@link ObjectFieldInspector}. Trailing "+ Add field"
+ * button opens a categorized type picker.
+ *
+ * Read/write of `draft.fields` is non-destructive: the original shape
+ * (array vs record) and any unknown properties on each field are
+ * preserved via `object-fields-io`.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function ObjectPreview({ name, draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ObjectPreview({ name, draft, baseline, onPatch, selection, onSelectionChange, locale, }: MetadataPreviewProps): React.JSX.Element;

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

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