pixelweaver 0.1.0

package/plugins/builtin/effects.test.ts

@@ -0,0 +1,715 @@
+/**
+ * Tests for the effects plugins.
+ *
+ * Covers rotate, flip, invert, grayscale, blur, outline, shadow, glow,
+ * scale, sharpen, colorize, brightness/contrast, hue shift, and undo.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import { dispatch, undoLast, _resetForTesting as resetDispatcher, setContext } from '../../src/lib/core/dispatcher.js';
+import type { Command } from '../../src/lib/core/commands.js';
+import type { CommandType, ParamsOf } from '../../src/lib/core/command-params.js';
+import { createPluginAPI } from '../../src/lib/core/plugin-api.js';
+
+import { rotateEffectPlugin, computeRotation } from './effects/rotate.js';
+import { flipEffectPlugin, computeFlip } from './effects/flip.js';
+import { scaleEffectPlugin, computeScale } from './effects/scale.js';
+import { colorEffectsPlugin, invertPixels, grayscalePixels } from './effects/color-effects.js';
+import { blurEffectPlugin, computeBlur } from './effects/blur.js';
+import { sharpenEffectPlugin } from './effects/sharpen.js';
+import { outlineEffectPlugin, computeOutline } from './effects/outline.js';
+import { shadowEffectPlugin, computeShadow } from './effects/shadow.js';
+import { glowEffectPlugin, computeGlow } from './effects/glow.js';
+
+// --- Helpers ---
+
+// Typed overload: validates params when type is a known command literal
+function makeCommand<T extends CommandType>(type: T, params: ParamsOf<T>): Command;
+// String fallback: for dynamic/unknown command types in tests
+function makeCommand(type: string, params?: Record<string, unknown>): Command;
+function makeCommand(type: string, params: Record<string, unknown> = {}): Command {
+  return { type, plugin: 'test', version: '1.0.0', params, timestamp: Date.now(), id: crypto.randomUUID() };
+}
+
+/**
+ * Test context helper. Holds a mutable buffer reference so effects that
+ * call setActiveBuffer (rotate on non-square, scale) actually swap the
+ * buffer the test sees. Returns a handle with a live `current` getter.
+ */
+interface BufferHandle {
+  readonly current: PixelBuffer;
+}
+
+function setupBuffer(width = 8, height = 8): BufferHandle {
+  let buffer = new PixelBuffer(width, height);
+  setContext({
+    getActiveBuffer: () => buffer,
+    setActiveBuffer: (next: PixelBuffer) => {
+      buffer = next;
+    },
+  });
+  return {
+    get current() {
+      return buffer;
+    },
+  };
+}
+
+/**
+ * Multi-layer test context helper. Simulates a project with several frames
+ * and layers so we can verify rotate/scale undo restores into the ORIGINAL
+ * (frame, layer) pair even when the active pair has changed.
+ *
+ * Layout is a Map<frameIndex, Map<layerId, PixelBuffer>>. activeFrameIndex
+ * and activeLayerId are mutable so tests can "switch layers" between
+ * execute and undo.
+ */
+interface MultiLayerHandle {
+  readonly frames: Map<number, Map<string, PixelBuffer>>;
+  activeFrameIndex: number;
+  activeLayerId: string;
+  /** Get the buffer at an explicit (frameIndex, layerId) pair. */
+  get(frameIndex: number, layerId: string): PixelBuffer | undefined;
+}
+
+function setupMultiLayer(
+  initial: Array<{ frameIndex: number; layerId: string; width: number; height: number }>,
+): MultiLayerHandle {
+  const frames = new Map<number, Map<string, PixelBuffer>>();
+  for (const { frameIndex, layerId, width, height } of initial) {
+    if (!frames.has(frameIndex)) frames.set(frameIndex, new Map());
+    frames.get(frameIndex)?.set(layerId, new PixelBuffer(width, height));
+  }
+
+  const handle: MultiLayerHandle = {
+    frames,
+    activeFrameIndex: initial[0]?.frameIndex ?? 0,
+    activeLayerId: initial[0]?.layerId ?? '',
+    get(frameIndex: number, layerId: string) {
+      return frames.get(frameIndex)?.get(layerId);
+    },
+  };
+
+  setContext({
+    getActiveBuffer: () => {
+      return frames.get(handle.activeFrameIndex)?.get(handle.activeLayerId) ?? null;
+    },
+    setActiveBuffer: (next: PixelBuffer) => {
+      if (!frames.has(handle.activeFrameIndex)) {
+        frames.set(handle.activeFrameIndex, new Map());
+      }
+      frames.get(handle.activeFrameIndex)?.set(handle.activeLayerId, next);
+    },
+    getActiveFrameIndex: () => handle.activeFrameIndex,
+    getActiveLayerId: () => handle.activeLayerId,
+    setBufferForLayer: (frameIndex: number, layerId: string, buffer: PixelBuffer) => {
+      if (!frames.has(frameIndex)) frames.set(frameIndex, new Map());
+      frames.get(frameIndex)?.set(layerId, buffer);
+    },
+  });
+
+  return handle;
+}
+
+function registerAll(): void {
+  const plugins = [
+    rotateEffectPlugin, flipEffectPlugin, scaleEffectPlugin,
+    colorEffectsPlugin, blurEffectPlugin, sharpenEffectPlugin,
+    outlineEffectPlugin, shadowEffectPlugin, glowEffectPlugin,
+  ];
+  for (const p of plugins) {
+    const api = createPluginAPI(p.name);
+    p.register(api);
+  }
+}
+
+// --- Tests ---
+
+describe('Effects Plugins', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    registerAll();
+  });
+
+  // -- Rotate --
+
+  it('rotate 90: pixel at (1,0) moves to expected position', () => {
+    const buffer = new PixelBuffer(4, 4);
+    buffer.setPixel(1, 0, 255, 0, 0, 255);
+
+    const out = computeRotation(buffer, 90);
+    // Square buffer: output dims unchanged.
+    expect(out.width).toBe(4);
+    expect(out.height).toBe(4);
+    // For 90 CW: source (sx, sy) -> dest (h-1-sy, sx).
+    // So source (1, 0) -> dest (3, 1).
+    expect(out.getPixel(3, 1)).toEqual([255, 0, 0, 255]);
+    // Original location should now be empty.
+    expect(out.getPixel(1, 0)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('rotate 180: pixel position is mirrored', () => {
+    const buffer = new PixelBuffer(4, 4);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);
+
+    const out = computeRotation(buffer, 180);
+    // Square, 180: output dims unchanged.
+    expect(out.width).toBe(4);
+    expect(out.height).toBe(4);
+    expect(out.getPixel(3, 3)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('rotate 90 on non-square (4x2): output dims are 2x4 and pixels are placed correctly', () => {
+    // Source 4x2:
+    //   (0,0)=R  (1,0)=G  (2,0)=B  (3,0)=W
+    //   (0,1)=_  (1,1)=_  (2,1)=_  (3,1)=Y
+    const buffer = new PixelBuffer(4, 2);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);   // R
+    buffer.setPixel(1, 0, 0, 255, 0, 255);   // G
+    buffer.setPixel(2, 0, 0, 0, 255, 255);   // B
+    buffer.setPixel(3, 0, 255, 255, 255, 255); // W
+    buffer.setPixel(3, 1, 255, 255, 0, 255); // Y
+
+    const out = computeRotation(buffer, 90);
+    // 90 CW on a 4x2 source -> 2x4 output.
+    expect(out.width).toBe(2);
+    expect(out.height).toBe(4);
+
+    // Mapping: source (sx, sy) -> dest (h-1-sy, sx) where h = 2.
+    // (0,0)=R -> (1, 0)
+    // (1,0)=G -> (1, 1)
+    // (2,0)=B -> (1, 2)
+    // (3,0)=W -> (1, 3)
+    // (3,1)=Y -> (0, 3)
+    expect(out.getPixel(1, 0)).toEqual([255, 0, 0, 255]);
+    expect(out.getPixel(1, 1)).toEqual([0, 255, 0, 255]);
+    expect(out.getPixel(1, 2)).toEqual([0, 0, 255, 255]);
+    expect(out.getPixel(1, 3)).toEqual([255, 255, 255, 255]);
+    expect(out.getPixel(0, 3)).toEqual([255, 255, 0, 255]);
+    // Other pixels on the top row of source were transparent, so their
+    // rotated positions should remain transparent.
+    expect(out.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+    expect(out.getPixel(0, 1)).toEqual([0, 0, 0, 0]);
+    expect(out.getPixel(0, 2)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('rotate 270 on non-square (4x2): output dims are 2x4 and pixels are placed correctly', () => {
+    const buffer = new PixelBuffer(4, 2);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);   // R
+    buffer.setPixel(1, 0, 0, 255, 0, 255);   // G
+    buffer.setPixel(2, 0, 0, 0, 255, 255);   // B
+    buffer.setPixel(3, 0, 255, 255, 255, 255); // W
+    buffer.setPixel(3, 1, 255, 255, 0, 255); // Y
+
+    const out = computeRotation(buffer, 270);
+    // 270 CW on a 4x2 source -> 2x4 output.
+    expect(out.width).toBe(2);
+    expect(out.height).toBe(4);
+
+    // Mapping: source (sx, sy) -> dest (sy, w-1-sx) where w = 4.
+    // (0,0)=R -> (0, 3)
+    // (1,0)=G -> (0, 2)
+    // (2,0)=B -> (0, 1)
+    // (3,0)=W -> (0, 0)
+    // (3,1)=Y -> (1, 0)
+    expect(out.getPixel(0, 3)).toEqual([255, 0, 0, 255]);
+    expect(out.getPixel(0, 2)).toEqual([0, 255, 0, 255]);
+    expect(out.getPixel(0, 1)).toEqual([0, 0, 255, 255]);
+    expect(out.getPixel(0, 0)).toEqual([255, 255, 255, 255]);
+    expect(out.getPixel(1, 0)).toEqual([255, 255, 0, 255]);
+    // The rest came from transparent source pixels.
+    expect(out.getPixel(1, 1)).toEqual([0, 0, 0, 0]);
+    expect(out.getPixel(1, 2)).toEqual([0, 0, 0, 0]);
+    expect(out.getPixel(1, 3)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('rotate 180 on non-square (4x2): output dims remain 4x2', () => {
+    const buffer = new PixelBuffer(4, 2);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);
+
+    const out = computeRotation(buffer, 180);
+    expect(out.width).toBe(4);
+    expect(out.height).toBe(2);
+    // (0,0) -> (w-1, h-1) = (3, 1)
+    expect(out.getPixel(3, 1)).toEqual([255, 0, 0, 255]);
+  });
+
+  // -- Flip --
+
+  it('flip horizontal: pixel at (0,0) moves to (w-1,0)', () => {
+    const buffer = new PixelBuffer(4, 4);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);
+
+    const pixels = computeFlip(buffer, 'h');
+    const moved = pixels.find((p) => p.r === 255 && p.a === 255);
+    expect(moved).toBeDefined();
+    expect(moved?.x).toBe(3);
+    expect(moved?.y).toBe(0);
+  });
+
+  it('flip vertical: pixel at (0,0) moves to (0,h-1)', () => {
+    const buffer = new PixelBuffer(4, 4);
+    buffer.setPixel(0, 0, 255, 0, 0, 255);
+
+    const pixels = computeFlip(buffer, 'v');
+    const moved = pixels.find((p) => p.r === 255 && p.a === 255);
+    expect(moved).toBeDefined();
+    expect(moved?.x).toBe(0);
+    expect(moved?.y).toBe(3);
+  });
+
+  // -- Invert --
+
+  it('invert: RGB values are inverted, alpha preserved', () => {
+    const buffer = new PixelBuffer(2, 2);
+    buffer.setPixel(0, 0, 100, 150, 200, 255);
+
+    const pixels = invertPixels(buffer);
+    const p = pixels.find((px) => px.x === 0 && px.y === 0);
+    if (!p) throw new Error('expected inverted pixel at (0,0)');
+    expect(p.r).toBe(155);
+    expect(p.g).toBe(105);
+    expect(p.b).toBe(55);
+    expect(p.a).toBe(255);
+  });
+
+  // -- Grayscale --
+
+  it('grayscale: correct luminance', () => {
+    const buffer = new PixelBuffer(1, 1);
+    buffer.setPixel(0, 0, 255, 0, 0, 255); // Pure red
+
+    const pixels = grayscalePixels(buffer);
+    const p = pixels[0];
+    if (!p) throw new Error('expected first pixel');
+    // BT.601: 0.299 * 255 = 76.245 -> 76
+    expect(p.r).toBe(76);
+    expect(p.g).toBe(76);
+    expect(p.b).toBe(76);
+    expect(p.a).toBe(255);
+  });
+
+  // -- Blur --
+
+  it('blur: center pixel is averaged with neighbors', () => {
+    const buffer = new PixelBuffer(3, 3);
+    // Set center pixel to white, rest are transparent (0,0,0,0)
+    buffer.setPixel(1, 1, 255, 255, 255, 255);
+
+    const pixels = computeBlur(buffer);
+    const center = pixels.find((p) => p.x === 1 && p.y === 1);
+    if (!center) throw new Error('expected center pixel');
+    // Average of 9 pixels: 1 white + 8 transparent
+    // R: 255/9 ~ 28, same for G, B, A
+    expect(center.r).toBe(Math.round(255 / 9));
+    expect(center.g).toBe(Math.round(255 / 9));
+  });
+
+  // -- Outline --
+
+  it('outline: non-transparent pixels get border', () => {
+    const buffer = new PixelBuffer(8, 8);
+    buffer.setPixel(4, 4, 255, 0, 0, 255);
+
+    const outlinePixels = computeOutline(buffer, 1, '#00FF00');
+    // Should have pixels around (4,4) -- the 8 neighbors
+    expect(outlinePixels.length).toBeGreaterThan(0);
+    expect(outlinePixels.length).toBeLessThanOrEqual(8);
+
+    // All outline pixels should be green
+    for (const p of outlinePixels) {
+      expect(p.r).toBe(0);
+      expect(p.g).toBe(255);
+      expect(p.b).toBe(0);
+    }
+
+    // The original pixel should NOT be in the outline (it's not transparent)
+    const original = outlinePixels.find((p) => p.x === 4 && p.y === 4);
+    expect(original).toBeUndefined();
+  });
+
+  // -- Shadow --
+
+  it('shadow: creates offset copy', () => {
+    const buffer = new PixelBuffer(8, 8);
+    buffer.setPixel(2, 2, 255, 0, 0, 255);
+
+    const shadowPixels = computeShadow(buffer, 2, 2, '#000000', 0.5);
+    // Shadow should be at (4, 4) since offset is (2, 2)
+    const sp = shadowPixels.find((p) => p.x === 4 && p.y === 4);
+    expect(sp).toBeDefined();
+    expect(sp?.r).toBe(0);
+    expect(sp?.g).toBe(0);
+    expect(sp?.b).toBe(0);
+    expect(sp?.a).toBe(128); // 0.5 * 255 = 127.5 -> 128
+  });
+
+  // -- Glow --
+
+  it('glow: transparent pixels near opaque ones get glow color', () => {
+    const buffer = new PixelBuffer(8, 8);
+    buffer.setPixel(4, 4, 255, 0, 0, 255);
+
+    const glowPixels = computeGlow(buffer, 2, '#FFFF00', 0.8);
+    expect(glowPixels.length).toBeGreaterThan(0);
+
+    // All glow pixels should have the glow color
+    for (const p of glowPixels) {
+      expect(p.r).toBe(255);
+      expect(p.g).toBe(255);
+      expect(p.b).toBe(0);
+      expect(p.a).toBeGreaterThan(0);
+    }
+  });
+
+  // -- Scale --
+
+  it('scale: nearest-neighbor produces expected result', () => {
+    const buffer = new PixelBuffer(4, 4);
+    // Create a 2x2 checkerboard in top-left
+    buffer.setPixel(0, 0, 255, 0, 0, 255);
+    buffer.setPixel(1, 1, 255, 0, 0, 255);
+
+    const scaled = computeScale(buffer, 2, 2);
+    // computeScale returns a PixelBuffer sized to (newWidth, newHeight).
+    expect(scaled.width).toBe(2);
+    expect(scaled.height).toBe(2);
+    // Scaling 4x4 down to 2x2 should sample every other pixel.
+    // Source (0, 0) is red -> dest (0, 0) is red.
+    expect(scaled.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  // -- Undo tests --
+
+  it('invert effect undoes correctly', () => {
+    const handle = setupBuffer(2, 2);
+    handle.current.setPixel(0, 0, 100, 150, 200, 255);
+
+    dispatch(makeCommand('invert', { layerId: '' }));
+    expect(handle.current.getPixel(0, 0)).toEqual([155, 105, 55, 255]);
+
+    undoLast();
+    expect(handle.current.getPixel(0, 0)).toEqual([100, 150, 200, 255]);
+  });
+
+  it('rotate effect undoes correctly', () => {
+    const handle = setupBuffer(4, 4);
+    handle.current.setPixel(0, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('rotate', { angle: 90, layerId: '' }));
+    // Square 4x4: dims unchanged, but (0,0) should no longer be red.
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(4);
+    expect(handle.current.getPixel(0, 0)[0]).not.toBe(255);
+
+    undoLast();
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(4);
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('rotate 90 on non-square canvas swaps dims through execute()', () => {
+    // 4x2 source with a single red pixel at (1, 0).
+    const handle = setupBuffer(4, 2);
+    handle.current.setPixel(1, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('rotate', { angle: 90, layerId: '' }));
+    // After 90 CW on a 4x2: active buffer should be 2x4.
+    expect(handle.current.width).toBe(2);
+    expect(handle.current.height).toBe(4);
+    // Source (1, 0) -> dest (h-1-0, 1) = (1, 1) in the 2x4 result.
+    expect(handle.current.getPixel(1, 1)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+    // Undo restores original 4x2 dims and original pixel position.
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(2);
+    expect(handle.current.getPixel(1, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('rotate 270 on non-square canvas swaps dims through execute()', () => {
+    const handle = setupBuffer(4, 2);
+    handle.current.setPixel(0, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('rotate', { angle: 270, layerId: '' }));
+    expect(handle.current.width).toBe(2);
+    expect(handle.current.height).toBe(4);
+    // Source (0, 0) -> dest (0, w-1-0) = (0, 3) in the 2x4 result.
+    expect(handle.current.getPixel(0, 3)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(2);
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('scale effect resizes active buffer through execute()', () => {
+    // 4x4 source; upscale to 8x8.
+    const handle = setupBuffer(4, 4);
+    handle.current.setPixel(0, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('scale', { newWidth: 8, newHeight: 8, layerId: '' }));
+    // Active buffer should now report 8x8 dims.
+    expect(handle.current.width).toBe(8);
+    expect(handle.current.height).toBe(8);
+    // Nearest-neighbor: dest (0, 0) maps to source (0, 0) = red.
+    // dest (1, 1) also maps to source (0, 0) via floor(1*4/8)=0.
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.current.getPixel(1, 1)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+    // Undo restores original 4x4 dims and pixel data.
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(4);
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('scale downscale through execute() produces correct dims', () => {
+    const handle = setupBuffer(8, 8);
+    handle.current.setPixel(0, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('scale', { newWidth: 4, newHeight: 4, layerId: '' }));
+    expect(handle.current.width).toBe(4);
+    expect(handle.current.height).toBe(4);
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('flip effect undoes correctly', () => {
+    const handle = setupBuffer(4, 4);
+    handle.current.setPixel(0, 0, 255, 0, 0, 255);
+
+    dispatch(makeCommand('flip', { direction: 'h', layerId: '' }));
+    expect(handle.current.getPixel(3, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.current.getPixel(0, 0)[3]).toBe(0);
+
+    undoLast();
+    expect(handle.current.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  // -- Snapshot-targets-original-layer regression tests --
+  //
+  // These cover the bug where rotate/scale undo would write into whatever
+  // layer was active at undo time instead of the layer the effect actually
+  // operated on. Run rotate/scale on layer A, switch active layer to B,
+  // undo -- layer A must be restored to its original pixels AND layer B
+  // must be left untouched.
+
+  it('rotate undo targets the original layer, not the current active layer', () => {
+    // Two layers in a single frame. Layer A has a red pixel at (0,0);
+    // layer B has a blue pixel at (1,1). Both 4x4.
+    const handle = setupMultiLayer([
+      { frameIndex: 0, layerId: 'A', width: 4, height: 4 },
+      { frameIndex: 0, layerId: 'B', width: 4, height: 4 },
+    ]);
+    handle.get(0, 'A')?.setPixel(0, 0, 255, 0, 0, 255);
+    handle.get(0, 'B')?.setPixel(1, 1, 0, 0, 255, 255);
+
+    // Execute rotate on layer A.
+    handle.activeLayerId = 'A';
+    dispatch(makeCommand('rotate', { angle: 90, layerId: '' }));
+    // Layer A's red pixel has moved off (0,0).
+    expect(handle.get(0, 'A')?.getPixel(0, 0)[0]).not.toBe(255);
+
+    // Switch active layer to B BEFORE undo.
+    handle.activeLayerId = 'B';
+
+    // Undo. The correct behaviour is that layer A is restored and layer B
+    // is untouched -- the old buggy code wrote snap.data back into layer B.
+    undoLast();
+
+    // Layer A restored.
+    expect(handle.get(0, 'A')?.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    // Layer B untouched: the original blue pixel is still there and there's
+    // no stray red pixel from A's snapshot leaking in.
+    expect(handle.get(0, 'B')?.getPixel(1, 1)).toEqual([0, 0, 255, 255]);
+    expect(handle.get(0, 'B')?.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+  });
+
+  // -- Whole-canvas effects --
+  //
+  // rotate_canvas and scale_canvas iterate all (frame, pixel-layer) pairs.
+  // Tests use a richer multi-frame helper so we can verify every frame is
+  // actually touched and undo restores every frame.
+
+  interface WholeCanvasPair {
+    frameIndex: number;
+    layerId: string;
+    buffer: PixelBuffer;
+  }
+
+  interface WholeCanvasHandle {
+    readonly pairs: WholeCanvasPair[];
+    canvasWidth: number;
+    canvasHeight: number;
+    get(frameIndex: number, layerId: string): PixelBuffer | undefined;
+  }
+
+  /**
+   * Set up a fake multi-frame multi-layer project for whole-canvas tests.
+   * Every pair starts at the given initialWidth x initialHeight so the
+   * project looks like a real canvas (all buffers share dimensions).
+   */
+  function setupWholeCanvas(
+    descriptor: Array<{ frameIndex: number; layerId: string }>,
+    initialWidth: number,
+    initialHeight: number,
+  ): WholeCanvasHandle {
+    const pairs: WholeCanvasPair[] = descriptor.map((d) => ({
+      frameIndex: d.frameIndex,
+      layerId: d.layerId,
+      buffer: new PixelBuffer(initialWidth, initialHeight),
+    }));
+
+    const handle: WholeCanvasHandle = {
+      pairs,
+      canvasWidth: initialWidth,
+      canvasHeight: initialHeight,
+      get(frameIndex: number, layerId: string) {
+        return pairs.find((p) => p.frameIndex === frameIndex && p.layerId === layerId)?.buffer;
+      },
+    };
+
+    setContext({
+      getActiveBuffer: () => pairs[0]?.buffer ?? null,
+      setActiveBuffer: (next: PixelBuffer) => {
+        if (pairs[0]) pairs[0].buffer = next;
+      },
+      getActiveFrameIndex: () => pairs[0]?.frameIndex ?? 0,
+      getActiveLayerId: () => pairs[0]?.layerId ?? null,
+      setBufferForLayer: (frameIndex: number, layerId: string, buffer: PixelBuffer) => {
+        const pair = pairs.find((p) => p.frameIndex === frameIndex && p.layerId === layerId);
+        if (pair) pair.buffer = buffer;
+      },
+      getAllFrameLayerBuffers: () => pairs.map((p) => ({
+        frameIndex: p.frameIndex,
+        layerId: p.layerId,
+        buffer: p.buffer,
+      })),
+      setCanvasSize: (width: number, height: number) => {
+        handle.canvasWidth = width;
+        handle.canvasHeight = height;
+      },
+    });
+
+    return handle;
+  }
+
+  it('rotate_canvas rotates every (frame, layer) pair and updates canvas size once', () => {
+    // Two frames, two layers each. 4x2 canvas -- rotate 90 makes it 2x4.
+    const handle = setupWholeCanvas(
+      [
+        { frameIndex: 0, layerId: 'A' },
+        { frameIndex: 0, layerId: 'B' },
+        { frameIndex: 1, layerId: 'A' },
+        { frameIndex: 1, layerId: 'B' },
+      ],
+      4,
+      2,
+    );
+    // Put a distinct pixel in each pair so we can track them after rotation.
+    handle.get(0, 'A')?.setPixel(0, 0, 255, 0, 0, 255);   // frame0/A red
+    handle.get(0, 'B')?.setPixel(1, 0, 0, 255, 0, 255);   // frame0/B green
+    handle.get(1, 'A')?.setPixel(2, 0, 0, 0, 255, 255);   // frame1/A blue
+    handle.get(1, 'B')?.setPixel(3, 1, 255, 255, 0, 255); // frame1/B yellow
+
+    dispatch(makeCommand('rotate_canvas', { angle: 90, layerId: '' }));
+
+    // Canvas is now 2x4 (all pairs resized consistently).
+    expect(handle.canvasWidth).toBe(2);
+    expect(handle.canvasHeight).toBe(4);
+    for (const pair of handle.pairs) {
+      expect(pair.buffer.width).toBe(2);
+      expect(pair.buffer.height).toBe(4);
+    }
+
+    // Every pair was actually rotated (not just frame 0, layer A). Mapping:
+    // For 90 CW on 4x2 source -> 2x4 dest: source (sx, sy) -> dest (1-sy, sx).
+    // (0, 0) -> (1, 0), (1, 0) -> (1, 1), (2, 0) -> (1, 2), (3, 1) -> (0, 3).
+    expect(handle.get(0, 'A')?.getPixel(1, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.get(0, 'B')?.getPixel(1, 1)).toEqual([0, 255, 0, 255]);
+    expect(handle.get(1, 'A')?.getPixel(1, 2)).toEqual([0, 0, 255, 255]);
+    expect(handle.get(1, 'B')?.getPixel(0, 3)).toEqual([255, 255, 0, 255]);
+
+    // Undo restores every pair AND the canvas size.
+    undoLast();
+    expect(handle.canvasWidth).toBe(4);
+    expect(handle.canvasHeight).toBe(2);
+    for (const pair of handle.pairs) {
+      expect(pair.buffer.width).toBe(4);
+      expect(pair.buffer.height).toBe(2);
+    }
+    expect(handle.get(0, 'A')?.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.get(0, 'B')?.getPixel(1, 0)).toEqual([0, 255, 0, 255]);
+    expect(handle.get(1, 'A')?.getPixel(2, 0)).toEqual([0, 0, 255, 255]);
+    expect(handle.get(1, 'B')?.getPixel(3, 1)).toEqual([255, 255, 0, 255]);
+  });
+
+  it('scale_canvas scales every (frame, layer) pair and updates canvas size once', () => {
+    const handle = setupWholeCanvas(
+      [
+        { frameIndex: 0, layerId: 'A' },
+        { frameIndex: 1, layerId: 'A' },
+      ],
+      4,
+      4,
+    );
+    handle.get(0, 'A')?.setPixel(0, 0, 255, 0, 0, 255);
+    handle.get(1, 'A')?.setPixel(2, 2, 0, 0, 255, 255);
+
+    dispatch(makeCommand('scale_canvas', { newWidth: 8, newHeight: 8, layerId: '' }));
+
+    expect(handle.canvasWidth).toBe(8);
+    expect(handle.canvasHeight).toBe(8);
+    for (const pair of handle.pairs) {
+      expect(pair.buffer.width).toBe(8);
+      expect(pair.buffer.height).toBe(8);
+    }
+    // Nearest-neighbor: source (0, 0) stays at dest (0, 0); source (2, 2)
+    // upscaled 4->8 lands at dest (4, 4).
+    expect(handle.get(0, 'A')?.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.get(1, 'A')?.getPixel(4, 4)).toEqual([0, 0, 255, 255]);
+
+    undoLast();
+    expect(handle.canvasWidth).toBe(4);
+    expect(handle.canvasHeight).toBe(4);
+    for (const pair of handle.pairs) {
+      expect(pair.buffer.width).toBe(4);
+      expect(pair.buffer.height).toBe(4);
+    }
+    expect(handle.get(0, 'A')?.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(handle.get(1, 'A')?.getPixel(2, 2)).toEqual([0, 0, 255, 255]);
+  });
+
+  it('scale undo targets the original layer, not the current active layer', () => {
+    const handle = setupMultiLayer([
+      { frameIndex: 0, layerId: 'A', width: 4, height: 4 },
+      { frameIndex: 0, layerId: 'B', width: 4, height: 4 },
+    ]);
+    handle.get(0, 'A')?.setPixel(0, 0, 255, 0, 0, 255);
+    handle.get(0, 'B')?.setPixel(2, 2, 0, 0, 255, 255);
+
+    handle.activeLayerId = 'A';
+    dispatch(makeCommand('scale', { newWidth: 8, newHeight: 8, layerId: '' }));
+    // Layer A is now 8x8.
+    expect(handle.get(0, 'A')?.width).toBe(8);
+    expect(handle.get(0, 'A')?.height).toBe(8);
+    // Layer B is still the original 4x4 with its blue pixel.
+    expect(handle.get(0, 'B')?.width).toBe(4);
+    expect(handle.get(0, 'B')?.getPixel(2, 2)).toEqual([0, 0, 255, 255]);
+
+    // Switch active layer to B BEFORE undo.
+    handle.activeLayerId = 'B';
+
+    undoLast();
+
+    // Layer A restored to 4x4 with its original red pixel.
+    expect(handle.get(0, 'A')?.width).toBe(4);
+    expect(handle.get(0, 'A')?.height).toBe(4);
+    expect(handle.get(0, 'A')?.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    // Layer B untouched: still 4x4 and still has its blue pixel at (2, 2).
+    expect(handle.get(0, 'B')?.width).toBe(4);
+    expect(handle.get(0, 'B')?.height).toBe(4);
+    expect(handle.get(0, 'B')?.getPixel(2, 2)).toEqual([0, 0, 255, 255]);
+  });
+});