fix: critical rotation bugs from senior review (C1,C2,H1-H4)

C1: sprite_collides_with_bubble_mask now rotates pixel coordinates
    before mask lookup. Previously treated rotated sprites as
    axis-aligned, causing incorrect font-size fitting for text in
    bubbles. Font was too large → text overflowed the bubble.

C2: centred_sprite_transform computes top-left such that the rotated
    sprite's visual center lands at the bubble center, instead of
    centering the unrotated sprite then rotating around top-left.
    Fixes visual center drift for rotated text.

H1: Range slider commits on both onPointerUp AND onBlur. Keyboard
    navigation (arrow keys) now reliably triggers rotation updates.

H2: +/- buttons now read from currentDeg (draft-aware) instead of
    selectedNode directly. Prevents discarding uncommitted drafts.

H3: Number input handles Escape: clears draft without committing.

H4: updateTransform wrapped in useCallback([page, applyOp,
    queueAutoRender]) to avoid stale closure during drag.

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

Author: zachelnet

crates/koharu-app/src/renderer.rs

@@ -712,12 +712,18 @@ fn sprite_collides_with_bubble_mask(
     let mask_w = mask.width() as i32;
     let mask_h = mask.height() as i32;
 
+    let rotation_rad = transform.rotation_deg.to_radians();
+    let cos = rotation_rad.cos();
+    let sin = rotation_rad.sin();
+
     for (x, y, pixel) in sprite.enumerate_pixels() {
         if pixel.0[3] <= MASK_COLLISION_ALPHA_THRESHOLD {
             continue;
         }
-        let mask_x = origin_x + x as i32;
-        let mask_y = origin_y + y as i32;
+        let fx = x as f32;
+        let fy = y as f32;
+        let mask_x = origin_x + (cos * fx - sin * fy).round() as i32;
+        let mask_y = origin_y + (sin * fx + cos * fy).round() as i32;
         if mask_x < 0 || mask_y < 0 || mask_x >= mask_w || mask_y >= mask_h {
             return true;
         }
@@ -993,9 +999,19 @@ fn centred_sprite_transform(
     let sprite_h = sprite_height as f32;
     let cx = anchor_box.x + anchor_box.width * 0.5;
     let cy = anchor_box.y + anchor_box.height * 0.5;
+
+    // The sprite is rotated around its top-left corner (CSS transform-origin model).
+    // Compute the top-left such that the sprite's visual center lands at (cx, cy).
+    let hw = sprite_w * 0.5;
+    let hh = sprite_h * 0.5;
+    let cos = rotation_deg.to_radians().cos();
+    let sin = rotation_deg.to_radians().sin();
+    let rotated_center_x = cos * hw - sin * hh;
+    let rotated_center_y = sin * hw + cos * hh;
+
     Transform {
-        x: (cx - sprite_w * 0.5).round(),
-        y: (cy - sprite_h * 0.5).round(),
+        x: (cx - rotated_center_x).round(),
+        y: (cy - rotated_center_y).round(),
         width: sprite_w,
         height: sprite_h,
         rotation_deg,

ui/components/canvas/TextBlockLayer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useDrag } from '@use-gesture/react'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import { useBlobImage } from '@/hooks/useBlobData'
 import { useCurrentPage, useTextNodes, type TextNodeEntry } from '@/hooks/useCurrentPage'
@@ -50,24 +50,27 @@ export function TextBlockLayer({ showSprites, scale, style }: TextBlockLayerProp
   const mode = useEditorUiStore((s) => s.mode)
   const interactive = mode === 'select' || mode === 'block'
 
-  const updateTransform = async (id: string, geometry: BoxGeometry) => {
-    if (!page) return
-    const rotationDeg = page.nodes[id]?.transform?.rotationDeg ?? 0
-    const next: Transform = {
-      x: geometry.x,
-      y: geometry.y,
-      width: geometry.width,
-      height: geometry.height,
-      rotationDeg,
-    }
-    const data: NodeDataPatch = {
-      text: {
-        lockLayoutBox: true,
-      },
-    }
-    await applyOp(ops.updateNode(page.id, id, { transform: next, data }))
-    queueAutoRender(page.id)
-  }
+  const updateTransform = useCallback(
+    async (id: string, geometry: BoxGeometry) => {
+      if (!page) return
+      const rotationDeg = page.nodes[id]?.transform?.rotationDeg ?? 0
+      const next: Transform = {
+        x: geometry.x,
+        y: geometry.y,
+        width: geometry.width,
+        height: geometry.height,
+        rotationDeg,
+      }
+      const data: NodeDataPatch = {
+        text: {
+          lockLayoutBox: true,
+        },
+      }
+      await applyOp(ops.updateNode(page.id, id, { transform: next, data }))
+      queueAutoRender(page.id)
+    },
+    [page, applyOp, queueAutoRender],
+  )
 
   return (
     <div

ui/components/panels/RenderControlsPanel.tsx

@@ -379,6 +379,20 @@ export function RenderControlsPanel() {
     setRotationDraft(null)
   }, [selectedNode?.id, selectedNode?.transform.rotationDeg])
 
+  const commitRotationDraft = () => {
+    if (rotationDraft == null) return
+    const parsed = Number.parseFloat(rotationDraft)
+    setRotationDraft(null)
+    if (!Number.isFinite(parsed)) return
+    void updateSelectedRotation(parsed)
+  }
+
+  // Current rotation value, preferring the draft when it's a valid number.
+  const currentDeg =
+    rotationDraft != null && Number.isFinite(Number.parseFloat(rotationDraft))
+      ? clampRotationDeg(Number.parseFloat(rotationDraft))
+      : (selectedNode?.transform.rotationDeg ?? 0)
+
   const effectItems: {
     key: 'italic' | 'bold'
     label: string
@@ -816,9 +830,7 @@ export function RenderControlsPanel() {
                 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)
-                }
+                onClick={() => void updateSelectedRotation(currentDeg - 1)}
               >
                 <MinusIcon className='size-3' />
               </Button>
@@ -842,13 +854,8 @@ export function RenderControlsPanel() {
             onChange={(event) => {
               setRotationDraft(event.target.value)
             }}
-            onPointerUp={() => {
-              if (rotationDraft == null) return
-              const parsed = Number.parseFloat(rotationDraft)
-              setRotationDraft(null)
-              if (!Number.isFinite(parsed)) return
-              void updateSelectedRotation(parsed)
-            }}
+            onPointerUp={commitRotationDraft}
+            onBlur={commitRotationDraft}
             className='h-7 min-w-0 flex-1 cursor-pointer accent-primary'
           />
 
@@ -864,16 +871,12 @@ export function RenderControlsPanel() {
               onChange={(event) => {
                 setRotationDraft(event.target.value)
               }}
-              onBlur={() => {
-                if (rotationDraft == null) return
-                const parsed = Number.parseFloat(rotationDraft)
-                setRotationDraft(null)
-                if (!Number.isFinite(parsed)) return
-                void updateSelectedRotation(parsed)
-              }}
+              onBlur={commitRotationDraft}
               onKeyDown={(event) => {
                 if (event.key === 'Enter') {
                   (event.target as HTMLInputElement).blur()
+                } else if (event.key === 'Escape') {
+                  setRotationDraft(null)
                 }
               }}
             />
@@ -887,9 +890,7 @@ export function RenderControlsPanel() {
               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)
-              }
+              onClick={() => void updateSelectedRotation(currentDeg + 1)}
             >
               <PlusIcon className='size-3' />
             </Button>