From 61e73397470f5c3467c3d490f76a4a10dd831bf9 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 9 Mar 2026 21:31:46 +1300
Subject: [PATCH] fix(47-02): remove bottom rounding from node ring when
 settings expanded

Add settingsExpanded prop to BaseNode. When true + selected, the node
div uses rounded-t-lg instead of rounded-lg so its ring has no bottom
rounding. Combined with InlineParameterPanel's overlapping ring with
rounded-b-lg, this creates a seamless continuous selection outline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/BaseNode.tsx          | 5 ++++-
 src/components/nodes/Generate3DNode.tsx    | 1 +
 src/components/nodes/GenerateAudioNode.tsx | 1 +
 src/components/nodes/GenerateImageNode.tsx | 1 +
 src/components/nodes/GenerateVideoNode.tsx | 1 +
 src/components/nodes/LLMGenerateNode.tsx   | 1 +
 6 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/nodes/BaseNode.tsx b/src/components/nodes/BaseNode.tsx
index 4160d480..e591b914 100644
--- a/src/components/nodes/BaseNode.tsx
+++ b/src/components/nodes/BaseNode.tsx
@@ -21,6 +21,8 @@ interface BaseNodeProps {
   fullBleed?: boolean;
   /** Media URL (image/video) to use for aspect-fit resize on resize-handle double-click */
   aspectFitMedia?: string | null;
+  /** When true, bottom corners lose rounding so the selection ring connects to the settings panel below */
+  settingsExpanded?: boolean;
 }
 
 /**
@@ -62,6 +64,7 @@ export function BaseNode({
   minHeight = 100,
   fullBleed = false,
   aspectFitMedia,
+  settingsExpanded = false,
 }: BaseNodeProps) {
   const currentNodeIds = useWorkflowStore((state) => state.currentNodeIds);
   const setHoveredNodeId = useWorkflowStore((state) => state.setHoveredNodeId);
@@ -127,7 +130,7 @@ export function BaseNode({
       <div
         className={`
           h-full w-full flex flex-col overflow-visible
-          ${fullBleed ? "rounded-lg bg-neutral-800/50 border border-neutral-700/40" : "bg-neutral-800 rounded-lg shadow-lg border"}
+          ${fullBleed ? `${settingsExpanded && selected ? "rounded-t-lg" : "rounded-lg"} bg-neutral-800/50 border border-neutral-700/40` : "bg-neutral-800 rounded-lg shadow-lg border"}
           ${fullBleed ? "" : (isCurrentlyExecuting || isExecuting ? "border-blue-500 ring-1 ring-blue-500/20" : "border-neutral-700/60")}
           ${fullBleed ? "" : (hasError ? "border-red-500" : "")}
           ${fullBleed && selected ? "ring-2 ring-blue-500/40 shadow-lg shadow-blue-500/25" : ""}
diff --git a/src/components/nodes/Generate3DNode.tsx b/src/components/nodes/Generate3DNode.tsx
index 37af8b1e..d61f258b 100644
--- a/src/components/nodes/Generate3DNode.tsx
+++ b/src/components/nodes/Generate3DNode.tsx
@@ -121,6 +121,7 @@ export function Generate3DNode({ id, data, selected }: NodeProps<Generate3DNodeT
     <BaseNode
       id={id}
       selected={selected}
+      settingsExpanded={inlineParametersEnabled && isParamsExpanded}
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
     >
diff --git a/src/components/nodes/GenerateAudioNode.tsx b/src/components/nodes/GenerateAudioNode.tsx
index 15e5236b..80e7f05d 100644
--- a/src/components/nodes/GenerateAudioNode.tsx
+++ b/src/components/nodes/GenerateAudioNode.tsx
@@ -232,6 +232,7 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
       <BaseNode
         id={id}
         selected={selected}
+        settingsExpanded={inlineParametersEnabled && isParamsExpanded}
         isExecuting={isRunning}
         hasError={nodeData.status === "error"}
         minWidth={300}
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 8950b669..aac513a0 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -536,6 +536,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
       fullBleed
+      settingsExpanded={inlineParametersEnabled && isParamsExpanded}
       aspectFitMedia={nodeData.outputImage}
     >
       {/* Input handles - ALWAYS use same IDs and positions for connection stability */}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index 106d050f..6aeedca7 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -444,6 +444,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
       isExecuting={isRunning}
       hasError={nodeData.status === "error"}
       fullBleed
+      settingsExpanded={inlineParametersEnabled && isParamsExpanded}
       aspectFitMedia={nodeData.outputVideo}
     >
       {/* Dynamic input handles based on model schema */}
diff --git a/src/components/nodes/LLMGenerateNode.tsx b/src/components/nodes/LLMGenerateNode.tsx
index 60083db0..bc932177 100644
--- a/src/components/nodes/LLMGenerateNode.tsx
+++ b/src/components/nodes/LLMGenerateNode.tsx
@@ -125,6 +125,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
       hasError={nodeData.status === "error"}
       isExecuting={isRunning}
       fullBleed
+      settingsExpanded={inlineParametersEnabled && isParamsExpanded}
     >
       {/* Image input - optional */}
       <Handle