From 2d09e39878a3acdb75ee8a899506ba35316c76a9 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 21 Feb 2026 00:38:15 +0800
Subject: [PATCH] style: align canvas selection border and handle stroke

---
 components/canvas/CanvasWorkspace.tsx | 43 ++++++++++++++-------------
 components/canvas/nodes/ImageNode.tsx |  2 +-
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index e95ff3a9e..8ba816512 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -40,6 +40,9 @@ export function CanvasWorkspace() {
   const SNAP_THRESHOLD = 10;
   const SNAP_GAP = 12;
   const SELECTION_COLOR = "#27a8ff";
+  const SELECTION_STROKE_WIDTH = 2;
+  const IMAGE_HANDLE_SIZE = 12;
+  const IMAGE_HANDLE_OFFSET = IMAGE_HANDLE_SIZE / 2;
   const containerRef = useRef<HTMLDivElement>(null);
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 });
@@ -698,39 +701,39 @@ export function CanvasWorkspace() {
     const imageResizeHandleStyles = isImageNode
       ? {
           topRight: {
-            width: 16,
-            height: 16,
-            right: -8,
-            top: -8,
+            width: IMAGE_HANDLE_SIZE,
+            height: IMAGE_HANDLE_SIZE,
+            right: -IMAGE_HANDLE_OFFSET,
+            top: -IMAGE_HANDLE_OFFSET,
             borderRadius: 999,
-            border: `3px solid ${SELECTION_COLOR}`,
+            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomRight: {
-            width: 16,
-            height: 16,
-            right: -8,
-            bottom: -8,
+            width: IMAGE_HANDLE_SIZE,
+            height: IMAGE_HANDLE_SIZE,
+            right: -IMAGE_HANDLE_OFFSET,
+            bottom: -IMAGE_HANDLE_OFFSET,
             borderRadius: 999,
-            border: `3px solid ${SELECTION_COLOR}`,
+            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomLeft: {
-            width: 16,
-            height: 16,
-            left: -8,
-            bottom: -8,
+            width: IMAGE_HANDLE_SIZE,
+            height: IMAGE_HANDLE_SIZE,
+            left: -IMAGE_HANDLE_OFFSET,
+            bottom: -IMAGE_HANDLE_OFFSET,
             borderRadius: 999,
-            border: `3px solid ${SELECTION_COLOR}`,
+            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           topLeft: {
-            width: 16,
-            height: 16,
-            left: -8,
-            top: -8,
+            width: IMAGE_HANDLE_SIZE,
+            height: IMAGE_HANDLE_SIZE,
+            left: -IMAGE_HANDLE_OFFSET,
+            top: -IMAGE_HANDLE_OFFSET,
             borderRadius: 999,
-            border: `3px solid ${SELECTION_COLOR}`,
+            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
         }
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 85e174861..63613dabf 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
-            ? "rounded-none border-[1.5px] border-[#27a8ff] shadow-none"
+            ? "rounded-none border-[2px] border-[#27a8ff] shadow-none"
             : "border-transparent"
         )}
         onMouseEnter={() => setIsHovered(true)}