From 262367976b56cf04affeae2e31cf525a3468a714 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 07:41:45 +1300
Subject: [PATCH 1/6] fix: add rounded corners to ImageInput image and
 InlineParameterPanel settings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ImageInputNode.tsx       | 2 +-
 src/components/nodes/InlineParameterPanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/nodes/ImageInputNode.tsx b/src/components/nodes/ImageInputNode.tsx
index 71c825c6..efc6faf1 100644
--- a/src/components/nodes/ImageInputNode.tsx
+++ b/src/components/nodes/ImageInputNode.tsx
@@ -111,7 +111,7 @@ export function ImageInputNode({ id, data, selected }: NodeProps<ImageInputNodeT
           <img
             src={nodeData.image}
             alt={nodeData.filename || "Uploaded image"}
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover rounded-lg"
           />
           <button
             onClick={handleRemove}
diff --git a/src/components/nodes/InlineParameterPanel.tsx b/src/components/nodes/InlineParameterPanel.tsx
index 92539f30..b0964ba2 100644
--- a/src/components/nodes/InlineParameterPanel.tsx
+++ b/src/components/nodes/InlineParameterPanel.tsx
@@ -57,7 +57,7 @@ function InlineParameterPanelInner({
       {/* Content area — smooth height animation */}
       <div
         id={`params-${nodeId}`}
-        className="nodrag nopan nowheel bg-[#2a2a2a] overflow-hidden transition-[max-height] duration-150 ease-out"
+        className="nodrag nopan nowheel bg-[#2a2a2a] overflow-hidden transition-[max-height] duration-150 ease-out rounded-b-lg"
         style={{ maxHeight: expanded ? contentHeight : 0 }}
       >
         <div ref={contentRef} className="px-3 pt-2 pb-3 rounded-b-lg">

From dee900b85753461213c9996a7b76d27082306243 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 07:56:01 +1300
Subject: [PATCH 2/6] style: update ArrayNode layout to match new design
 language

Replace old input/select styling with bg-[#1a1a1a] rounded-md pattern,
switch grid layouts to flex, add rotating chevron for Advanced toggle,
tighten parsed items container and auto-resize formula, and update
default dimensions from 360x360 to 340x260 for a more compact node.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ArrayNode.tsx | 118 ++++++++++++++---------------
 src/store/utils/nodeDefaults.ts    |   2 +-
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/nodes/ArrayNode.tsx b/src/components/nodes/ArrayNode.tsx
index 8fb4b4af..f1c4b78c 100644
--- a/src/components/nodes/ArrayNode.tsx
+++ b/src/components/nodes/ArrayNode.tsx
@@ -156,9 +156,10 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
 
   // Auto-resize node height to fit all parsed lines so users don't need to scroll.
   useEffect(() => {
-    const baseHeight = 360;
-    const perItemHeight = 30;
-    const newHeight = Math.max(baseHeight, 270 + previewItems.length * perItemHeight);
+    const headerHeight = 180;
+    const perItemHeight = 28;
+    const itemsMinHeight = 60;
+    const newHeight = headerHeight + Math.max(itemsMinHeight, previewItems.length * perItemHeight + 8);
 
     setNodes((nodes) =>
       nodes.map((node) => {
@@ -174,8 +175,8 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
       id={id}
       selected={selected}
       hasError={!!nodeData.error}
-      minWidth={320}
-      minHeight={300}
+      minWidth={300}
+      minHeight={220}
     >
       <Handle type="target" position={Position.Left} id="text" data-handletype="text" />
 
@@ -187,7 +188,7 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         type="button"
         onClick={handleAutoRouteToPrompts}
         disabled={previewItems.length === 0}
-        className="nodrag nopan absolute top-2 right-2 z-10 shrink-0 p-1 rounded border border-neutral-600 bg-neutral-800/90 text-neutral-300 hover:bg-neutral-700 hover:text-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="nodrag nopan absolute top-2 right-2 z-10 shrink-0 p-1 bg-[#1a1a1a] rounded-md text-neutral-400 hover:text-neutral-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         title="Auto-route to Prompts"
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -196,12 +197,12 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
       </button>
 
       <div className="flex flex-col gap-2 flex-1 min-h-0">
-        <div className="grid grid-cols-[auto_1fr] gap-2 items-center">
-          <label className="text-[11px] text-neutral-400">Split</label>
+        <div className="flex items-center gap-2">
+          <label className="shrink-0 text-[11px] text-neutral-400">Split</label>
           <select
             value={nodeData.splitMode}
             onChange={handleBasicModeChange}
-            className="nodrag nopan bg-neutral-900 border border-neutral-700 rounded px-2 py-1 text-[11px] text-neutral-100 focus:outline-none focus:ring-1 focus:ring-neutral-600"
+            className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
           >
             <option value="delimiter">Delimiter</option>
             <option value="newline">Newline</option>
@@ -210,69 +211,69 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         </div>
 
         {nodeData.splitMode === "delimiter" && (
-          <div className="grid grid-cols-[auto_1fr] gap-2 items-center">
-            <label className="text-[11px] text-neutral-400">By</label>
+          <div className="flex items-center gap-2">
+            <label className="shrink-0 text-[11px] text-neutral-400">By</label>
             <input
               value={nodeData.delimiter}
               onChange={(e) => updateNodeData(id, { delimiter: e.target.value })}
               placeholder="*"
-              className="nodrag nopan bg-neutral-900 border border-neutral-700 rounded px-2 py-1 text-[11px] text-neutral-100 focus:outline-none focus:ring-1 focus:ring-neutral-600"
+              className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
             />
           </div>
         )}
 
         {nodeData.splitMode === "regex" && (
-          <div className="grid grid-cols-[auto_1fr] gap-2 items-center">
-            <label className="text-[11px] text-neutral-400">By</label>
+          <div className="flex items-center gap-2">
+            <label className="shrink-0 text-[11px] text-neutral-400">By</label>
             <input
               value={nodeData.regexPattern}
               onChange={(e) => updateNodeData(id, { regexPattern: e.target.value })}
               placeholder="/\\n+/"
-              className="nodrag nopan bg-neutral-900 border border-neutral-700 rounded px-2 py-1 text-[11px] text-neutral-100 focus:outline-none focus:ring-1 focus:ring-neutral-600"
+              className="nodrag nopan flex-1 min-w-0 text-[11px] py-1 px-2 bg-[#1a1a1a] rounded-md focus:outline-none focus:ring-1 focus:ring-neutral-600 text-white"
             />
           </div>
         )}
 
-        <div className="border border-neutral-700 rounded">
+        <div>
           <button
             type="button"
             onClick={() => setShowAdvanced((v) => !v)}
-            className="nodrag nopan w-full flex items-center justify-between px-2 py-1 text-[11px] text-neutral-300 hover:bg-neutral-800/50"
+            className="nodrag nopan flex items-center gap-1 text-[11px] text-neutral-500 hover:text-neutral-300 transition-colors"
           >
+            <svg className={`w-3 h-3 transition-transform ${showAdvanced ? "rotate-90" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
             <span>Advanced</span>
-            <span className="text-[10px] text-neutral-500">{showAdvanced ? "Hide" : "Show"}</span>
           </button>
 
           {showAdvanced && (
-            <div className="px-2 pb-2 pt-1 flex flex-col gap-2 border-t border-neutral-700">
-              <div className="flex items-center gap-3">
-                <label className="flex items-center gap-1.5 text-[11px] text-neutral-300">
-                  <input
-                    type="checkbox"
-                    checked={nodeData.trimItems}
-                    onChange={(e) => updateNodeData(id, { trimItems: e.target.checked })}
-                    className="nodrag nopan w-3 h-3"
-                  />
-                  Trim
-                </label>
-                <label className="flex items-center gap-1.5 text-[11px] text-neutral-300">
-                  <input
-                    type="checkbox"
-                    checked={nodeData.removeEmpty}
-                    onChange={(e) => updateNodeData(id, { removeEmpty: e.target.checked })}
-                    className="nodrag nopan w-3 h-3"
-                  />
-                  Remove empty
-                </label>
-              </div>
+            <div className="px-2 pt-1.5 pb-0.5 flex items-center gap-3">
+              <label className="flex items-center gap-1.5 text-[11px] text-neutral-300">
+                <input
+                  type="checkbox"
+                  checked={nodeData.trimItems}
+                  onChange={(e) => updateNodeData(id, { trimItems: e.target.checked })}
+                  className="nodrag nopan w-3 h-3 rounded bg-[#1a1a1a] text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
+                />
+                Trim
+              </label>
+              <label className="flex items-center gap-1.5 text-[11px] text-neutral-300">
+                <input
+                  type="checkbox"
+                  checked={nodeData.removeEmpty}
+                  onChange={(e) => updateNodeData(id, { removeEmpty: e.target.checked })}
+                  className="nodrag nopan w-3 h-3 rounded bg-[#1a1a1a] text-neutral-600 focus:ring-1 focus:ring-neutral-600 focus:ring-offset-0"
+                />
+                Remove empty
+              </label>
             </div>
           )}
         </div>
 
-        <div className="text-[10px] uppercase tracking-wide text-neutral-500">
+        <div className="mt-1 text-[10px] uppercase tracking-wide text-neutral-500">
           Parsed Items ({previewItems.length})
         </div>
-        <div className="relative flex-1 min-h-[90px] border border-neutral-700 rounded bg-neutral-900/40">
+        <div className="relative min-h-[50px] border border-neutral-700/40 rounded-md bg-[#1a1a1a]">
           {nodeData.error ? (
             <div className="p-2 text-[11px] text-red-400">{nodeData.error}</div>
           ) : previewItems.length === 0 ? (
@@ -282,24 +283,23 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
               {previewItems.map((item, index) => {
                 const isSelected = nodeData.selectedOutputIndex === index;
                 return (
-                  <div key={`${index}-${item}`} className="relative pr-8">
-                    <button
-                      type="button"
-                      onClick={() =>
-                        updateNodeData(id, {
-                          selectedOutputIndex: isSelected ? null : index,
-                        })
-                      }
-                      className={`nodrag nopan w-[calc(100%-1rem)] mx-2 my-1 rounded border px-2 py-1 text-[11px] text-left truncate transition-colors ${
-                        isSelected
-                          ? "border-blue-500 bg-blue-900/40 text-blue-200"
-                          : "border-neutral-700 bg-neutral-900/80 text-neutral-200 hover:bg-neutral-800"
-                      }`}
-                      title={isSelected ? "Selected for next connection (click to unselect)" : "Click to select for next connection"}
-                    >
-                      {index + 1}. {item}
-                    </button>
-                  </div>
+                  <button
+                    key={`${index}-${item}`}
+                    type="button"
+                    onClick={() =>
+                      updateNodeData(id, {
+                        selectedOutputIndex: isSelected ? null : index,
+                      })
+                    }
+                    className={`nodrag nopan w-[calc(100%-1rem)] mx-2 my-0.5 rounded-md px-2 py-1 text-[11px] text-left truncate transition-colors ${
+                      isSelected
+                        ? "bg-blue-900/40 text-blue-200 ring-1 ring-blue-500/60"
+                        : "bg-neutral-800/60 text-neutral-300 hover:bg-neutral-700/60"
+                    }`}
+                    title={isSelected ? "Selected for next connection (click to unselect)" : "Click to select for next connection"}
+                  >
+                    {index + 1}. {item}
+                  </button>
                 );
               })}
             </div>
diff --git a/src/store/utils/nodeDefaults.ts b/src/store/utils/nodeDefaults.ts
index d22f67d3..fd450fc6 100644
--- a/src/store/utils/nodeDefaults.ts
+++ b/src/store/utils/nodeDefaults.ts
@@ -39,7 +39,7 @@ export const defaultNodeDimensions: Record<NodeType, { width: number; height: nu
   audioInput: { width: 300, height: 200 },
   annotation: { width: 300, height: 280 },
   prompt: { width: 320, height: 220 },
-  array: { width: 360, height: 360 },
+  array: { width: 340, height: 260 },
   promptConstructor: { width: 340, height: 280 },
   nanoBanana: { width: 300, height: 300 },
   generateVideo: { width: 300, height: 300 },

From b6c98e964302d2e0808720e8c9ff17ced80b9925 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 07:59:33 +1300
Subject: [PATCH 3/6] style: add top padding and max-width to ArrayNode top
 fields

Add pt-1 to content area so fields don't hug the top edge, and
max-w-[75%] to the Split/By field rows so they don't extend behind
the auto-route button icon.

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

diff --git a/src/components/nodes/ArrayNode.tsx b/src/components/nodes/ArrayNode.tsx
index f1c4b78c..8c8f09ea 100644
--- a/src/components/nodes/ArrayNode.tsx
+++ b/src/components/nodes/ArrayNode.tsx
@@ -196,8 +196,8 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         </svg>
       </button>
 
-      <div className="flex flex-col gap-2 flex-1 min-h-0">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-col gap-2 pt-1 flex-1 min-h-0">
+        <div className="flex items-center gap-2 max-w-[75%]">
           <label className="shrink-0 text-[11px] text-neutral-400">Split</label>
           <select
             value={nodeData.splitMode}
@@ -211,7 +211,7 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         </div>
 
         {nodeData.splitMode === "delimiter" && (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 max-w-[75%]">
             <label className="shrink-0 text-[11px] text-neutral-400">By</label>
             <input
               value={nodeData.delimiter}
@@ -223,7 +223,7 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         )}
 
         {nodeData.splitMode === "regex" && (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 max-w-[75%]">
             <label className="shrink-0 text-[11px] text-neutral-400">By</label>
             <input
               value={nodeData.regexPattern}

From 2c14d97a7cd7cbcf1986d472f51a8481038eddda Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 08:02:39 +1300
Subject: [PATCH 4/6] style: increase ArrayNode top padding to match side
 padding (px-3)

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

diff --git a/src/components/nodes/ArrayNode.tsx b/src/components/nodes/ArrayNode.tsx
index 8c8f09ea..c1ffefb2 100644
--- a/src/components/nodes/ArrayNode.tsx
+++ b/src/components/nodes/ArrayNode.tsx
@@ -196,7 +196,7 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         </svg>
       </button>
 
-      <div className="flex flex-col gap-2 pt-1 flex-1 min-h-0">
+      <div className="flex flex-col gap-2 pt-3 flex-1 min-h-0">
         <div className="flex items-center gap-2 max-w-[75%]">
           <label className="shrink-0 text-[11px] text-neutral-400">Split</label>
           <select

From 23f6adabf9b5765d1e5214258e52415286682202 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 08:26:33 +1300
Subject: [PATCH 5/6] fix: ensure auto-routed prompts retain correct individual
 item text

The PromptNode text-sync effect can overwrite the per-item text set by
addNode before edge arrayItemIndex data is fully settled. Add a deferred
fix-up pass (setTimeout 0) that re-applies the correct text after React
effects have run.

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

diff --git a/src/components/nodes/ArrayNode.tsx b/src/components/nodes/ArrayNode.tsx
index c1ffefb2..ce6ed0db 100644
--- a/src/components/nodes/ArrayNode.tsx
+++ b/src/components/nodes/ArrayNode.tsx
@@ -125,12 +125,15 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
     const promptHeight = 220;
     const verticalGap = 24;
 
+    const promptNodeIds: string[] = [];
+
     items.forEach((item, index) => {
       const promptNodeId = addNode(
         "prompt",
         { x: baseX, y: baseY + index * (promptHeight + verticalGap) },
         { prompt: item }
       );
+      promptNodeIds.push(promptNodeId);
 
       // Pass the array item index directly as an edge data override
       // instead of mutating selectedOutputIndex in a loop.
@@ -144,7 +147,16 @@ export function ArrayNode({ id, data, selected }: NodeProps<ArrayNodeType>) {
         { arrayItemIndex: index }
       );
     });
-  }, [addNode, getNodes, id, onConnect, previewItems]);
+
+    // Deferred fix-up: the PromptNode text-sync effect may overwrite the
+    // individual item text before the edge arrayItemIndex data is fully
+    // settled. Re-apply the correct per-item text after effects have run.
+    setTimeout(() => {
+      items.forEach((item, index) => {
+        updateNodeData(promptNodeIds[index], { prompt: item });
+      });
+    }, 0);
+  }, [addNode, getNodes, id, onConnect, previewItems, updateNodeData]);
 
   // Reset selection if it no longer points to a valid parsed item.
   useEffect(() => {

From b2e543a39c56fb8d0720d8725618deb79ec70d29 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 12 Mar 2026 08:38:25 +1300
Subject: [PATCH 6/6] release: v1.1.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md | 13 +++++++++++++
 package.json |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f01326b..a5403feb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+## [1.1.1] - 2026-03-12
+
+### Fixed
+
+- Ensure auto-routed prompts retain correct individual item text
+- Add rounded corners to ImageInput image and InlineParameterPanel settings
+
+### Other
+
+- Increase ArrayNode top padding to match side padding
+- Add top padding and max-width to ArrayNode top fields
+- Update ArrayNode layout to match new design language
+
 ## [1.1.0] - 2026-03-12
 
 ### Added
diff --git a/package.json b/package.json
index 1fe2e27d..33752622 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "node-banana",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "dev": "node server.js",