Flow canvas: connecting

A working prototype of how steps connect on the flow canvas. It runs on React Flow 12 with the live canvas's look. Nothing in the product changes until he picks. Try the tasks under the canvas; each ticks itself when done.

Drag from any dot on the right of a step, or from the left edge of a step.

Loading the canvas…

Tasks to try

What changes

Start a wire anywhere: from any exit dot (28 px to grab, 44 px on touch), or backwards from a step's left edge.
Drop on the card: the whole card takes the wire. While dragging, cards that can take it light, the rest dim, and the wire snaps to a card within about 40 px.
Drop on empty canvas: the step picker opens there, and the new step arrives connected.
Move a wire: hover a wire, grab the ring at its arrow end, drop it on another card. Dropped on empty canvas, the wire is removed.
Insert: "+" on a hovered wire puts a step in the middle; dragging a loose step onto a wire splices it in.
"+" on every exit adds the next step and connects it.

Why the live canvas fails

A wire cannot start from a step's input: isConnectableStart={false} (flow-canvas-parts.tsx:108).
The input is an invisible 10 px target (flow-canvas-screen.css:596-606); the exit dot is 11 px with a 23 px click button (:545-547, :577-584).
The snap radius is 24 px (FlowCanvas.tsx:379).
A wire cannot be moved: no onReconnect anywhere in the canvas. It can only be deleted.
No insert on a wire and no splice by dragging.
Dropping on a card and on empty canvas already work (FlowCanvas.tsx:238-258), but nothing lights during the drag, so neither can be found.

Sources and licence

Built on @xyflow/react 12.11.0 (MIT, loaded from jsDelivr). The behaviour follows three free React Flow examples: Easy Connect, Reconnect Edge and Add Node On Edge Drop. None is marked as a Pro example on reactflow.dev (19 other examples are). No code was copied from them or from n8n; n8n is the benchmark for how it should feel.