Flow diagrams, graph visualizations, and multi-step workflows require edges connecting two nodes on a canvas. Without a primitive, you redraw SVG line math, stroke styling, padding calculations, and dash patterns every time. Teams end up with inconsistent line styles across the whiteboard, flowchart, and slide editors—and agent code that resolves node positions and invokes custom SVG logic instead of reusing a shared edge component.

Connector is a pure SVG line primitive that renders a single edge between two world-space Point objects (from and to). Props control stroke color, width, and dash pattern; the component handles absolute positioning and padding math internally. It is stateless and read-only—designed to be embedded in a canvas renderer where the host app owns point resolution (itemId → coordinates) and connection semantics.

Import from @particle-academy/fancy-whiteboard, pass <Connector from=&{{ x: 100, y: 50 }} to=&{{ x: 300, y: 200 }} color="#3b82f6" width=&{2} />. For graph connectors, resolve node positions in your render loop and map each edge through Connector; the host app (not the component) decides whether from/to reference itemIds or literal points.