From f344ac6b0eb55709054b0befac99a9b806669ff1 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Mar 2026 02:23:34 +0800
Subject: [PATCH] fix(canvas): redesign compare toggle with larger hit target

---
 components/canvas/nodes/ImageNode.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index d51c049d2..7242e3b57 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -1717,12 +1717,15 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
               <button
                 type="button"
                 className={cn(
-                  "absolute right-2 top-1/2 z-[180] inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border text-white transition-colors",
+                  "absolute right-2 top-1/2 z-[220] inline-flex h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full border text-white transition-all data-[state=on]:scale-100",
                   isCompareMode
-                    ? "border-sky-200 bg-sky-500/90 shadow-[0_0_0_2px_rgba(255,255,255,0.55)]"
-                    : "border-white/75 bg-black/75 hover:bg-black/85"
+                    ? "border-sky-100 bg-sky-500/95 shadow-[0_0_0_3px_rgba(255,255,255,0.55),0_10px_22px_rgba(14,165,233,0.42)]"
+                    : "border-white/80 bg-black/78 shadow-[0_8px_18px_rgba(0,0,0,0.34)] hover:bg-black/88"
                 )}
+                data-state={isCompareMode ? "on" : "off"}
+                data-canvas-no-drag="true"
                 onPointerDown={(event) => {
+                  event.preventDefault();
                   event.stopPropagation();
                 }}
                 onClick={(event) => {
@@ -1734,15 +1737,16 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
               >
                 <svg
                   viewBox="0 0 24 24"
-                  className="h-5 w-5"
+                  className="h-6 w-6"
                   fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 >
-                  <rect x="3" y="5" width="18" height="14" rx="2" />
-                  <path d="M12 5v14" />
+                  <rect x="3" y="4" width="18" height="16" rx="4.5" />
+                  <path d="M12 4v16" />
+                  <circle cx="12" cy="12" r="2.8" fill="currentColor" stroke="none" />
                 </svg>
               </button>
             )}