Fix connection drag placeholder positioning and implement custom SVG connections

Replace jsPlumb with custom SVG-based connection system. Plumber handles connection drawing with face-aware anchor distribution (top/left/right). Fixed placeholder node positioning during drag-up by passing sourceX/sourceY in drag events. Updated tests for new routing logic and connection management API.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Author: Claude

src/flow/CanvasMenu.ts

@@ -98,14 +98,16 @@ export class CanvasMenu extends RapidElement {
   ): void {
     super.firstUpdated(_changedProperties);
 
-    // Close menu when clicking outside
+    // Close menu when clicking outside — use mousedown instead of click
+    // to avoid being triggered by the click synthesized from a drag-and-drop
+    // (mousedown on exit + mouseup on canvas = click on common ancestor)
     const handleClickOutside = (e: MouseEvent) => {
       if (this.open && !this.contains(e.target as Node)) {
         this.close();
       }
     };
 
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
 
     // Store cleanup function
     (this as any)._clickOutsideHandler = handleClickOutside;
@@ -114,7 +116,7 @@ export class CanvasMenu extends RapidElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     if ((this as any)._clickOutsideHandler) {
-      document.removeEventListener('click', (this as any)._clickOutsideHandler);
+      document.removeEventListener('mousedown', (this as any)._clickOutsideHandler);
     }
   }
 

src/flow/CanvasNode.ts

@@ -360,11 +360,7 @@ export class CanvasNode extends RapidElement {
         position: relative;
         box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
         cursor: pointer;
-        pointer-events: none;
-      }
-
-      .exit.jtk-connected {
-        background: var(--color-connectors, #e6e6e6);
+        pointer-events: all;
       }
 
       .exit.connected {
@@ -376,11 +372,14 @@ export class CanvasNode extends RapidElement {
         background-color: var(--color-connectors, #e6e6e6);
       }
 
-      .exit.connected.read-only, .exit.connected.read-only:hover {
-        background-color: #fff;
+      .exit.read-only, .exit.read-only:hover {
         pointer-events: none !important;
         cursor: default;
       }
+
+      .exit.connected.read-only, .exit.connected.read-only:hover {
+        background-color: #fff;
+      }
       
       .exit.removing, .exit.removing:hover {
         background-color: var(--color-error);