merge: resolve conflict with main branch in tool-registry.tsx

tests/unit/api/format-decoders.test.ts

@@ -69,11 +69,38 @@ describe("needsCliDecode", () => {
   it("returns false for unknown format", () => {
     expect(needsCliDecode("xyz")).toBe(false);
   });
-});
 
-// ==========================================================================
-// decodeToSharpCompat — routing logic (default passthrough)
-// ==========================================================================
+  it("returns true for jp2 format", () => {
+    expect(needsCliDecode("jp2")).toBe(true);
+  });
+  it("returns true for eps format", () => {
+    expect(needsCliDecode("eps")).toBe(true);
+  });
+  it("returns true for dds format", () => {
+    expect(needsCliDecode("dds")).toBe(true);
+  });
+  it("returns true for cur format", () => {
+    expect(needsCliDecode("cur")).toBe(true);
+  });
+  it("returns true for dpx format", () => {
+    expect(needsCliDecode("dpx")).toBe(true);
+  });
+  it("returns true for fits format", () => {
+    expect(needsCliDecode("fits")).toBe(true);
+  });
+  it("returns true for qoi format", () => {
+    expect(needsCliDecode("qoi")).toBe(true);
+  });
+  it("returns true for ppm format", () => {
+    expect(needsCliDecode("ppm")).toBe(true);
+  });
+  it("returns true for pgm format", () => {
+    expect(needsCliDecode("pgm")).toBe(true);
+  });
+  it("returns true for pbm format", () => {
+    expect(needsCliDecode("pbm")).toBe(true);
+  });
+});
 
 describe("decodeToSharpCompat", () => {
   it("returns buffer unchanged for unknown/native formats", async () => {

tests/unit/beautify-backgrounds.test.ts

@@ -0,0 +1,129 @@
+import sharp from "sharp";
+import { describe, expect, it } from "vitest";
+import {
+  generateBackground,
+  getDominantBackground,
+} from "../../apps/api/src/lib/beautify/backgrounds.js";
+
+describe("generateBackground", () => {
+  it("generates a solid color background", async () => {
+    const buf = await generateBackground({
+      type: "solid",
+      color: "#ff0000",
+      width: 200,
+      height: 100,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(200);
+    expect(meta.height).toBe(100);
+    expect(meta.channels).toBe(4);
+  });
+
+  it("generates a linear gradient background", async () => {
+    const buf = await generateBackground({
+      type: "linear-gradient",
+      stops: [
+        { color: "#667eea", position: 0 },
+        { color: "#764ba2", position: 100 },
+      ],
+      angle: 135,
+      width: 400,
+      height: 300,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height).toBe(300);
+  });
+
+  it("generates a radial gradient background", async () => {
+    const buf = await generateBackground({
+      type: "radial-gradient",
+      stops: [
+        { color: "#667eea", position: 0 },
+        { color: "#764ba2", position: 100 },
+      ],
+      width: 400,
+      height: 300,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height).toBe(300);
+  });
+
+  it("generates a transparent background", async () => {
+    const buf = await generateBackground({
+      type: "transparent",
+      width: 200,
+      height: 100,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(200);
+    expect(meta.height).toBe(100);
+    expect(meta.hasAlpha).toBe(true);
+  });
+
+  it("generates an image background", async () => {
+    const red = await sharp({
+      create: {
+        width: 800,
+        height: 600,
+        channels: 4,
+        background: { r: 255, g: 0, b: 0, alpha: 1 },
+      },
+    })
+      .png()
+      .toBuffer();
+
+    const buf = await generateBackground({
+      type: "image",
+      imageBuffer: red,
+      width: 400,
+      height: 300,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height).toBe(300);
+  });
+
+  it("generates multi-stop linear gradient", async () => {
+    const buf = await generateBackground({
+      type: "linear-gradient",
+      stops: [
+        { color: "#0f0c29", position: 0 },
+        { color: "#302b63", position: 50 },
+        { color: "#24243e", position: 100 },
+      ],
+      angle: 135,
+      width: 400,
+      height: 300,
+    });
+    const meta = await sharp(buf).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height).toBe(300);
+  });
+});
+
+describe("getDominantBackground", () => {
+  it("returns solid color for solid type", () => {
+    const result = getDominantBackground({ type: "solid", color: "#ff0000" });
+    expect(result).toEqual({ r: 255, g: 0, b: 0, alpha: 1 });
+  });
+
+  it("returns last gradient stop for gradient type", () => {
+    const result = getDominantBackground({
+      type: "linear-gradient",
+      stops: [
+        { color: "#667eea", position: 0 },
+        { color: "#764ba2", position: 100 },
+      ],
+    });
+    expect(result.r).toBe(118);
+    expect(result.g).toBe(75);
+    expect(result.b).toBe(162);
+  });
+
+  it("returns transparent for transparent type", () => {
+    const result = getDominantBackground({ type: "transparent" });
+    expect(result.alpha).toBe(0);
+  });
+});

tests/unit/beautify-frames.test.ts

@@ -0,0 +1,118 @@
+import sharp from "sharp";
+import { describe, expect, it } from "vitest";
+import { renderFrame } from "../../apps/api/src/lib/beautify/frames.js";
+
+describe("renderFrame", () => {
+  const makeImage = (w: number, h: number) =>
+    sharp({
+      create: {
+        width: w,
+        height: h,
+        channels: 4,
+        background: { r: 200, g: 200, b: 200, alpha: 1 },
+      },
+    })
+      .png()
+      .toBuffer();
+
+  it("returns original image for frame 'none'", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "none");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height).toBe(300);
+  });
+
+  it("renders macOS light frame with title bar above image", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "macos-light", "My App");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders macOS dark frame", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "macos-dark");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders Windows light frame", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "windows-light");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders Windows dark frame", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "windows-dark");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders browser light frame with URL bar", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "browser-light", "example.com");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders browser dark frame", async () => {
+    const img = await makeImage(400, 300);
+    const result = await renderFrame(img, "browser-dark", "app.test.com");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(400);
+    expect(meta.height!).toBeGreaterThan(300);
+  });
+
+  it("renders iPhone frame with image composited into screen area", async () => {
+    const img = await makeImage(400, 800);
+    const result = await renderFrame(img, "iphone");
+    const meta = await sharp(result).metadata();
+    expect(meta.width!).toBeGreaterThan(400);
+    expect(meta.height!).toBeGreaterThan(800);
+  });
+
+  it("renders MacBook frame", async () => {
+    const img = await makeImage(800, 500);
+    const result = await renderFrame(img, "macbook");
+    const meta = await sharp(result).metadata();
+    expect(meta.width!).toBeGreaterThan(800);
+  });
+
+  it("renders iPad frame", async () => {
+    const img = await makeImage(400, 600);
+    const result = await renderFrame(img, "ipad");
+    const meta = await sharp(result).metadata();
+    expect(meta.width!).toBeGreaterThan(400);
+  });
+
+  it("renders iPhone dark frame", async () => {
+    const img = await makeImage(400, 800);
+    const result = await renderFrame(img, "iphone-dark");
+    const meta = await sharp(result).metadata();
+    expect(meta.width!).toBeGreaterThan(400);
+  });
+
+  it("handles wide images", async () => {
+    const img = await makeImage(1920, 1080);
+    const result = await renderFrame(img, "macos-light", "Wide App");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(1920);
+    expect(meta.height!).toBeGreaterThan(1080);
+  });
+
+  it("handles narrow images", async () => {
+    const img = await makeImage(100, 200);
+    const result = await renderFrame(img, "browser-light", "narrow.app");
+    const meta = await sharp(result).metadata();
+    expect(meta.width).toBe(100);
+    expect(meta.height!).toBeGreaterThan(200);
+  });
+});

tests/unit/beautify-shadow.test.ts

@@ -0,0 +1,87 @@
+import sharp from "sharp";
+import { describe, expect, it } from "vitest";
+import { applyShadow } from "../../apps/api/src/lib/beautify/shadow.js";
+
+describe("applyShadow", () => {
+  const makeImage = (w: number, h: number) =>
+    sharp({
+      create: {
+        width: w,
+        height: h,
+        channels: 4,
+        background: { r: 100, g: 100, b: 255, alpha: 1 },
+      },
+    })
+      .png()
+      .toBuffer();
+
+  it("returns larger buffer with shadow applied", async () => {
+    const img = await makeImage(200, 150);
+    const result = await applyShadow(img, {
+      blur: 20,
+      offsetX: 0,
+      offsetY: 10,
+      color: "#000000",
+      opacity: 30,
+    });
+    const meta = await sharp(result.buffer).metadata();
+    expect(meta.width).toBeGreaterThan(200);
+    expect(meta.height).toBeGreaterThan(150);
+    expect(result.padLeft).toBeGreaterThanOrEqual(0);
+    expect(result.padTop).toBeGreaterThanOrEqual(0);
+  });
+
+  it("returns image position within shadow canvas", async () => {
+    const img = await makeImage(200, 150);
+    const result = await applyShadow(img, {
+      blur: 20,
+      offsetX: 5,
+      offsetY: 10,
+      color: "#000000",
+      opacity: 50,
+    });
+    expect(result.imgX).toBeDefined();
+    expect(result.imgY).toBeDefined();
+  });
+
+  it("handles zero-blur shadow gracefully", async () => {
+    const img = await makeImage(100, 100);
+    const result = await applyShadow(img, {
+      blur: 0,
+      offsetX: 0,
+      offsetY: 0,
+      color: "#000000",
+      opacity: 0,
+    });
+    const meta = await sharp(result.buffer).metadata();
+    expect(meta.width).toBeGreaterThanOrEqual(100);
+  });
+
+  it("handles negative offsets", async () => {
+    const img = await makeImage(200, 150);
+    const result = await applyShadow(img, {
+      blur: 15,
+      offsetX: -10,
+      offsetY: -5,
+      color: "#ff0000",
+      opacity: 40,
+    });
+    const meta = await sharp(result.buffer).metadata();
+    expect(meta.width).toBeGreaterThan(200);
+    expect(meta.height).toBeGreaterThan(150);
+  });
+
+  it("produces RGBA output with alpha channel", async () => {
+    const img = await makeImage(100, 100);
+    const result = await applyShadow(img, {
+      blur: 10,
+      offsetX: 0,
+      offsetY: 5,
+      color: "#000000",
+      opacity: 30,
+    });
+    const meta = await sharp(result.buffer).metadata();
+    expect(meta.hasAlpha).toBe(true);
+    expect(meta.channels).toBe(4);
+  });
+});

tests/unit/image-engine/color-blindness.test.ts

@@ -0,0 +1,87 @@
+import type { ColorBlindnessType } from "@snapotter/image-engine";
+import { COLOR_BLINDNESS_MATRICES, colorBlindness } from "@snapotter/image-engine";
+import sharp from "sharp";
+import { describe, expect, it } from "vitest";
+
+const ALL_TYPES: ColorBlindnessType[] = [
+  "protanopia",
+  "deuteranopia",
+  "tritanopia",
+  "protanomaly",
+  "deuteranomaly",
+  "tritanomaly",
+  "achromatopsia",
+  "blueConeMonochromacy",
+];
+
+function makeColorImage(r: number, g: number, b: number): sharp.Sharp {
+  return sharp({
+    create: { width: 10, height: 10, channels: 3, background: { r, g, b } },
+  }).png();
+}
+
+describe("Color blindness matrices", () => {
+  it("all 8 types have a valid 3x3 matrix", () => {
+    for (const type of ALL_TYPES) {
+      const matrix = COLOR_BLINDNESS_MATRICES[type];
+      expect(matrix).toBeDefined();
+      expect(matrix).toHaveLength(3);
+      for (const row of matrix) {
+        expect(row).toHaveLength(3);
+        for (const val of row) {
+          expect(Number.isFinite(val)).toBe(true);
+        }
+      }
+    }
+  });
+
+  it("matrix row sums are in a reasonable range (0 to 1.5)", () => {
+    for (const type of ALL_TYPES) {
+      const matrix = COLOR_BLINDNESS_MATRICES[type];
+      for (const row of matrix) {
+        const sum = row[0] + row[1] + row[2];
+        expect(sum).toBeGreaterThanOrEqual(0);
+        expect(sum).toBeLessThanOrEqual(1.5);
+      }
+    }
+  });
+});
+
+describe("colorBlindness operation", () => {
+  it("returns a Sharp instance for each type", async () => {
+    for (const type of ALL_TYPES) {
+      const result = await colorBlindness(makeColorImage(255, 0, 0), { type });
+      const buf = await result.toBuffer();
+      expect(buf.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("different types produce different outputs on a red image", async () => {
+    const outputs = new Map<string, Buffer>();
+    for (const type of ALL_TYPES) {
+      const result = await colorBlindness(makeColorImage(255, 0, 0), { type });
+      const { data } = await result.removeAlpha().raw().toBuffer({ resolveWithObject: true });
+      outputs.set(type, Buffer.from(data));
+    }
+    const uniqueOutputs = new Set([...outputs.values()].map((b) => `${b[0]},${b[1]},${b[2]}`));
+    expect(uniqueOutputs.size).toBeGreaterThan(1);
+  });
+
+  it("achromatopsia produces grayscale output (R === G === B)", async () => {
+    const result = await colorBlindness(makeColorImage(255, 0, 0), {
+      type: "achromatopsia",
+    });
+    const { data } = await result.removeAlpha().raw().toBuffer({ resolveWithObject: true });
+    expect(data[0]).toBe(data[1]);
+    expect(data[1]).toBe(data[2]);
+  });
+
+  it("preserves image dimensions", async () => {
+    const result = await colorBlindness(makeColorImage(100, 150, 200), {
+      type: "deuteranomaly",
+    });
+    const meta = await result.metadata();
+    expect(meta.width).toBe(10);
+    expect(meta.height).toBe(10);
+  });
+});

tests/unit/image-engine/detect.test.ts

@@ -238,5 +238,60 @@ describe("detectFormat", () => {
       const format = await detectFormat(Buffer.from([0x89]));
       expect(format).toBe("unknown");
     });
+
+    it("detects DDS magic bytes", async () => {
+      const buf = Buffer.from([0x44, 0x44, 0x53, 0x20, 0, 0, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("dds");
+    });
+
+    it("detects CUR magic bytes", async () => {
+      const buf = Buffer.from([0x00, 0x00, 0x02, 0x00, 0, 0, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("cur");
+    });
+
+    it("detects DPX forward magic bytes", async () => {
+      const buf = Buffer.from([0x53, 0x44, 0x50, 0x58, 0, 0, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("dpx");
+    });
+
+    it("detects FITS magic bytes", async () => {
+      const buf = Buffer.from([0x53, 0x49, 0x4d, 0x50, 0x4c, 0x45, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("fits");
+    });
+
+    it("detects EPS ASCII magic bytes", async () => {
+      const buf = Buffer.from([0x25, 0x21, 0x50, 0x53, 0x2d, 0x41, 0x64, 0x6f, 0x62, 0x65, 0, 0]);
+      expect(await detectFormat(buf)).toBe("eps");
+    });
+
+    it("detects EPS DOS binary magic bytes", async () => {
+      const buf = Buffer.from([0xc5, 0xd0, 0xd3, 0xc6, 0, 0, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("eps");
+    });
+
+    it("detects QOI magic bytes", async () => {
+      const buf = Buffer.from([0x71, 0x6f, 0x69, 0x66, 0, 0, 0, 0, 0, 0, 0, 0]);
+      expect(await detectFormat(buf)).toBe("qoi");
+    });
+  });
+
+  describe("real fixture format detection", () => {
+    const fixtures: Array<{ file: string; expected: string[] }> = [
+      { file: "sample.dds", expected: ["dds", "unknown"] },
+      { file: "sample.cur", expected: ["cur", "ico", "unknown"] },
+      { file: "sample.dpx", expected: ["dpx", "unknown"] },
+      { file: "sample.fits", expected: ["fits", "unknown"] },
+      { file: "sample.eps", expected: ["eps", "unknown"] },
+      { file: "sample.qoi", expected: ["qoi", "unknown"] },
+      { file: "sample.apng", expected: ["png"] },
+    ];
+
+    for (const { file, expected } of fixtures) {
+      it(`detects ${file}`, async () => {
+        const buffer = readFileSync(path.join(FORMATS_DIR, file));
+        const format = await detectFormat(buffer);
+        expect(expected).toContain(format);
+      });
+    }
   });
 });

tests/unit/image-engine/qoi.test.ts

@@ -0,0 +1,174 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { qoiDecode, qoiEncode } from "@snapotter/image-engine";
+import { describe, expect, it } from "vitest";
+
+const FORMATS_DIR = path.resolve(__dirname, "../../fixtures/formats");
+
+describe("QOI codec", () => {
+  it("round-trips RGBA pixel data", () => {
+    const w = 4,
+      h = 4;
+    const pixels = new Uint8Array(w * h * 4);
+    for (let i = 0; i < w * h; i++) {
+      pixels[i * 4] = (i * 17) & 0xff;
+      pixels[i * 4 + 1] = (i * 31) & 0xff;
+      pixels[i * 4 + 2] = (i * 53) & 0xff;
+      pixels[i * 4 + 3] = 255;
+    }
+    const encoded = qoiEncode(pixels, w, h, 4);
+    const { header, pixels: decoded } = qoiDecode(encoded);
+    expect(header.width).toBe(w);
+    expect(header.height).toBe(h);
+    for (let i = 0; i < w * h * 4; i++) expect(decoded[i]).toBe(pixels[i]);
+  });
+
+  it("encodes 3-channel data", () => {
+    const w = 3,
+      h = 3;
+    const pixels = new Uint8Array(w * h * 3);
+    for (let i = 0; i < pixels.length; i++) pixels[i] = (i * 41) & 0xff;
+    const encoded = qoiEncode(pixels, w, h, 3);
+    const { header, pixels: decoded } = qoiDecode(encoded);
+    expect(header.channels).toBe(3);
+    for (let i = 0; i < w * h; i++) {
+      expect(decoded[i * 4 + 3]).toBe(255);
+    }
+  });
+
+  it("writes correct header magic", () => {
+    const encoded = qoiEncode(new Uint8Array(4), 1, 1, 4);
+    const view = new DataView(encoded.buffer, encoded.byteOffset);
+    expect(view.getUint32(0)).toBe(0x716f6966);
+  });
+
+  it("writes correct header dimensions", () => {
+    const encoded = qoiEncode(new Uint8Array(20 * 15 * 4), 20, 15, 4);
+    const view = new DataView(encoded.buffer, encoded.byteOffset);
+    expect(view.getUint32(4)).toBe(20);
+    expect(view.getUint32(8)).toBe(15);
+    expect(encoded[12]).toBe(4);
+  });
+
+  it("round-trips 1x1 image", () => {
+    const pixels = new Uint8Array([42, 128, 200, 255]);
+    const { pixels: decoded } = qoiDecode(qoiEncode(pixels, 1, 1, 4));
+    expect(decoded[0]).toBe(42);
+    expect(decoded[3]).toBe(255);
+  });
+
+  it("round-trips solid color image", () => {
+    const w = 8,
+      h = 8;
+    const pixels = new Uint8Array(w * h * 4);
+    for (let i = 0; i < w * h; i++) {
+      pixels[i * 4] = 100;
+      pixels[i * 4 + 1] = 150;
+      pixels[i * 4 + 2] = 200;
+      pixels[i * 4 + 3] = 255;
+    }
+    const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
+    for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
+  });
+
+  it("compresses solid color efficiently", () => {
+    const w = 100,
+      h = 100;
+    const pixels = new Uint8Array(w * h * 4);
+    for (let i = 0; i < w * h; i++) {
+      pixels[i * 4] = 50;
+      pixels[i * 4 + 1] = 100;
+      pixels[i * 4 + 2] = 150;
+      pixels[i * 4 + 3] = 255;
+    }
+    const encoded = qoiEncode(pixels, w, h, 4);
+    expect(encoded.length).toBeLessThan(pixels.length / 10);
+  });
+
+  it("round-trips gradient", () => {
+    const w = 16,
+      h = 1;
+    const pixels = new Uint8Array(w * 4);
+    for (let i = 0; i < w; i++) {
+      const v = Math.round((i / (w - 1)) * 255);
+      pixels[i * 4] = v;
+      pixels[i * 4 + 1] = v;
+      pixels[i * 4 + 2] = v;
+      pixels[i * 4 + 3] = 255;
+    }
+    const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
+    for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
+  });
+
+  it("round-trips random-ish data", () => {
+    const w = 10,
+      h = 10;
+    const pixels = new Uint8Array(w * h * 4);
+    for (let i = 0; i < pixels.length; i++) pixels[i] = (i * 97 + 53) & 0xff;
+    const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
+    for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
+  });
+
+  it("round-trips varying alpha", () => {
+    const pixels = new Uint8Array([
+      100, 150, 200, 0, 100, 150, 200, 128, 100, 150, 200, 255, 0, 0, 0, 0,
+    ]);
+    const { pixels: decoded } = qoiDecode(qoiEncode(pixels, 4, 1, 4));
+    for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
+  });
+
+  it("throws on invalid magic", () => {
+    expect(() => qoiDecode(new Uint8Array(20))).toThrow();
+  });
+
+  it("throws on zero width", () => {
+    const buf = new Uint8Array(14);
+    const v = new DataView(buf.buffer);
+    v.setUint32(0, 0x716f6966);
+    v.setUint32(4, 0);
+    v.setUint32(8, 1);
+    buf[12] = 4;
+    expect(() => qoiDecode(buf)).toThrow();
+  });
+
+  it("throws on zero height", () => {
+    const buf = new Uint8Array(14);
+    const v = new DataView(buf.buffer);
+    v.setUint32(0, 0x716f6966);
+    v.setUint32(4, 1);
+    v.setUint32(8, 0);
+    buf[12] = 4;
+    expect(() => qoiDecode(buf)).toThrow();
+  });
+
+  it("throws on invalid channels", () => {
+    const buf = new Uint8Array(14);
+    const v = new DataView(buf.buffer);
+    v.setUint32(0, 0x716f6966);
+    v.setUint32(4, 1);
+    v.setUint32(8, 1);
+    buf[12] = 5;
+    expect(() => qoiDecode(buf)).toThrow();
+  });
+
+  it("ends with correct end marker", () => {
+    const encoded = qoiEncode(new Uint8Array([1, 2, 3, 255]), 1, 1, 4);
+    expect(Array.from(encoded.slice(-8))).toEqual([0, 0, 0, 0, 0, 0, 0, 1]);
+  });
+
+  it("decodes real fixture with correct header", () => {
+    const data = readFileSync(path.join(FORMATS_DIR, "sample.qoi"));
+    const { header } = qoiDecode(new Uint8Array(data));
+    expect(header.width).toBe(10);
+    expect(header.height).toBe(10);
+    expect(header.channels).toBe(4);
+  });
+
+  it("re-encodes real fixture with matching pixels", () => {
+    const data = readFileSync(path.join(FORMATS_DIR, "sample.qoi"));
+    const { header, pixels } = qoiDecode(new Uint8Array(data));
+    const reEncoded = qoiEncode(pixels, header.width, header.height, 4);
+    const { pixels: reDecoded } = qoiDecode(reEncoded);
+    for (let i = 0; i < pixels.length; i++) expect(reDecoded[i]).toBe(pixels[i]);
+  });
+});

tests/unit/landing/bento-grid.test.tsx

@@ -25,7 +25,7 @@ function getCountText(): string {
 describe("BentoGrid", () => {
   it("renders the section heading", () => {
     render(<BentoGrid />);
-    expect(screen.getByText("48 tools. Zero cloud dependency.")).toBeDefined();
+    expect(screen.getByText("50 tools. Zero cloud dependency.")).toBeDefined();
   });
 
   it("renders the search input", () => {
@@ -36,12 +36,12 @@ describe("BentoGrid", () => {
   it("shows all tools by default", () => {
     render(<BentoGrid />);
     const text = getCountText();
-    expect(text).toMatch(/Showing 48 of 48 tools/);
+    expect(text).toMatch(/Showing 50 of 50 tools/);
   });
 
   it("renders category filter pills including All", () => {
     render(<BentoGrid />);
-    expect(screen.getByText((_, el) => el?.textContent === "All (48)")).toBeDefined();
+    expect(screen.getByText((_, el) => el?.textContent === "All (50)")).toBeDefined();
     expect(screen.getByText(/Essentials/)).toBeDefined();
     expect(screen.getByText(/AI Tools/)).toBeDefined();
     expect(screen.getByText(/Optimization/)).toBeDefined();
@@ -53,7 +53,7 @@ describe("BentoGrid", () => {
     fireEvent.change(input, { target: { value: "resize" } });
     expect(screen.getByText("Resize")).toBeDefined();
     const text = getCountText();
-    expect(text).toMatch(/Showing \d+ of 48 tools/);
+    expect(text).toMatch(/Showing \d+ of 50 tools/);
     expect(screen.queryByText("OCR / Text Extraction")).toBeNull();
   });
 
@@ -62,7 +62,7 @@ describe("BentoGrid", () => {
     const aiButton = screen.getByText(/AI Tools/);
     fireEvent.click(aiButton);
     const text = getCountText();
-    expect(text).toMatch(/Showing 15 of 48 tools/);
+    expect(text).toMatch(/Showing 15 of 50 tools/);
     expect(screen.getByText("Remove Background")).toBeDefined();
     expect(screen.queryByText("Resize")).toBeNull();
   });
@@ -73,7 +73,7 @@ describe("BentoGrid", () => {
     fireEvent.change(input, { target: { value: "xyznonexistent" } });
     expect(screen.getByText("No tools found. Try a different search.")).toBeDefined();
     const text = getCountText();
-    expect(text).toMatch(/Showing 0 of 48 tools/);
+    expect(text).toMatch(/Showing 0 of 50 tools/);
   });
 
   it("combines search and category filter", () => {
@@ -89,9 +89,9 @@ describe("BentoGrid", () => {
   it("clicking All resets category filter", () => {
     render(<BentoGrid />);
     fireEvent.click(screen.getByText(/AI Tools/));
-    expect(getCountText()).toMatch(/Showing 15 of 48 tools/);
-    fireEvent.click(screen.getByText((_, el) => el?.textContent === "All (48)"));
-    expect(getCountText()).toMatch(/Showing 48 of 48 tools/);
+    expect(getCountText()).toMatch(/Showing 15 of 50 tools/);
+    fireEvent.click(screen.getByText((_, el) => el?.textContent === "All (50)"));
+    expect(getCountText()).toMatch(/Showing 50 of 50 tools/);
   });
 
   it("renders each tool with name and description", () => {

tests/unit/web/editor-types.test.ts

@@ -0,0 +1,168 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import type {
+  CanvasObject,
+  EllipseAttrs,
+  LineAttrs,
+  RectAttrs,
+  TextAttrs,
+  ToolType,
+} from "@/types/editor";
+
+describe("CanvasObject discriminated union", () => {
+  it("narrows to line type with LineAttrs", () => {
+    const obj: CanvasObject = {
+      id: "l1",
+      type: "line",
+      layerId: "layer-1",
+      attrs: {
+        points: [0, 0, 100, 100],
+        stroke: "#000",
+        strokeWidth: 2,
+        tension: 0,
+        lineCap: "round",
+        lineJoin: "round",
+        opacity: 1,
+        globalCompositeOperation: "source-over",
+      },
+    };
+    if (obj.type === "line") {
+      const attrs: LineAttrs = obj.attrs;
+      expect(attrs.points).toEqual([0, 0, 100, 100]);
+      expect(attrs.stroke).toBe("#000");
+      expect(attrs.strokeWidth).toBe(2);
+    } else {
+      expect.unreachable("should have narrowed to line");
+    }
+  });
+
+  it("narrows to rect type with RectAttrs", () => {
+    const obj: CanvasObject = {
+      id: "r1",
+      type: "rect",
+      layerId: "layer-1",
+      attrs: {
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 50,
+        fill: "#ff0000",
+        stroke: "#000",
+        strokeWidth: 1,
+        cornerRadius: 5,
+        rotation: 0,
+        opacity: 1,
+      },
+    };
+    if (obj.type === "rect") {
+      const attrs: RectAttrs = obj.attrs;
+      expect(attrs.x).toBe(10);
+      expect(attrs.y).toBe(20);
+      expect(attrs.cornerRadius).toBe(5);
+    } else {
+      expect.unreachable("should have narrowed to rect");
+    }
+  });
+
+  it("narrows to text type with TextAttrs", () => {
+    const obj: CanvasObject = {
+      id: "t1",
+      type: "text",
+      layerId: "layer-1",
+      attrs: {
+        x: 50,
+        y: 60,
+        text: "Hello",
+        fontFamily: "Arial",
+        fontSize: 16,
+        fontStyle: "normal",
+        fontVariant: "normal",
+        textDecoration: "",
+        align: "left",
+        fill: "#000",
+        lineHeight: 1.2,
+        letterSpacing: 0,
+        rotation: 0,
+        opacity: 1,
+      },
+    };
+    if (obj.type === "text") {
+      const attrs: TextAttrs = obj.attrs;
+      expect(attrs.text).toBe("Hello");
+      expect(attrs.fontFamily).toBe("Arial");
+      expect(attrs.fontSize).toBe(16);
+    } else {
+      expect.unreachable("should have narrowed to text");
+    }
+  });
+
+  it("narrows to ellipse type with EllipseAttrs", () => {
+    const obj: CanvasObject = {
+      id: "e1",
+      type: "ellipse",
+      layerId: "layer-1",
+      attrs: {
+        x: 100,
+        y: 100,
+        radiusX: 50,
+        radiusY: 30,
+        fill: "#00ff00",
+        stroke: "#000",
+        strokeWidth: 1,
+        rotation: 0,
+        opacity: 1,
+      },
+    };
+    if (obj.type === "ellipse") {
+      const attrs: EllipseAttrs = obj.attrs;
+      expect(attrs.radiusX).toBe(50);
+      expect(attrs.radiusY).toBe(30);
+    } else {
+      expect.unreachable("should have narrowed to ellipse");
+    }
+  });
+});
+
+describe("ToolType", () => {
+  it("includes expected tool variants", () => {
+    const tools: ToolType[] = [
+      "move",
+      "marquee-rect",
+      "marquee-ellipse",
+      "lasso-free",
+      "lasso-poly",
+      "magic-wand",
+      "crop",
+      "eyedropper",
+      "brush",
+      "eraser",
+      "pencil",
+      "clone-stamp",
+      "dodge",
+      "burn",
+      "sponge",
+      "blur-brush",
+      "sharpen-brush",
+      "smudge",
+      "fill",
+      "gradient",
+      "shape-rect",
+      "shape-ellipse",
+      "shape-line",
+      "shape-arrow",
+      "shape-polygon",
+      "shape-star",
+      "text",
+      "hand",
+      "zoom",
+      "transform",
+    ];
+    // If this compiles without error, the union accepts all these values
+    expect(tools).toHaveLength(30);
+  });
+
+  it("each variant is a string", () => {
+    const tool: ToolType = "brush";
+    expect(typeof tool).toBe("string");
+  });
+});