From 3e9cc2747a9471129517520e3707f9b1155ddf90 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Tue, 2 Jun 2026 15:58:41 +0200
Subject: [PATCH 1/3] Enhance node components with improved shadow effects for
 better visual depth

---
 .../app/routes/studio/canvas/nodetypes/child-node.tsx         | 4 ++--
 .../frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx | 2 +-
 .../app/routes/studio/canvas/nodetypes/frank-node.tsx         | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
index c9a6905e..718a2927 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
@@ -159,7 +159,7 @@ export function ChildNodeComponent({
     <div
       data-childnode-id={child.id}
       className={clsx(
-        'bg-background relative mr-0.5 mb-2 rounded-md border',
+        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-[3px_3px_6px_rgba(0,0,0,0.12)]',
         isSelected && 'border-1',
         !isSelected && dragForbidden && 'border-2 border-dashed',
         !isSelected && !dragForbidden && 'border-border',
@@ -197,7 +197,7 @@ export function ChildNodeComponent({
       </div>
 
       {/* Body */}
-      <div className="child-node-body relative min-h-25 px-1 py-1">
+      <div className="child-node-body relative min-h-25 rounded-b-md px-1 py-1 shadow-[inset_0px_3px_5px_rgba(0,0,0,0.08),inset_3px_0px_4px_rgba(0,0,0,0.05),inset_-3px_0px_4px_rgba(0,0,0,0.05)]">
         {child.attributes &&
           Object.entries(child.attributes).map(([key, value]) => (
             <div key={key} className="my-1">
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
index 330c76a7..36737b49 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
@@ -30,7 +30,7 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background flex h-full w-full flex-col items-center rounded-md border ${
+        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-[3px_3px_8px_rgba(0,0,0,0.15)] ${
           properties.selected ? 'border-blue-500' : 'border-border'
         }`}
         style={{
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index 3402c09e..d5d4a638 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -474,7 +474,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
+        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-[3px_3px_8px_rgba(0,0,0,0.15)] ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
         style={{
           minWidth: `${minNodeWidth}px`,
           ...(properties.selected && { borderColor: `var(${colorVariable})` }),
@@ -529,7 +529,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
           ))}
         {(properties.data.children.length > 0 || dragOver || canDropDraggedElement) && (
           <div className="w-full p-4">
-            <div className="border-border bg-background w-full rounded-md p-4 shadow-[inset_0px_2px_4px_rgba(0,0,0,0.1)]">
+            <div className="border-border bg-background w-full rounded-md p-4 shadow-[inset_0px_3px_6px_rgba(0,0,0,0.12),inset_3px_0px_5px_rgba(0,0,0,0.07),inset_-3px_0px_5px_rgba(0,0,0,0.07)]">
               {properties.data.children.map((child) => (
                 <div key={child.id} data-child-id={child.id} className="child-drop-zone">
                   <ChildNodeComponent

From 706cb2b01da0f669b599cbfc524623b722084fa5 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Wed, 3 Jun 2026 11:11:40 +0200
Subject: [PATCH 2/3] Refactor shadow effects in node components for improved
 visual consistency

---
 .../app/routes/studio/canvas/nodetypes/child-node.tsx         | 4 ++--
 .../frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx | 2 +-
 .../app/routes/studio/canvas/nodetypes/frank-node.tsx         | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
index 718a2927..377a2cd5 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
@@ -159,7 +159,7 @@ export function ChildNodeComponent({
     <div
       data-childnode-id={child.id}
       className={clsx(
-        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-[3px_3px_6px_rgba(0,0,0,0.12)]',
+        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-[4px_4px_6px_-2px_rgba(0,0,0,0.05)]',
         isSelected && 'border-1',
         !isSelected && dragForbidden && 'border-2 border-dashed',
         !isSelected && !dragForbidden && 'border-border',
@@ -197,7 +197,7 @@ export function ChildNodeComponent({
       </div>
 
       {/* Body */}
-      <div className="child-node-body relative min-h-25 rounded-b-md px-1 py-1 shadow-[inset_0px_3px_5px_rgba(0,0,0,0.08),inset_3px_0px_4px_rgba(0,0,0,0.05),inset_-3px_0px_4px_rgba(0,0,0,0.05)]">
+      <div className="child-node-body border-border/40 relative min-h-25 rounded-b-md border px-1 py-1">
         {child.attributes &&
           Object.entries(child.attributes).map(([key, value]) => (
             <div key={key} className="my-1">
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
index 36737b49..bb665a83 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
@@ -30,7 +30,7 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-[3px_3px_8px_rgba(0,0,0,0.15)] ${
+        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-[2px_3px_14px_rgba(0,0,0,0.06)] ${
           properties.selected ? 'border-blue-500' : 'border-border'
         }`}
         style={{
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index d5d4a638..65b07973 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -474,7 +474,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-[3px_3px_8px_rgba(0,0,0,0.15)] ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
+        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-[6px_6px_8px_-2px_rgba(0,0,0,0.05)] ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
         style={{
           minWidth: `${minNodeWidth}px`,
           ...(properties.selected && { borderColor: `var(${colorVariable})` }),
@@ -529,7 +529,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
           ))}
         {(properties.data.children.length > 0 || dragOver || canDropDraggedElement) && (
           <div className="w-full p-4">
-            <div className="border-border bg-background w-full rounded-md p-4 shadow-[inset_0px_3px_6px_rgba(0,0,0,0.12),inset_3px_0px_5px_rgba(0,0,0,0.07),inset_-3px_0px_5px_rgba(0,0,0,0.07)]">
+            <div className="border-border/40 bg-background w-full rounded-md border p-4 shadow-[inset_0_3px_6px_rgba(0,0,0,0.15)]">
               {properties.data.children.map((child) => (
                 <div key={child.id} data-child-id={child.id} className="child-drop-zone">
                   <ChildNodeComponent

From 6b23885b3d17ecf37ffdc491f65530c160aa1226 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Wed, 3 Jun 2026 11:57:36 +0200
Subject: [PATCH 3/3] Refactor shadow effects in node components for improved
 visual depth

---
 .../app/routes/studio/canvas/nodetypes/child-node.tsx         | 2 +-
 .../frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx | 2 +-
 .../app/routes/studio/canvas/nodetypes/frank-node.tsx         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
index 377a2cd5..ccab07d4 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx
@@ -159,7 +159,7 @@ export function ChildNodeComponent({
     <div
       data-childnode-id={child.id}
       className={clsx(
-        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-[4px_4px_6px_-2px_rgba(0,0,0,0.05)]',
+        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-[0_4px_6px_1px_rgba(0,0,0,0.05)]',
         isSelected && 'border-1',
         !isSelected && dragForbidden && 'border-2 border-dashed',
         !isSelected && !dragForbidden && 'border-border',
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
index bb665a83..893da520 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx
@@ -30,7 +30,7 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-[2px_3px_14px_rgba(0,0,0,0.06)] ${
+        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-[0_4px_6px_1px_rgba(0,0,0,0.05)] ${
           properties.selected ? 'border-blue-500' : 'border-border'
         }`}
         style={{
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index 65b07973..beff022d 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -474,7 +474,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-[6px_6px_8px_-2px_rgba(0,0,0,0.05)] ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
+        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-[0_4px_6px_1px_rgba(0,0,0,0.05)] ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
         style={{
           minWidth: `${minNodeWidth}px`,
           ...(properties.selected && { borderColor: `var(${colorVariable})` }),
@@ -529,7 +529,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
           ))}
         {(properties.data.children.length > 0 || dragOver || canDropDraggedElement) && (
           <div className="w-full p-4">
-            <div className="border-border/40 bg-background w-full rounded-md border p-4 shadow-[inset_0_3px_6px_rgba(0,0,0,0.15)]">
+            <div className="border-border/40 bg-background w-full rounded-md border p-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.15)]">
               {properties.data.children.map((child) => (
                 <div key={child.id} data-child-id={child.id} className="child-drop-zone">
                   <ChildNodeComponent