fix(ui): center sprite overlay rotation, tighten tests

- BlockSprite now rotates around center (transformOrigin: center)
  matching the renderer's overlay_sprite_with_rotation centering.
  Fixes visual offset between UI overlay and rendered output for
  rotated text blocks.
- 90°/180° overlay tests now assert non-transparent pixels exist.
- 90° expand test uses exact assert_eq (fast path, no resampling).

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

Author: zachelnet

crates/koharu-app/src/renderer.rs

@@ -1597,11 +1597,10 @@ mod tests {
     #[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);
+        assert!(canvas.pixels().any(|p| p.0[3] != 0));
     }
 
     #[test]
@@ -1610,7 +1609,7 @@ mod tests {
         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.
+        assert!(canvas.pixels().any(|p| p.0[3] != 0));
     }
 
     #[test]
@@ -1630,15 +1629,17 @@ mod tests {
         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 {}",
+        // 90° rotation swaps width and height exactly (fast path, no resampling).
+        assert_eq!(
+            rotated.width(),
+            20,
+            "expected 20 wide, got {}",
             rotated.width()
         );
-        assert!(
-            rotated.height() >= 39 && rotated.height() <= 41,
-            "expected ~39-41 tall, got {}",
+        assert_eq!(
+            rotated.height(),
+            40,
+            "expected 40 tall, got {}",
             rotated.height()
         );
     }

ui/components/canvas/TextBlockLayer.tsx

@@ -314,6 +314,10 @@ function BlockSprite({ node, scale }: { node: TextNodeEntry; scale: number }) {
   const x = (spriteT?.x ?? node.transform.x) * scale
   const y = (spriteT?.y ?? node.transform.y) * scale
   const rotation = spriteT?.rotationDeg ?? node.transform.rotationDeg ?? 0
+  // Renderer centers the rotated sprite; match that model by rotating
+  // around the sprite's center rather than top-left.
+  const cx = x + node.transform.width * scale * 0.5
+  const cy = y + node.transform.height * scale * 0.5
   return (
     <img
       alt=''
@@ -323,8 +327,8 @@ function BlockSprite({ node, scale }: { node: TextNodeEntry; scale: number }) {
       style={{
         top: 0,
         left: 0,
-        transformOrigin: 'top left',
-        transform: `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${scale})`,
+        transformOrigin: 'center center',
+        transform: `translate(${cx}px, ${cy}px) rotate(${rotation}deg) scale(${scale})`,
       }}
     />
   )