feat(canvas): implement edge insertion reflow and enhance connection validation

- Introduced a new CSS transition for edge insertion reflowing to improve visual feedback during node adjustments.
- Enhanced the connection validation logic to include options for optimistic edges, ensuring better handling of edge creation scenarios.
- Updated the canvas connection drop menu to support additional templates and improved edge insertion handling.
- Refactored edge insertion logic to accommodate local node position adjustments during reflow operations.
- Added tests for new edge insertion features and connection validation improvements.

components/canvas/canvas-connection-drop-menu.tsx

@@ -32,6 +32,7 @@ type CanvasConnectionDropMenuProps = {
   anchor: CanvasMenuAnchor | null;
   onClose: () => void;
   onPick: (template: CanvasNodeTemplate) => void;
+  templates?: readonly CanvasNodeTemplate[];
 };
 
 const PANEL_MAX_W = 360;
@@ -41,6 +42,7 @@ export function CanvasConnectionDropMenu({
   anchor,
   onClose,
   onPick,
+  templates,
 }: CanvasConnectionDropMenuProps) {
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -109,6 +111,7 @@ export function CanvasConnectionDropMenu({
               onClose();
             }}
             groupHeading="Knoten"
+            templates={templates}
           />
         </CommandList>
       </Command>