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

@@ -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>
+  );
+}