From 402c70e5c421d44f0cebc0fbe9bc1b78e6105c3b Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 19:45:01 +1300
Subject: [PATCH] fix: restore GenerateImageNode handle visibility with z-index

Handles were painted behind the full-bleed image content since they
share the same stacking context. Adding zIndex: 10 to all handles
and their labels ensures they render on top of the image.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/GenerateImageNode.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 0e432bd4..9168a829 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -494,7 +494,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         type="target"
         position={Position.Left}
         id="image"
-        style={{ top: "35%" }}
+        style={{ top: "35%", zIndex: 10 }}
         data-handletype="image"
         isConnectable={true}
       />
@@ -505,6 +505,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
           right: `calc(100% + 8px)`,
           top: "calc(35% - 18px)",
           color: "var(--handle-color-image)",
+          zIndex: 10,
         }}
       >
         Image
@@ -513,7 +514,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         type="target"
         position={Position.Left}
         id="text"
-        style={{ top: "65%" }}
+        style={{ top: "65%", zIndex: 10 }}
         data-handletype="text"
         isConnectable={true}
       />
@@ -524,6 +525,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
           right: `calc(100% + 8px)`,
           top: "calc(65% - 18px)",
           color: "var(--handle-color-text)",
+          zIndex: 10,
         }}
       >
         Prompt
@@ -533,7 +535,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         type="source"
         position={Position.Right}
         id="image"
-        style={{ top: "50%" }}
+        style={{ top: "50%", zIndex: 10 }}
         data-handletype="image"
       />
       {/* Output label */}
@@ -543,6 +545,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
           left: `calc(100% + 8px)`,
           top: "calc(50% - 18px)",
           color: "var(--handle-color-image)",
+          zIndex: 10,
         }}
       >
         Image