pixelweaver 0.1.0

package/src/lib/animation/frame-tags.test.ts

@@ -0,0 +1,136 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import * as ft from './frame-tags.svelte.js';
+
+beforeEach(() => {
+  ft._resetForTesting();
+});
+
+describe('addTag', () => {
+  it('should add a tag to the root list', () => {
+    const tag = ft.addTag('Walk', 0, 3);
+    expect(ft.getTags()).toHaveLength(1);
+    expect(tag.name).toBe('Walk');
+    expect(tag.startFrame).toBe(0);
+    expect(tag.endFrame).toBe(3);
+  });
+
+  it('should assign an auto color when none provided', () => {
+    const tag = ft.addTag('Run', 0, 5);
+    expect(tag.color).toBeTruthy();
+    expect(tag.color.startsWith('#')).toBe(true);
+  });
+
+  it('should use a custom color when provided', () => {
+    const tag = ft.addTag('Idle', 0, 2, { color: '#AABBCC' });
+    expect(tag.color).toBe('#AABBCC');
+  });
+
+  it('should throw if startFrame > endFrame', () => {
+    expect(() => ft.addTag('Bad', 5, 2)).toThrow('startFrame');
+  });
+});
+
+describe('addTag with nesting', () => {
+  it('should add a child tag to a parent', () => {
+    const parent = ft.addTag('Walk Cycle', 0, 7);
+    const child = ft.addTag('Walk Step', 0, 3, { parentId: parent.id });
+    expect(parent.children).toHaveLength(1);
+    expect(child.parentId).toBe(parent.id);
+  });
+
+  it('should throw if parent does not exist', () => {
+    expect(() => ft.addTag('Orphan', 0, 1, { parentId: 'nonexistent' })).toThrow();
+  });
+});
+
+describe('removeTag', () => {
+  it('should remove a root tag', () => {
+    const tag = ft.addTag('Walk', 0, 3);
+    ft.removeTag(tag.id);
+    expect(ft.getTags()).toHaveLength(0);
+  });
+
+  it('should remove a nested tag', () => {
+    const parent = ft.addTag('Walk', 0, 7);
+    const child = ft.addTag('Step', 0, 3, { parentId: parent.id });
+    ft.removeTag(child.id);
+    expect(parent.children).toHaveLength(0);
+  });
+
+  it('should throw for nonexistent tag', () => {
+    expect(() => { ft.removeTag('nonexistent'); }).toThrow();
+  });
+});
+
+describe('updateTag', () => {
+  it('should update tag properties', () => {
+    const tag = ft.addTag('Walk', 0, 3);
+    ft.updateTag(tag.id, { name: 'Run', color: '#FF0000', startFrame: 1, endFrame: 5 });
+    expect(tag.name).toBe('Run');
+    expect(tag.color).toBe('#FF0000');
+    expect(tag.startFrame).toBe(1);
+    expect(tag.endFrame).toBe(5);
+  });
+
+  it('should throw if update makes startFrame > endFrame', () => {
+    const tag = ft.addTag('Walk', 0, 3);
+    expect(() => { ft.updateTag(tag.id, { startFrame: 10 }); }).toThrow();
+  });
+});
+
+describe('getTagsForFrame', () => {
+  it('should return tags spanning a given frame', () => {
+    ft.addTag('Walk', 0, 3);
+    ft.addTag('Run', 4, 7);
+    ft.addTag('All', 0, 7);
+
+    const tagsAt2 = ft.getTagsForFrame(2);
+    expect(tagsAt2).toHaveLength(2); // Walk + All
+    expect(tagsAt2.map((t) => t.name).sort()).toEqual(['All', 'Walk']);
+
+    const tagsAt5 = ft.getTagsForFrame(5);
+    expect(tagsAt5).toHaveLength(2); // Run + All
+  });
+
+  it('should include nested tags that span the frame', () => {
+    const parent = ft.addTag('Walk', 0, 7);
+    ft.addTag('Step', 2, 4, { parentId: parent.id });
+
+    const tagsAt3 = ft.getTagsForFrame(3);
+    expect(tagsAt3).toHaveLength(2); // Walk + Step
+  });
+});
+
+describe('getFrameRange', () => {
+  it('should return the tag range for a simple tag', () => {
+    const tag = ft.addTag('Walk', 2, 5);
+    expect(ft.getFrameRange(tag.id)).toEqual({ start: 2, end: 5 });
+  });
+
+  it('should expand range to include nested children', () => {
+    const parent = ft.addTag('Cycle', 2, 5);
+    ft.addTag('Intro', 0, 2, { parentId: parent.id });
+    ft.addTag('Outro', 5, 8, { parentId: parent.id });
+
+    const range = ft.getFrameRange(parent.id);
+    expect(range.start).toBe(0);
+    expect(range.end).toBe(8);
+  });
+});
+
+describe('serialize / deserialize', () => {
+  it('should roundtrip tag state', () => {
+    const parent = ft.addTag('Walk', 0, 7, { color: '#112233' });
+    ft.addTag('Step', 0, 3, { parentId: parent.id });
+
+    const serialized = ft.serialize();
+    ft._resetForTesting();
+    ft.deserialize(serialized);
+
+    expect(ft.getTags()).toHaveLength(1);
+    expect(ft.getTags()[0]?.name).toBe('Walk');
+    expect(ft.getTags()[0]?.color).toBe('#112233');
+    expect(ft.getTags()[0]?.children).toHaveLength(1);
+    expect(ft.getTags()[0]?.children[0]?.name).toBe('Step');
+  });
+});

