From 61af9abe01a34618c6cd7821b7fd64b221e73422 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 20 Apr 2026 06:27:09 +1200
Subject: [PATCH] feat: add HandleLabel component for centralized handle label
 rendering

Extracts the repeated ~10-line handle label pattern into a reusable
component with opacity-based fade transition (150ms ease-in-out)
instead of mount/unmount pop-in.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/HandleLabel.tsx | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/nodes/HandleLabel.tsx

diff --git a/src/components/nodes/HandleLabel.tsx b/src/components/nodes/HandleLabel.tsx
new file mode 100644
index 00000000..1cb589ec
--- /dev/null
+++ b/src/components/nodes/HandleLabel.tsx
@@ -0,0 +1,30 @@
+interface HandleLabelProps {
+  label: string;
+  side: "target" | "source";
+  color: string;
+  top?: string;
+  visible: boolean;
+  opacity?: number;
+}
+
+export function HandleLabel({ label, side, color, top = "calc(50% - 18px)", visible, opacity }: HandleLabelProps) {
+  const positionStyle = side === "target"
+    ? { right: "calc(100% + 8px)" }
+    : { left: "calc(100% + 8px)" };
+
+  return (
+    <div
+      className={`absolute text-[10px] font-medium whitespace-nowrap pointer-events-none${side === "target" ? " text-right" : ""}`}
+      style={{
+        ...positionStyle,
+        top,
+        color,
+        zIndex: 10,
+        opacity: visible ? (opacity ?? 1) : 0,
+        transition: "opacity 150ms ease-in-out",
+      }}
+    >
+      {label}
+    </div>
+  );
+}