From 144e8cc797cfcc5a7a1fd9a0a2098dc99afb6170 Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 12 Feb 2026 23:37:42 +0100
Subject: [PATCH] fix: correctly highlight possible outputs

---
 .../graph-interface/node/NodeHeader.svelte    | 28 ++++++++++++++++---
 .../graph-interface/node/NodeParameter.svelte | 18 ++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/src/lib/graph-interface/node/NodeHeader.svelte b/app/src/lib/graph-interface/node/NodeHeader.svelte
index dae3399..5532b17 100644
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -45,9 +45,16 @@
       aspectRatio
     })
   );
+
+  const socketId = $derived(`${node.id}-${0}`);
 </script>
 
-<div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
+<div
+  class="wrapper"
+  data-node-id={node.id}
+  data-node-type={node.type}
+  class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
+>
   <div class="content">
     {#if appSettings.value.debug.advancedMode}
       <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
@@ -55,7 +62,7 @@
     {node.type.split('/').pop()}
   </div>
   <div
-    class="click-target"
+    class="target"
     role="button"
     tabindex="0"
     onmousedown={handleMouseDown}
@@ -83,7 +90,20 @@
     height: 50px;
   }
 
-  .click-target {
+  .possible-socket .target::before {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px var(--color-layer-3);
+    background-color: var(--color-layer-3);
+    outline: solid thin white;
+    opacity: 0.2;
+    z-index: -10;
+  }
+
+  .target {
     position: absolute;
     right: 0px;
     top: 50%;
@@ -94,7 +114,7 @@
     border-radius: 50%;
   }
 
-  .click-target:hover + svg path {
+  .target:hover + svg path {
     d: var(--hover-path);
   }
 
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte
index 09decc9..6cd890b 100644
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -120,9 +120,16 @@
     transform: translateY(-50%) translateX(-50%);
   }
 
-  .possible-socket .target {
-    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
-    background-color: rgba(255, 255, 255, 0.2);
+  .possible-socket .target::before {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px var(--color-layer-3);
+    background-color: var(--color-layer-3);
+    outline: solid thin white;
+    opacity: 0.2;
     z-index: -10;
   }
 
@@ -132,11 +139,12 @@
 
   .content {
     position: relative;
-    padding: 10px 20px;
     display: flex;
     flex-direction: column;
+    padding-inline: 20px;
     height: 100%;
-    justify-content: space-around;
+    justify-content: center;
+    gap: 10px;
     box-sizing: border-box;
   }