React Flow canvas geometry

Getting something to appear at the right place on an @xyflow/react canvas means answering three questions: where is the handle, where does the curve put the label, and how big is the node. Each has a non-obvious answer, and the first two have an answer that is wrong in a way that looks right.

For checking the result visually, drive the app in a real browser/window rather than trusting a static read of the coordinates.

The rule: import the maths, don't retype it

@xyflow/react re-exports the geometry helpers. Inside a renderer there is no reason to reimplement any of this:

import { getBezierPath, getBezierEdgeCenter, getSmoothStepPath, getStraightPath,
         getEdgeCenter, getNodesBounds } from "@xyflow/react";