From 2f33598e57dac7cc57e66dc19ac22ee2063b29a2 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 21 Feb 2026 00:22:56 +0800
Subject: [PATCH] style: match canvas selected image border and corner handles

---
 components/canvas/CanvasWorkspace.tsx | 42 +++++++++++++--------------
 components/canvas/nodes/ImageNode.tsx |  2 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index 05ad0f5da..e95ff3a9e 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -39,7 +39,7 @@ function isNodeInViewport(
 export function CanvasWorkspace() {
   const SNAP_THRESHOLD = 10;
   const SNAP_GAP = 12;
-  const SELECTION_COLOR = "#3182ed";
+  const SELECTION_COLOR = "#27a8ff";
   const containerRef = useRef<HTMLDivElement>(null);
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 });
@@ -698,39 +698,39 @@ export function CanvasWorkspace() {
     const imageResizeHandleStyles = isImageNode
       ? {
           topRight: {
-            width: 12,
-            height: 12,
-            right: -6,
-            top: -6,
+            width: 16,
+            height: 16,
+            right: -8,
+            top: -8,
             borderRadius: 999,
-            border: `2px solid ${SELECTION_COLOR}`,
+            border: `3px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomRight: {
-            width: 12,
-            height: 12,
-            right: -6,
-            bottom: -6,
+            width: 16,
+            height: 16,
+            right: -8,
+            bottom: -8,
             borderRadius: 999,
-            border: `2px solid ${SELECTION_COLOR}`,
+            border: `3px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomLeft: {
-            width: 12,
-            height: 12,
-            left: -6,
-            bottom: -6,
+            width: 16,
+            height: 16,
+            left: -8,
+            bottom: -8,
             borderRadius: 999,
-            border: `2px solid ${SELECTION_COLOR}`,
+            border: `3px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           topLeft: {
-            width: 12,
-            height: 12,
-            left: -6,
-            top: -6,
+            width: 16,
+            height: 16,
+            left: -8,
+            top: -8,
             borderRadius: 999,
-            border: `2px solid ${SELECTION_COLOR}`,
+            border: `3px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
         }
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index cd1bbdad1..85e174861 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -1477,7 +1477,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
         className={cn(
           "relative w-full h-full bg-card rounded-[4px] overflow-hidden border shadow-sm transition-colors",
           isSelected
-            ? "border-[#3182ed] shadow-none"
+            ? "rounded-none border-[1.5px] border-[#27a8ff] shadow-none"
             : "border-transparent"
         )}
         onMouseEnter={() => setIsHovered(true)}