package/src/lib/animation/import.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest';
+import { importPng, importSpritesheet } from './import.js';
+
+// --- Helpers ---
+
+/** Create a fake ImageData (standard web API shape). */
+function makeImageData(width: number, height: number, fill?: [number, number, number, number]): ImageData {
+  const data = new Uint8ClampedArray(width * height * 4);
+  if (fill) {
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = fill[0];
+      data[i + 1] = fill[1];
+      data[i + 2] = fill[2];
+      data[i + 3] = fill[3];
+    }
+  }
+  return { data, width, height, colorSpace: 'srgb' };
+}
+
+/** Create a horizontal strip ImageData where each frame column has a distinct color. */
+function makeHorizontalStrip(
+  frameWidth: number,
+  frameHeight: number,
+  frameCount: number,
+): ImageData {
+  const totalWidth = frameWidth * frameCount;
+  const data = new Uint8ClampedArray(totalWidth * frameHeight * 4);
+
+  for (let f = 0; f < frameCount; f++) {
+    const gray = (f + 1) * 50; // 50, 100, 150, ...
+    for (let y = 0; y < frameHeight; y++) {
+      for (let x = 0; x < frameWidth; x++) {
+        const px = f * frameWidth + x;
+        const offset = (y * totalWidth + px) * 4;
+        data[offset] = gray;
+        data[offset + 1] = gray;
+        data[offset + 2] = gray;
+        data[offset + 3] = 255;
+      }
+    }
+  }
+
+  return { data, width: totalWidth, height: frameHeight, colorSpace: 'srgb' };
+}
+
+/** Create a vertical strip ImageData. */
+function makeVerticalStrip(
+  frameWidth: number,
+  frameHeight: number,
+  frameCount: number,
+): ImageData {
+  const totalHeight = frameHeight * frameCount;
+  const data = new Uint8ClampedArray(frameWidth * totalHeight * 4);
+
+  for (let f = 0; f < frameCount; f++) {
+    const gray = (f + 1) * 50;
+    for (let y = 0; y < frameHeight; y++) {
+      const row = f * frameHeight + y;
+      for (let x = 0; x < frameWidth; x++) {
+        const offset = (row * frameWidth + x) * 4;
+        data[offset] = gray;
+        data[offset + 1] = gray;
+        data[offset + 2] = gray;
+        data[offset + 3] = 255;
+      }
+    }
+  }
+
+  return { data, width: frameWidth, height: totalHeight, colorSpace: 'srgb' };
+}
+
+// --- Tests ---
+
+describe('importPng', () => {
+  it('should create a PixelBuffer at target dimensions', () => {
+    const img = makeImageData(16, 16, [255, 0, 0, 255]);
+    const buf = importPng(img, 8, 8);
+    expect(buf.width).toBe(8);
+    expect(buf.height).toBe(8);
+  });
+
+  it('should use nearest-neighbor sampling', () => {
+    // 2x2 image: top-left red, top-right green, bottom-left blue, bottom-right white
+    const img = makeImageData(2, 2);
+    img.data.set([255, 0, 0, 255], 0);   // (0,0) red
+    img.data.set([0, 255, 0, 255], 4);   // (1,0) green
+    img.data.set([0, 0, 255, 255], 8);   // (0,1) blue
+    img.data.set([255, 255, 255, 255], 12); // (1,1) white
+
+    // Scale to 4x4: each source pixel should fill a 2x2 region
+    const buf = importPng(img, 4, 4);
+    expect(buf.getPixel(0, 0)).toEqual([255, 0, 0, 255]); // red
+    expect(buf.getPixel(1, 0)).toEqual([255, 0, 0, 255]); // still red (nearest)
+    expect(buf.getPixel(2, 0)).toEqual([0, 255, 0, 255]); // green
+    expect(buf.getPixel(0, 2)).toEqual([0, 0, 255, 255]); // blue
+    expect(buf.getPixel(3, 3)).toEqual([255, 255, 255, 255]); // white
+  });
+
+  it('should handle downscaling', () => {
+    const img = makeImageData(8, 8, [100, 200, 50, 255]);
+    const buf = importPng(img, 2, 2);
+    expect(buf.width).toBe(2);
+    expect(buf.height).toBe(2);
+    // All pixels should sample from the uniform source
+    expect(buf.getPixel(0, 0)).toEqual([100, 200, 50, 255]);
+  });
+});
+
+describe('importSpritesheet', () => {
+  it('should split a horizontal strip into frames', () => {
+    const strip = makeHorizontalStrip(8, 8, 4);
+    const frames = importSpritesheet(strip, 8, 8);
+
+    expect(frames).toHaveLength(4);
+    expect(frames[0]?.width).toBe(8);
+    expect(frames[0]?.height).toBe(8);
+
+    // Each frame should have its distinct gray value
+    expect(frames[0]?.getPixel(0, 0)[0]).toBe(50);
+    expect(frames[1]?.getPixel(0, 0)[0]).toBe(100);
+    expect(frames[2]?.getPixel(0, 0)[0]).toBe(150);
+    expect(frames[3]?.getPixel(0, 0)[0]).toBe(200);
+  });
+
+  it('should split a vertical strip into frames', () => {
+    const strip = makeVerticalStrip(8, 8, 3);
+    const frames = importSpritesheet(strip, 8, 8, { direction: 'vertical' });
+
+    expect(frames).toHaveLength(3);
+    expect(frames[0]?.getPixel(0, 0)[0]).toBe(50);
+    expect(frames[1]?.getPixel(0, 0)[0]).toBe(100);
+    expect(frames[2]?.getPixel(0, 0)[0]).toBe(150);
+  });
+
+  it('should ignore partial frames at the end', () => {
+    // 20px wide strip with 8px frames = 2 full frames + 4px remainder
+    const img = makeImageData(20, 8, [128, 128, 128, 255]);
+    const frames = importSpritesheet(img, 8, 8);
+    expect(frames).toHaveLength(2); // not 3
+  });
+});

