@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FieldsListEditor — the right-panel column manager (mainstream low-code
+ * pattern: a vertical, drag-reorderable list of fields with an inline
+ * "+ Add field" picker).
+ *
+ * This is the SINGLE owner of column read / write / reorder / remove / select
+ * logic for a View variant. It is rendered in two places so the fields list is
+ * always visible:
+ *   • {@link ViewVariantInspector} (the home / variant panel) — no row is
+ *     highlighted; clicking a row drills into the scoped column inspector.
+ *   • {@link ViewColumnInspector} (the scoped column panel) — the selected row
+ *     is highlighted and the column's detail props render below it.
+ *
+ * Columns round-trip in their original shape: string variants (e.g. kanban
+ * card fields) stay strings; object variants keep `{ field, label, … }`. The
+ * raw `columns` array is reordered / spliced directly — never normalised — so
+ * round-trips stay lossless.
+ */
+import * as React from 'react';
+import { Badge, Label } from '@object-ui/components';
+import { appendArray, moveArray, spliceArray } from '../inspectors/_shared';
+import { useObjectFields } from './useObjectFields';
+import { AddFieldPopover, FieldListRow } from './ViewColumnPanes';
+import { colFieldName, colLabel, makeColumn, remapIndexAfterMove, remapIndexAfterRemove, usedFieldNames, } from './view-column-io';
+export function FieldsListEditor({ variantKey, schema, columns, allStrings, objectName, objectFieldsOverride, selectedIndex, readOnly, onPatch, onSelectionChange, }) {
+    const canEdit = !readOnly;
+    const { fields, loading, error } = useObjectFields(objectName || undefined, objectFieldsOverride);
+    const fieldTypeByName = React.useMemo(() => {
+        const m = new Map();
+        for (const f of fields)
+            m.set(f.name, f.type);
+        return m;
+    }, [fields]);
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [overIndex, setOverIndex] = React.useState(null);
+    const writeColumns = React.useCallback((next) => {
+        onPatch({ [variantKey]: { ...schema, columns: next } });
+    }, [onPatch, variantKey, schema]);
+    const addField = React.useCallback((field) => {
+        const col = makeColumn(allStrings, field.name, field.label);
+        const next = appendArray(columns, col);
+        writeColumns(next);
+        onSelectionChange?.({
+            kind: 'column',
+            id: `${variantKey}.columns[${next.length - 1}]`,
+            label: field.label,
+        });
+    }, [allStrings, columns, writeColumns, variantKey, onSelectionChange]);
+    const removeColumn = React.useCallback((index) => {
+        const next = spliceArray(columns, index, null);
+        writeColumns(next);
+        if (selectedIndex != null) {
+            const remapped = remapIndexAfterRemove(selectedIndex, index);
+            if (remapped == null)
+                onSelectionChange?.(null);
+            else
+                onSelectionChange?.({
+                    kind: 'column',
+                    id: `${variantKey}.columns[${remapped}]`,
+                    label: colLabel(next[remapped], remapped),
+                });
+        }
+    }, [columns, writeColumns, selectedIndex, variantKey, onSelectionChange]);
+    const moveColumn = React.useCallback((from, to) => {
+        if (from === to)
+            return;
+        const next = moveArray(columns, from, to);
+        writeColumns(next);
+        if (selectedIndex != null) {
+            const remapped = remapIndexAfterMove(selectedIndex, from, to);
+            onSelectionChange?.({
+                kind: 'column',
+                id: `${variantKey}.columns[${remapped}]`,
+                label: colLabel(next[remapped], remapped),
+            });
+        }
+    }, [columns, writeColumns, selectedIndex, variantKey, onSelectionChange]);
+    const selectColumn = React.useCallback((index) => {
+        onSelectionChange?.({
+            kind: 'column',
+            id: `${variantKey}.columns[${index}]`,
+            label: colLabel(columns[index], index),
+        });
+    }, [columns, variantKey, onSelectionChange]);
+    const usedNames = usedFieldNames(columns);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: "Columns" }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: columns.length })] }), columns.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-3 text-center text-[11px] text-muted-foreground", children: "No columns yet. Add a field below." })) : (_jsx("div", { className: "space-y-1", children: columns.map((c, i) => (_jsx(FieldListRow, { index: i, label: colLabel(c, i), fieldName: colFieldName(c), fieldType: fieldTypeByName.get(colFieldName(c) ?? '') ?? 'text', selected: selectedIndex === i, canEdit: canEdit, dragging: dragIndex !== null, dropBefore: overIndex === i && dragIndex !== null && dragIndex !== i, onSelect: () => selectColumn(i), onRemove: () => removeColumn(i), onDragStart: () => setDragIndex(i), onDragEnd: () => {
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    }, onDragOverRow: () => setOverIndex(i), onDropRow: () => {
+                        if (dragIndex != null && dragIndex !== i)
+                            moveColumn(dragIndex, i);
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    } }, i))) })), canEdit && (_jsx(AddFieldPopover, { fields: fields, usedNames: usedNames, loading: loading, error: error, onAdd: addField }))] }));
+}

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

