feat: implemented text block rotation

- Rotation slider in Render panel (-180°..180°) with range, ±1° stepper
  buttons, and direct numeric input — rotation is committed via the
  existing Op::UpdateNode pipeline and auto-rendered.
- Rust renderer compositing: overlay_sprite_with_rotation rotates
  rendered sprites via bilinear sampling. Zero-cost fast-path when
  rotation ≈ 0° (direct imageops::overlay).
- Rotation-aware resize: pointer deltas are projected to box-local
  axes (cos/sin) so edge handles behave intuitively on rotated blocks.
- Block indicator and sprite apply rotation via CSS transform.
- Resize-handle cursors follow the visual edge orientation at 45°
  steps (ns↔ew, nwse↔nesw).
- Badge number counter-rotates to stay horizontal at any angle.
- Panel layout: Render panel uses natural content height (no fixed
  h-60) so all sections fit without forced scrolling.
- i18n: rotationLabel added to all 9 locales with translations.

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

Author: zachelnet

crates/koharu-app/src/renderer.rs

@@ -13,7 +13,7 @@ use std::{
 };
 
 use anyhow::{Context, Result};
-use image::{DynamicImage, GrayImage, RgbaImage, imageops};
+use image::{DynamicImage, GrayImage, Rgba, RgbaImage, imageops};
 use koharu_core::{
     FontFaceInfo, FontPrediction, FontSource, NodeId, TextDirection, TextShaderEffect,
     TextStrokeStyle, TextStyle, Transform,
@@ -202,8 +202,15 @@ impl Renderer {
             imageops::overlay(&mut canvas, &brush.to_rgba8(), 0, 0);
         }
         for out in &rendered_blocks {
-            let (x, y) = placement_origin(find_input(blocks, out.node_id), &out.expanded_transform);
-            imageops::overlay(&mut canvas, &out.sprite.to_rgba8(), x as i64, y as i64);
+            let input = find_input(blocks, out.node_id);
+            let is_expanded = out.expanded_transform.is_some();
+            let sprite_transform = out.expanded_transform.as_ref().unwrap_or(&input.transform);
+            overlay_sprite_with_rotation(
+                &mut canvas,
+                &out.sprite.to_rgba8(),
+                sprite_transform,
+                is_expanded,
+            );
         }
         Ok(RenderOutput {
             final_render: DynamicImage::ImageRgba8(canvas),
@@ -1002,12 +1009,142 @@ fn find_input(blocks: &[RenderBlockInput], id: NodeId) -> &RenderBlockInput {
         .expect("rendered_block must have matching input")
 }
 
-fn placement_origin(input: &RenderBlockInput, expanded: &Option<Transform>) -> (f32, f32) {
-    if let Some(t) = expanded {
-        (t.x.round(), t.y.round())
-    } else {
-        (input.transform.x, input.transform.y)
+fn overlay_sprite_with_rotation(
+    canvas: &mut RgbaImage,
+    sprite: &RgbaImage,
+    transform: &Transform,
+    is_expanded: bool,
+) {
+    let mut rotation_deg = transform.rotation_deg % 360.0;
+    if rotation_deg < 0.0 {
+        rotation_deg += 360.0;
+    }
+
+    if rotation_deg.abs() < 0.0001 || (360.0 - rotation_deg).abs() < 0.0001 {
+        // Preserve legacy placement: expanded transforms were rounded,
+        // non-expanded (original) transforms were truncated (cast to i64).
+        let (ox, oy) = if is_expanded {
+            (transform.x.round() as i64, transform.y.round() as i64)
+        } else {
+            (transform.x as i64, transform.y as i64)
+        };
+        imageops::overlay(canvas, sprite, ox, oy);
+        return;
+    }
+
+    let (rotated, min_x, min_y) = rotate_sprite_expand_top_left(sprite, rotation_deg.to_radians());
+    let origin_x = (transform.x + min_x).round() as i64;
+    let origin_y = (transform.y + min_y).round() as i64;
+    imageops::overlay(canvas, &rotated, origin_x, origin_y);
+}
+
+fn rotate_sprite_expand_top_left(src: &RgbaImage, angle_rad: f32) -> (RgbaImage, f32, f32) {
+    let src_w = src.width();
+    let src_h = src.height();
+    if src_w == 0 || src_h == 0 {
+        return (src.clone(), 0.0, 0.0);
+    }
+
+    let cos = angle_rad.cos();
+    let sin = angle_rad.sin();
+    let corners = [
+        rotate_point_top_left(0.0, 0.0, cos, sin),
+        rotate_point_top_left(src_w as f32, 0.0, cos, sin),
+        rotate_point_top_left(0.0, src_h as f32, cos, sin),
+        rotate_point_top_left(src_w as f32, src_h as f32, cos, sin),
+    ];
+
+    let min_x = corners
+        .iter()
+        .map(|(x, _)| *x)
+        .fold(f32::INFINITY, f32::min);
+    let max_x = corners
+        .iter()
+        .map(|(x, _)| *x)
+        .fold(f32::NEG_INFINITY, f32::max);
+    let min_y = corners
+        .iter()
+        .map(|(_, y)| *y)
+        .fold(f32::INFINITY, f32::min);
+    let max_y = corners
+        .iter()
+        .map(|(_, y)| *y)
+        .fold(f32::NEG_INFINITY, f32::max);
+
+    let dst_w = (max_x - min_x).ceil().max(1.0) as u32;
+    let dst_h = (max_y - min_y).ceil().max(1.0) as u32;
+
+    let mut dst = RgbaImage::new(dst_w, dst_h);
+    for y in 0..dst_h {
+        for x in 0..dst_w {
+            let world_x = x as f32 + min_x;
+            let world_y = y as f32 + min_y;
+            // Inverse of CSS-like rotate(theta):
+            // x' =  cos*x - sin*y
+            // y' =  sin*x + cos*y
+            let src_x = cos * world_x + sin * world_y;
+            let src_y = -sin * world_x + cos * world_y;
+            dst.put_pixel(x, y, sample_bilinear_rgba(src, src_x, src_y));
+        }
+    }
+    (dst, min_x, min_y)
+}
+
+fn rotate_point_top_left(x: f32, y: f32, cos: f32, sin: f32) -> (f32, f32) {
+    // Matches CSS rotate(theta) matrix.
+    (cos * x - sin * y, sin * x + cos * y)
+}
+
+fn sample_bilinear_rgba(src: &RgbaImage, x: f32, y: f32) -> Rgba<u8> {
+    let max_x = src.width() as f32 - 1.0;
+    let max_y = src.height() as f32 - 1.0;
+    if x < 0.0 || y < 0.0 || x > max_x || y > max_y {
+        return Rgba([0, 0, 0, 0]);
+    }
+
+    let x0 = x.floor();
+    let y0 = y.floor();
+    let x1 = (x0 + 1.0).min(max_x);
+    let y1 = (y0 + 1.0).min(max_y);
+
+    let wx = x - x0;
+    let wy = y - y0;
+
+    let get_premul = |px: &image::Rgba<u8>| -> [f32; 4] {
+        let a = px.0[3] as f32 / 255.0;
+        [
+            px.0[0] as f32 * a,
+            px.0[1] as f32 * a,
+            px.0[2] as f32 * a,
+            px.0[3] as f32,
+        ]
+    };
+
+    let p00 = get_premul(src.get_pixel(x0 as u32, y0 as u32));
+    let p10 = get_premul(src.get_pixel(x1 as u32, y0 as u32));
+    let p01 = get_premul(src.get_pixel(x0 as u32, y1 as u32));
+    let p11 = get_premul(src.get_pixel(x1 as u32, y1 as u32));
+
+    let lerp = |a: f32, b: f32, t: f32| a + (b - a) * t;
+    let mut out = [0u8; 4];
+    for i in 0..3 {
+        let top = lerp(p00[i], p10[i], wx);
+        let bottom = lerp(p01[i], p11[i], wx);
+        out[i] = lerp(top, bottom, wy).round().clamp(0.0, 255.0) as u8;
+    }
+    // Alpha is interpolated in straight-alpha space (premultiplied alpha = original alpha).
+    let top_a = lerp(p00[3], p10[3], wx);
+    let bottom_a = lerp(p01[3], p11[3], wx);
+    let alpha = lerp(top_a, bottom_a, wy).round().clamp(0.0, 255.0);
+    out[3] = alpha as u8;
+
+    // Un-premultiply: divide R, G, B by alpha (unless fully transparent).
+    if alpha > 0.0 {
+        for i in 0..3 {
+            out[i] = ((out[i] as f32) * 255.0 / alpha).round().clamp(0.0, 255.0) as u8;
+        }
     }
+    Rgba(out)
 }
 
 // ---------------------------------------------------------------------------

ui/components/Panels.tsx

@@ -26,7 +26,7 @@ export function Panels() {
     <div className='flex h-full min-h-0 w-full flex-col border-l bg-muted/50'>
       <Tabs
         defaultValue='layers'
-        className='h-60 shrink-0 gap-0 border-b border-border'
+        className='shrink-0 gap-0 border-b border-border'
         data-testid='panels-settings-tabs'
       >
         <TabsList className='m-2 mb-0 grid w-[calc(100%-1rem)] grid-cols-2 bg-muted/70'>
@@ -46,24 +46,20 @@ export function Panels() {
 
         <TabsContent
           value='layers'
-          className='min-h-0 flex-1 px-1 pb-2 data-[state=inactive]:hidden'
+          className='overflow-y-auto max-h-60 px-1 pb-2 data-[state=inactive]:hidden'
           data-testid='panels-layers'
         >
-          <ScrollArea className='h-full' viewportClassName='pr-1'>
-            <LayersPanel />
-          </ScrollArea>
+          <LayersPanel />
         </TabsContent>
 
         <TabsContent
           value='layout'
-          className='min-h-0 flex-1 px-2 pb-2 data-[state=inactive]:hidden'
+          className='overflow-y-auto px-2 pb-2 data-[state=inactive]:hidden'
           data-testid='panels-layout'
         >
-          <ScrollArea className='h-full' viewportClassName='pr-1 [&>div]:!block'>
-            <div className='pt-1'>
-              <RenderControlsPanel />
-            </div>
-          </ScrollArea>
+          <div className='pt-1'>
+            <RenderControlsPanel />
+          </div>
         </TabsContent>
       </Tabs>