From e7810601636a02a0cbf9384bd4c7ae8b1d49f9ab Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 20:55:50 +1300
Subject: [PATCH] fix: add z-index to OutputNode handles so they paint above
 content

The content div's `relative` positioning creates a stacking context that
paints over the handles. Adding zIndex: 10 matches the pattern used by
GenerateImageNode and GenerateVideoNode.

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

diff --git a/src/components/nodes/OutputNode.tsx b/src/components/nodes/OutputNode.tsx
index 2dc3de9a..b8c1d924 100644
--- a/src/components/nodes/OutputNode.tsx
+++ b/src/components/nodes/OutputNode.tsx
@@ -120,13 +120,14 @@ export function OutputNode({ id, data, selected }: NodeProps<OutputNodeType>) {
           position={Position.Left}
           id="image"
           data-handletype="image"
+          style={{ zIndex: 10 }}
         />
         <Handle
           type="target"
           position={Position.Left}
           id="audio"
           data-handletype="audio"
-          style={{ top: "60%", background: "rgb(167, 139, 250)" }}
+          style={{ top: "60%", background: "rgb(167, 139, 250)", zIndex: 10 }}
         />
 
         {contentSrc ? (