Animate node size changes

src/app/globals.css

@@ -172,6 +172,11 @@ body {
   ::view-transition-new(root) {
     animation-duration: 1ms;
   }
+
+  .react-flow__node {
+    transition: filter 1ms linear !important;
+    will-change: auto !important;
+  }
 }
 
 /* React Flow customizations */
@@ -187,6 +192,11 @@ body {
 
 .react-flow__node {
   font-family: inherit;
+  transition:
+    width 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    filter 250ms ease-in-out;
+  will-change: width, height;
 }
 
 /* Skip hit-testing on images inside nodes — parent containers handle all
@@ -202,6 +212,12 @@ body {
   pointer-events: none;
 }
 
+.canvas-interacting .react-flow__node,
+.react-flow__node.resizing {
+  transition: none !important;
+  will-change: auto !important;
+}
+
 .canvas-default-cursor .react-flow,
 .canvas-default-cursor .react-flow__pane {
   cursor: default !important;
@@ -254,18 +270,15 @@ body {
 /* Switch dimming - nodes downstream of disabled Switch outputs */
 .react-flow__node.switch-dimmed {
   filter: brightness(0.62) saturate(0.55);
-  transition: filter 250ms ease-in-out;
 }
 
 /* Skip dimming - nodes skipped due to optional empty inputs */
 .react-flow__node.node-skipped {
   filter: brightness(0.55) saturate(0.45);
-  transition: filter 250ms ease-in-out;
 }
 
 .react-flow__node:not(.switch-dimmed):not(.node-skipped) {
   filter: none;
-  transition: filter 250ms ease-in-out;
 }
 
 .react-flow__node-group {