feat(canvas): enhance edge insertion animations and update reflow duration

- Added a new CSS animation for edge insertion to improve visual feedback during node creation.
- Updated the edge insertion reflow duration from 997ms to 1297ms for smoother transitions.
- Refactored related components to support the new animation and ensure consistent behavior across the canvas.
- Enhanced tests to validate the new edge insertion features and animations.

app/globals.css

@@ -145,6 +145,17 @@
   }
 }
 
+@keyframes ls-edge-insert-enter {
+  0% {
+    opacity: 0;
+    scale: 0.82;
+  }
+  100% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
 .ls-connection-line-marching {
   animation: ls-connection-dash-offset 0.4s linear infinite;
 }
@@ -250,11 +261,18 @@
 
   .react-flow.canvas-edge-insert-reflowing .react-flow__node {
     transition-property: transform;
-    transition-duration: var(--ls-edge-insert-reflow-duration, 997ms);
+    transition-duration: var(--ls-edge-insert-reflow-duration, 1297ms);
     transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
     will-change: transform;
   }
 
+  .react-flow__node.canvas-edge-insert-enter,
+  .react-flow__node .canvas-edge-insert-enter {
+    animation: ls-edge-insert-enter 300ms cubic-bezier(0.68, -0.6, 0.32, 1.6) both;
+    transform-origin: center center;
+    will-change: scale, opacity;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .react-flow.canvas-scissors-mode .react-flow__edge:not(.temp) .react-flow__edge-path {
       transition: none;
@@ -263,5 +281,13 @@
     .react-flow.canvas-edge-insert-reflowing .react-flow__node {
       transition: none;
     }
+
+    .react-flow__node.canvas-edge-insert-enter,
+    .react-flow__node .canvas-edge-insert-enter {
+      animation: none;
+      opacity: 1;
+      scale: 1;
+      will-change: auto;
+    }
   }
 }