feat: text tool UX, image crop, text format toolbar, double-click focus

- Text tool: click-to-place immediately opens inline editor, auto-switches
  back to select tool. Empty text cleanup on save.
- Crop: select image + press C (or right-click > Crop) to enter crop mode.
  8 drag handles with rule-of-thirds grid, dimmed outside area.
  Enter confirms, Escape cancels. Non-destructive (stored as normalized rect).
- Text format toolbar: appears when text items selected, with font size +/-,
  font family dropdown, and color picker with presets.
- Double-click image: zoom-to-fit (PureRef-style focus)
- Entrance animation: replaced bounce with simple fade-in (no delay before
  items become interactive)
- TextEditor: allow empty text (caller handles cleanup)

frontend/src/canvas/CropOverlay.ts

@@ -0,0 +1,270 @@
+/**
+ * CropOverlay — interactive crop handles over an image.
+ *
+ * Shows a crop rectangle with 8 drag handles and a dimmed area outside.
+ * The overlay is positioned in world-space as a child of the viewport.
+ * All crop values are normalized 0-1 relative to the image's natural dimensions.
+ */
+
+import { Container, Graphics, FederatedPointerEvent } from 'pixi.js';
+import type { Viewport } from 'pixi-viewport';
+import type { SceneItem } from './SceneManager';
+import type { ImageObject, CropRect } from './scene-format';
+import { ImageSprite } from './sprites/ImageSprite';
+
+const HANDLE_SIZE = 8;
+const HANDLE_FILL = 0xffffff;
+const HANDLE_STROKE = 0x4a90d9;
+const BORDER_COLOR = 0x4a90d9;
+const DIM_ALPHA = 0.6;
+const MIN_CROP = 0.05; // minimum 5% of image in each dimension
+
+type HandleId = 'tl' | 'tc' | 'tr' | 'ml' | 'mr' | 'bl' | 'bc' | 'br';
+
+export class CropOverlay extends Container {
+  private _item: SceneItem | null = null;
+  private _viewport: Viewport;
+  private _dim: Graphics;
+  private _border: Graphics;
+  private _handles = new Map<HandleId, Graphics>();
+  private _crop: CropRect = { x: 0, y: 0, w: 1, h: 1 };
+  private _drag: { handleId: HandleId; startCrop: CropRect } | null = null;
+  private _onConfirm: ((item: SceneItem, crop: CropRect) => void) | null = null;
+  private _onCancel: (() => void) | null = null;
+  private _keyHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  constructor(viewport: Viewport) {
+    super();
+    this._viewport = viewport;
+    this.label = '__crop_overlay';
+    this.visible = false;
+    this.eventMode = 'static';
+
+    // Dim overlay (darkens area outside crop)
+    this._dim = new Graphics();
+    this._dim.eventMode = 'none';
+    this.addChild(this._dim);
+
+    // Crop border
+    this._border = new Graphics();
+    this._border.eventMode = 'none';
+    this.addChild(this._border);
+
+    // Create handles
+    const ids: HandleId[] = ['tl', 'tc', 'tr', 'ml', 'mr', 'bl', 'bc', 'br'];
+    const cursors: Record<HandleId, string> = {
+      tl: 'nwse-resize', tr: 'nesw-resize', bl: 'nesw-resize', br: 'nwse-resize',
+      tc: 'ns-resize', bc: 'ns-resize', ml: 'ew-resize', mr: 'ew-resize',
+    };
+    for (const id of ids) {
+      const h = new Graphics();
+      h.eventMode = 'static';
+      h.cursor = cursors[id];
+      h.on('pointerdown', (e: FederatedPointerEvent) => this._onDown(e, id));
+      h.on('globalpointermove', (e: FederatedPointerEvent) => this._onMove(e));
+      h.on('pointerup', () => this._onUp());
+      h.on('pointerupoutside', () => this._onUp());
+      this._handles.set(id, h);
+      this.addChild(h);
+    }
+  }
+
+  set onConfirm(fn: (item: SceneItem, crop: CropRect) => void) { this._onConfirm = fn; }
+  set onCancel(fn: () => void) { this._onCancel = fn; }
+
+  /** Start cropping the given image item. */
+  start(item: SceneItem): void {
+    if (item.type !== 'image') return;
+    this._item = item;
+    const imgData = item.data as ImageObject;
+    this._crop = imgData.crop ? { ...imgData.crop } : { x: 0, y: 0, w: 1, h: 1 };
+    this.visible = true;
+    this._draw();
+
+    // Key bindings
+    this._keyHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') { e.preventDefault(); this.confirm(); }
+      if (e.key === 'Escape') { e.preventDefault(); this.cancel(); }
+    };
+    window.addEventListener('keydown', this._keyHandler);
+  }
+
+  /** Confirm the crop and apply it. */
+  confirm(): void {
+    if (!this._item) return;
+    const item = this._item;
+    const crop = { ...this._crop };
+    // If crop is full image, remove it
+    const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999;
+    this._cleanup();
+    this._onConfirm?.(item, isFullImage ? { x: 0, y: 0, w: 1, h: 1 } : crop);
+  }
+
+  /** Cancel cropping — restore original state. */
+  cancel(): void {
+    this._cleanup();
+    this._onCancel?.();
+  }
+
+  get isActive(): boolean { return this._item !== null; }
+
+  private _cleanup(): void {
+    this._item = null;
+    this._drag = null;
+    this.visible = false;
+    if (this._keyHandler) {
+      window.removeEventListener('keydown', this._keyHandler);
+      this._keyHandler = null;
+    }
+  }
+
+  private _draw(): void {
+    if (!this._item) return;
+    const data = this._item.data;
+    const zoom = this._viewport.scale.x;
+
+    // Image world rect
+    const ix = data.x;
+    const iy = data.y;
+    const iw = data.w * data.sx;
+    const ih = data.h * data.sy;
+
+    // Crop rect in world space
+    const cx = ix + this._crop.x * iw;
+    const cy = iy + this._crop.y * ih;
+    const cw = this._crop.w * iw;
+    const ch = this._crop.h * ih;
+
+    // Dim: draw full image rect, then cut out the crop area using inverted mask approach
+    // Simpler: draw 4 dim rectangles around the crop area
+    this._dim.clear();
+    // Top
+    if (cy > iy) {
+      this._dim.rect(ix, iy, iw, cy - iy);
+      this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
+    }
+    // Bottom
+    const cropBottom = cy + ch;
+    if (cropBottom < iy + ih) {
+      this._dim.rect(ix, cropBottom, iw, iy + ih - cropBottom);
+      this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
+    }
+    // Left
+    if (cx > ix) {
+      this._dim.rect(ix, cy, cx - ix, ch);
+      this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
+    }
+    // Right
+    const cropRight = cx + cw;
+    if (cropRight < ix + iw) {
+      this._dim.rect(cropRight, cy, ix + iw - cropRight, ch);
+      this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
+    }
+
+    // Border around crop area
+    this._border.clear();
+    this._border.rect(cx, cy, cw, ch);
+    this._border.stroke({ color: BORDER_COLOR, width: 1.5 / zoom });
+
+    // Rule of thirds lines
+    const thirdW = cw / 3;
+    const thirdH = ch / 3;
+    for (let i = 1; i <= 2; i++) {
+      this._border.moveTo(cx + thirdW * i, cy);
+      this._border.lineTo(cx + thirdW * i, cy + ch);
+      this._border.moveTo(cx, cy + thirdH * i);
+      this._border.lineTo(cx + cw, cy + thirdH * i);
+    }
+    this._border.stroke({ color: 0xffffff, width: 0.5 / zoom, alpha: 0.3 });
+
+    // Position handles
+    const positions: Record<HandleId, { px: number; py: number }> = {
+      tl: { px: cx, py: cy },
+      tc: { px: cx + cw / 2, py: cy },
+      tr: { px: cx + cw, py: cy },
+      ml: { px: cx, py: cy + ch / 2 },
+      mr: { px: cx + cw, py: cy + ch / 2 },
+      bl: { px: cx, py: cy + ch },
+      bc: { px: cx + cw / 2, py: cy + ch },
+      br: { px: cx + cw, py: cy + ch },
+    };
+
+    const s = HANDLE_SIZE / zoom;
+    const half = s / 2;
+    for (const [id, handle] of this._handles) {
+      const pos = positions[id];
+      handle.clear();
+      handle.rect(-half, -half, s, s);
+      handle.fill(HANDLE_FILL);
+      handle.stroke({ color: HANDLE_STROKE, width: 1 / zoom });
+      handle.position.set(pos.px, pos.py);
+    }
+  }
+
+  // -- Handle drag --
+
+  private _onDown(e: FederatedPointerEvent, id: HandleId): void {
+    e.stopPropagation();
+    this._drag = { handleId: id, startCrop: { ...this._crop } };
+  }
+
+  private _onMove(e: FederatedPointerEvent): void {
+    if (!this._drag || !this._item) return;
+
+    const data = this._item.data;
+    const iw = data.w * data.sx;
+    const ih = data.h * data.sy;
+    const world = this._viewport.toWorld(e.global.x, e.global.y);
+
+    // Convert world position to normalized image coordinates
+    const nx = (world.x - data.x) / iw;
+    const ny = (world.y - data.y) / ih;
+
+    const { handleId, startCrop: sc } = this._drag;
+    const crop = { ...sc };
+
+    switch (handleId) {
+      case 'tl':
+        crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
+        crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
+        crop.w = sc.x + sc.w - crop.x;
+        crop.h = sc.y + sc.h - crop.y;
+        break;
+      case 'tr':
+        crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
+        crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
+        crop.h = sc.y + sc.h - crop.y;
+        break;
+      case 'bl':
+        crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
+        crop.w = sc.x + sc.w - crop.x;
+        crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
+        break;
+      case 'br':
+        crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
+        crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
+        break;
+      case 'tc':
+        crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
+        crop.h = sc.y + sc.h - crop.y;
+        break;
+      case 'bc':
+        crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
+        break;
+      case 'ml':
+        crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
+        crop.w = sc.x + sc.w - crop.x;
+        break;
+      case 'mr':
+        crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
+        break;
+    }
+
+    this._crop = crop;
+    this._draw();
+  }
+
+  private _onUp(): void {
+    this._drag = null;
+  }
+}