@@ -0,0 +1,49 @@
+/**
+ * FlowCanvas — an industry-standard visual flowchart designer for flow
+ * automation metadata (mirrors Power Automate / Salesforce Flow Builder).
+ *
+ * Dependency-free: no reactflow/@xyflow. Nodes are absolutely-positioned
+ * Shadcn cards over an SVG edge layer, laid out top-to-bottom by a
+ * deterministic layered algorithm (`flow-canvas-layout`). Authors can:
+ *
+ *   - drag to reposition nodes (committed to `node.ui = {x,y}` on drop),
+ *   - add nodes from a palette (toolbar or a node's bottom "+" handle),
+ *   - insert a node on an edge ("+" at the edge midpoint splits A→B),
+ *   - delete the selected node (Delete/Backspace) with full edge cleanup,
+ *   - pan (background drag) and zoom / fit-to-view.
+ *
+ * Selection is delegated to the existing FlowNodeInspector via
+ * onSelectionChange — the canvas never duplicates the inspector.
+ *
+ * The component is a pure renderer of `draft`; all mutations go through
+ * `onPatch(partial)` and the host merges + persists.
+ */
+import * as React from 'react';
+import { type FlowNode, type FlowEdge } from './flow-canvas-layout';
+export interface FlowCanvasProps {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    editable: boolean;
+    designMode: boolean;
+    selectedId: string | null;
+    /** Stable key (see `edgeKey`) of the currently-selected edge, or null. */
+    selectedEdgeId?: string | null;
+    locale?: string;
+    /** Simulation overlay: currently-executing node. */
+    activeNodeId?: string | null;
+    /** Simulation overlay: nodes already executed. */
+    visitedNodeIds?: string[];
+    /** Simulation overlay: ids of edges that were traversed. */
+    traversedEdgeIds?: string[];
+    /** Structural-validation: node ids to paint with a red error ring. */
+    invalidNodeIds?: string[];
+    /** Structural-validation: edges (keyed `${source}->${target}`) to paint red. */
+    invalidEdges?: ReadonlySet<string>;
+    /** Structural-validation error messages shown in an inline canvas banner. */
+    validationErrors?: string[];
+    onSelect: (node: FlowNode | null) => void;
+    /** Select an edge (its `edgeKey`), or clear selection with `null`. */
+    onSelectEdge?: (edge: FlowEdge | null, key: string) => void;
+    onPatch?: (partial: Record<string, unknown>) => void;
+}
+export declare function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, validationErrors, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;

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

