@calliopelabs/ui 0.7.0 → 0.12.0

package/dist/workflow/canvas/WorkflowCanvas.js

@@ -0,0 +1,648 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The one place the package draws on @xyflow/react: it is wrapped here, as
+ * Radix is wrapped in src/primitives, and nothing else imports it.
+ */
+import { Background, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, useReactFlow, } from "@xyflow/react";
+import { CableIcon, ChevronDownIcon, ChevronRightIcon, LayoutGridIcon, MaximizeIcon, PlusIcon, Trash2Icon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../overlays/Dialog.js";
+import { Button } from "../../primitives/Button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../primitives/DropdownMenu.js";
+import { Field } from "../../primitives/Field.js";
+import { Select } from "../../primitives/Select.js";
+import { useUI } from "../../provider/UIProvider.js";
+import { IN, LOOP_IN, LOOP_OUT, OUT, canConnect, edgeId, exitLabel, exitsOf, findGateKind, findPreset, inputsOf, moveNode, outputsOf, portOf, removeEdge, removeNode, withFlow, } from "../definition.js";
+import { NODE_HEADER, NODE_WIDTH, PORT_ROW, arrangeFlow, layoutFlow, nodeSize, regionsOf, } from "../layout.js";
+import { insertPaletteItem, paletteOf } from "../palette.js";
+/** The canvas never zooms out past this: below it a node's words stop being readable. */
+export const READABLE_ZOOM = 0.7;
+const GRID = 16;
+const PAD = 16;
+const REGION_HEAD = 32;
+const EMPTY_FLOW = { nodes: [], edges: [] };
+const HANDLE = "size-2.5! rounded-full! border! border-muted-foreground! bg-card!";
+const DATA_HANDLE = "size-2.5! rounded-xs! border! border-muted-foreground! bg-muted!";
+const LOOP_HANDLE = "size-2.5! rounded-full! border! border-info! bg-card!";
+const rowTop = (i) => NODE_HEADER + 4 + i * PORT_ROW + PORT_ROW / 2;
+const HANDLE_SIZE = 10;
+/**
+ * Where a card's handles sit, declared up front so edges draw before the
+ * browser measures anything (and in a server render or a test).
+ */
+function cardHandles(d, width, height) {
+    const h = HANDLE_SIZE / 2;
+    const at = (id, type, position, x, y) => ({
+        id,
+        type,
+        position,
+        x: x - h,
+        y: y - h,
+        width: HANDLE_SIZE,
+        height: HANDLE_SIZE,
+    });
+    return [
+        at(IN, "target", Position.Left, 0, NODE_HEADER / 2),
+        ...d.inputs.map((p, i) => at(p.handle, "target", Position.Left, 0, rowTop(i))),
+        ...(d.singleExit ? [at(OUT, "source", Position.Right, width, NODE_HEADER / 2)] : []),
+        ...d.right.map((p, i) => at(p.handle, "source", Position.Right, width, rowTop(i))),
+        ...(d.node.kind === "goto"
+            ? [at("jump", "source", Position.Right, width, NODE_HEADER / 2)]
+            : []),
+        ...(d.loops ? [at(LOOP_OUT, "source", Position.Bottom, width * 0.7, height)] : []),
+        at(LOOP_IN, "target", Position.Bottom, width * 0.3, height),
+    ];
+}
+function regionHandles(width, height) {
+    const h = HANDLE_SIZE / 2;
+    return [
+        {
+            id: IN,
+            type: "target",
+            position: Position.Left,
+            x: -h,
+            y: height / 2 - h,
+            width: HANDLE_SIZE,
+            height: HANDLE_SIZE,
+        },
+        {
+            id: OUT,
+            type: "source",
+            position: Position.Right,
+            x: width - h,
+            y: height / 2 - h,
+            width: HANDLE_SIZE,
+            height: HANDLE_SIZE,
+        },
+        {
+            id: LOOP_IN,
+            type: "target",
+            position: Position.Bottom,
+            x: width * 0.3 - h,
+            y: height - h,
+            width: HANDLE_SIZE,
+            height: HANDLE_SIZE,
+        },
+        {
+            id: LOOP_OUT,
+            type: "source",
+            position: Position.Bottom,
+            x: width * 0.7 - h,
+            y: height - h,
+            width: HANDLE_SIZE,
+            height: HANDLE_SIZE,
+        },
+    ];
+}
+function NodeCard({ data }) {
+    const d = data;
+    return (_jsxs("div", { "data-slot": "workflow-node", className: cn("relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-xs", d.tone === "selected" && "border-primary ring-2 ring-primary/40", d.tone === "blocking" && "border-danger-border", d.tone === "default" && "border-border"), style: { width: d.width, height: d.height }, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 px-3 py-2", style: { height: NODE_HEADER }, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase", children: [_jsx("span", { className: "truncate", children: d.kindLabel }), d.blocking ? (_jsx("span", { className: "ml-auto rounded-full bg-danger-bg px-1.5 text-danger-fg", "aria-hidden": true, children: d.blocking })) : d.warnings ? (_jsx("span", { className: "ml-auto rounded-full bg-warning-bg px-1.5 text-warning-fg", "aria-hidden": true, children: d.warnings })) : null, d.toggle ? (_jsx("button", { type: "button", className: cn("nodrag nopan rounded-md p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", !d.blocking && !d.warnings && "ml-auto"), "aria-label": d.toggle.label, "aria-expanded": d.toggle.open, onClick: d.toggle.onToggle, children: d.toggle.open ? (_jsx(ChevronDownIcon, { className: "size-3.5" })) : (_jsx(ChevronRightIcon, { className: "size-3.5" })) })) : null] }), _jsx("p", { className: "truncate text-sm leading-5 font-medium", children: d.node.label }), _jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [d.notRun ? _jsxs("span", { className: "text-warning-fg", children: [d.notRunLabel, " \u00B7 "] }) : null, d.summary] })] }), d.inputs.length || d.right.length ? (_jsxs("div", { className: "relative text-2xs text-muted-foreground", children: [d.inputs.map((p, i) => (_jsx("span", { className: "absolute left-3 max-w-[45%] truncate", style: { top: i * PORT_ROW + 4 }, title: p.title, children: p.label }, p.handle))), d.right.map((p, i) => (_jsx("span", { className: cn("absolute right-3 max-w-[45%] truncate text-right", p.kind === "exit" && "text-foreground"), style: { top: i * PORT_ROW + 4 }, title: p.title, children: p.label }, p.handle)))] })) : null, _jsx(Handle, { type: "target", id: IN, position: Position.Left, isConnectable: d.connectable, className: HANDLE, style: { top: NODE_HEADER / 2 }, title: d.handleTitles.in }), d.inputs.map((p, i) => (_jsx(Handle, { type: "target", id: p.handle, position: Position.Left, isConnectable: d.connectable, className: DATA_HANDLE, style: { top: rowTop(i) }, title: p.title }, p.handle))), d.singleExit ? (_jsx(Handle, { type: "source", id: OUT, position: Position.Right, isConnectable: d.connectable, className: HANDLE, style: { top: NODE_HEADER / 2 } })) : null, d.right.map((p, i) => (_jsx(Handle, { type: "source", id: p.handle, position: Position.Right, isConnectable: d.connectable, className: p.kind === "data" ? DATA_HANDLE : HANDLE, style: { top: rowTop(i) }, title: p.title }, p.handle))), d.node.kind === "goto" ? (_jsx(Handle, { type: "source", id: "jump", position: Position.Right, isConnectable: false, className: "opacity-0!", style: { top: NODE_HEADER / 2 } })) : null, d.loops ? (_jsx(Handle, { type: "source", id: LOOP_OUT, position: Position.Bottom, isConnectable: d.connectable, className: LOOP_HANDLE, style: { left: "70%" }, title: d.handleTitles.loop })) : null, _jsx(Handle, { type: "target", id: LOOP_IN, position: Position.Bottom, isConnectable: d.connectable, className: LOOP_HANDLE, style: { left: "30%" }, title: d.handleTitles.loopIn })] }));
+}
+function RegionBox({ data }) {
+    return (_jsxs("div", { "data-slot": "workflow-region", className: cn("h-full w-full rounded-lg border border-dashed border-border", data.folded ? "border-solid bg-card shadow-xs" : "bg-muted/40"), children: [_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground", children: [_jsx("button", { type: "button", className: "nodrag nopan rounded-md p-0.5 hover:bg-muted hover:text-foreground", 
+                        // The region itself takes no pointer: only its toggle does.
+                        style: { pointerEvents: "all" }, "aria-label": data.action, "aria-expanded": !data.folded, onClick: data.onToggle, children: data.folded ? (_jsx(ChevronRightIcon, { className: "size-3.5" })) : (_jsx(ChevronDownIcon, { className: "size-3.5" })) }), _jsx("span", { className: "truncate", children: data.title })] }), data.folded ? (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", id: IN, position: Position.Left, isConnectable: false, className: HANDLE }), _jsx(Handle, { type: "source", id: OUT, position: Position.Right, isConnectable: false, className: HANDLE }), _jsx(Handle, { type: "target", id: LOOP_IN, position: Position.Bottom, isConnectable: false, className: "opacity-0!" }), _jsx(Handle, { type: "source", id: LOOP_OUT, position: Position.Bottom, isConnectable: false, className: "opacity-0!" })] })) : null] }));
+}
+const NODE_TYPES = { card: NodeCard, region: RegionBox };
+/** The source handles a node offers, and the targets in a flow each can reach, for the keyboard connect. */
+function connectOptions(flow, from, registry, definition, names) {
+    const sources = [
+        ...exitsOf(from).map((e) => ({ value: e, label: names.exit(exitLabel(from, e)) })),
+        ...(from.kind === "goto" ? [] : [{ value: LOOP_OUT, label: names.loop }]),
+        ...outputsOf(from, registry, definition).map((p) => ({
+            value: `output:${p.id}`,
+            label: names.port(p.label, p.type),
+        })),
+    ];
+    return sources
+        .map((s) => ({
+        ...s,
+        targets: flow.nodes.flatMap((b) => {
+            const targets = [
+                { value: IN, label: b.label },
+                { value: LOOP_IN, label: `${b.label}, ${names.loopIn}` },
+                ...inputsOf(b, registry, definition).map((p) => ({
+                    value: `input:${p.id}`,
+                    label: `${b.label}, ${names.port(p.label, p.type)}`,
+                })),
+            ];
+            return targets
+                .filter((t) => canConnect(flow, { from: from.id, source: s.value, to: b.id, target: t.value }, registry, definition).ok)
+                .map((t) => ({ value: JSON.stringify([b.id, t.value]), label: t.label }));
+        }),
+    }))
+        .filter((s) => s.targets.length);
+}
+function ConnectDialog({ open, onOpenChange, from, options, onConnect, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const [source, setSource] = React.useState(options[0]?.value ?? "");
+    const current = options.find((o) => o.value === source) ?? options[0];
+    const [target, setTarget] = React.useState(current?.targets[0]?.value ?? "");
+    const chosen = current?.targets.find((t) => t.value === target) ?? current?.targets[0];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: m.connectTitle(from.label) }), _jsx(DialogDescription, { children: m.connectDescription })] }), current && chosen ? (_jsxs("form", { className: "flex flex-col gap-4", onSubmit: (e) => {
+                        e.preventDefault();
+                        const [to, t] = JSON.parse(chosen.value);
+                        onConnect(current.value, to, t);
+                    }, children: [_jsx(Field, { label: m.connectFrom, children: _jsx(Select, { value: current.value, onValueChange: (v) => {
+                                    setSource(v);
+                                    setTarget(options.find((o) => o.value === v)?.targets[0]?.value ?? "");
+                                }, options: options.map((o) => ({ value: o.value, label: o.label })) }) }), _jsx(Field, { label: m.connectTo, children: _jsx(Select, { value: chosen.value, onValueChange: setTarget, options: current.targets }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: m.cancel }), _jsx(Button, { type: "submit", children: m.connectAction })] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: m.connectNone }), _jsx(DialogFooter, { children: _jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: m.cancel }) })] }))] }) }));
+}
+/**
+ * One flow of a workflow definition, drawn and edited on a pannable,
+ * zoomable canvas. The run goes left to right: work comes into a node's
+ * input on the left and leaves by its exits on the right; typed inputs and
+ * outputs sit in rows below the header; a loop leaves from the bottom right
+ * and goes back into an earlier node's bottom left. `canConnect` decides
+ * what snaps, so an invalid edge never lands. Loop bodies and fan-out
+ * branches fold; a sub-flow shows in place. Every drag has a keyboard
+ * equivalent: Tab to a node, Enter to select, arrows to move, Delete to
+ * remove; Add and Connect in the toolbar.
+ */
+export function WorkflowCanvas(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(CanvasInner, { ...props }) }));
+}
+function CanvasInner({ definition, flow: flowProp, registry, onChange, readOnly: readOnlyProp = false, selection = null, onSelectionChange, problems = [], folded: foldedProp, defaultFolded = [], onFoldedChange, defaultInPlace = [], label, className, }) {
+    const { messages } = useUI();
+    const m = messages.editor;
+    const view = useReactFlow();
+    const pane = React.useRef(null);
+    /**
+     * Fits the flow when it fits at a readable zoom; otherwise holds the
+     * readable floor and starts at the flow's beginning, so a long flow scrolls
+     * instead of shrinking or losing its start off the left edge.
+     */
+    const place = React.useCallback(() => {
+        const el = pane.current;
+        const nodes = view.getNodes().filter((n) => !n.parentId);
+        if (!el || !nodes.length)
+            return;
+        const b = view.getNodesBounds(nodes);
+        const w = el.clientWidth;
+        const h = el.clientHeight;
+        if (!w || !h || !b.width)
+            return;
+        const pad = 32;
+        const zoom = Math.min(1, Math.max(READABLE_ZOOM, Math.min((w - pad * 2) / b.width, (h - pad * 2) / b.height)));
+        const x = b.width * zoom <= w - pad * 2 ? (w - b.width * zoom) / 2 - b.x * zoom : pad - b.x * zoom;
+        const y = b.height * zoom <= h - pad * 2 ? (h - b.height * zoom) / 2 - b.y * zoom : pad - b.y * zoom;
+        void view.setViewport({ x, y, zoom });
+    }, [view]);
+    const flowName = flowProp && definition.flows[flowProp] ? flowProp : definition.main;
+    const flow = definition.flows[flowName] ?? EMPTY_FLOW;
+    const readOnly = readOnlyProp || !onChange;
+    const [foldedState, setFoldedState] = React.useState(defaultFolded);
+    const folded = foldedProp ?? foldedState;
+    const [inPlace, setInPlace] = React.useState(defaultInPlace);
+    const [announcement, setAnnouncement] = React.useState("");
+    const [connecting, setConnecting] = React.useState(false);
+    const setFolded = React.useCallback((next) => {
+        if (foldedProp === undefined)
+            setFoldedState(next);
+        onFoldedChange?.(next);
+    }, [foldedProp, onFoldedChange]);
+    const change = React.useCallback((next) => onChange?.(withFlow(definition, flowName, next)), [onChange, definition, flowName]);
+    const select = React.useCallback((next) => {
+        const same = next === selection ||
+            (next &&
+                selection &&
+                next.type === selection.type &&
+                next.id === selection.id &&
+                next.flow === selection.flow);
+        if (!same)
+            onSelectionChange?.(next);
+    }, [onSelectionChange, selection]);
+    const selectedNode = selection?.type === "node" && selection.flow === flowName
+        ? flow.nodes.find((n) => n.id === selection.id)
+        : undefined;
+    const selectedEdge = selection?.type === "edge" && selection.flow === flowName
+        ? flow.edges.find((e) => edgeId(e) === selection.id)
+        : undefined;
+    const built = React.useMemo(() => {
+        const here = problems.filter((p) => (p.flow ?? definition.main) === flowName);
+        const positions = layoutFlow(flow, registry, { definition });
+        const regions = regionsOf(flow);
+        const label = (id) => flow.nodes.find((n) => n.id === id)?.label ?? id;
+        const regionTitle = (r) => m.regionName(r.kind, label(r.head), r.members.length);
+        const hiddenBy = new Map();
+        for (const r of regions)
+            if (folded.includes(r.id) && !r.members.some((id) => hiddenBy.has(id)))
+                for (const id of r.members)
+                    hiddenBy.set(id, r);
+        const card = (n, inner, extra = {}) => {
+            const blocking = inner
+                ? 0
+                : here.filter((p) => p.node === n.id && p.level === "blocking").length;
+            const warnings = inner
+                ? 0
+                : here.filter((p) => p.node === n.id && p.level === "warning").length;
+            const notRun = here.some((p) => p.node === n.id && p.level === "not-run");
+            const exits = exitsOf(n);
+            const preset = n.kind === "step" || n.kind === "variants" ? findPreset(registry, n.preset) : null;
+            const kindLabel = m.kind(n.kind);
+            const size = nodeSize(n, registry, definition);
+            const isSelected = !inner && selectedNode?.id === n.id;
+            return {
+                node: n,
+                kindLabel,
+                summary: m.summary(n, {
+                    ...(preset ? { preset: preset.preset.label, module: preset.module.label } : {}),
+                    ...(n.kind === "gate" ? { gate: findGateKind(registry, n.gate)?.label ?? n.gate } : {}),
+                    ...(n.kind === "goto" && n.target ? { target: label(n.target) } : {}),
+                }),
+                name: m.nodeName(kindLabel, n.label, blocking, warnings, notRun),
+                blocking,
+                warnings,
+                notRun,
+                notRunLabel: m.notRun,
+                tone: isSelected ? "selected" : blocking ? "blocking" : "default",
+                inputs: inputsOf(n, registry, definition).map((p) => ({
+                    handle: `input:${p.id}`,
+                    label: p.label,
+                    title: m.port(p.label, p.type),
+                    kind: "data",
+                })),
+                right: [
+                    ...(exits.length > 1
+                        ? exits.map((e) => ({
+                            handle: e,
+                            label: m.exit(exitLabel(n, e)),
+                            title: m.exit(exitLabel(n, e)),
+                            kind: "exit",
+                        }))
+                        : []),
+                    ...outputsOf(n, registry, definition).map((p) => ({
+                        handle: `output:${p.id}`,
+                        label: p.label,
+                        title: m.port(p.label, p.type),
+                        kind: "data",
+                    })),
+                ],
+                singleExit: exits.length === 1,
+                loops: n.kind !== "goto",
+                connectable: !readOnly && !inner,
+                handleTitles: { in: m.inHandle, loop: m.loopHandle, loopIn: m.loopInHandle },
+                width: size.width,
+                height: size.height,
+                ...extra,
+            };
+        };
+        const nodes = [];
+        const edges = [];
+        const sizeOf = (n) => nodeSize(n, registry, definition);
+        // Regions: a folded one stands in for its members; an open one is drawn behind them.
+        for (const r of regions) {
+            const isFolded = hiddenBy.get(r.head) === r;
+            const hiddenElsewhere = r.members.some((id) => hiddenBy.has(id)) && !isFolded;
+            if (hiddenElsewhere)
+                continue;
+            const boxes = r.members.flatMap((id) => {
+                const n = flow.nodes.find((x) => x.id === id);
+                const at = positions[id];
+                return n && at ? [{ ...at, ...sizeOf(n) }] : [];
+            });
+            if (!boxes.length)
+                continue;
+            const x = Math.min(...boxes.map((b) => b.x));
+            const y = Math.min(...boxes.map((b) => b.y));
+            const title = regionTitle(r);
+            const data = {
+                title,
+                action: isFolded ? m.unfold(title) : m.fold(title),
+                folded: isFolded,
+                onToggle: () => setFolded(isFolded ? folded.filter((f) => f !== r.id) : [...folded, r.id]),
+            };
+            nodes.push(isFolded
+                ? {
+                    id: `region:${r.id}`,
+                    type: "region",
+                    position: { x, y },
+                    width: NODE_WIDTH,
+                    height: NODE_HEADER,
+                    handles: regionHandles(NODE_WIDTH, NODE_HEADER),
+                    data,
+                    selectable: false,
+                    draggable: false,
+                    connectable: false,
+                    deletable: false,
+                    ariaLabel: title,
+                }
+                : {
+                    id: `region:${r.id}`,
+                    type: "region",
+                    position: { x: x - PAD, y: y - PAD - REGION_HEAD },
+                    width: Math.max(...boxes.map((b) => b.x + b.width)) - x + PAD * 2,
+                    height: Math.max(...boxes.map((b) => b.y + b.height)) - y + PAD * 2 + REGION_HEAD,
+                    data,
+                    zIndex: -1,
+                    selectable: false,
+                    draggable: false,
+                    connectable: false,
+                    deletable: false,
+                    focusable: false,
+                });
+        }
+        const shown = (id) => {
+            const r = hiddenBy.get(id);
+            return r ? `region:${r.id}` : id;
+        };
+        for (const n of flow.nodes) {
+            if (hiddenBy.has(n.id))
+                continue;
+            const at = positions[n.id] ?? { x: 0, y: 0 };
+            const sub = n.kind === "subflow" ? definition.flows[n.flow] : undefined;
+            const open = !!sub && n.kind === "subflow" && n.flow !== flowName && inPlace.includes(n.id);
+            const toggle = sub && n.kind === "subflow" && n.flow !== flowName
+                ? {
+                    label: open ? m.hideInPlace(n.label) : m.showInPlace(n.label),
+                    open,
+                    onToggle: () => setInPlace((ids) => (open ? ids.filter((i) => i !== n.id) : [...ids, n.id])),
+                }
+                : undefined;
+            if (open && sub) {
+                const innerAt = layoutFlow(sub, registry, { definition, keep: false });
+                const base = sizeOf(n);
+                const innerW = Math.max(0, ...sub.nodes.map((c) => (innerAt[c.id]?.x ?? 0) + NODE_WIDTH));
+                const innerH = Math.max(0, ...sub.nodes.map((c) => (innerAt[c.id]?.y ?? 0) + sizeOf(c).height));
+                const width = Math.max(base.width, innerW + PAD * 2);
+                const height = base.height + innerH + PAD * 2;
+                const data = card(n, false, { toggle, width, height });
+                nodes.push({
+                    id: n.id,
+                    type: "card",
+                    position: at,
+                    width,
+                    height,
+                    handles: cardHandles(data, width, height),
+                    data,
+                    selected: data.tone === "selected",
+                    draggable: !readOnly,
+                    deletable: !readOnly,
+                    ariaLabel: data.name,
+                });
+                for (const c of sub.nodes) {
+                    const cd = card(c, true);
+                    nodes.push({
+                        id: `${n.id}/${c.id}`,
+                        type: "card",
+                        parentId: n.id,
+                        extent: "parent",
+                        position: {
+                            x: (innerAt[c.id]?.x ?? 0) + PAD,
+                            y: base.height + PAD + (innerAt[c.id]?.y ?? 0),
+                        },
+                        width: cd.width,
+                        height: cd.height,
+                        handles: cardHandles(cd, cd.width, cd.height),
+                        data: cd,
+                        selectable: false,
+                        draggable: false,
+                        connectable: false,
+                        deletable: false,
+                        focusable: false,
+                    });
+                }
+                for (const e of sub.edges)
+                    if (e.kind !== "data")
+                        edges.push({
+                            id: `${n.id}/${edgeId(e)}`,
+                            source: `${n.id}/${e.from}`,
+                            target: `${n.id}/${e.to}`,
+                            sourceHandle: e.kind === "loop" ? LOOP_OUT : portOf(e),
+                            targetHandle: e.kind === "loop" ? LOOP_IN : IN,
+                            selectable: false,
+                            deletable: false,
+                            focusable: false,
+                            style: { stroke: "var(--muted-foreground)", strokeWidth: 1.25 },
+                        });
+                continue;
+            }
+            const data = card(n, false, toggle ? { toggle } : {});
+            nodes.push({
+                id: n.id,
+                type: "card",
+                position: at,
+                width: data.width,
+                height: data.height,
+                handles: cardHandles(data, data.width, data.height),
+                data,
+                selected: data.tone === "selected",
+                draggable: !readOnly,
+                deletable: !readOnly,
+                ariaLabel: data.name,
+            });
+        }
+        for (const e of flow.edges) {
+            const id = edgeId(e);
+            const a = shown(e.from);
+            const b = shown(e.to);
+            if (a === b)
+                continue;
+            const rerouted = a !== e.from || b !== e.to;
+            const from = flow.nodes.find((n) => n.id === e.from);
+            const to = flow.nodes.find((n) => n.id === e.to);
+            if (!from || !to)
+                continue;
+            const bad = here.some((p) => p.edge === id && p.level === "blocking");
+            const isSelected = selectedEdge ? edgeId(selectedEdge) === id : false;
+            const tone = isSelected
+                ? "var(--primary)"
+                : bad
+                    ? "var(--danger)"
+                    : e.kind === "loop"
+                        ? "var(--info)"
+                        : e.kind === "data"
+                            ? "var(--chart-3)"
+                            : "var(--muted-foreground)";
+            const exit = e.kind === "next" && portOf(e) !== OUT ? m.exit(exitLabel(from, portOf(e))) : "";
+            // An exit is named on its node's row; the edge only carries a loop's limit or its own label.
+            const text = e.kind === "loop" ? m.loopMax(e.max) : (e.label ?? "");
+            const detail = e.kind === "data"
+                ? `${outputsOf(from, registry, definition).find((p) => p.id === e.port)?.label ?? e.port ?? ""}`
+                : text || exit;
+            edges.push({
+                id: rerouted ? `via:${id}` : id,
+                source: a,
+                target: b,
+                sourceHandle: a !== e.from
+                    ? e.kind === "loop"
+                        ? LOOP_OUT
+                        : OUT
+                    : e.kind === "data"
+                        ? `output:${e.port}`
+                        : portOf(e),
+                targetHandle: b !== e.to
+                    ? e.kind === "loop"
+                        ? LOOP_IN
+                        : IN
+                    : e.kind === "data"
+                        ? `input:${e.input}`
+                        : e.kind === "loop"
+                            ? LOOP_IN
+                            : IN,
+                type: e.kind === "next" ? "smoothstep" : "default",
+                label: text || undefined,
+                selected: isSelected,
+                selectable: !rerouted,
+                deletable: !readOnly && !rerouted,
+                focusable: !rerouted,
+                ariaLabel: m.edgeName(e.kind, from.label, to.label, detail || undefined),
+                style: {
+                    stroke: tone,
+                    strokeWidth: isSelected ? 2.5 : 1.5,
+                    ...(e.kind === "loop"
+                        ? { strokeDasharray: "6 4" }
+                        : e.kind === "data"
+                            ? { strokeDasharray: "2 3" }
+                            : {}),
+                },
+                markerEnd: { type: MarkerType.ArrowClosed, color: tone, width: 14, height: 14 },
+                labelStyle: { fill: "var(--muted-foreground)", fontSize: 11 },
+                labelBgStyle: { fill: "var(--background)" },
+            });
+        }
+        for (const n of flow.nodes)
+            if (n.kind === "goto" && n.target && flow.nodes.some((x) => x.id === n.target)) {
+                const a = shown(n.id);
+                const b = shown(n.target);
+                if (a === b)
+                    continue;
+                edges.push({
+                    id: `goto:${n.id}`,
+                    source: a,
+                    target: b,
+                    sourceHandle: a === n.id ? "jump" : OUT,
+                    targetHandle: IN,
+                    selectable: false,
+                    deletable: false,
+                    focusable: false,
+                    label: m.loopMax(n.max),
+                    style: { stroke: "var(--info)", strokeWidth: 1.25, strokeDasharray: "2 4" },
+                    labelStyle: { fill: "var(--muted-foreground)", fontSize: 11 },
+                    labelBgStyle: { fill: "var(--background)" },
+                });
+            }
+        return { nodes, edges };
+    }, [
+        definition,
+        flow,
+        flowName,
+        registry,
+        problems,
+        folded,
+        inPlace,
+        readOnly,
+        selectedNode,
+        selectedEdge,
+        m,
+        setFolded,
+    ]);
+    // The canvas moves nodes in its own state while dragging; a new document from the host replaces them.
+    const [nodes, setNodes] = React.useState(built.nodes);
+    const [from, setFrom] = React.useState(built.nodes);
+    if (from !== built.nodes) {
+        setFrom(built.nodes);
+        setNodes(built.nodes);
+    }
+    const isReal = (id) => flow.nodes.some((n) => n.id === id);
+    const realEdge = (id) => flow.edges.find((e) => edgeId(e) === id);
+    const onNodesChange = (changes) => {
+        setNodes((ns) => applyNodeChanges(changes.filter((c) => c.type !== "select" && c.type !== "remove"), ns));
+        const picked = changes.find((c) => c.type === "select" && c.selected && isReal(c.id));
+        if (picked && picked.type === "select")
+            select({ type: "node", flow: flowName, id: picked.id });
+        else if (changes.some((c) => c.type === "select" && !c.selected && c.id === selectedNode?.id))
+            select(null);
+        if (readOnly)
+            return;
+        let next = flow;
+        let moved = false;
+        for (const c of changes)
+            if (c.type === "position" && c.dragging === false && c.position && isReal(c.id)) {
+                next = moveNode(next, c.id, c.position);
+                moved = true;
+            }
+        if (moved)
+            change(next);
+    };
+    const onEdgesChange = (changes) => {
+        const picked = changes.find((c) => c.type === "select" && c.selected && realEdge(c.id));
+        if (picked && picked.type === "select")
+            select({ type: "edge", flow: flowName, id: picked.id });
+        else if (changes.some((c) => c.type === "select" && !c.selected && selectedEdge && c.id === edgeId(selectedEdge)))
+            select(null);
+    };
+    const connect = (c) => {
+        const r = canConnect(flow, { from: c.source, source: c.sourceHandle ?? OUT, to: c.target, target: c.targetHandle ?? IN }, registry, definition);
+        if (!r.ok) {
+            setAnnouncement(m.connect(r.reason, r.values));
+            return;
+        }
+        change({ ...flow, edges: [...flow.edges, r.edge] });
+        select({ type: "edge", flow: flowName, id: edgeId(r.edge) });
+        const label = (id) => flow.nodes.find((n) => n.id === id)?.label ?? id;
+        setAnnouncement(m.connected(label(r.edge.from), label(r.edge.to)));
+    };
+    const remove = (nodeIds, edgeIds) => {
+        let next = flow;
+        for (const id of edgeIds)
+            next = removeEdge(next, id);
+        for (const id of nodeIds)
+            next = removeNode(next, id);
+        // A deleted node takes its edges with it; count what the person deleted.
+        const count = nodeIds.length || edgeIds.length;
+        if (!count)
+            return;
+        change(next);
+        select(null);
+        setAnnouncement(m.deleted(count));
+    };
+    const add = (item) => {
+        const name = item.label || (item.template.kind === "step" ? m.customStep : m.kind(item.template.kind));
+        const r = insertPaletteItem(definition, flowName, item, registry, name, selectedNode?.id);
+        onChange?.(r.definition);
+        select({ type: "node", flow: flowName, id: r.node.id });
+        setAnnouncement(m.added(r.node.label));
+    };
+    const palette = React.useMemo(() => paletteOf(registry), [registry]);
+    const options = selectedNode
+        ? connectOptions(flow, selectedNode, registry, definition, {
+            exit: m.exit,
+            port: m.port,
+            loop: m.loopHandle,
+            loopIn: m.loopInHandle,
+        })
+        : [];
+    return (_jsxs("section", { "aria-label": label ?? m.canvas, "data-slot": "workflow-canvas", className: cn("relative flex h-full min-h-80 flex-col overflow-hidden rounded-lg border bg-background", className), children: [_jsxs("div", { role: "toolbar", "aria-label": m.canvasTools, className: "flex flex-wrap items-center gap-1 border-b bg-card px-2 py-1.5", children: [readOnly ? (_jsx("span", { className: "px-1 text-xs text-muted-foreground", children: m.readOnly })) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "outline", children: [_jsx(PlusIcon, { "aria-hidden": true }), m.add] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-96 overflow-y-auto", children: palette.map((g, gi) => (_jsxs(DropdownMenuGroup, { children: [gi ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(DropdownMenuLabel, { children: g.module
+                                                        ? g.label
+                                                        : m.paletteGroup(g.key) }), g.items.map((item) => (_jsxs(DropdownMenuItem, { onSelect: () => add(item), children: [item.label ||
+                                                            (item.template.kind === "step"
+                                                                ? m.customStep
+                                                                : m.kind(item.template.kind)), item.available ? null : (_jsx("span", { className: "ml-auto text-2xs text-muted-foreground", children: m.notRun }))] }, item.key)))] }, g.key))) })] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !selectedNode, onClick: () => setConnecting(true), children: [_jsx(CableIcon, { "aria-hidden": true }), m.connectAction] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !selectedNode && !selectedEdge, onClick: () => remove(selectedNode ? [selectedNode.id] : [], selectedEdge ? [edgeId(selectedEdge)] : []), children: [_jsx(Trash2Icon, { "aria-hidden": true }), m.deleteSelection] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !flow.nodes.length, onClick: () => {
+                                    change(arrangeFlow(flow, registry, definition));
+                                    window.requestAnimationFrame(place);
+                                }, children: [_jsx(LayoutGridIcon, { "aria-hidden": true }), m.arrange] })] })), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": m.zoomOut, title: m.zoomOut, onClick: () => void view.zoomOut(), children: _jsx(ZoomOutIcon, { "aria-hidden": true }) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": m.zoomIn, title: m.zoomIn, onClick: () => void view.zoomIn(), children: _jsx(ZoomInIcon, { "aria-hidden": true }) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": m.fit, title: m.fit, onClick: place, children: _jsx(MaximizeIcon, { "aria-hidden": true }) })] })] }), _jsx("div", { ref: pane, className: "relative min-h-0 flex-1", children: _jsx(ReactFlow, { nodes: nodes, edges: built.edges, nodeTypes: NODE_TYPES, onInit: place, minZoom: READABLE_ZOOM, maxZoom: 1.5, panOnScroll: true, snapToGrid: true, snapGrid: [GRID, GRID], nodesDraggable: !readOnly, nodesConnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, elementsSelectable: true, multiSelectionKeyCode: null, selectionKeyCode: null, deleteKeyCode: readOnly ? null : ["Backspace", "Delete"], ariaLabelConfig: {
+                        "node.a11yDescription.default": m.nodeHelp,
+                        "node.a11yDescription.keyboardDisabled": m.nodeHelp,
+                        "node.a11yDescription.ariaLiveMessage": ({ direction, x, y }) => m.movedLive(direction, x, y),
+                        "edge.a11yDescription.default": m.edgeHelp,
+                    }, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onPaneClick: () => select(null), isValidConnection: (c) => canConnect(flow, {
+                        from: c.source,
+                        source: c.sourceHandle ?? OUT,
+                        to: c.target,
+                        target: c.targetHandle ?? IN,
+                    }, registry, definition).ok, onConnect: connect, 
+                    // One callback for a Delete key press: nodes and the edges touching them go in one edit.
+                    onDelete: ({ nodes: ns, edges: es }) => remove(ns.map((n) => n.id).filter(isReal), es.map((e) => e.id).filter((id) => realEdge(id))), children: _jsx(Background, { gap: GRID, size: 1, color: "var(--border)" }) }) }), _jsx("p", { role: "status", "data-slot": "workflow-canvas-live", className: "sr-only", children: announcement }), selectedNode && connecting ? (_jsx(ConnectDialog, { open: connecting, onOpenChange: setConnecting, from: selectedNode, options: options, onConnect: (source, to, target) => {
+                    connect({
+                        source: selectedNode.id,
+                        sourceHandle: source,
+                        target: to,
+                        targetHandle: target,
+                    });
+                    setConnecting(false);
+                } }, selectedNode.id)) : null] }));
+}