[rashidazarang]

What

Four small quality-of-life changes to how connecting and arranging feels on the canvas, adapted from studying how n8n and React Flow's own examples tune theirs:

1. Grid snapping — snapToGrid with a 12px grid (half the 24px background dot gap), so dragged nodes line up without needing an organize pass.

2. Magnetic handles — connectionRadius={60}: dropping a connection near a handle attaches it instead of silently cancelling. This is the single biggest "why didn't my connection take?" fix.

3. Duplicate-connection guard — hasEquivalentEdge (in graphUtils) compares connections after createEdge's handle normalization. It's enforced in both paths:

   • the store's addEdgeFromConnection now returns whether it added, and the connect tool toasts "These nodes are already connected" instead of stacking an invisible second edge;
   • isValidConnection gives the same feedback live during a drag.

   Reverse edges (b → a) and first loops are still allowed; a second identical edge/loop is not.

4. Calmer connection preview — the drag-out line waits 300ms before appearing, so an accidental press on a handle no longer flashes a stray line. When it appears it uses the same smooth-step styling as committed edges (var(--accent), dashed).

Tests

• graphUtils.test.ts: equivalence across default handles, reversed direction, distinct handle pairs, loops.
• store.test.ts: duplicate connect is a no-op (edge count and revision unchanged, so undo history stays clean), reverse edge and first loop still allowed.

npm test          # 31 passed + 7 companion (no new failures)
npm run build     # clean

Note: the two storage-failure tests in store.test.ts fail on main before this branch — that's #3, independent of this change.