fix(textbox-rotation): address PR review feedback

- Hoist ROTATE_CURSOR_MAP to module-level constant (avoid per-render allocs).
- Use local string draft state for rotation number input so '-' and
  intermediate values can be typed (commit on blur/Enter).
- Add unit tests for overlay_sprite_with_rotation (0°/90°/180°) and
  rotate_sprite_expand_top_left (0°/90°).
- Add UI test for rotation plus button dispatching updateNode.
- Add data-testid attributes on rotation +/- buttons.

Co-authored-by: DeepSeek V4 <deepseek@v4.ai>

Author: zachelnet

crates/koharu-app/src/renderer.rs

@@ -1472,4 +1472,83 @@ mod tests {
         assert_eq!(transform.x, 150.0);
         assert_eq!(transform.y, 125.0);
     }
+
+    // ------------------------------------------------------------------
+    // Rotation helpers
+    // ------------------------------------------------------------------
+
+    fn make_test_sprite(w: u32, h: u32) -> RgbaImage {
+        let mut img = RgbaImage::new(w, h);
+        // Paint a solid red pixel so we can verify the output is not empty.
+        img.put_pixel(0, 0, Rgba([255, 0, 0, 255]));
+        img
+    }
+
+    fn make_transform(x: f32, y: f32, rotation_deg: f32) -> Transform {
+        Transform {
+            x,
+            y,
+            width: 100.0,
+            height: 50.0,
+            rotation_deg,
+        }
+    }
+
+    #[test]
+    fn overlay_sprite_no_rotation_is_identity() {
+        let mut canvas = RgbaImage::new(300, 300);
+        let sprite = make_test_sprite(20, 20);
+        let transform = make_transform(50.0, 50.0, 0.0);
+        overlay_sprite_with_rotation(&mut canvas, &sprite, &transform, false);
+        // An unrotated sprite at (50, 50) should leave a red pixel there.
+        assert_eq!(canvas.get_pixel(50, 50), &Rgba([255, 0, 0, 255]));
+    }
+
+    #[test]
+    fn overlay_sprite_90deg_rotates() {
+        let mut canvas = RgbaImage::new(600, 600);
+        // A large sprite in the center should stay visible after any rotation.
+        let sprite = make_test_sprite(100, 100);
+        let transform = make_transform(250.0, 250.0, 90.0);
+        // The function must not panic.
+        overlay_sprite_with_rotation(&mut canvas, &sprite, &transform, false);
+    }
+
+    #[test]
+    fn overlay_sprite_180deg_rotates() {
+        let mut canvas = RgbaImage::new(600, 600);
+        let sprite = make_test_sprite(100, 100);
+        let transform = make_transform(250.0, 250.0, 180.0);
+        overlay_sprite_with_rotation(&mut canvas, &sprite, &transform, false);
+        // Must not panic.
+    }
+
+    #[test]
+    fn rotate_sprite_expand_zero_angle_is_identity() {
+        let src = make_test_sprite(20, 10);
+        let (rotated, min_x, min_y) = rotate_sprite_expand_top_left(&src, 0.0);
+        assert_eq!(rotated.width(), src.width());
+        assert_eq!(rotated.height(), src.height());
+        assert_eq!(min_x, 0.0);
+        assert_eq!(min_y, 0.0);
+        // The red pixel at (0,0) should be preserved.
+        assert_eq!(rotated.get_pixel(0, 0), &Rgba([255, 0, 0, 255]));
+    }
+
+    #[test]
+    fn rotate_sprite_expand_90deg_swaps_dimensions() {
+        let src = make_test_sprite(40, 20);
+        let (rotated, _min_x, _min_y) = rotate_sprite_expand_top_left(&src, std::f32::consts::FRAC_PI_2);
+        // A 90° rotation swaps width and height, plus bilinear rounding = roughly 20×40.
+        assert!(
+            rotated.width() >= 20 && rotated.width() <= 22,
+            "expected ~20-22 wide, got {}",
+            rotated.width()
+        );
+        assert!(
+            rotated.height() >= 39 && rotated.height() <= 41,
+            "expected ~39-41 tall, got {}",
+            rotated.height()
+        );
+    }
 }

ui/components/canvas/TextBlockLayer.tsx

@@ -25,15 +25,16 @@ type BoxGeometry = {
 }
 
 /** Rotate a CSS resize-cursor name by the given degrees (snapped to 45° steps). */