@@ -0,0 +1,416 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowCanvas — an industry-standard visual flowchart designer for flow
+ * automation metadata (mirrors Power Automate / Salesforce Flow Builder).
+ *
+ * Dependency-free: no reactflow/@xyflow. Nodes are absolutely-positioned
+ * Shadcn cards over an SVG edge layer, laid out top-to-bottom by a
+ * deterministic layered algorithm (`flow-canvas-layout`). Authors can:
+ *
+ *   - drag to reposition nodes (committed to `node.ui = {x,y}` on drop),
+ *   - add nodes from a palette (toolbar or a node's bottom "+" handle),
+ *   - insert a node on an edge ("+" at the edge midpoint splits A→B),
+ *   - delete the selected node (Delete/Backspace) with full edge cleanup,
+ *   - pan (background drag) and zoom / fit-to-view.
+ *
+ * Selection is delegated to the existing FlowNodeInspector via
+ * onSelectionChange — the canvas never duplicates the inspector.
+ *
+ * The component is a pure renderer of `draft`; all mutations go through
+ * `onPatch(partial)` and the host merges + persists.
+ */
+import * as React from 'react';
+import { AlertTriangle, Maximize2, Plus, ZoomIn, ZoomOut } from 'lucide-react';
+import { cn } from '@object-ui/components';
+import { uniqueId, appendArray, spliceArray } from '../inspectors/_shared';
+import { t as tr } from '../i18n';
+import { computeLayout, diagramSize, bottomAnchor, topAnchor, rightAnchor, edgePath, edgeMidpoint, backEdgePath, backEdgeLabelAnchor, isBackEdge, edgeKey, conditionText, } from './flow-canvas-layout';
+import { NodeCard, NodePalette, defaultNodeLabel, defaultNodeExtras } from './flow-canvas-parts';
+import { useFlowNodePalette } from './useFlowNodePalette';
+const MIN_ZOOM = 0.4;
+const MAX_ZOOM = 1.6;
+const DRAG_THRESHOLD = 4;
+export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, validationErrors, onSelect, onSelectEdge, onPatch, }) {
+    const viewportRef = React.useRef(null);
+    const [zoom, setZoom] = React.useState(1);
+    const [pan, setPan] = React.useState({ x: 0, y: 0 });
+    const [paletteOpen, setPaletteOpen] = React.useState(false);
+    // Node types offered by the add-node palette, driven by the engine's
+    // published descriptors (`GET /api/v1/automation/actions`) merged with the
+    // hardcoded base — so the palette reflects what the backend actually supports
+    // (e.g. the `approval` node, third-party connector actions).
+    const paletteItems = useFlowNodePalette();
+    // Transient drag position override (commit-on-drop) so rapid pointer moves
+    // never spam onPatch and never diverge from the persisted draft.
+    const [dragPos, setDragPos] = React.useState(null);
+    const dragRef = React.useRef(null);
+    const panRef = React.useRef(null);
+    const layout = React.useMemo(() => computeLayout(nodes, edges), [nodes, edges]);
+    const size = React.useMemo(() => diagramSize(layout), [layout]);
+    // Simulation overlay sets (display-only; never drives engine behavior).
+    const visitedSet = React.useMemo(() => new Set(visitedNodeIds ?? []), [visitedNodeIds]);
+    const traversedSet = React.useMemo(() => new Set(traversedEdgeIds ?? []), [traversedEdgeIds]);
+    const invalidNodeSet = React.useMemo(() => new Set(invalidNodeIds ?? []), [invalidNodeIds]);
+    const simRunning = (visitedNodeIds?.length ?? 0) > 0 || !!activeNodeId;
+    const positionOf = React.useCallback((id) => {
+        if (dragPos && dragPos.id === id)
+            return { x: dragPos.x, y: dragPos.y };
+        return layout.get(id) ?? { x: 0, y: 0 };
+    }, [dragPos, layout]);
+    // ── Mutations ────────────────────────────────────────────────────────────
+    const persistPosition = React.useCallback((id, x, y) => {
+        if (!onPatch)
+            return;
+        const idx = nodes.findIndex((n) => n.id === id);
+        if (idx < 0)
+            return;
+        const node = nodes[idx];
+        const nextNode = { ...node, ui: { ...(node.ui ?? {}), x, y } };
+        onPatch({ nodes: spliceArray(nodes, idx, nextNode) });
+    }, [nodes, onPatch]);
+    const addNode = React.useCallback((type, opts) => {
+        if (!onPatch)
+            return;
+        const existing = nodes.map((n) => n.id).filter(Boolean);
+        const id = uniqueId('node', existing);
+        const label = type === 'end' ? 'End' : defaultNodeLabel(type);
+        // Only an explicit `at` pins a manual position. A `from`-append is left
+        // unpinned so the layered auto-layout slots it below its parent and
+        // spaces it horizontally among siblings — pinning it directly under the
+        // parent (the old behavior) made every sibling stack on the same spot.
+        const at = opts?.at;
+        const newNode = { id, type, label, ...defaultNodeExtras(type), ...(at ? { ui: { x: at.x, y: at.y } } : {}) };
+        const nextNodes = appendArray(nodes, newNode);
+        const patch = { nodes: nextNodes };
+        if (opts?.from) {
+            const newEdge = {
+                id: uniqueId('edge', edges.map((e) => e.id).filter(Boolean)),
+                source: opts.from,
+                target: id,
+            };
+            // When the source is a decision, carry its matching branch (by order:
+            // the k-th out-edge takes the k-th branch) onto the new edge so it
+            // actually routes. The decision's config.conditions are otherwise
+            // disconnected from the edges, leaving every branch unconditional.
+            const fromNode = nodes.find((n) => n.id === opts.from);
+            if (fromNode?.type === 'decision') {
+                const branches = Array.isArray(fromNode.config?.conditions)
+                    ? fromNode.config.conditions
+                    : [];
+                const outCount = edges.filter((e) => e.source === opts.from).length;
+                const branch = branches[outCount];
+                if (branch && typeof branch === 'object') {
+                    const expr = typeof branch.expression === 'string' ? branch.expression.trim() : '';
+                    const label = typeof branch.label === 'string' ? branch.label.trim() : '';
+                    if (label)
+                        newEdge.label = label;
+                    if (expr === 'true')
+                        newEdge.isDefault = true;
+                    else if (expr)
+                        newEdge.condition = expr;
+                }
+            }
+            patch.edges = appendArray(edges, newEdge);
+        }
+        onPatch(patch);
+        onSelect(newNode);
+        setPaletteOpen(false);
+    }, [edges, nodes, onPatch, onSelect, positionOf]);
+    /** Split edge A→B by inserting a new node N: A→N (keeps guard) + N→B. */
+    const insertOnEdge = React.useCallback((edge, type = 'create_record') => {
+        if (!onPatch)
+            return;
+        const edgeIdx = edges.findIndex((e) => e === edge);
+        if (edgeIdx < 0)
+            return;
+        const existing = nodes.map((n) => n.id).filter(Boolean);
+        const id = uniqueId('node', existing);
+        const from = positionOf(edge.source);
+        const to = positionOf(edge.target);
+        const at = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+        const newNode = {
+            id,
+            type,
+            label: defaultNodeLabel(type),
+            ...defaultNodeExtras(type),
+            ui: { x: at.x, y: at.y },
+        };
+        // A→N inherits the original edge's branch semantics; N→B is plain.
+        const firstSegment = { ...edge, target: id };
+        const secondSegment = {
+            id: uniqueId('edge', [...edges.map((e) => e.id).filter(Boolean), 'edge']),
+            source: id,
+            target: edge.target,
+        };
+        const nextEdges = spliceArray(edges, edgeIdx, firstSegment);
+        onPatch({ nodes: appendArray(nodes, newNode), edges: appendArray(nextEdges, secondSegment) });
+        onSelect(newNode);
+    }, [edges, nodes, onPatch, onSelect, positionOf]);
+    /**
+     * ADR-0044 one-click "add revision loop": drop a signal `wait` node plus the
+     * two edges that form a send-back-for-revision loop on an approval node —
+     * a `revise` out-edge to the wait point, and a declared `back`-edge closing
+     * the loop (resubmit re-enters the approval node as round N+1). Reproduces the
+     * canonical `showcase_budget_approval` shape in a single gesture. The wait
+     * node is left unpinned so the layered auto-layout slots it among the
+     * approval node's other branches.
+     */
+    const addReviseLoop = React.useCallback((approvalId) => {
+        if (!onPatch)
+            return;
+        if (!nodes.some((n) => n.id === approvalId))
+            return;
+        const waitId = uniqueId('node', nodes.map((n) => n.id).filter(Boolean));
+        const waitNode = {
+            id: waitId,
+            type: 'wait',
+            label: 'Awaiting Revision',
+            // Signal-flavored wait: the submitter's resubmit signal resumes the run.
+            waitEventConfig: { eventType: 'signal', signalName: 'revision', onTimeout: 'fail' },
+        };
+        const existingEdgeIds = edges.map((e) => e.id).filter(Boolean);
+        const reviseId = uniqueId('edge', existingEdgeIds);
+        const backId = uniqueId('edge', [...existingEdgeIds, reviseId]);
+        const reviseEdge = { id: reviseId, source: approvalId, target: waitId, label: 'revise' };
+        const backEdge = { id: backId, source: waitId, target: approvalId, label: 'resubmit', type: 'back' };
+        onPatch({
+            nodes: appendArray(nodes, waitNode),
+            edges: appendArray(appendArray(edges, reviseEdge), backEdge),
+        });
+        onSelect(waitNode);
+    }, [edges, nodes, onPatch, onSelect]);
+    // Approval nodes that already declare a `revise` out-edge — used to hide the
+    // "add revision loop" affordance once a loop exists (avoid duplicates).
+    const reviseLoopSources = React.useMemo(() => {
+        const s = new Set();
+        for (const e of edges) {
+            if (typeof e.label === 'string' && e.label.trim().toLowerCase() === 'revise')
+                s.add(e.source);
+        }
+        return s;
+    }, [edges]);
+    const deleteNode = React.useCallback((id) => {
+        if (!onPatch)
+            return;
+        const nextNodes = nodes.filter((n) => n.id !== id);
+        const nextEdges = edges.filter((e) => e.source !== id && e.target !== id);
+        onPatch({ nodes: nextNodes, edges: nextEdges });
+        onSelect(null);
+    }, [edges, nodes, onPatch, onSelect]);
+    // ── Drag (reposition) — pointer capture, commit on pointer-up ──────────────
+    const onNodePointerDown = React.useCallback((id) => (e) => {
+        if (!editable || e.button !== 0)
+            return;
+        e.stopPropagation();
+        const origin = positionOf(id);
+        dragRef.current = {
+            nodeId: id,
+            startX: e.clientX,
+            startY: e.clientY,
+            originX: origin.x,
+            originY: origin.y,
+            moved: false,
+        };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    }, [editable, positionOf]);
+    const onNodePointerMove = React.useCallback((e) => {
+        const d = dragRef.current;
+        if (!d)
+            return;
+        const dx = (e.clientX - d.startX) / zoom;
+        const dy = (e.clientY - d.startY) / zoom;
+        if (!d.moved && Math.hypot(e.clientX - d.startX, e.clientY - d.startY) < DRAG_THRESHOLD) {
+            return;
+        }
+        d.moved = true;
+        setDragPos({ id: d.nodeId, x: Math.max(0, d.originX + dx), y: Math.max(0, d.originY + dy) });
+    }, [zoom]);
+    const onNodePointerUp = React.useCallback((e) => {
+        const d = dragRef.current;
+        dragRef.current = null;
+        if (!d)
+            return;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        if (d.moved && dragPos) {
+            persistPosition(d.nodeId, Math.round(dragPos.x), Math.round(dragPos.y));
+        }
+        setDragPos(null);
+    }, [dragPos, persistPosition]);
+    // ── Pan (background drag) ──────────────────────────────────────────────────
+    const onBgPointerDown = React.useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        onSelect(null);
+        panRef.current = { startX: e.clientX, startY: e.clientY, originX: pan.x, originY: pan.y };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    }, [onSelect, pan.x, pan.y]);
+    const onBgPointerMove = React.useCallback((e) => {
+        const p = panRef.current;
+        if (!p)
+            return;
+        setPan({ x: p.originX + (e.clientX - p.startX), y: p.originY + (e.clientY - p.startY) });
+    }, []);
+    const onBgPointerUp = React.useCallback((e) => {
+        if (panRef.current)
+            e.currentTarget.releasePointerCapture?.(e.pointerId);
+        panRef.current = null;
+    }, []);
+    // ── Zoom / fit ─────────────────────────────────────────────────────────────
+    const clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
+    const fitToView = React.useCallback(() => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const pad = 32;
+        const zx = (vp.clientWidth - pad) / size.width;
+        const zy = (vp.clientHeight - pad) / size.height;
+        const z = clampZoom(Math.min(zx, zy, 1));
+        setZoom(z);
+        setPan({
+            x: (vp.clientWidth - size.width * z) / 2,
+            y: Math.max(16, (vp.clientHeight - size.height * z) / 2),
+        });
+    }, [size.height, size.width]);
+    // ── Keyboard: delete selected node ─────────────────────────────────────────
+    const onKeyDown = React.useCallback((e) => {
+        if (!editable || !selectedId)
+            return;
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            e.preventDefault();
+            deleteNode(selectedId);
+        }
+    }, [deleteNode, editable, selectedId]);
+    // ── Render ─────────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "relative h-full min-h-[320px] w-full overflow-hidden", children: [validationErrors && validationErrors.length > 0 && (_jsxs("div", { className: "absolute left-2 top-2 z-30 max-w-[min(60%,420px)] space-y-1", children: [validationErrors.slice(0, 3).map((msg, i) => (_jsxs("div", { role: "alert", className: "flex items-start gap-1.5 rounded-lg border border-destructive/40 bg-destructive/10 px-2.5 py-1.5 text-[11px] leading-snug text-destructive shadow-sm backdrop-blur-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: msg })] }, i))), validationErrors.length > 3 && (_jsxs("div", { className: "px-2.5 text-[10px] text-destructive/80", children: ["+", validationErrors.length - 3, " more\u2026"] }))] })), _jsxs("div", { className: "absolute right-2 top-2 z-30 flex items-center gap-1.5", children: [editable && (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setPaletteOpen((v) => !v), className: "inline-flex items-center gap-1.5 rounded-lg border bg-background/90 px-2.5 py-1.5 text-xs font-medium shadow-sm backdrop-blur-sm transition-colors hover:border-primary/50 hover:bg-accent hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), tr('engine.inspector.add.node', locale)] }), paletteOpen && (_jsx(NodePalette, { locale: locale, items: paletteItems, onClose: () => setPaletteOpen(false), onPick: (type) => addNode(type, { from: selectedId ?? undefined }) }))] })), _jsxs("div", { className: "flex items-center rounded-lg border bg-background/90 shadow-sm backdrop-blur-sm", children: [_jsx("button", { type: "button", title: "Zoom out", "aria-label": "Zoom out", onClick: () => setZoom((z) => clampZoom(z - 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomOut, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "w-10 text-center text-[11px] tabular-nums text-muted-foreground", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", title: "Zoom in", "aria-label": "Zoom in", onClick: () => setZoom((z) => clampZoom(z + 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomIn, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", title: "Fit to view", "aria-label": "Fit to view", onClick: fitToView, className: "inline-flex h-7 w-7 items-center justify-center border-l text-muted-foreground hover:text-foreground", children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { ref: viewportRef, tabIndex: 0, role: "application", "aria-label": "Flow canvas", onKeyDown: onKeyDown, onPointerDown: onBgPointerDown, onPointerMove: (e) => {
+                    onBgPointerMove(e);
+                    onNodePointerMove(e);
+                }, onPointerUp: (e) => {
+                    onBgPointerUp(e);
+                    onNodePointerUp(e);
+                }, className: cn('h-full w-full cursor-grab outline-none active:cursor-grabbing', 'bg-muted/15 dark:bg-background/30', 
+                // Subtle inset vignette gives the canvas surface depth.
+                'shadow-[inset_0_0_90px_rgba(0,0,0,0.05)]'), style: {
+                    // Dot grid tied to pan + zoom so the surface tracks the diagram
+                    // (rather than floating behind a static texture).
+                    backgroundImage: 'radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0)',
+                    backgroundSize: `${18 * zoom}px ${18 * zoom}px`,
+                    backgroundPosition: `${pan.x}px ${pan.y}px`,
+                }, children: _jsxs("div", { className: "relative origin-top-left", style: {
+                        width: size.width,
+                        height: size.height,
+                        transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                    }, children: [_jsxs("svg", { className: "pointer-events-none absolute left-0 top-0 overflow-visible", width: size.width, height: size.height, children: [_jsxs("defs", { children: [_jsx("marker", { id: "flow-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-muted-foreground/55" }) }), _jsx("marker", { id: "flow-arrow-back", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-amber-500/80" }) }), _jsx("marker", { id: "flow-arrow-error", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-destructive" }) })] }), edges.map((edge, i) => {
+                                    const sp = layout.get(edge.source);
+                                    const tp = layout.get(edge.target);
+                                    if (!sp || !tp)
+                                        return null;
+                                    // ADR-0044 back-edges (revise loop) re-enter an earlier node, so
+                                    // they attach to the right side of both endpoints and render as a
+                                    // dashed amber return arc — visually distinct from the forward
+                                    // top-to-bottom flow.
+                                    const back = isBackEdge(edge);
+                                    // Structural-validation error (e.g. part of an un-declared cycle).
+                                    // Back-edges are excluded from cycle detection, so they're never invalid.
+                                    const invalid = !back && !!invalidEdges?.has(`${edge.source}->${edge.target}`);
+                                    const sPos = dragPos?.id === edge.source ? positionOf(edge.source) : sp;
+                                    const tPos = dragPos?.id === edge.target ? positionOf(edge.target) : tp;
+                                    const from = back ? rightAnchor(sPos) : bottomAnchor(sPos);
+                                    const to = back ? rightAnchor(tPos) : topAnchor(tPos);
+                                    const labelPos = back ? backEdgeLabelAnchor(from, to) : edgeMidpoint(from, to);
+                                    const cond = conditionText(edge.condition);
+                                    const branchLabel = edge.isDefault ? 'else' : cond ? `if ${cond}` : edge.label;
+                                    const eid = edgeKey(edge, i);
+                                    const traversed = traversedSet.has(eid);
+                                    const selected = selectedEdgeId === eid;
+                                    const d = back ? backEdgePath(from, to) : edgePath(from, to);
+                                    // Edges are selectable in design mode; the host opens the edge
+                                    // inspector. A wide transparent hit-path widens the click target
+                                    // beyond the 1.5px visible stroke without altering the visuals.
+                                    const selectable = designMode && !!onSelectEdge;
+                                    return (_jsxs("g", { "data-invalid": invalid || undefined, children: [_jsx("path", { d: d, strokeLinecap: "round", strokeDasharray: back ? '5 4' : undefined, className: cn('fill-none transition-[stroke] duration-150', traversed
+                                                    ? 'stroke-sky-500'
+                                                    : selected
+                                                        ? 'stroke-primary'
+                                                        : invalid
+                                                            ? 'stroke-destructive'
+                                                            : back
+                                                                ? 'stroke-amber-500/70'
+                                                                : simRunning
+                                                                    ? 'stroke-muted-foreground/20'
+                                                                    : 'stroke-muted-foreground/40'), strokeWidth: traversed || selected || invalid ? 2.5 : 1.75, markerEnd: invalid ? 'url(#flow-arrow-error)' : back ? 'url(#flow-arrow-back)' : 'url(#flow-arrow)' }), selectable && (_jsx("path", { d: d, className: "pointer-events-auto cursor-pointer fill-none stroke-transparent", strokeWidth: 14, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onSelectEdge(edge, eid);
+                                                }, children: _jsx("title", { children: invalid ? `${edge.source} → ${edge.target} — part of an un-declared cycle; mark the edge that closes the loop as a back-edge` : back ? `${edge.source} ↩ ${edge.target} (back-edge)` : `${edge.source} → ${edge.target}` }) })), branchLabel && (_jsx("foreignObject", { x: labelPos.x - 60, y: labelPos.y - 11, width: 120, height: 22, className: cn(selectable && 'pointer-events-auto'), children: _jsx("div", { className: "flex justify-center", children: _jsx("span", { onPointerDown: selectable ? (e) => e.stopPropagation() : undefined, onClick: selectable ? (e) => { e.stopPropagation(); onSelectEdge(edge, eid); } : undefined, className: cn('max-w-full truncate rounded-full border bg-background/95 px-2 py-0.5 text-[10px] font-medium shadow-sm backdrop-blur-sm transition-colors', selectable && 'cursor-pointer hover:border-primary/60', selected
+                                                            ? 'border-primary text-primary'
+                                                            : invalid
+                                                                ? 'border-destructive/60 text-destructive'
+                                                                : back
+                                                                    ? 'border-amber-500/50 text-amber-600 dark:text-amber-400'
+                                                                    : 'border-border text-muted-foreground'), children: branchLabel }) }) })), editable && !back && (_jsx("foreignObject", { 
+                                                // Sit the insert handle at the edge midpoint, but slide it
+                                                // to the right of the branch-label pill when one is present
+                                                // so the two don't stack on the same spot.
+                                                x: branchLabel ? labelPos.x + 66 : labelPos.x - 11, y: labelPos.y - 11, width: 22, height: 22, className: "pointer-events-auto", children: _jsx("button", { type: "button", title: "Insert node here", "aria-label": "Insert node here", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        insertOnEdge(edge);
+                                                    }, className: "inline-flex h-[22px] w-[22px] items-center justify-center rounded-full border bg-background/90 text-muted-foreground opacity-50 shadow-sm backdrop-blur-sm transition-all hover:scale-110 hover:border-primary hover:bg-background hover:text-primary hover:opacity-100 focus-visible:opacity-100", children: _jsx(Plus, { className: "h-3 w-3" }) }) }))] }, edge.id || `${edge.source}-${edge.target}-${i}`));
+                                })] }), nodes.map((node) => {
+                            const runState = activeNodeId === node.id ? 'active' : visitedSet.has(node.id) ? 'visited' : undefined;
+                            return (_jsx(NodeCard, { id: node.id, type: node.type, label: node.label || node.id, summary: nodeSummary(node), position: positionOf(node.id), selected: selectedId === node.id, editable: editable, runState: runState, dimmed: simRunning && !runState, onPointerDown: onNodePointerDown(node.id), onSelect: () => designMode && onSelect(node), onAppend: () => addNode('create_record', { from: node.id }), onAddReviseLoop: editable && node.type === 'approval' && !reviseLoopSources.has(node.id)
+                                    ? () => addReviseLoop(node.id)
+                                    : undefined, invalid: invalidNodeSet.has(node.id) }, node.id));
+                        })] }) })] }));
+}
+/** One-line config summary shown on the node card (best-effort, type-aware). */
+function nodeSummary(node) {
+    const c = node.config;
+    const str = (v) => (typeof v === 'string' && v ? v : undefined);
+    const block = (key, inner) => {
+        const b = node[key];
+        return b && typeof b === 'object' ? str(b[inner]) : undefined;
+    };
+    const pick = (k) => (c ? str(c[k]) : undefined);
+    if (node.type === 'start') {
+        return pick('condition') || pick('criteria') || pick('objectName') || pick('cron') || pick('schedule') || pick('triggerType');
+    }
+    if (node.type === 'decision') {
+        const conds = c?.conditions;
+        if (Array.isArray(conds) && conds.length) {
+            const labels = conds
+                .map((x) => (x && typeof x === 'object' ? str(x.label) : undefined))
+                .filter(Boolean);
+            return labels.length ? labels.join(' / ') : `${conds.length} branches`;
+        }
+        return pick('condition');
+    }
+    if (node.type === 'script') {
+        return pick('actionType') || pick('template') || (c && c.script ? 'code' : undefined);
+    }
+    if (node.type === 'approval') {
+        const approvers = c?.approvers;
+        const n = Array.isArray(approvers) ? approvers.length : 0;
+        const behavior = pick('behavior');
+        if (n > 0)
+            return `${n} approver${n === 1 ? '' : 's'}${behavior === 'unanimous' ? ' · all' : ''}`;
+        return behavior || undefined;
+    }
+    return (pick('objectName') ||
+        block('connectorConfig', 'actionId') ||
+        block('waitEventConfig', 'timerDuration') ||
+        block('waitEventConfig', 'eventType') ||
+        block('boundaryConfig', 'eventType') ||
+        pick('condition') ||
+        pick('flowName') ||
+        pick('url') ||
+        pick('collection') ||
+        pick('action') ||
+        pick('flow') ||
+        pick('event') ||
+        pick('duration') ||
+        undefined);
+}

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

@@ -0,0 +1,20 @@
+/**
+ * FlowPreview — read-only summary of a Flow metadata draft.
+ *
+ * A full DAG canvas lives in `@object-ui/plugin-designer` and would
+ * pull in ReactFlow + its deps every time the metadata-admin loads,
+ * which is too heavy for a glance-preview. Instead we render:
+ *
+ *   1. A header strip with type / status / runAs / version.
+ *   2. A topologically ordered step list inferred from `nodes` +
+ *      `edges`. Each step shows label, action type, branch markers,
+ *      and outgoing edge conditions so authors can sanity-check the
+ *      logic without launching the designer.
+ *   3. A variables side panel listing declared flow variables.
+ *
+ * The renderer is defensive — drafts may be mid-edit with dangling
+ * edges or duplicate node ids; we never throw, we just degrade.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale }: MetadataPreviewProps): React.JSX.Element;