stateofpixel 0.0.0

package/dist/index.mjs

@@ -0,0 +1,1104 @@
+#!/usr/bin/env node
+import { createRequire } from "node:module";
+import { Command, InvalidArgumentError } from "commander";
+import { copyFile, mkdir, mkdtemp, open, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { availableParallelism, tmpdir } from "node:os";
+import { createHash } from "node:crypto";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+
+//#region package.json
+var version = "0.1.0";
+
+//#endregion
+//#region src/map-concurrent.ts
+async function mapConcurrent(items, concurrency, fn) {
+	const results = new Array(items.length);
+	let nextIndex = 0;
+	async function worker() {
+		while (nextIndex < items.length) {
+			const index = nextIndex++;
+			results[index] = await fn(items[index], index);
+		}
+	}
+	await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, worker));
+	return results;
+}
+
+//#endregion
+//#region src/png.ts
+const PNG_SIGNATURE = Buffer.from([
+	137,
+	80,
+	78,
+	71,
+	13,
+	10,
+	26,
+	10
+]);
+function sha256(bytes) {
+	return createHash("sha256").update(bytes).digest("hex");
+}
+function readPngSize(bytes) {
+	if (bytes.length < 24 || !bytes.subarray(0, 8).equals(PNG_SIGNATURE)) throw new Error("Not a PNG file");
+	return {
+		width: bytes.readUInt32BE(16),
+		height: bytes.readUInt32BE(20)
+	};
+}
+
+//#endregion
+//#region src/snapshots.ts
+async function collectSnapshots(dir) {
+	const entries = await readdir(dir, {
+		recursive: true,
+		withFileTypes: true
+	});
+	const snapshots = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		if (!entry.isFile() || !entry.name.toLowerCase().endsWith(".png")) continue;
+		const filePath = path.join(entry.parentPath, entry.name);
+		snapshots.set(snapshotName(dir, filePath), filePath);
+	}
+	return new Map([...snapshots].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
+}
+function snapshotName(dir, filePath) {
+	return path.relative(dir, filePath).split(path.sep).join("/").slice(0, -4);
+}
+
+//#endregion
+//#region src/compare.ts
+async function compareDirectories({ dir, baselineDir, outDir, engine, options }) {
+	const [snapshots, baselines] = await Promise.all([collectSnapshots(dir), collectSnapshots(baselineDir)]);
+	const imagesDir = path.join(outDir, "images");
+	const workDir = path.join(outDir, ".work");
+	await mkdir(imagesDir, { recursive: true });
+	await mkdir(workDir, { recursive: true });
+	const names = [.../* @__PURE__ */ new Set([...snapshots.keys(), ...baselines.keys()])].sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+	const results = await mapConcurrent(names, availableParallelism(), async (name, index) => {
+		const filePath = snapshots.get(name);
+		const baselinePath = baselines.get(name);
+		if (!filePath && baselinePath) return {
+			name,
+			status: "removed",
+			baselineImage: await storeImage(baselinePath, imagesDir)
+		};
+		if (!filePath) throw new Error(`Snapshot ${name} has no file`);
+		const image = await storeImage(filePath, imagesDir);
+		if (!baselinePath) return {
+			name,
+			status: "added",
+			image
+		};
+		const baselineImage = await storeImage(baselinePath, imagesDir);
+		if (image.file === baselineImage.file) return {
+			name,
+			status: "unchanged",
+			image,
+			baselineImage
+		};
+		const workPath = path.join(workDir, `${index}.png`);
+		const { diffPixels, diffRatio } = await engine.diff(baselinePath, filePath, workPath, options);
+		if (diffPixels === 0) {
+			await rm(workPath, { force: true });
+			return {
+				name,
+				status: "unchanged",
+				image,
+				baselineImage
+			};
+		}
+		return {
+			name,
+			status: "changed",
+			image,
+			baselineImage,
+			diffImage: await storeImage(workPath, imagesDir, { move: true }),
+			diffPixels,
+			diffRatio
+		};
+	});
+	await rm(workDir, {
+		recursive: true,
+		force: true
+	});
+	return results;
+}
+async function storeImage(filePath, imagesDir, { move = false } = {}) {
+	const bytes = await readFile(filePath);
+	const file = `images/${sha256(bytes)}.png`;
+	const target = path.join(imagesDir, path.basename(file));
+	if (move) await rename(filePath, target);
+	else await copyFile(filePath, target);
+	return {
+		file,
+		...readPngSize(bytes)
+	};
+}
+
+//#endregion
+//#region src/diff/odiff.ts
+async function createOdiffEngine() {
+	const { findBinary } = createRequire(import.meta.url)("odiff-bin/binary.js");
+	findBinary();
+	const { compare } = await import("odiff-bin");
+	return {
+		name: "odiff",
+		async diff(basePath, newPath, diffPath, options) {
+			const result = await compare(basePath, newPath, diffPath, {
+				threshold: options.threshold,
+				antialiasing: !options.includeAA,
+				outputDiffMask: true
+			});
+			if (result.match) return {
+				diffPixels: 0,
+				diffRatio: 0
+			};
+			if (result.reason === "pixel-diff") {
+				const [base, next] = await Promise.all([readPngSizeFromFile(basePath), readPngSizeFromFile(newPath)]);
+				const pixels = Math.max(base.width, next.width) * Math.max(base.height, next.height);
+				return {
+					diffPixels: result.diffCount,
+					diffRatio: result.diffCount / pixels
+				};
+			}
+			throw new Error(`odiff could not compare ${newPath}: ${result.reason}`);
+		}
+	};
+}
+async function readPngSizeFromFile(filePath) {
+	const file = await open(filePath);
+	try {
+		const { buffer } = await file.read(Buffer.alloc(24), 0, 24, 0);
+		return readPngSize(buffer);
+	} finally {
+		await file.close();
+	}
+}
+
+//#endregion
+//#region src/diff/pixelmatch.ts
+function createPixelmatchEngine() {
+	return {
+		name: "pixelmatch",
+		async diff(basePath, newPath, diffPath, options) {
+			const [base, next] = await Promise.all([readPng(basePath), readPng(newPath)]);
+			const width = Math.max(base.width, next.width);
+			const height = Math.max(base.height, next.height);
+			const diff = new PNG({
+				width,
+				height
+			});
+			const diffPixels = pixelmatch(padTo(base, width, height), padTo(next, width, height), diff.data, width, height, {
+				threshold: options.threshold,
+				includeAA: options.includeAA,
+				diffMask: true
+			});
+			if (diffPixels > 0) await writeFile(diffPath, PNG.sync.write(diff));
+			return {
+				diffPixels,
+				diffRatio: diffPixels / (width * height)
+			};
+		}
+	};
+}
+async function readPng(filePath) {
+	return PNG.sync.read(await readFile(filePath));
+}
+function padTo(image, width, height) {
+	if (image.width === width && image.height === height) return image.data;
+	const padded = new Uint8Array(width * height * 4);
+	const rowBytes = image.width * 4;
+	for (let y = 0; y < image.height; y++) padded.set(image.data.subarray(y * rowBytes, (y + 1) * rowBytes), y * width * 4);
+	return padded;
+}
+
+//#endregion
+//#region src/diff/engine.ts
+async function createDiffEngine() {
+	try {
+		return await createOdiffEngine();
+	} catch {
+		return createPixelmatchEngine();
+	}
+}
+
+//#endregion
+//#region src/report/template.ts
+function renderReport(snapshots, meta) {
+	const data = JSON.stringify({
+		meta,
+		snapshots
+	}).replace(/</g, "\\u003c");
+	return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>stateofpixel report</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<header class="header">
+  <div class="title"><strong>stateofpixel</strong> <span class="muted mono" id="dirs"></span></div>
+  <div class="counts" id="counts"></div>
+</header>
+<div class="layout">
+  <aside class="sidebar">
+    <input class="filter" id="filter" type="search" placeholder="Filter snapshots" aria-label="Filter snapshots">
+    <div id="list" role="listbox" aria-label="Snapshots"></div>
+  </aside>
+  <main class="viewer" id="viewer"></main>
+</div>
+<script id="data" type="application/json">${data}<\/script>
+<script>${SCRIPT}<\/script>
+</body>
+</html>
+`;
+}
+const STYLES = `
+:root {
+  color-scheme: light dark;
+  --bg: #fafafa; --surface: #ffffff; --surface-2: #f2f2f2; --hover: #ebebeb; --border: #ebebeb;
+  --text: #171717; --muted: #666666; --accent: #171717; --accent-fg: #ffffff; --link: #0068d6;
+  --unchanged: #666666; --unchanged-bg: #f2f2f2; --changed: #a35200; --changed-bg: #fff6e6;
+  --added: #0068d6; --added-bg: #f0f7ff; --removed: #7820bc; --removed-bg: #f9f0ff;
+  --canvas: #f2f2f2; --checker-a: #ffffff; --checker-b: #e6e6e6;
+  --sans: "IBM Plex Sans Variable", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --mono: "Lilex Variable", "Lilex", ui-monospace, "SF Mono", monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000000; --surface: #0a0a0a; --surface-2: #1a1a1a; --hover: #1f1f1f; --border: #2e2e2e;
+    --text: #ededed; --muted: #a1a1a1; --accent: #ededed; --accent-fg: #0a0a0a; --link: #52a8ff;
+    --unchanged: #a1a1a1; --unchanged-bg: #1a1a1a; --changed: #f2a20d; --changed-bg: #291800;
+    --added: #52a8ff; --added-bg: #0f1c2e; --removed: #bf7af0; --removed-bg: #231528;
+    --canvas: #000000; --checker-a: #1a1a1a; --checker-b: #292929;
+  }
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 13px/20px var(--sans); -webkit-font-smoothing: antialiased; }
+:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
+.muted { color: var(--muted); }
+.mono { font-family: var(--mono); }
+.num { font-variant-numeric: tabular-nums; }
+.header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
+.title strong { font-size: 14px; font-weight: 600; }
+.counts { display: flex; flex-wrap: wrap; gap: 6px; }
+.pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.pill[data-status=unchanged] { color: var(--unchanged); background: var(--unchanged-bg); }
+.pill[data-status=changed] { color: var(--changed); background: var(--changed-bg); }
+.pill[data-status=added] { color: var(--added); background: var(--added-bg); }
+.pill[data-status=removed] { color: var(--removed); background: var(--removed-bg); }
+.layout { flex: 1; display: flex; min-height: 0; }
+.sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
+.filter { margin: 8px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; box-shadow: inset 0 0 0 1px #8f8f8f; }
+#list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
+.group { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px; border: 0; background: none; color: var(--muted); font: 500 12px/16px var(--sans); cursor: pointer; text-align: left; }
+.row { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--text); font: 13px/20px var(--mono); text-align: left; cursor: pointer; position: relative; }
+.row:hover { background: var(--hover); }
+.row[aria-selected=true] { background: var(--hover); }
+.row[aria-selected=true]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--link); }
+.row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row .ratio { color: var(--muted); font: 12px/16px var(--sans); font-variant-numeric: tabular-nums; }
+.viewer { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
+.viewer-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
+.viewer-title .name { font: 500 14px/20px var(--mono); }
+.viewer-title .dims { margin-left: auto; }
+.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--border); }
+.segmented { display: inline-flex; padding: 2px; border-radius: 11px; background: var(--surface-2); }
+.segmented button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); font: 500 13px/20px var(--sans); cursor: pointer; }
+.segmented button[aria-pressed=true] { background: var(--surface); color: var(--text); border-color: var(--border); }
+.segmented button:disabled { opacity: .45; cursor: default; }
+kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--muted); font: 500 11px/16px var(--mono); }
+.stage { flex: 1; overflow: auto; padding: 16px; background: var(--canvas); }
+.pair { display: flex; gap: 16px; align-items: flex-start; }
+.pair > figure { flex: 1; min-width: 0; }
+figure { margin: 0; }
+figcaption { height: 24px; color: var(--muted); font-size: 12px; }
+.frame { position: relative; background-color: var(--checker-a); background-image: conic-gradient(var(--checker-b) 25%, transparent 0 50%, var(--checker-b) 0 75%, transparent 0); background-size: 16px 16px; }
+.frame img { position: absolute; top: 0; left: 0; display: block; }
+.zoom-actual .frame img { image-rendering: pixelated; }
+.frame[data-flip=baseline] { outline: 1px solid var(--link); }
+.diff-layer { opacity: .7; }
+.slider { display: block; width: 100%; margin: 12px 0 0; accent-color: var(--link); }
+.handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--link); pointer-events: none; }
+.empty { padding: 24px; color: var(--muted); font-size: 24px; line-height: 34px; }
+.empty strong { color: var(--text); font-weight: 600; }
+@media (max-width: 767px) {
+  .layout { flex-direction: column; }
+  .sidebar { width: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
+  .pair { flex-direction: column; }
+  .pair > figure { width: 100%; }
+}
+`;
+const SCRIPT = `
+const { meta, snapshots } = JSON.parse(document.getElementById("data").textContent);
+const GROUPS = ["changed", "added", "removed", "unchanged"];
+const MODES = [["side", "Side by side"], ["diff", "Diff"], ["slider", "Slider"], ["flip", "Flip"]];
+const store = {
+  get(key, fallback) { try { return localStorage.getItem("stateofpixel:" + key) || fallback; } catch { return fallback; } },
+  set(key, value) { try { localStorage.setItem("stateofpixel:" + key, value); } catch {} },
+};
+const state = {
+  filter: "",
+  collapsed: new Set(["unchanged"]),
+  selected: null,
+  mode: store.get("mode", "side"),
+  zoom: store.get("zoom", "fit"),
+  flip: "new",
+  slider: 50,
+};
+
+function el(tag, props, children) {
+  const node = document.createElement(tag);
+  Object.assign(node, props || {});
+  for (const child of children || []) node.append(child);
+  return node;
+}
+
+function pill(status, label) {
+  const node = el("span", { className: "pill", textContent: label });
+  node.dataset.status = status;
+  return node;
+}
+
+function percent(ratio) {
+  return (ratio * 100).toFixed(ratio < 0.001 ? 3 : 2) + "%";
+}
+
+function visibleGroups() {
+  const query = state.filter.toLowerCase();
+  return GROUPS.map((status) => ({
+    status,
+    items: snapshots.filter((s) => s.status === status && s.name.toLowerCase().includes(query)),
+  })).filter((group) => group.items.length > 0);
+}
+
+function navigable() {
+  return visibleGroups().flatMap((group) => (state.collapsed.has(group.status) ? [] : group.items));
+}
+
+function renderHeader() {
+  document.getElementById("dirs").textContent = meta.dir + " vs " + meta.baselineDir;
+  const counts = document.getElementById("counts");
+  counts.replaceChildren(
+    ...GROUPS.map((status) => {
+      const count = snapshots.filter((s) => s.status === status).length;
+      return pill(status, count.toLocaleString() + " " + status);
+    }),
+  );
+}
+
+function renderList() {
+  const list = document.getElementById("list");
+  list.replaceChildren(
+    ...visibleGroups().flatMap((group) => {
+      const collapsed = state.collapsed.has(group.status);
+      const header = el("button", {
+        className: "group",
+        textContent: (collapsed ? "+ " : "- ") + group.status[0].toUpperCase() + group.status.slice(1) + " (" + group.items.length.toLocaleString() + ")",
+        onclick: () => {
+          if (collapsed) state.collapsed.delete(group.status);
+          else state.collapsed.add(group.status);
+          renderList();
+        },
+      });
+      header.setAttribute("aria-expanded", String(!collapsed));
+      if (collapsed) return [header];
+      return [
+        header,
+        ...group.items.map((snapshot) => {
+          const row = el("button", { className: "row", title: snapshot.name, onclick: () => select(snapshot) }, [
+            el("span", { className: "name", textContent: snapshot.name }),
+          ]);
+          row.setAttribute("role", "option");
+          row.setAttribute("aria-selected", String(snapshot === state.selected));
+          if (snapshot.diffRatio !== undefined) row.append(el("span", { className: "ratio", textContent: percent(snapshot.diffRatio) }));
+          return row;
+        }),
+      ];
+    }),
+  );
+  list.querySelector("[aria-selected=true]")?.scrollIntoView({ block: "nearest" });
+}
+
+function frame(images, width, height) {
+  const node = el("div", { className: "frame" });
+  if (state.zoom === "fit") {
+    node.style.width = "100%";
+    node.style.maxWidth = width + "px";
+    node.style.aspectRatio = width + " / " + height;
+  } else {
+    node.style.width = width + "px";
+    node.style.height = height + "px";
+  }
+  for (const { image, className, style } of images) {
+    const img = el("img", { src: image.file, alt: "", className: className || "" });
+    img.style.width = (image.width / width) * 100 + "%";
+    Object.assign(img.style, style || {});
+    node.append(img);
+  }
+  return node;
+}
+
+function figure(caption, image) {
+  return el("figure", {}, [el("figcaption", { textContent: caption }), frame([{ image }], image.width, image.height)]);
+}
+
+function renderStage(snapshot) {
+  const { image, baselineImage, diffImage } = snapshot;
+  if (!image || !baselineImage) {
+    const only = image || baselineImage;
+    return [figure(image ? "New" : "Baseline", only)];
+  }
+  const width = Math.max(image.width, baselineImage.width);
+  const height = Math.max(image.height, baselineImage.height);
+  if (state.mode === "side") {
+    return [el("div", { className: "pair" }, [figure("Baseline", baselineImage), figure("New", image)])];
+  }
+  if (state.mode === "diff") {
+    const layers = [{ image }];
+    if (diffImage) layers.push({ image: diffImage, className: "diff-layer" });
+    return [el("figure", {}, [el("figcaption", { textContent: "New with diff overlay" }), frame(layers, width, height)])];
+  }
+  if (state.mode === "slider") {
+    const clipFor = (value) => "inset(0 " + (100 - value) + "% 0 0)";
+    const stageNode = frame([{ image }, { image: baselineImage, style: { clipPath: clipFor(state.slider) } }], width, height);
+    const handle = el("div", { className: "handle" });
+    handle.style.left = state.slider + "%";
+    stageNode.append(handle);
+    const slider = el("input", {
+      className: "slider",
+      type: "range",
+      min: 0,
+      max: 100,
+      value: state.slider,
+      oninput: (event) => {
+        state.slider = Number(event.target.value);
+        stageNode.querySelectorAll("img")[1].style.clipPath = clipFor(state.slider);
+        handle.style.left = state.slider + "%";
+      },
+    });
+    slider.setAttribute("aria-label", "Baseline to new");
+    const node = el("figure", {}, [el("figcaption", { textContent: "Baseline on the left of the handle, new on the right" }), stageNode, slider]);
+    node.style[state.zoom === "fit" ? "maxWidth" : "width"] = width + "px";
+    return [node];
+  }
+  const showing = state.flip === "baseline" ? baselineImage : image;
+  const node = frame([{ image: showing }], width, height);
+  node.dataset.flip = state.flip;
+  return [el("figure", {}, [el("figcaption", { textContent: "Showing " + state.flip + ". Press space to flip." }), node])];
+}
+
+function renderViewer() {
+  const viewer = document.getElementById("viewer");
+  const snapshot = state.selected;
+  if (!snapshot) {
+    const empty = el("p", { className: "empty" }, [el("strong", { textContent: "No visual changes." }), " Every snapshot matches its baseline."]);
+    viewer.replaceChildren(empty);
+    return;
+  }
+  const comparable = Boolean(snapshot.image && snapshot.baselineImage);
+  const title = el("div", { className: "viewer-title" }, [
+    el("span", { className: "name", textContent: snapshot.name }),
+    pill(snapshot.status, snapshot.status),
+  ]);
+  if (snapshot.diffPixels !== undefined) {
+    title.append(el("span", { className: "muted num", textContent: percent(snapshot.diffRatio) + " diff, " + snapshot.diffPixels.toLocaleString() + " px" }));
+  }
+  const dims = [snapshot.baselineImage, snapshot.image].filter(Boolean).map((i) => i.width + "x" + i.height);
+  title.append(el("span", { className: "dims muted num", textContent: [...new Set(dims)].join(" to ") }));
+
+  const modes = el("div", { className: "segmented" }, MODES.map(([mode, label], index) => {
+    const button = el("button", { disabled: !comparable, onclick: () => setMode(mode) }, [label, el("kbd", { textContent: String(index + 1) })]);
+    button.setAttribute("aria-pressed", String(comparable && state.mode === mode));
+    return button;
+  }));
+  const zoom = el("div", { className: "segmented" }, [["fit", "Fit", "f"], ["actual", "100%", "0"]].map(([value, label, key]) => {
+    const button = el("button", { onclick: () => setZoom(value) }, [label, el("kbd", { textContent: key })]);
+    button.setAttribute("aria-pressed", String(state.zoom === value));
+    return button;
+  }));
+  const stage = el("div", { className: "stage zoom-" + state.zoom }, renderStage(snapshot));
+  viewer.replaceChildren(title, el("div", { className: "toolbar" }, [modes, zoom]), stage);
+}
+
+function select(snapshot) {
+  state.selected = snapshot;
+  state.flip = "new";
+  renderList();
+  renderViewer();
+}
+
+function setMode(mode) {
+  state.mode = mode;
+  store.set("mode", mode);
+  renderViewer();
+}
+
+function setZoom(zoom) {
+  state.zoom = zoom;
+  store.set("zoom", zoom);
+  renderViewer();
+}
+
+function move(step) {
+  const items = navigable();
+  if (items.length === 0) return;
+  const index = items.indexOf(state.selected);
+  const next = index === -1 ? 0 : Math.min(items.length - 1, Math.max(0, index + step));
+  select(items[next]);
+}
+
+const filter = document.getElementById("filter");
+filter.addEventListener("input", () => {
+  state.filter = filter.value;
+  renderList();
+});
+
+document.addEventListener("keydown", (event) => {
+  if (event.target === filter) {
+    if (event.key === "Escape") filter.blur();
+    return;
+  }
+  if (event.metaKey || event.ctrlKey || event.altKey) return;
+  const modeIndex = ["1", "2", "3", "4"].indexOf(event.key);
+  if (event.key === "j") move(1);
+  else if (event.key === "k") move(-1);
+  else if (modeIndex !== -1) setMode(MODES[modeIndex][0]);
+  else if (event.key === "f") setZoom("fit");
+  else if (event.key === "0") setZoom("actual");
+  else if (event.key === "/") { event.preventDefault(); filter.focus(); }
+  else if (event.key === " " && state.mode === "flip") {
+    event.preventDefault();
+    state.flip = state.flip === "new" ? "baseline" : "new";
+    renderViewer();
+  }
+});
+
+renderHeader();
+const first = navigable().find((s) => s.status !== "unchanged");
+if (first) select(first);
+else { renderList(); renderViewer(); }
+`;
+
+//#endregion
+//#region src/report/write-report.ts
+async function writeReport(outDir, results, meta) {
+	await mkdir(outDir, { recursive: true });
+	const reportPath = path.join(outDir, "index.html");
+	await writeFile(reportPath, renderReport(results, meta));
+	return reportPath;
+}
+
+//#endregion
+//#region src/commands/compare.ts
+async function compareCommand(dir, baselineDir, options) {
+	await assertDirectory(dir);
+	await assertDirectory(baselineDir);
+	const startedAt = performance.now();
+	const engine = await createDiffEngine();
+	const results = await compareDirectories({
+		dir,
+		baselineDir,
+		outDir: options.out,
+		engine,
+		options: {
+			threshold: options.threshold,
+			includeAA: options.includeAa
+		}
+	});
+	const reportPath = await writeReport(options.out, results, {
+		dir,
+		baselineDir,
+		engine: engine.name,
+		createdAt: (/* @__PURE__ */ new Date()).toISOString()
+	});
+	const counts = countByStatus(results.map((result) => result.status));
+	const seconds = ((performance.now() - startedAt) / 1e3).toFixed(1);
+	console.log(`stateofpixel  compare  ${dir} vs ${baselineDir}`);
+	console.log(`  ${formatCount$1(results.length)} snapshots  ${formatCount$1(counts.unchanged)} unchanged  ${formatCount$1(counts.changed)} changed  ${formatCount$1(counts.added)} added  ${formatCount$1(counts.removed)} removed`);
+	console.log(`  compared with ${engine.name} in ${seconds} s`);
+	console.log(`  report: ${path.relative(process.cwd(), reportPath)}`);
+}
+function parseThreshold(value) {
+	const threshold = Number(value);
+	if (!Number.isFinite(threshold) || threshold < 0 || threshold > 1) throw new InvalidArgumentError("Must be a number from 0 to 1.");
+	return threshold;
+}
+async function assertDirectory(dir) {
+	if (!(await stat(dir).catch(() => void 0))?.isDirectory()) throw new Error(`Not a directory: ${dir}`);
+}
+function countByStatus(statuses) {
+	const counts = {
+		unchanged: 0,
+		changed: 0,
+		added: 0,
+		removed: 0
+	};
+	for (const status of statuses) counts[status]++;
+	return counts;
+}
+function formatCount$1(count) {
+	return count.toLocaleString("en-US");
+}
+
+//#endregion
+//#region src/api.ts
+const DEFAULT_API_URL = "https://graceful-dogfish-423.convex.site/api/v1";
+var ApiError = class extends Error {
+	status;
+	code;
+	constructor(status, code, message) {
+		super(message);
+		this.status = status;
+		this.code = code;
+	}
+};
+function createApiClient({ baseUrl, token, fetch = globalThis.fetch, retries = 3, retryDelayMs = 1e3 }) {
+	async function withRetries(fn) {
+		for (let attempt = 0;; attempt++) try {
+			return await fn();
+		} catch (error) {
+			if (attempt >= retries || !isServerError(error)) throw error;
+			await sleep(retryDelayMs * 2 ** attempt);
+		}
+	}
+	function request(method, path, body) {
+		return withRetries(async () => {
+			const response = await fetch(`${baseUrl}${path}`, {
+				method,
+				headers: {
+					Authorization: `Bearer ${token}`,
+					"Content-Type": "application/json"
+				},
+				...body === void 0 ? {} : { body: JSON.stringify(body) }
+			});
+			if (!response.ok) throw await toApiError(response);
+			return await response.json();
+		});
+	}
+	function upload(uploadUrl, bytes) {
+		return withRetries(async () => {
+			const response = await fetch(uploadUrl, {
+				method: "POST",
+				headers: { "Content-Type": "image/png" },
+				body: new Uint8Array(bytes)
+			});
+			if (!response.ok) throw await toApiError(response);
+			const { storageId } = await response.json();
+			return storageId;
+		});
+	}
+	function download(url) {
+		return withRetries(async () => {
+			const response = await fetch(url);
+			if (!response.ok) throw await toApiError(response);
+			return Buffer.from(await response.arrayBuffer());
+		});
+	}
+	return {
+		request,
+		upload,
+		download
+	};
+}
+async function toApiError(response) {
+	const body = await response.json().catch(() => null);
+	return new ApiError(response.status, body?.error?.code ?? "http_error", body?.error?.message ?? `HTTP ${response.status}`);
+}
+function isServerError(error) {
+	return error instanceof ApiError && error.status >= 500 || error instanceof TypeError;
+}
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+//#endregion
+//#region src/ci-env.ts
+const execFileAsync = promisify(execFile);
+const MAX_ANCESTORS = 100;
+const OIDC_AUDIENCE = "stateofpixel";
+async function readGitInfo(env, cwd, baselineBranchOverride) {
+	const event = await readGithubEvent(env);
+	const pullRequest = event?.pull_request;
+	const commit = pullRequest?.head.sha || env.GITHUB_SHA || await git(cwd, "rev-parse", "HEAD");
+	if (commit === null) throw new Error("Could not find the commit. Run inside a git checkout.");
+	const branch = pullRequest?.head.ref || env.GITHUB_HEAD_REF || env.GITHUB_REF_NAME || await git(cwd, "rev-parse", "--abbrev-ref", "HEAD") || "HEAD";
+	const baselineBranch = baselineBranchOverride || pullRequest?.base.ref || event?.repository?.default_branch || await defaultBranch(cwd) || "main";
+	return {
+		commit,
+		commitMessage: await git(cwd, "log", "-1", "--format=%s", commit) ?? event?.head_commit?.message?.split("\n")[0] ?? "",
+		branch,
+		baselineBranch,
+		prNumber: pullRequest?.number ?? null,
+		mergeBase: await git(cwd, "merge-base", commit, `origin/${baselineBranch}`),
+		ancestors: await ancestors(cwd, commit)
+	};
+}
+function readCiInfo(env) {
+	if (env.GITHUB_ACTIONS === "true") return {
+		provider: "github-actions",
+		runUrl: env.GITHUB_SERVER_URL && env.GITHUB_REPOSITORY && env.GITHUB_RUN_ID ? `${env.GITHUB_SERVER_URL}/${env.GITHUB_REPOSITORY}/actions/runs/${env.GITHUB_RUN_ID}` : void 0
+	};
+	return env.CI ? { provider: "unknown" } : {};
+}
+function defaultNonce(env) {
+	if (env.GITHUB_RUN_ID) return `${env.GITHUB_RUN_ID}-${env.GITHUB_RUN_ATTEMPT ?? "1"}`;
+	return null;
+}
+async function resolveToken(env, fetchImpl = fetch) {
+	if (env.STATEOFPIXEL_TOKEN) return env.STATEOFPIXEL_TOKEN;
+	const requestUrl = env.ACTIONS_ID_TOKEN_REQUEST_URL;
+	const requestToken = env.ACTIONS_ID_TOKEN_REQUEST_TOKEN;
+	if (!requestUrl || !requestToken) throw new Error("No token. On GitHub Actions add `permissions: id-token: write`, elsewhere set STATEOFPIXEL_TOKEN.");
+	const url = new URL(requestUrl);
+	url.searchParams.set("audience", OIDC_AUDIENCE);
+	const response = await fetchImpl(url, { headers: { Authorization: `Bearer ${requestToken}` } });
+	if (!response.ok) throw new Error(`GitHub Actions OIDC token request failed with HTTP ${response.status}.`);
+	const { value } = await response.json();
+	return value;
+}
+async function readGithubEvent(env) {
+	if (!env.GITHUB_EVENT_PATH) return null;
+	try {
+		return JSON.parse(await readFile(env.GITHUB_EVENT_PATH, "utf8"));
+	} catch {
+		return null;
+	}
+}
+async function ancestors(cwd, commit) {
+	for (const start of [commit, "HEAD"]) {
+		const output = await git(cwd, "rev-list", `--max-count=102`, start);
+		if (output !== null) return output.split("\n").filter((sha) => sha !== "" && sha !== commit).slice(start === "HEAD" ? 1 : 0).slice(0, MAX_ANCESTORS);
+	}
+	return [];
+}
+async function defaultBranch(cwd) {
+	return (await git(cwd, "symbolic-ref", "--short", "refs/remotes/origin/HEAD"))?.replace(/^origin\//, "") ?? null;
+}
+async function git(cwd, ...args) {
+	try {
+		const { stdout } = await execFileAsync("git", args, { cwd });
+		return stdout.trim();
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+//#region src/upload.ts
+const UPLOAD_CONCURRENCY = 8;
+const FINALIZE_POLLS = 10;
+const FINALIZE_POLL_MS = 1e3;
+async function readSnapshots(dir) {
+	const files = await collectSnapshots(dir);
+	return mapConcurrent([...files], availableParallelism(), async ([name, file]) => {
+		const bytes = await readFile(file);
+		return {
+			name,
+			file,
+			hash: sha256(bytes),
+			bytes: bytes.length,
+			...readPngSize(bytes)
+		};
+	});
+}
+async function uploadDirectory(input) {
+	const snapshots = await readSnapshots(input.dir);
+	const build = await input.api.request("POST", "/builds", {
+		buildName: input.buildName,
+		nonce: input.nonce,
+		shard: input.shard,
+		subset: input.subset,
+		git: input.git,
+		ci: input.ci,
+		snapshots: snapshots.map(({ name, hash, bytes, width, height }) => ({
+			name,
+			hash,
+			bytes,
+			width,
+			height
+		}))
+	});
+	const lookups = new Map(build.snapshots.map((lookup) => [lookup.name, lookup]));
+	const failedUploads = [];
+	const uploads = [];
+	let uploadedBytes = 0;
+	const pendingUploads = uniqueByHash(snapshots.filter((snapshot) => lookups.get(snapshot.name)?.uploadUrl));
+	await mapConcurrent(pendingUploads, UPLOAD_CONCURRENCY, async (snapshot) => {
+		const uploadUrl = lookups.get(snapshot.name)?.uploadUrl;
+		try {
+			const bytes = await readFile(snapshot.file);
+			uploads.push({
+				hash: snapshot.hash,
+				storageId: await input.api.upload(uploadUrl, bytes),
+				kind: "screenshot",
+				width: snapshot.width,
+				height: snapshot.height
+			});
+			uploadedBytes += bytes.length;
+		} catch {
+			failedUploads.push(snapshot.hash);
+		}
+	});
+	const failedScreenshots = new Set(failedUploads);
+	const options = {
+		threshold: input.threshold ?? build.diff.threshold,
+		includeAA: build.diff.includeAA
+	};
+	const diffs = /* @__PURE__ */ new Map();
+	const results = await mapConcurrent(snapshots, availableParallelism(), async (snapshot, index) => {
+		const lookup = lookups.get(snapshot.name);
+		const base = {
+			name: snapshot.name,
+			hash: snapshot.hash
+		};
+		if (failedScreenshots.has(snapshot.hash)) return {
+			...base,
+			status: "failed"
+		};
+		if (lookup.status !== "changed") return {
+			...base,
+			status: lookup.status
+		};
+		if (lookup.baselineUrl === void 0) return {
+			...base,
+			status: "changed"
+		};
+		try {
+			const baselineFile = path.join(input.workDir, `baseline-${index}.png`);
+			const diffFile = path.join(input.workDir, `diff-${index}.png`);
+			await writeFile(baselineFile, await input.api.download(lookup.baselineUrl));
+			const { diffPixels, diffRatio } = await input.engine.diff(baselineFile, snapshot.file, diffFile, options);
+			if (diffPixels === 0) return {
+				...base,
+				status: "unchanged"
+			};
+			const diffBytes = await readFile(diffFile);
+			const diffHash = sha256(diffBytes);
+			diffs.set(diffHash, {
+				file: diffFile,
+				hash: diffHash,
+				...readPngSize(diffBytes)
+			});
+			return {
+				...base,
+				status: "changed",
+				diffHash,
+				diffRatio,
+				diffPixels
+			};
+		} catch {
+			return {
+				...base,
+				status: "failed"
+			};
+		}
+	});
+	if (diffs.size > 0) {
+		const { uploads: diffTargets } = await input.api.request("POST", `/builds/${build.buildId}/upload-urls`, { hashes: [...diffs.keys()] });
+		await mapConcurrent(diffTargets, UPLOAD_CONCURRENCY, async ({ hash, uploadUrl }) => {
+			const diff = diffs.get(hash);
+			if (diff === void 0) return;
+			try {
+				const bytes = await readFile(diff.file);
+				uploads.push({
+					hash,
+					storageId: await input.api.upload(uploadUrl, bytes),
+					kind: "diff",
+					width: diff.width,
+					height: diff.height
+				});
+				uploadedBytes += bytes.length;
+			} catch {
+				failedUploads.push(hash);
+			}
+		});
+	}
+	const { rejectedUploads } = await input.api.request("POST", `/builds/${build.buildId}/shards/${build.shardIndex}/complete`, {
+		uploads,
+		results
+	});
+	failedUploads.push(...rejectedUploads);
+	return {
+		build,
+		results,
+		uploadedImages: uploads.length,
+		uploadedBytes,
+		failedUploads,
+		final: await waitForFinalize(input.api, build.buildId, false)
+	};
+}
+async function waitForFinalize(api, buildId, finalizeRequested) {
+	for (let poll = 0; poll < FINALIZE_POLLS; poll++) {
+		const build = await api.request("GET", `/builds/${buildId}`);
+		const lastShardDone = build.shards.total !== null && build.shards.done >= build.shards.total;
+		if (build.status !== "pending" || !(finalizeRequested || lastShardDone)) return build.status === "finalized" ? build : null;
+		await new Promise((resolve) => setTimeout(resolve, FINALIZE_POLL_MS));
+	}
+	return null;
+}
+function uniqueByHash(snapshots) {
+	return [...new Map(snapshots.map((snapshot) => [snapshot.hash, snapshot])).values()];
+}
+
+//#endregion
+//#region src/commands/upload.ts
+async function uploadCommand(dir, options) {
+	const env = process.env;
+	if (!(await stat(dir).catch(() => void 0))?.isDirectory()) throw new Error(`Not a directory: ${dir}`);
+	const shard = options.shard ?? parseShard(env.STATEOFPIXEL_SHARD ?? "1/1");
+	const buildName = options.buildName ?? env.STATEOFPIXEL_BUILD_NAME ?? "default";
+	const nonce = options.nonce ?? env.STATEOFPIXEL_NONCE ?? defaultNonce(env);
+	if (nonce === null && shard.total !== 1) throw new Error("Set --nonce so every shard joins the same build.");
+	const git = await readGitInfo(env, process.cwd(), options.baselineBranch ?? env.STATEOFPIXEL_BASELINE_BRANCH);
+	if (options.dryRun) {
+		const snapshots = await readSnapshots(dir);
+		console.log(`stateofpixel  dry run  ${git.branch} vs ${git.baselineBranch}`);
+		console.log(`  ${formatCount(snapshots.length)} snapshots in ${dir}`);
+		console.log(`  build ${buildName}, shard ${shard.total === null ? "auto" : `${shard.index}/${shard.total}`}, commit ${git.commit.slice(0, 7)}, ${git.ancestors.length} ancestors`);
+		return;
+	}
+	const startedAt = performance.now();
+	const workDir = await mkdtemp(path.join(tmpdir(), "stateofpixel-upload-"));
+	let output;
+	try {
+		output = await uploadDirectory({
+			dir,
+			workDir,
+			api: createApiClient({
+				baseUrl: env.STATEOFPIXEL_API_URL ?? "https://graceful-dogfish-423.convex.site/api/v1",
+				token: await resolveToken(env)
+			}),
+			engine: await createDiffEngine(),
+			buildName,
+			nonce: nonce ?? `local-${Date.now()}`,
+			shard,
+			subset: options.subset,
+			threshold: options.threshold,
+			git,
+			ci: readCiInfo(env)
+		});
+	} catch (error) {
+		if (isServerError(error) && !options.strict) {
+			console.warn(`stateofpixel: skipped, the service is not reachable (${error instanceof Error ? error.message : error}). Use --strict to fail instead.`);
+			return;
+		}
+		if (error instanceof ApiError) throw new Error(`${error.message} (${error.code})`);
+		throw error;
+	} finally {
+		await rm(workDir, {
+			recursive: true,
+			force: true
+		});
+	}
+	printSummary(output, git.branch, git.baselineBranch, startedAt);
+	if (output.failedUploads.length > 0) throw new Error(`${output.failedUploads.length} uploads failed.`);
+}
+function printSummary(output, branch, baselineBranch, startedAt) {
+	const { build, results, final } = output;
+	const counts = final?.counts ?? countResults(results);
+	const baseline = build.baseline === null ? "no baseline" : `#${build.baseline.buildNumber}`;
+	const seconds = ((performance.now() - startedAt) / 1e3).toFixed(1);
+	const megabytes = (output.uploadedBytes / 1024 / 1024).toFixed(1);
+	console.log(`stateofpixel  build #${build.buildNumber}  ${branch} vs ${baselineBranch} (${baseline})`);
+	console.log(formatCounts(results.length, counts));
+	console.log(`  uploaded ${formatCount(output.uploadedImages)} images (${megabytes} MB) in ${seconds} s`);
+	for (const warning of build.warnings) console.log(`  warning: ${warning}`);
+	console.log(`  review: ${build.url}`);
+}
+function formatCounts(total, counts) {
+	return `  ${formatCount(total)} snapshots  ${formatCount(counts.unchanged)} unchanged  ${formatCount(counts.changed)} changed  ${formatCount(counts.added)} added  ${formatCount(counts.removed)} removed${counts.failed > 0 ? `  ${formatCount(counts.failed)} failed` : ""}`;
+}
+function countResults(results) {
+	const counts = {
+		unchanged: 0,
+		changed: 0,
+		added: 0,
+		removed: 0,
+		failed: 0
+	};
+	for (const result of results) counts[result.status]++;
+	return counts;
+}
+function parseShard(value) {
+	if (value === "auto") return {
+		index: null,
+		total: null
+	};
+	const match = /^(\d+)\/(\d+)$/.exec(value);
+	const index = Number(match?.[1]);
+	const total = Number(match?.[2]);
+	if (!match || index < 1 || total < 1 || index > total) throw new InvalidArgumentError("Must look like 1/4, or auto.");
+	return {
+		index,
+		total
+	};
+}
+function formatCount(count) {
+	return count.toLocaleString("en-US");
+}
+
+//#endregion
+//#region src/commands/finalize.ts
+async function finalizeCommand(options) {
+	const env = process.env;
+	const buildName = options.buildName ?? env.STATEOFPIXEL_BUILD_NAME ?? "default";
+	const nonce = options.nonce ?? env.STATEOFPIXEL_NONCE ?? defaultNonce(env);
+	if (nonce === null) throw new Error("Set --nonce to the nonce the shards used.");
+	const git = options.skipIfEmpty ? await readGitInfo(env, process.cwd(), options.baselineBranch ?? env.STATEOFPIXEL_BASELINE_BRANCH) : void 0;
+	const api = createApiClient({
+		baseUrl: env.STATEOFPIXEL_API_URL ?? "https://graceful-dogfish-423.convex.site/api/v1",
+		token: await resolveToken(env)
+	});
+	let build;
+	let final;
+	try {
+		build = await api.request("POST", "/builds/finalize", {
+			buildName,
+			nonce,
+			skipIfEmpty: options.skipIfEmpty,
+			git,
+			ci: readCiInfo(env)
+		});
+		final = await waitForFinalize(api, build.buildId, true);
+	} catch (error) {
+		if (isServerError(error) && !options.strict) {
+			console.warn(`stateofpixel: skipped, the service is not reachable (${error instanceof Error ? error.message : error}). Use --strict to fail instead.`);
+			return;
+		}
+		if (error instanceof ApiError) throw new Error(`${error.message} (${error.code})`);
+		throw error;
+	}
+	if (final === null) console.log(`stateofpixel  build #${build.buildNumber}  finalizing`);
+	else {
+		const { counts, shards } = final;
+		console.log(`stateofpixel  build #${build.buildNumber}  finalized, ${shards.done} ${shards.done === 1 ? "shard" : "shards"}`);
+		console.log(formatCounts(counts.unchanged + counts.changed + counts.added + counts.failed, counts));
+	}
+	console.log(`  review: ${build.url}`);
+}
+
+//#endregion
+//#region src/index.ts
+const program = new Command().name("stateofpixel").description("Visual regression testing that runs in your CI").version(version);
+program.command("compare").description("Compare a folder of screenshots against a baseline folder").argument("<dir>", "folder with new screenshots").argument("<baseline-dir>", "folder with baseline screenshots").option("--out <dir>", "report folder", "stateofpixel-report").option("--threshold <number>", "color difference threshold, 0 to 1", parseThreshold, .1).option("--include-aa", "count anti-aliased pixels as changes", false).action(compareCommand);
+program.command("upload").description("Upload a folder of screenshots and compare it with the baseline").argument("<dir>", "folder with screenshots").option("--build-name <name>", "separate builds of one project, like storybook").option("--shard <i/n>", "this shard and the shard count, or auto with a finalize step", parseShard).option("--nonce <id>", "shared by every shard of one build").option("--baseline-branch <branch>", "branch to compare against").option("--subset", "only some snapshots ran, do not mark others removed", false).option("--threshold <number>", "color difference threshold, 0 to 1, overrides project settings", parseThreshold).option("--strict", "fail when the service is not reachable", false).option("--dry-run", "hash and print the plan, upload nothing", false).action(uploadCommand);
+program.command("finalize").description("Finish a build whose shards ran with --shard auto").option("--build-name <name>", "the build name the shards used").option("--nonce <id>", "the nonce the shards used").option("--baseline-branch <branch>", "branch to compare against, for --skip-if-empty").option("--skip-if-empty", "create a build with no changes when no shard ran", false).option("--strict", "fail when the service is not reachable", false).action(finalizeCommand);
+try {
+	await program.parseAsync();
+} catch (error) {
+	console.error(`stateofpixel: ${error instanceof Error ? error.message : error}`);
+	process.exitCode = 1;
+}
+
+//#endregion
+export {  };
+//# sourceMappingURL=index.mjs.map