frontend/src/canvas/SceneManager.ts

@@ -291,7 +291,9 @@ export class SceneManager {
         if (isGifAsset(imgData.asset)) {
           displayObject = new AnimatedGifSprite(imgData.asset, imgData.w, imgData.h, this.textures);
         } else {
-          displayObject = new ImageSprite(imgData.asset, imgData.w, imgData.h, this.textures);
+          const imgSprite = new ImageSprite(imgData.asset, imgData.w, imgData.h, this.textures);
+          if (imgData.crop) imgSprite.applyCrop(imgData.crop);
+          displayObject = imgSprite;
         }
         break;
       }
@@ -378,49 +380,11 @@ export class SceneManager {
       };
     }
 
-    // Animate entrance: spring scale from center 0 → 1.05 → 1.0 with fade-in
+    // Animate entrance: quick fade-in (no bounce — items are immediately interactive)
     if (animate) {
-      displayObject.scale.set(0, 0);
       displayObject.alpha = 0;
 
-      // Scale from center by adjusting position to keep center point fixed
-      const halfW = data.w * data.sx / 2;
-      const halfH = data.h * data.sy / 2;
-      const finalX = data.x;
-      const finalY = data.y;
-
-      const scaleSpring = new Spring(0, 1.05, PRESETS.bounce);
-      scaleSpring.onUpdate = (v) => {
-        if (!displayObject.destroyed) {
-          displayObject.scale.set(v * data.sx, v * data.sy);
-          displayObject.position.set(
-            finalX + halfW * (1 - v),
-            finalY + halfH * (1 - v),
-          );
-        }
-      };
-      scaleSpring.onComplete = () => {
-        const settleSpring = new Spring(1.05, 1.0, PRESETS.snappy);
-        settleSpring.onUpdate = (v) => {
-          if (!displayObject.destroyed) {
-            displayObject.scale.set(v * data.sx, v * data.sy);
-            displayObject.position.set(
-              finalX + halfW * (1 - v),
-              finalY + halfH * (1 - v),
-            );
-          }
-        };
-        settleSpring.onComplete = () => {
-          if (!displayObject.destroyed) {
-            displayObject.position.set(finalX, finalY);
-            displayObject.scale.set(data.sx, data.sy);
-          }
-        };
-        this.springs.add(settleSpring);
-      };
-      this.springs.add(scaleSpring);
-
-      const alphaSpring = new Spring(0, data.opacity, PRESETS.gentle);
+      const alphaSpring = new Spring(0, data.opacity, PRESETS.snappy);
       alphaSpring.onUpdate = (v) => {
         if (!displayObject.destroyed) {
           displayObject.alpha = v;

frontend/src/canvas/SelectionManager.ts

@@ -64,6 +64,7 @@ export class SelectionManager {
   private static readonly DOUBLE_CLICK_MS = 400;
 
   private _onDoubleClickText: ((item: SceneItem) => void) | null = null;
+  private _onDoubleClickImage: ((item: SceneItem) => void) | null = null;
 
   private _enabled = true;
 
@@ -142,6 +143,11 @@ export class SelectionManager {
     this._onDoubleClickText = fn;
   }
 
+  /** Called on double-click of an image item (zoom-to-fit). */
+  set onDoubleClickImage(fn: (item: SceneItem) => void) {
+    this._onDoubleClickImage = fn;
+  }
+
   /** Select only this item, deselecting everything else. */
   selectOnly(id: string): void {
     this.selectedIds.clear();
@@ -357,6 +363,8 @@ export class SelectionManager {
           item.displayObject.togglePlayPause();
         } else if (item.type === 'text') {
           this._onDoubleClickText?.(item);
+        } else if (item.type === 'image' || item.type === 'drawing') {
+          this._onDoubleClickImage?.(item);
         }
         this._lastClickTime = 0;
         this._lastClickItemId = null;

frontend/src/canvas/TextEditor.ts

@@ -150,7 +150,7 @@ export class TextEditor {
     const data = item.data as TextObject;
 
     if (save) {
-      const newText = ta.value || this._originalText; // Don't allow empty
+      const newText = ta.value; // Allow empty — caller handles cleanup
       data.text = newText;
       pixiText.text = newText;
 

frontend/src/canvas/context-menu-items.ts

@@ -20,6 +20,8 @@ export interface MenuItem {
   danger?: boolean;
 }
 
+export type StartCropFn = (() => void) | null;
+
 interface MenuContext {
   scene: SceneManager | null;
   selection: SelectionManager | null;
@@ -31,6 +33,7 @@ interface MenuContext {
   handleGroup: () => void;
   handleUngroup: () => void;
   fitAll: () => void;
+  startCrop?: () => void;
 }
 
 export function buildContextMenuItems(ctx: MenuContext): MenuItem[] {
@@ -152,6 +155,7 @@ export function buildContextMenuItems(ctx: MenuContext): MenuItem[] {
     // -- Image --
     { label: 'Flip Horizontal', shortcut: 'Alt+Shift+H', onClick: () => { ops.flipHorizontal(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !hasSel },
     { label: 'Flip Vertical', shortcut: 'Alt+Shift+V', onClick: () => { ops.flipVertical(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !hasSel },
+    { label: 'Crop', shortcut: 'C', onClick: () => ctx.startCrop?.(), disabled: selected.length !== 1 || selected[0]?.data.type !== 'image' },
     { label: 'Reset Transform', shortcut: 'Ctrl+Shift+T', onClick: () => { ops.resetTransform(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !hasSel },
     { label: '', shortcut: '', onClick: () => {}, divider: true },
 

frontend/src/canvas/scene-format.ts

@@ -21,10 +21,19 @@ export interface SceneObject {
   flipY?: boolean;
 }
 
+export interface CropRect {
+  /** Normalized 0-1 values relative to original image dimensions */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
 export interface ImageObject extends SceneObject {
   type: 'image';
   asset: string;
   filters: string[];
+  crop?: CropRect;
 }
 
 export interface VideoObject extends SceneObject {

frontend/src/canvas/shortcut-definitions.ts

@@ -715,4 +715,14 @@ export const shortcuts: ShortcutDef[] = [
       ctx.toggleReviewMode?.();
     },
   },
+  {
+    id: 'crop',
+    keys: { key: 'c' },
+    category: 'image',
+    description: 'Crop image',
+    needsSelection: true,
+    handler: (ctx: ShortcutContext) => {
+      ctx.startCrop?.();
+    },
+  },
 ];

frontend/src/canvas/shortcuts.ts

@@ -48,6 +48,7 @@ export interface ShortcutContext {
   writeCanvasToClipboard: (items?: SceneItem[]) => Promise<void>;
   pasteFromSystemClipboard: () => Promise<string>;
   toggleReviewMode?: () => void;
+  startCrop?: () => void;
 }
 
 /**

frontend/src/canvas/sprites/ImageSprite.ts

@@ -1,5 +1,6 @@
-import { Container, Sprite, Texture, Graphics } from "pixi.js";
+import { Container, Sprite, Texture, Graphics, Rectangle } from "pixi.js";
 import { TextureManager } from "../TextureManager";
+import type { CropRect } from "../scene-format";
 
 /**
  * A Container holding a shadow graphic + sprite with lazy texture loading.
@@ -24,6 +25,7 @@ export class ImageSprite extends Container {
   private placeholder: Graphics | null = null;
   private _sprite: Sprite | null = null;
   private _shadow: Graphics;
+  private _cropMask: Graphics | null = null;
   private _naturalWidth: number;
   private _naturalHeight: number;
 
@@ -54,9 +56,14 @@ export class ImageSprite extends Container {
     // NOTE: Sprite is created lazily in loadTexture() — NOT added here.
   }
 
+  get naturalWidth(): number { return this._naturalWidth; }
+  get naturalHeight(): number { return this._naturalHeight; }
+
   private _drawShadow(cfg: { offsetX: number; offsetY: number; alpha: number }): void {
+    const w = this._naturalWidth;
+    const h = this._naturalHeight;
     this._shadow.clear();
-    this._shadow.rect(cfg.offsetX, cfg.offsetY, this._naturalWidth, this._naturalHeight);
+    this._shadow.rect(cfg.offsetX, cfg.offsetY, w, h);
     this._shadow.fill({ color: 0x000000, alpha: cfg.alpha });
   }
 
@@ -75,6 +82,48 @@ export class ImageSprite extends Container {
     return this._sprite?.texture ?? Texture.EMPTY;
   }
 
+  /**
+   * Apply a crop mask. Normalized 0-1 values relative to natural dimensions.
+   * Pass null/undefined to remove crop.
+   */
+  applyCrop(crop: CropRect | undefined): void {
+    if (!crop) {
+      // Remove crop
+      if (this._cropMask) {
+        if (this._sprite) this._sprite.mask = null;
+        this.removeChild(this._cropMask);
+        this._cropMask.destroy();
+        this._cropMask = null;
+      }
+      // Restore shadow to full size
+      this._drawShadow(SHADOW_REST);
+      return;
+    }
+
+    const px = crop.x * this._naturalWidth;
+    const py = crop.y * this._naturalHeight;
+    const pw = crop.w * this._naturalWidth;
+    const ph = crop.h * this._naturalHeight;
+
+    if (!this._cropMask) {
+      this._cropMask = new Graphics();
+      this.addChild(this._cropMask);
+    }
+
+    this._cropMask.clear();
+    this._cropMask.rect(px, py, pw, ph);
+    this._cropMask.fill(0xffffff);
+
+    if (this._sprite) {
+      this._sprite.mask = this._cropMask;
+    }
+
+    // Update shadow to match cropped area
+    this._shadow.clear();
+    this._shadow.rect(px + SHADOW_REST.offsetX, py + SHADOW_REST.offsetY, pw, ph);
+    this._shadow.fill({ color: 0x000000, alpha: SHADOW_REST.alpha });
+  }
+
   /** Load the full-res texture. Called by viewport culling when near viewport. */
   async loadTexture(): Promise<void> {
     if (this.loaded || this.loading) return;
@@ -93,6 +142,11 @@ export class ImageSprite extends Container {
       this.addChild(sprite);
       this.loaded = true;
 
+      // Apply crop mask if one exists
+      if (this._cropMask) {
+        sprite.mask = this._cropMask;
+      }
+
       // Remove placeholder after successful load
       if (this.placeholder) {
         this.removeChild(this.placeholder);
@@ -117,6 +171,7 @@ export class ImageSprite extends Container {
 
     // Remove sprite from display tree entirely — avoids PixiJS v8 render crash
     if (this._sprite) {
+      this._sprite.mask = null;
       this.removeChild(this._sprite);
       this._sprite.destroy();
       this._sprite = null;

frontend/src/canvas/tools.ts

@@ -13,6 +13,7 @@ import type { SelectionManager } from './SelectionManager';
 import { Text, TextStyle } from 'pixi.js';
 import { DrawingSprite } from './sprites/DrawingSprite';
 import type { DrawingObject } from './scene-format';
+import { TextEditor } from './TextEditor';
 
 export enum ToolType {
   SELECT = 'SELECT',
@@ -44,6 +45,10 @@ export interface ToolContext {
   onChange: () => void;
   /** Broadcast only specific changed elements (lightweight, for live drawing). */
   broadcastElements?: (ids: string[]) => void;
+  /** Text editor instance for inline editing. */
+  textEditor?: TextEditor;
+  /** Switch back to select tool after placing text. */
+  switchToSelect?: () => void;
 }
 
 export function activateTool(
@@ -95,7 +100,7 @@ export function activateTool(
           locked: false,
           name: '',
           visible: true,
-          text: 'Type here',
+          text: ' ', // placeholder — will be replaced by user input
           fontSize: opts.fontSize!,
           fill: opts.color!,
           fontFamily: 'sans-serif',
@@ -106,6 +111,33 @@ export function activateTool(
         ctx.broadcastElements?.([textData.id]);
         ctx.onChange();
 
+        // Immediately open inline editor on the new text item
+        const item = scene.getById(textData.id);
+        if (item && ctx.textEditor) {
+          // Find the canvas DOM container
+          const canvasEl = container.querySelector('canvas');
+          const domContainer = canvasEl?.parentElement ?? container;
+
+          // Small delay to let PixiJS render the text sprite
+          setTimeout(() => {
+            ctx.textEditor!.startEditing(item, viewport, domContainer, () => {
+              // If user saved empty text, remove the item
+              const text = (item.data as any).text?.trim();
+              if (!text) {
+                scene.removeItem(item.id, true);
+              }
+              ctx.broadcastElements?.([item.id]);
+              ctx.onChange();
+            });
+            // Clear placeholder so user types from scratch
+            const ta = document.querySelector('textarea');
+            if (ta) { ta.value = ''; }
+          }, 50);
+        }
+
+        // Switch back to select tool after placing
+        ctx.switchToSelect?.();
+
         // Remove handler after placing text
         container.removeEventListener('pointerdown', onClick);
       };