package/src/lib/animation/import.ts

@@ -0,0 +1,112 @@
+/**
+ * Import -- convert external image data into PixelBuffers.
+ *
+ * Handles single PNG import (scaling to target size) and spritesheet
+ * splitting (dividing a strip into equal-sized frames).
+ */
+
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+
+/**
+ * Import a single image as a PixelBuffer, scaled to the target dimensions.
+ *
+ * Uses nearest-neighbor sampling (appropriate for pixel art).
+ * ImageData is the standard web API type from canvas getImageData().
+ */
+export function importPng(
+  imageData: ImageData,
+  targetWidth: number,
+  targetHeight: number,
+): PixelBuffer {
+  const result = new PixelBuffer(targetWidth, targetHeight);
+  const srcW = imageData.width;
+  const srcH = imageData.height;
+
+  for (let ty = 0; ty < targetHeight; ty++) {
+    for (let tx = 0; tx < targetWidth; tx++) {
+      // Nearest-neighbor: map target pixel to source pixel
+      const sx = Math.floor((tx / targetWidth) * srcW);
+      const sy = Math.floor((ty / targetHeight) * srcH);
+
+      const srcOffset = (sy * srcW + sx) * 4;
+      const dstOffset = (ty * targetWidth + tx) * 4;
+
+      result.data[dstOffset] = imageData.data[srcOffset] ?? 0;
+      result.data[dstOffset + 1] = imageData.data[srcOffset + 1] ?? 0;
+      result.data[dstOffset + 2] = imageData.data[srcOffset + 2] ?? 0;
+      result.data[dstOffset + 3] = imageData.data[srcOffset + 3] ?? 0;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Import a spritesheet by splitting it into equal-sized frame buffers.
+ *
+ * @param imageData - the full spritesheet image
+ * @param frameWidth - width of each frame in pixels
+ * @param frameHeight - height of each frame in pixels
+ * @param options.direction - 'horizontal' (left-to-right) or 'vertical' (top-to-bottom)
+ * @returns array of PixelBuffers, one per frame
+ */
+export function importSpritesheet(
+  imageData: ImageData,
+  frameWidth: number,
+  frameHeight: number,
+  options?: { direction?: 'horizontal' | 'vertical' },
+): PixelBuffer[] {
+  const direction = options?.direction ?? 'horizontal';
+  const frames: PixelBuffer[] = [];
+
+  if (direction === 'horizontal') {
+    const frameCount = Math.floor(imageData.width / frameWidth);
+    for (let i = 0; i < frameCount; i++) {
+      const frame = new PixelBuffer(frameWidth, frameHeight);
+      const offsetX = i * frameWidth;
+
+      for (let y = 0; y < frameHeight && y < imageData.height; y++) {
+        for (let x = 0; x < frameWidth; x++) {
+          const srcX = offsetX + x;
+          if (srcX >= imageData.width) continue;
+
+          const srcOffset = (y * imageData.width + srcX) * 4;
+          const dstOffset = (y * frameWidth + x) * 4;
+
+          frame.data[dstOffset] = imageData.data[srcOffset] ?? 0;
+          frame.data[dstOffset + 1] = imageData.data[srcOffset + 1] ?? 0;
+          frame.data[dstOffset + 2] = imageData.data[srcOffset + 2] ?? 0;
+          frame.data[dstOffset + 3] = imageData.data[srcOffset + 3] ?? 0;
+        }
+      }
+
+      frames.push(frame);
+    }
+  } else {
+    // vertical: frames are stacked top-to-bottom
+    const frameCount = Math.floor(imageData.height / frameHeight);
+    for (let i = 0; i < frameCount; i++) {
+      const frame = new PixelBuffer(frameWidth, frameHeight);
+      const offsetY = i * frameHeight;
+
+      for (let y = 0; y < frameHeight; y++) {
+        const srcY = offsetY + y;
+        if (srcY >= imageData.height) continue;
+
+        for (let x = 0; x < frameWidth && x < imageData.width; x++) {
+          const srcOffset = (srcY * imageData.width + x) * 4;
+          const dstOffset = (y * frameWidth + x) * 4;
+
+          frame.data[dstOffset] = imageData.data[srcOffset] ?? 0;
+          frame.data[dstOffset + 1] = imageData.data[srcOffset + 1] ?? 0;
+          frame.data[dstOffset + 2] = imageData.data[srcOffset + 2] ?? 0;
+          frame.data[dstOffset + 3] = imageData.data[srcOffset + 3] ?? 0;
+        }
+      }
+
+      frames.push(frame);
+    }
+  }
+
+  return frames;
+}

package/src/lib/animation/spritesheet-export.test.ts

@@ -0,0 +1,239 @@
+import { describe, it, expect } from 'vitest';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+
+/** Shape of parsed metadata JSON produced by the various generators. */
+interface ParsedMeta {
+  format?: string;
+  frames: Record<string, { frame: { w: number; h: number } }> | Array<{ x: number; y: number }>;
+  meta?: { app?: string; frameTags?: unknown[] };
+}
+function parseMeta(json: string): ParsedMeta {
+  return JSON.parse(json) as ParsedMeta;
+}
+import type { Frame } from './frame-model.svelte.js';
+import type { Layer } from '../layers/layer-types.js';
+import {
+  calculateHorizontalLayout,
+  calculateGridLayout,
+  generatePixelweaverMeta,
+  generateTexturePackerMeta,
+  generateAsepriteMeta,
+  generateCssMeta,
+  exportSpritesheet,
+} from './spritesheet-export.js';
+
+// --- Helpers ---
+
+function makeFrame(index: number, layerId: string, width: number, height: number): Frame {
+  const buf = new PixelBuffer(width, height);
+  buf.fill(index * 40, index * 40, index * 40, 255); // distinct grayscale per frame
+  return {
+    id: `frame-${String(index)}`,
+    index,
+    durationMs: null,
+    pixelData: new Map([[layerId, buf]]),
+  };
+}
+
+function makeLayerTree(): Layer[] {
+  return [
+    {
+      id: 'layer-1',
+      name: 'Background',
+      type: 'pixel',
+      visible: true,
+      opacity: 100,
+      blendMode: 'normal',
+      locked: false,
+    },
+  ];
+}
+
+// --- Layout tests ---
+
+describe('calculateHorizontalLayout', () => {
+  it('should arrange frames in a row', () => {
+    const layout = calculateHorizontalLayout(3, 16, 16, 0);
+    expect(layout.width).toBe(48);
+    expect(layout.height).toBe(16);
+    expect(layout.positions).toEqual([
+      { x: 0, y: 0 },
+      { x: 16, y: 0 },
+      { x: 32, y: 0 },
+    ]);
+  });
+
+  it('should include padding between frames', () => {
+    const layout = calculateHorizontalLayout(3, 16, 16, 2);
+    // Width: 3 * 16 + 2 * 2 = 52
+    expect(layout.width).toBe(52);
+    expect(layout.positions[1]?.x).toBe(18); // 16 + 2 padding
+    expect(layout.positions[2]?.x).toBe(36); // 16 + 2 + 16 + 2
+  });
+
+  it('should handle a single frame', () => {
+    const layout = calculateHorizontalLayout(1, 32, 32, 4);
+    expect(layout.width).toBe(32);
+    expect(layout.height).toBe(32);
+    expect(layout.positions).toEqual([{ x: 0, y: 0 }]);
+  });
+});
+
+describe('calculateGridLayout', () => {
+  it('should arrange frames in a grid', () => {
+    const layout = calculateGridLayout(4, 16, 16, 2, 0);
+    // 2 columns, 2 rows
+    expect(layout.width).toBe(32);
+    expect(layout.height).toBe(32);
+    expect(layout.positions).toEqual([
+      { x: 0, y: 0 },
+      { x: 16, y: 0 },
+      { x: 0, y: 16 },
+      { x: 16, y: 16 },
+    ]);
+  });
+
+  it('should handle non-even frame counts', () => {
+    const layout = calculateGridLayout(5, 8, 8, 3, 0);
+    // 3 columns, 2 rows (5 frames, last row has 2)
+    expect(layout.width).toBe(24);
+    expect(layout.height).toBe(16);
+    expect(layout.positions).toHaveLength(5);
+  });
+
+  it('should include padding', () => {
+    const layout = calculateGridLayout(4, 16, 16, 2, 4);
+    // Width: 2 * 16 + 1 * 4 = 36
+    // Height: 2 * 16 + 1 * 4 = 36
+    expect(layout.width).toBe(36);
+    expect(layout.height).toBe(36);
+    expect(layout.positions[1]).toEqual({ x: 20, y: 0 });
+    expect(layout.positions[2]).toEqual({ x: 0, y: 20 });
+  });
+});
+
+// --- Metadata tests ---
+
+describe('generatePixelweaverMeta', () => {
+  it('should produce valid JSON with frame positions', () => {
+    const layout = calculateHorizontalLayout(2, 16, 16, 0);
+    const frames = [makeFrame(0, 'layer-1', 16, 16), makeFrame(1, 'layer-1', 16, 16)];
+    const meta = generatePixelweaverMeta(layout, frames, {
+      layout: 'horizontal',
+      padding: 0,
+      metadataFormat: 'pixelweaver',
+    });
+
+    const parsed = parseMeta(meta);
+    expect(parsed.format).toBe('pixelweaver');
+    const framesArr = parsed.frames as Array<{ x: number; y: number }>;
+    expect(framesArr).toHaveLength(2);
+    expect(framesArr[0]?.x).toBe(0);
+    expect(framesArr[1]?.x).toBe(16);
+  });
+});
+
+describe('generateTexturePackerMeta', () => {
+  it('should produce TexturePacker JSON hash format', () => {
+    const layout = calculateHorizontalLayout(2, 16, 16, 0);
+    const frames = [makeFrame(0, 'layer-1', 16, 16), makeFrame(1, 'layer-1', 16, 16)];
+    const meta = generateTexturePackerMeta(layout, frames, 16, 16);
+
+    const parsed = parseMeta(meta);
+    expect(parsed.frames).toBeDefined();
+    const framesMap = parsed.frames as Record<string, { frame: { w: number; h: number } }>;
+    expect(framesMap['frame_0']).toBeDefined();
+    expect(framesMap['frame_0']?.frame.w).toBe(16);
+    expect(parsed.meta?.app).toBe('PixelWeaver');
+  });
+});
+
+describe('generateAsepriteMeta', () => {
+  it('should produce Aseprite-compatible JSON', () => {
+    const layout = calculateHorizontalLayout(1, 16, 16, 0);
+    const frames = [makeFrame(0, 'layer-1', 16, 16)];
+    const meta = generateAsepriteMeta(layout, frames, 16, 16);
+
+    const parsed = parseMeta(meta);
+    expect(parsed.meta?.app).toContain('aseprite');
+    expect(parsed.meta?.frameTags).toEqual([]);
+    expect(Object.keys(parsed.frames)).toHaveLength(1);
+  });
+});
+
+describe('generateCssMeta', () => {
+  it('should produce CSS with sprite class and keyframes', () => {
+    const layout = calculateHorizontalLayout(2, 16, 16, 0);
+    const frames = [makeFrame(0, 'layer-1', 16, 16), makeFrame(1, 'layer-1', 16, 16)];
+    const css = generateCssMeta(layout, frames, 16, 16);
+
+    expect(css).toContain('.sprite {');
+    expect(css).toContain('.sprite-frame-0');
+    expect(css).toContain('.sprite-frame-1');
+    expect(css).toContain('@keyframes sprite-animation');
+  });
+});
+
+// --- Export integration test ---
+
+describe('exportSpritesheet', () => {
+  it('should produce a spritesheet image and metadata', () => {
+    const frames = [
+      makeFrame(0, 'layer-1', 8, 8),
+      makeFrame(1, 'layer-1', 8, 8),
+      makeFrame(2, 'layer-1', 8, 8),
+    ];
+    const layerTree = makeLayerTree();
+
+    const result = exportSpritesheet(frames, layerTree, {
+      layout: 'horizontal',
+      padding: 0,
+      metadataFormat: 'pixelweaver',
+    });
+
+    expect(result.image.width).toBe(24); // 3 * 8
+    expect(result.image.height).toBe(8);
+    expect(result.metadata).toBeTruthy();
+    const parsed = parseMeta(result.metadata);
+    expect(parsed.frames).toHaveLength(3);
+  });
+
+  it('should use grid layout with specified columns', () => {
+    const frames = [
+      makeFrame(0, 'layer-1', 8, 8),
+      makeFrame(1, 'layer-1', 8, 8),
+      makeFrame(2, 'layer-1', 8, 8),
+      makeFrame(3, 'layer-1', 8, 8),
+    ];
+    const layerTree = makeLayerTree();
+
+    const result = exportSpritesheet(frames, layerTree, {
+      layout: 'grid',
+      columns: 2,
+      padding: 0,
+      metadataFormat: 'pixelweaver',
+    });
+
+    expect(result.image.width).toBe(16);  // 2 * 8
+    expect(result.image.height).toBe(16); // 2 * 8
+  });
+
+  it('should apply padding in the spritesheet', () => {
+    const frames = [
+      makeFrame(0, 'layer-1', 8, 8),
+      makeFrame(1, 'layer-1', 8, 8),
+    ];
+    const layerTree = makeLayerTree();
+
+    const result = exportSpritesheet(frames, layerTree, {
+      layout: 'horizontal',
+      padding: 2,
+      metadataFormat: 'pixelweaver',
+    });
+
+    expect(result.image.width).toBe(18); // 8 + 2 + 8
+    // The padding area (pixels 8-9) should be transparent
+    expect(result.image.getPixel(8, 0)[3]).toBe(0);
+    expect(result.image.getPixel(9, 0)[3]).toBe(0);
+  });
+});