+const ROTATE_CURSOR_MAP: Record<string, readonly string[]> = {
+  'ns-resize':   ['ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize'],
+  'ew-resize':   ['ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize'],
+  'nwse-resize': ['nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize'],
+  'nesw-resize': ['nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize'],
+}
+
 const rotateCursor = (cursor: string, deg: number): string => {
   const steps = Math.round(((deg % 360) + 360) % 360 / 45) % 8
-  const map: Record<string, string[]> = {
-    'ns-resize':   ['ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize'],
-    'ew-resize':   ['ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize'],
-    'nwse-resize': ['nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize'],
-    'nesw-resize': ['nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize',   'nesw-resize', 'ew-resize',   'nwse-resize', 'ns-resize'],
-  }
-  return map[cursor]?.[steps] ?? cursor
+  return ROTATE_CURSOR_MAP[cursor]?.[steps] ?? cursor
 }
 
 /**

ui/components/panels/RenderControlsPanel.tsx

@@ -364,6 +364,16 @@ export function RenderControlsPanel() {
     queueAutoRender(page.id)
   }
 
+  // Local draft state for the rotation number input so that intermediate
+  // values like "-" (needed to type negative angles) are not discarded by
+  // the controlled-input cycle.
+  const [rotationDraft, setRotationDraft] = useState<string | null>(null)
+
+  // Sync the draft when selected node or its rotation changes externally.
+  useEffect(() => {
+    setRotationDraft(null)
+  }, [selectedNode?.id, selectedNode?.transform.rotationDeg])
+
   const effectItems: {
     key: 'italic' | 'bold'
     label: string
@@ -799,6 +809,7 @@ export function RenderControlsPanel() {
                 variant='ghost'
                 size='icon-sm'
                 className='size-7 shrink-0 rounded-r-none border-r'
+                data-testid='render-rotation-minus'
                 disabled={!selectedNode}
                 onClick={() =>
                   void updateSelectedRotation((selectedNode?.transform.rotationDeg ?? 0) - 1)
@@ -836,12 +847,22 @@ export function RenderControlsPanel() {
               className='h-7 w-14 min-w-0 [appearance:textfield] rounded-none border-0 px-1 text-center text-xs shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
               data-testid='render-rotation-input'
               disabled={!selectedNode}
-              value={selectedNode?.transform.rotationDeg ?? 0}
+              value={rotationDraft ?? String(selectedNode?.transform.rotationDeg ?? 0)}
               onChange={(event) => {
-                const parsed = Number.parseFloat(event.target.value)
+                setRotationDraft(event.target.value)
+              }}
+              onBlur={() => {
+                if (rotationDraft == null) return
+                const parsed = Number.parseFloat(rotationDraft)
+                setRotationDraft(null)
                 if (!Number.isFinite(parsed)) return
                 void updateSelectedRotation(parsed)
               }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  (event.target as HTMLInputElement).blur()
+                }
+              }}
             />
             <span className='flex h-7 w-5 items-center justify-center text-[10px] text-muted-foreground'>
               °
@@ -851,6 +872,7 @@ export function RenderControlsPanel() {
               variant='ghost'
               size='icon-sm'
               className='size-7 shrink-0 rounded-l-none border-l'
+              data-testid='render-rotation-plus'
               disabled={!selectedNode}
               onClick={() =>
                 void updateSelectedRotation((selectedNode?.transform.rotationDeg ?? 0) + 1)

ui/tests/components/RenderControlsPanel.test.tsx

@@ -199,4 +199,18 @@ describe('RenderControlsPanel Font Assignment', () => {
     expect(op.updateNode.id).toBe('t1')
     expect(op.updateNode.patch.data.text.style.color).toEqual([0, 0, 0, 255])
   })
+
+  it('changing rotation via the + button dispatches updateNode with rotationDeg updated', async () => {
+    renderWithQuery(<RenderControlsPanel />)
+    useSelectionStore.getState().select('t1', false)
+
+    const plusBtn = await screen.findByTestId('render-rotation-plus')
+    await userEvent.click(plusBtn)
+
+    await waitFor(() => expect(sceneActions.applyOp).toHaveBeenCalled())
+    const op = (sceneActions.applyOp as any).mock.calls[0][0]
+    expect(op.updateNode.id).toBe('t1')
+    expect(op.updateNode.patch.transform.rotationDeg).toBe(1)
+    expect(sceneActions.queueAutoRender).toHaveBeenCalled()
+  })
 })