fix: veo handle connection and coordinate alignment issues

package.json

@@ -45,6 +45,7 @@
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^4.0.16",
+    "baseline-browser-mapping": "^2.10.0",
     "jsdom": "^27.4.0",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^6.0.4",

server.js

@@ -1,3 +1,4 @@
+// Modified with the help of Antigravity - Charlie
 // Custom Next.js server with extended timeout for video generation
 // Node.js default server.requestTimeout is 5 minutes (300,000ms)
 // We extend it to 10 minutes for long-running fal.ai video generation

src/app/page.tsx

@@ -1,3 +1,4 @@
+// Modified with the help of Antigravity - Charlie
 "use client";
 
 import { useEffect } from "react";

src/components/nodes/BaseNode.tsx

@@ -33,6 +33,7 @@ interface BaseNodeProps {
   headerButtons?: ReactNode;
   titlePrefix?: ReactNode;
   commentNavigation?: CommentNavigationProps;
+  handles?: ReactNode;
 }
 
 export function BaseNode({
@@ -56,6 +57,7 @@ export function BaseNode({
   headerButtons,
   titlePrefix,
   commentNavigation,
+  handles,
 }: BaseNodeProps) {
   const currentNodeIds = useWorkflowStore((state) => state.currentNodeIds);
   const groups = useWorkflowStore((state) => state.groups);
@@ -260,6 +262,14 @@ export function BaseNode({
           ${className}
         `}
       >
+        {/* Handles Overlay - Absolute sibling to everything else for perfect positioning */}
+        {handles && (
+          <div className="absolute inset-0 pointer-events-none z-10">
+            <div className="relative w-full h-full">
+              {handles}
+            </div>
+          </div>
+        )}
         <div className="px-3 pt-2 pb-1 flex items-center justify-between shrink-0">
           {/* Title Section */}
           <div className="flex-1 min-w-0 flex items-center gap-1.5">

src/components/nodes/GenerateImageNode.tsx

@@ -473,66 +473,17 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
       headerAction={headerAction}
       titlePrefix={titlePrefix}
       commentNavigation={commentNavigation ?? undefined}
+      handles={
+        <>
+          <Handle type="target" position={Position.Left} id="image" style={{ top: "35%" }} data-handletype="image" isConnectable={true} />
+          <div className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none text-right" style={{ right: `calc(100% + 8px)`, top: "calc(35% - 18px)", color: "var(--handle-color-image)" }}>Image</div>
+          <Handle type="target" position={Position.Left} id="text" style={{ top: "65%" }} data-handletype="text" isConnectable={true} />
+          <div className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none text-right" style={{ right: `calc(100% + 8px)`, top: "calc(65% - 18px)", color: "var(--handle-color-text)" }}>Prompt</div>
+          <Handle type="source" position={Position.Right} id="image" style={{ top: "50%" }} data-handletype="image" />
+          <div className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none" style={{ left: `calc(100% + 8px)`, top: "calc(50% - 18px)", color: "var(--handle-color-image)" }}>Image</div>
+        </>
+      }
     >
-      {/* Input handles - ALWAYS use same IDs and positions for connection stability */}
-      {/* Image input at 35%, Text input at 65% - never changes regardless of model */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="image"
-        style={{ top: "35%" }}
-        data-handletype="image"
-        isConnectable={true}
-      />
-      {/* Image label */}
-      <div
-        className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none text-right"
-        style={{
-          right: `calc(100% + 8px)`,
-          top: "calc(35% - 18px)",
-          color: "var(--handle-color-image)",
-        }}
-      >
-        Image
-      </div>
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="text"
-        style={{ top: "65%" }}
-        data-handletype="text"
-        isConnectable={true}
-      />
-      {/* Prompt label */}
-      <div
-        className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none text-right"
-        style={{
-          right: `calc(100% + 8px)`,
-          top: "calc(65% - 18px)",
-          color: "var(--handle-color-text)",
-        }}
-      >
-        Prompt
-      </div>
-      {/* Output handle */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="image"
-        style={{ top: "50%" }}
-        data-handletype="image"
-      />
-      {/* Output label */}
-      <div
-        className="absolute text-[10px] font-medium whitespace-nowrap pointer-events-none"
-        style={{
-          left: `calc(100% + 8px)`,
-          top: "calc(50% - 18px)",
-          color: "var(--handle-color-image)",
-        }}
-      >
-        Image
-      </div>
 
       <div className="flex-1 flex flex-col min-h-0 gap-2">
         {/* Preview area */}