Release Image Tools 0.2.0

tests/browser/app.spec.ts

@@ -42,7 +42,7 @@ test("serves the release identity and hardened headers", async ({
   const manifest = await request.get("/deep/nested/image/toolbox-app.json");
   await expect(manifest.json()).resolves.toMatchObject({
     id: "de.add-ideas.image-tools",
-    version: "0.1.0",
+    version: "0.2.0",
     entry: "./",
   });
 });
@@ -54,7 +54,7 @@ test("inspects, previews, resizes and exports a static PNG locally", async ({
   page.on("pageerror", (error) => errors.push(error.message));
   const external = await localOnly(page);
   await page.goto("/deep/nested/image/");
-  await page.locator('input[type="file"]').setInputFiles({
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
     name: "tiny.png",
     mimeType: "image/png",
     buffer: Buffer.from(VALID_PNG_BASE64, "base64"),
@@ -83,7 +83,7 @@ test("inspects, previews, resizes and exports a static PNG locally", async ({
 
 test("rejects an animated PNG without decoding a frame", async ({ page }) => {
   await page.goto("/deep/nested/image/");
-  await page.locator('input[type="file"]').setInputFiles({
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
     name: "animated.png",
     mimeType: "image/png",
     buffer: Buffer.from(pngFixture(8, 8, { animated: true })),
@@ -101,7 +101,7 @@ test("uses exact native JPEG and WebP codec capabilities", async ({ page }) => {
   const webp = await browserRaster(page, "image/webp");
   expect(jpeg.mimeType).toBe("image/jpeg");
   expect(webp.mimeType).toBe("image/webp");
-  await page.locator('input[type="file"]').setInputFiles([
+  await page.locator('.drop-zone input[type="file"]').setInputFiles([
     {
       name: "sample.jpg",
       mimeType: jpeg.mimeType,
@@ -136,6 +136,52 @@ test("uses exact native JPEG and WebP codec capabilities", async ({ page }) => {
   expect(external).toEqual([]);
 });
 
+test("zooms, exposes the interactive crop and exports a reusable recipe", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  await page.locator('.drop-zone input[type="file"]').setInputFiles({
+    name: "crop.png",
+    mimeType: "image/png",
+    buffer: Buffer.from(VALID_PNG_BASE64, "base64"),
+  });
+  await expect(
+    page.getByRole("img", { name: "crop.png, edited preview" }),
+  ).toBeVisible();
+  await page.getByRole("slider", { name: "Zoom" }).fill("175");
+  await expect(page.getByText("Zoom 175%")).toBeVisible();
+  await page.getByLabel("Width %").fill("60");
+  await expect(
+    page.getByRole("application", { name: /Interactive crop rectangle/iu }),
+  ).toBeVisible();
+  const recipeDownload = page.waitForEvent("download");
+  await page.getByRole("button", { name: "Save recipe" }).click();
+  expect((await recipeDownload).suggestedFilename()).toBe(
+    "image-tools-recipe.json",
+  );
+  await page.getByText("Native codec capabilities").click();
+  await expect(
+    page.getByText(/PNG decode available · encode available/iu),
+  ).toBeVisible();
+});
+
+test("packages completed queue outputs into one batch ZIP", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  const buffer = Buffer.from(VALID_PNG_BASE64, "base64");
+  await page.locator('.drop-zone input[type="file"]').setInputFiles([
+    { name: "one.png", mimeType: "image/png", buffer },
+    { name: "two.png", mimeType: "image/png", buffer },
+  ]);
+  await expect(page.getByRole("heading", { name: "one.png" })).toBeVisible();
+  await page.getByRole("button", { name: "Process queue" }).click();
+  await expect(page.getByText(/Finished 2 of 2/iu)).toBeVisible();
+  const batch = page.waitForEvent("download");
+  await page.getByRole("button", { name: "Batch ZIP (2)" }).click();
+  expect((await batch).suggestedFilename()).toBe("image-tools-batch.zip");
+});
+
 async function browserRaster(page: Page, type: "image/jpeg" | "image/webp") {
   return page.evaluate(async (mimeType) => {
     const canvas = document.createElement("canvas");

tests/browser/responsive.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+
+test("keeps the primary workspace inside a narrow viewport", async ({
+  page,
+}) => {
+  await page.goto("/deep/nested/image/");
+  await expect(page.locator("main").first()).toBeVisible();
+  await expect(
+    page.locator("main .loading, main .workbench-loading"),
+  ).toHaveCount(0);
+
+  const widths = await page.evaluate(() => ({
+    content: document.documentElement.scrollWidth,
+    viewport: document.documentElement.clientWidth,
+  }));
+  expect(widths.viewport).toBeLessThanOrEqual(430);
+  expect(widths.content).toBeLessThanOrEqual(widths.viewport + 1);
+});

tests/image/recipes-batch.test.ts

@@ -0,0 +1,113 @@
+import { unzipSync } from "fflate";
+import { describe, expect, it } from "vitest";
+import { createBatchZip } from "../../src/image/batch-zip";
+import { parseRecipe, serializeRecipe } from "../../src/image/recipes";
+import {
+  DEFAULT_OUTPUT,
+  DEFAULT_RECIPE,
+  type ProcessImageResult,
+} from "../../src/image/types";
+
+describe("versioned image recipes", () => {
+  it("round-trips bounded transform and output settings", () => {
+    const recipe = {
+      ...DEFAULT_RECIPE,
+      crop: { x: 0.1, y: 0.2, width: 0.5, height: 0.6 },
+      rotation: 90 as const,
+    };
+    expect(parseRecipe(serializeRecipe(recipe, DEFAULT_OUTPUT))).toMatchObject({
+      schema: "de.add-ideas.image-tools.recipe.v1",
+      recipe,
+      output: DEFAULT_OUTPUT,
+      policy: { metadataCopied: false, colorProfilePreserved: false },
+    });
+  });
+
+  it("rejects out-of-image crops and substituted formats", () => {
+    const value = JSON.parse(
+      serializeRecipe(DEFAULT_RECIPE, DEFAULT_OUTPUT),
+    ) as Record<string, unknown>;
+    (value.recipe as { crop: { x: number } }).crop.x = 1.5;
+    expect(() => parseRecipe(JSON.stringify(value))).toThrow(
+      /inside the image/iu,
+    );
+    (value.recipe as { crop: { x: number } }).crop.x = 0;
+    (value.output as { format: string }).format = "avif";
+    expect(() => parseRecipe(JSON.stringify(value))).toThrow(/unsupported/iu);
+  });
+});
+
+describe("bounded batch ZIP", () => {
+  it("creates one deterministic-named archive with reports and a manifest", async () => {
+    const first = result("same-edited.png", new Uint8Array([1, 2, 3]));
+    const second = result("same-edited.png", new Uint8Array([4, 5]));
+    const blob = await createBatchZip([
+      { sourceName: "first.png", result: first },
+      { sourceName: "second.png", result: second },
+    ]);
+    const entries = unzipSync(new Uint8Array(await blob.arrayBuffer()));
+    expect(Object.keys(entries).sort()).toEqual([
+      "batch-manifest.json",
+      "same-edited-2.png",
+      "same-edited-2.report.json",
+      "same-edited.png",
+      "same-edited.report.json",
+    ]);
+    expect(
+      JSON.parse(new TextDecoder().decode(entries["batch-manifest.json"])),
+    ).toMatchObject({
+      schema: "de.add-ideas.image-tools.batch.v1",
+      items: [
+        { sourceName: "first.png", outputName: "same-edited.png" },
+        { sourceName: "second.png", outputName: "same-edited-2.png" },
+      ],
+    });
+  });
+});
+
+function result(name: string, bytes: Uint8Array): ProcessImageResult {
+  const owned = new Uint8Array(bytes.byteLength);
+  owned.set(bytes);
+  const blob = new Blob([owned.buffer], { type: "image/png" });
+  return {
+    blob,
+    width: 1,
+    height: 1,
+    renderedWidth: 1,
+    renderedHeight: 1,
+    report: {
+      schemaVersion: 1,
+      source: {
+        name: "source.png",
+        bytes: bytes.byteLength,
+        format: "png",
+        width: 1,
+        height: 1,
+        orientation: 1,
+        metadata: {
+          exif: false,
+          xmp: false,
+          icc: false,
+          comments: false,
+          text: false,
+          physicalDimensions: false,
+          multiPicture: false,
+        },
+      },
+      transform: DEFAULT_RECIPE,
+      output: {
+        name,
+        bytes: bytes.byteLength,
+        mimeType: "image/png",
+        width: 1,
+        height: 1,
+        quality: null,
+        background: null,
+      },
+      metadataPolicy: { copied: false, statement: "not copied" },
+      colorPolicy: { profilePreserved: false, statement: "not preserved" },
+      limitations: [],
+      warnings: [],
+    },
+  };
+}