fix(canvas): hide rotate button during drag/transform, clean up cursor on unmount

Addresses gemini review on PR #53:
- Hide the quick-rotate button while a drag or transform is in progress.
  The button's position is React-state-driven and would otherwise lag
  behind the live Konva node until the interaction ends.
- Reset the stage cursor when the button unmounts. Without this, deleting
  or deselecting the object while the cursor is over the button would
  leave the pointer stuck in 'pointer' style because onMouseLeave never
  fires.

Author: u8array

src/components/Canvas/LabelCanvas.tsx

@@ -394,6 +394,21 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
     : null;
   const stepRotation = singleSelected ? getStepRotation(singleSelected) : null;
   const [rotationBtnPos, setRotationBtnPos] = useState<{ x: number; y: number } | null>(null);
+  // Hide the rotate affordance during an active drag / transform — the
+  // button's position is React-state-driven and would otherwise lag behind
+  // the live Konva node until the interaction ends.
+  const [isInteracting, setIsInteracting] = useState(false);
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const start = () => setIsInteracting(true);
+    const end = () => setIsInteracting(false);
+    stage.on("dragstart.rotbtn transformstart.rotbtn", start);
+    stage.on("dragend.rotbtn transformend.rotbtn", end);
+    return () => {
+      stage.off("dragstart.rotbtn transformstart.rotbtn dragend.rotbtn transformend.rotbtn");
+    };
+  }, []);
   useLayoutEffect(() => {
     if (!singleSelected || !stepRotation) {
       setRotationBtnPos(null);
@@ -804,7 +819,7 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
               ignoreStroke
             />
 
-            {rotationBtnPos && (
+            {rotationBtnPos && !isInteracting && (
               <RotationButton
                 x={rotationBtnPos.x}
                 y={rotationBtnPos.y}

src/components/Canvas/RotationButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Group, Circle, Path } from "react-konva";
 import type Konva from "konva";
 
@@ -32,18 +32,33 @@ const ICON_OFFSET = 12; // 24x24 viewBox → centre at (12, 12)
 
 export function RotationButton({ x, y, color, onClick }: Props) {
   const [hover, setHover] = useState(false);
+  // Track the stage we set a cursor on so unmount-while-hovering can still
+  // clean up (onMouseLeave never fires in that case — e.g. user hits Delete
+  // or Esc while the cursor is over the button).
+  const cursorStageRef = useRef<Konva.Stage | null>(null);
 
   const cursorIn = (e: Konva.KonvaEventObject<MouseEvent>) => {
     const stage = e.target.getStage();
-    if (stage) stage.container().style.cursor = "pointer";
+    if (stage) {
+      stage.container().style.cursor = "pointer";
+      cursorStageRef.current = stage;
+    }
     setHover(true);
   };
   const cursorOut = (e: Konva.KonvaEventObject<MouseEvent>) => {
     const stage = e.target.getStage();
     if (stage) stage.container().style.cursor = "";
+    cursorStageRef.current = null;
     setHover(false);
   };
 
+  useEffect(() => {
+    return () => {
+      const stage = cursorStageRef.current;
+      if (stage) stage.container().style.cursor = "";
+    };
+  }, []);
+
   return (
     <Group
       x={x}