afterbefore 0.1.11 → 0.1.12

package/dist/cli.js

@@ -240,8 +240,8 @@ function getCurrentBranch(cwd) {
 }
 
 // src/pipeline.ts
-import { resolve as resolve4 } from "path";
-import { unlinkSync } from "fs";
+import { resolve as resolve3 } from "path";
+import { unlinkSync as unlinkSync2 } from "fs";
 
 // src/config.ts
 import { resolve } from "path";
@@ -276,7 +276,7 @@ async function ensureDir(dir) {
 // src/utils/port.ts
 import { createServer } from "net";
 function findPort() {
-  return new Promise((resolve5, reject) => {
+  return new Promise((resolve4, reject) => {
     const server = createServer();
     server.listen(0, () => {
       const addr = server.address();
@@ -286,7 +286,7 @@ function findPort() {
         return;
       }
       const port = addr.port;
-      server.close(() => resolve5(port));
+      server.close(() => resolve4(port));
     });
     server.on("error", reject);
   });
@@ -299,105 +299,6 @@ async function findAvailablePort(exclude) {
   throw new Error("Failed to find available port after 5 attempts");
 }
 
-// src/utils/bgcolor.ts
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
-import { resolve as resolve2 } from "path";
-var DEFAULT_BG = "#0a0a0a";
-var GLOBAL_CSS_PATHS = [
-  "app/globals.css",
-  "src/app/globals.css",
-  "styles/globals.css",
-  "src/styles/globals.css",
-  "app/global.css",
-  "src/app/global.css"
-];
-function hslToHex(h, s, l) {
-  s /= 100;
-  l /= 100;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n) => {
-    const k = (n + h / 30) % 12;
-    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    return Math.round(255 * color).toString(16).padStart(2, "0");
-  };
-  return `#${f(0)}${f(8)}${f(4)}`;
-}
-function parseColorValue(raw) {
-  const v = raw.trim();
-  if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {
-    if (v.length === 4) {
-      return `#${v[1]}${v[1]}${v[2]}${v[2]}${v[3]}${v[3]}`;
-    }
-    return v.slice(0, 7);
-  }
-  const hslMatch = v.match(
-    /^hsl\(\s*([\d.]+)[,\s]+\s*([\d.]+)%[,\s]+\s*([\d.]+)%/
-  );
-  if (hslMatch) {
-    return hslToHex(
-      parseFloat(hslMatch[1]),
-      parseFloat(hslMatch[2]),
-      parseFloat(hslMatch[3])
-    );
-  }
-  const bareHsl = v.match(/^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/);
-  if (bareHsl) {
-    return hslToHex(
-      parseFloat(bareHsl[1]),
-      parseFloat(bareHsl[2]),
-      parseFloat(bareHsl[3])
-    );
-  }
-  const rgbMatch = v.match(
-    /^rgb\(\s*([\d.]+)[,\s]+\s*([\d.]+)[,\s]+\s*([\d.]+)/
-  );
-  if (rgbMatch) {
-    const toHex = (n) => Math.round(parseFloat(n)).toString(16).padStart(2, "0");
-    return `#${toHex(rgbMatch[1])}${toHex(rgbMatch[2])}${toHex(rgbMatch[3])}`;
-  }
-  return null;
-}
-function detectBgColor(cwd) {
-  for (const relPath of GLOBAL_CSS_PATHS) {
-    const absPath = resolve2(cwd, relPath);
-    if (!existsSync2(absPath)) continue;
-    const css = readFileSync2(absPath, "utf-8");
-    const darkBlock = css.match(/\.dark\s*\{([^}]+)\}/);
-    if (darkBlock) {
-      const bgVar = darkBlock[1].match(/--background\s*:\s*([^;]+)/);
-      if (bgVar) {
-        const color = parseColorValue(bgVar[1]);
-        if (color) return color;
-      }
-    }
-    const rootBlock = css.match(/:root\s*\{([^}]+)\}/);
-    if (rootBlock) {
-      const bgVar = rootBlock[1].match(/--background\s*:\s*([^;]+)/);
-      if (bgVar) {
-        const color = parseColorValue(bgVar[1]);
-        if (color) return color;
-      }
-    }
-    const anyBgVar = css.match(/--background\s*:\s*([^;]+)/);
-    if (anyBgVar) {
-      const color = parseColorValue(anyBgVar[1]);
-      if (color) return color;
-    }
-    const bodyBg = css.match(
-      /body\s*\{[^}]*?background(?:-color)?\s*:\s*([^;]+)/
-    );
-    if (bodyBg) {
-      const val = bodyBg[1].trim();
-      if (!val.startsWith("var(")) {
-        const color = parseColorValue(val);
-        if (color) return color;
-      }
-    }
-    break;
-  }
-  return DEFAULT_BG;
-}
-
 // src/stages/diff.ts
 var VALID_STATUSES = /* @__PURE__ */ new Set(["A", "M", "D", "R", "C"]);
 function parseDiffOutput(raw) {
@@ -471,13 +372,13 @@ function classifyFiles(files) {
 }
 
 // src/stages/graph.ts
-import { readdirSync, readFileSync as readFileSync4 } from "fs";
+import { readdirSync, readFileSync as readFileSync3 } from "fs";
 import { join as join2, relative } from "path";
 import { init, parse } from "es-module-lexer";
 
 // src/stages/resolve.ts
-import { existsSync as existsSync3, readFileSync as readFileSync3, statSync } from "fs";
-import { resolve as resolve3, dirname, join } from "path";
+import { existsSync as existsSync2, readFileSync as readFileSync2, statSync } from "fs";
+import { resolve as resolve2, dirname, join } from "path";
 var EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
 function createResolver(projectRoot) {
   const mappings = loadPathMappings(projectRoot);
@@ -485,7 +386,7 @@ function createResolver(projectRoot) {
   function cachedExists(p) {
     const cached = existsCache.get(p);
     if (cached !== void 0) return cached;
-    const result = existsSync3(p);
+    const result = existsSync2(p);
     existsCache.set(p, result);
     return result;
   }
@@ -511,14 +412,14 @@ function createResolver(projectRoot) {
   return (specifier, fromFile) => {
     if (specifier.startsWith(".")) {
       const dir = dirname(fromFile);
-      const candidate = resolve3(dir, specifier);
+      const candidate = resolve2(dir, specifier);
       return tryResolve(candidate);
     }
     for (const mapping of mappings) {
       if (!specifier.startsWith(mapping.prefix)) continue;
       const rest = specifier.slice(mapping.prefix.length);
       for (const target of mapping.targets) {
-        const candidate = resolve3(projectRoot, target + rest);
+        const candidate = resolve2(projectRoot, target + rest);
         const result = tryResolve(candidate);
         if (result) return result;
       }
@@ -528,12 +429,12 @@ function createResolver(projectRoot) {
 }
 function loadPathMappings(projectRoot) {
   const tsconfigPath = join(projectRoot, "tsconfig.json");
-  if (!existsSync3(tsconfigPath)) {
+  if (!existsSync2(tsconfigPath)) {
     logger.dim("No tsconfig.json found, skipping path alias resolution");
     return [];
   }
   try {
-    const raw = readFileSync3(tsconfigPath, "utf-8");
+    const raw = readFileSync2(tsconfigPath, "utf-8");
     const cleaned = stripJsonComments(raw);
     const config = JSON.parse(cleaned);
     const paths = config?.compilerOptions?.paths;
@@ -633,7 +534,7 @@ function collectFiles(dir) {
 function parseImports(filePath) {
   let source;
   try {
-    source = readFileSync4(filePath, "utf-8");
+    source = readFileSync3(filePath, "utf-8");
   } catch {
     return [];
   }
@@ -653,7 +554,7 @@ function parseImports(filePath) {
 }
 async function buildImportGraph(projectRoot) {
   await init;
-  const resolve5 = createResolver(projectRoot);
+  const resolve4 = createResolver(projectRoot);
   const allFiles = [];
   for (const dir of SOURCE_DIRS) {
     const fullDir = join2(projectRoot, dir);
@@ -667,7 +568,7 @@ async function buildImportGraph(projectRoot) {
     const specifiers = parseImports(filePath);
     const deps = /* @__PURE__ */ new Set();
     for (const spec of specifiers) {
-      const resolved = resolve5(spec, filePath);
+      const resolved = resolve4(spec, filePath);
       if (!resolved) continue;
       const relResolved = relative(projectRoot, resolved);
       deps.add(relResolved);
@@ -826,13 +727,13 @@ import { join as join4 } from "path";
 import { tmpdir } from "os";
 
 // src/utils/pm.ts
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync3 } from "fs";
 import { join as join3 } from "path";
 function detectPackageManager(dir) {
-  if (existsSync4(join3(dir, "bun.lockb")) || existsSync4(join3(dir, "bun.lock")))
+  if (existsSync3(join3(dir, "bun.lockb")) || existsSync3(join3(dir, "bun.lock")))
     return "bun";
-  if (existsSync4(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync4(join3(dir, "yarn.lock"))) return "yarn";
+  if (existsSync3(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync3(join3(dir, "yarn.lock"))) return "yarn";
   return "npm";
 }
 function pmExec(pm) {
@@ -889,11 +790,11 @@ async function createWorktree(base, cwd) {
 
 // src/stages/server.ts
 import { spawn } from "child_process";
-import { existsSync as existsSync5 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import { join as join5 } from "path";
 function waitForServer(url, timeoutMs) {
   const start = Date.now();
-  return new Promise((resolve5, reject) => {
+  return new Promise((resolve4, reject) => {
     const poll = async () => {
       if (Date.now() - start > timeoutMs) {
         reject(
@@ -906,7 +807,7 @@ function waitForServer(url, timeoutMs) {
       }
       try {
         await fetch(url);
-        resolve5();
+        resolve4();
       } catch {
         setTimeout(poll, 150);
       }
@@ -920,7 +821,7 @@ async function startServer(projectDir, port) {
   const exec2 = pmExec(pm);
   const [cmd, ...baseArgs] = exec2.split(" ");
   const lockFile = join5(projectDir, ".next", "dev", "lock");
-  if (existsSync5(lockFile)) {
+  if (existsSync4(lockFile)) {
     throw new AfterbeforeError(
       `Another Next.js dev server is running in ${projectDir} (.next/dev/lock exists).`,
       `Stop the other dev server first, or delete .next/dev/lock if it's stale.`
@@ -947,17 +848,17 @@ async function stopServer(server) {
     process.kill(-pid, "SIGTERM");
   } catch {
   }
-  await new Promise((resolve5) => {
+  await new Promise((resolve4) => {
     const timeout = setTimeout(() => {
       try {
         process.kill(-pid, "SIGKILL");
       } catch {
       }
-      resolve5();
+      resolve4();
     }, 5e3);
     server.process.on("exit", () => {
       clearTimeout(timeout);
-      resolve5();
+      resolve4();
     });
   });
 }
@@ -1117,7 +1018,7 @@ async function launchBrowser() {
     return await chromium.launch();
   }
 }
-var MAX_COMPONENT_INSTANCES_PER_SOURCE = 20;
+var MAX_COMPONENT_INSTANCES_PER_SOURCE = 5;
 function sanitizeComponentLabel(label) {
   const noExt = label.replace(/\.[a-z0-9]+$/i, "");
   return sanitizeLabel(noExt, 60);
@@ -1287,9 +1188,21 @@ async function tagChangedComponentInstances(page, changedComponents, maxPerSourc
         const source = targets[sourceIndex].original;
         const list = bySource.get(source) ?? [];
         list.sort((a, b) => a.top === b.top ? a.left - b.left : a.top - b.top);
-        const limit = Math.min(list.length, maxPerSource2);
+        const deduped = [];
+        const seenDims = [];
+        for (const candidate of list) {
+          const rect = candidate.el.getBoundingClientRect();
+          const isDuplicate = seenDims.some(
+            (d) => Math.abs(d.w - rect.width) <= 2 && Math.abs(d.h - rect.height) <= 2
+          );
+          if (!isDuplicate) {
+            seenDims.push({ w: rect.width, h: rect.height });
+            deduped.push(candidate);
+          }
+        }
+        const limit = Math.min(deduped.length, maxPerSource2);
         for (let i = 0; i < limit; i++) {
-          const instance = list[i];
+          const instance = deduped[i];
           const componentKey = `ab-comp-${sourceIndex}-${i}`;
           const parentKey = `ab-parent-${sourceIndex}-${i}`;
           instance.el.setAttribute("data-ab-comp-key", componentKey);
@@ -1308,7 +1221,7 @@ async function tagChangedComponentInstances(page, changedComponents, maxPerSourc
     { changed: normalized, maxPerSource }
   );
 }
-async function captureComponentInstances(afterPage, beforePage, changedComponents, capturePrefix, captureLabel, outputDir, contextBeforePath, contextAfterPath, results) {
+async function captureComponentInstances(afterPage, beforePage, changedComponents, capturePrefix, captureLabel, outputDir, results) {
   const deduped = Array.from(new Set(changedComponents.map(normalizePath)));
   const [afterInstances, beforeInstances] = await Promise.all([
     tagChangedComponentInstances(afterPage, deduped),
@@ -1356,7 +1269,11 @@ async function captureComponentInstances(afterPage, beforePage, changedComponent
           route: `${baseLabel} [parent]`,
           prefix: parentPrefix,
           beforePath: parentBeforePath,
-          afterPath: parentAfterPath
+          afterPath: parentAfterPath,
+          level: "parent",
+          parentPrefix: capturePrefix,
+          componentSource: source,
+          componentName
         });
       }
       const componentPrefix = `${capturePrefix}~cmp.${itemSlug}~component`;
@@ -1381,16 +1298,11 @@ async function captureComponentInstances(afterPage, beforePage, changedComponent
           route: `${baseLabel} [component]`,
           prefix: componentPrefix,
           beforePath: componentBeforePath,
-          afterPath: componentAfterPath
-        });
-      }
-      if (parentBeforeOk && parentAfterOk || componentBeforeOk && componentAfterOk) {
-        const contextPrefix = `${capturePrefix}~cmp.${itemSlug}~context`;
-        results.push({
-          route: `${baseLabel} [context]`,
-          prefix: contextPrefix,
-          beforePath: contextBeforePath,
-          afterPath: contextAfterPath
+          afterPath: componentAfterPath,
+          level: "component",
+          parentPrefix: capturePrefix,
+          componentSource: source,
+          componentName
         });
       }
     }
@@ -1431,7 +1343,8 @@ async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLa
         route: sectionLabel,
         prefix: sectionPrefix,
         beforePath: sectionBeforePath,
-        afterPath: sectionAfterPath
+        afterPath: sectionAfterPath,
+        level: "section"
       });
     } catch {
     }
@@ -1483,7 +1396,8 @@ async function captureAutoTabs(afterPage, beforePage, task, beforeUrl, afterUrl,
         route: tabLabel,
         prefix: tabPrefix,
         beforePath: tabBeforePath,
-        afterPath: tabAfterPath
+        afterPath: tabAfterPath,
+        level: "tab"
       });
       if ((task.changedComponents?.length ?? 0) > 0) {
         await captureComponentInstances(
@@ -1493,8 +1407,6 @@ async function captureAutoTabs(afterPage, beforePage, task, beforeUrl, afterUrl,
           tabPrefix,
           tabLabel,
           outputDir,
-          tabBeforePath,
-          tabAfterPath,
           results
         );
       }
@@ -1521,6 +1433,90 @@ async function captureAutoTabs(afterPage, beforePage, task, beforeUrl, afterUrl,
     ]);
   }
 }
+async function captureOneRoute(task, beforeCtx, afterCtx, beforeUrl, afterUrl, outputDir, options) {
+  const results = [];
+  const [beforePage, afterPage] = await Promise.all([
+    beforeCtx.newPage(),
+    afterCtx.newPage()
+  ]);
+  try {
+    const beforePath = join6(outputDir, `${task.prefix}-before.png`);
+    const afterPath = join6(outputDir, `${task.prefix}-after.png`);
+    const settle = async (page) => {
+      await page.evaluate("document.fonts.ready");
+      if (options.delay > 0) {
+        await page.waitForTimeout(options.delay);
+      }
+    };
+    const performActions = async (page, actions) => {
+      for (const action of actions) {
+        if (action.click) {
+          await page.locator(action.click).first().click();
+        }
+        if (action.scroll) {
+          await page.locator(action.scroll).first().scrollIntoViewIfNeeded();
+        }
+        if (action.wait && action.wait > 0) {
+          await page.waitForTimeout(action.wait);
+        }
+        await settle(page);
+      }
+    };
+    const screenshot = async (page, path) => {
+      if (task.selector) {
+        const el = page.locator(task.selector).first();
+        await el.screenshot({ path });
+      } else {
+        await page.screenshot({ path, fullPage: true });
+      }
+    };
+    await Promise.all([
+      beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(beforePage)).then(() => task.actions ? performActions(beforePage, task.actions) : void 0).then(() => screenshot(beforePage, beforePath)),
+      afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(afterPage)).then(() => task.actions ? performActions(afterPage, task.actions) : void 0).then(() => screenshot(afterPage, afterPath))
+    ]);
+    results.push({ route: task.label, prefix: task.prefix, beforePath, afterPath, level: "page" });
+    if ((task.changedComponents?.length ?? 0) > 0 && !task.actions && !task.selector) {
+      await captureComponentInstances(
+        afterPage,
+        beforePage,
+        task.changedComponents,
+        task.prefix,
+        task.label,
+        outputDir,
+        results
+      );
+    }
+    if (options.autoSections && !task.actions && !task.selector && !task.skipAutoSections) {
+      await captureAutoSections(
+        afterPage,
+        beforePage,
+        task.prefix,
+        task.label,
+        outputDir,
+        options,
+        settle,
+        results
+      );
+    }
+    if (options.autoTabs && !task.actions && !task.selector && !task.skipAutoTabs) {
+      await captureAutoTabs(
+        afterPage,
+        beforePage,
+        task,
+        beforeUrl,
+        afterUrl,
+        outputDir,
+        options,
+        settle,
+        results
+      );
+    }
+  } finally {
+    await Promise.all([beforePage.close(), afterPage.close()]);
+  }
+  return results;
+}
+var BATCH_SIZE = 3;
 async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
   const browser = options.browser ?? await launchBrowser();
   const ownsBrowser = !options.browser;
@@ -1535,85 +1531,20 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
       browser.newContext(contextOpts),
       browser.newContext(contextOpts)
     ]);
-    const [beforePage, afterPage] = await Promise.all([
-      beforeCtx.newPage(),
-      afterCtx.newPage()
-    ]);
-    for (let i = 0; i < tasks.length; i++) {
-      const task = tasks[i];
-      options.onProgress?.(i + 1, task.label);
-      const beforePath = join6(outputDir, `${task.prefix}-before.png`);
-      const afterPath = join6(outputDir, `${task.prefix}-after.png`);
-      const settle = async (page) => {
-        await page.evaluate("document.fonts.ready");
-        if (options.delay > 0) {
-          await page.waitForTimeout(options.delay);
-        }
-      };
-      const performActions = async (page, actions) => {
-        for (const action of actions) {
-          if (action.click) {
-            await page.locator(action.click).first().click();
-          }
-          if (action.scroll) {
-            await page.locator(action.scroll).first().scrollIntoViewIfNeeded();
-          }
-          if (action.wait && action.wait > 0) {
-            await page.waitForTimeout(action.wait);
-          }
-          await settle(page);
-        }
-      };
-      const screenshot = async (page, path) => {
-        if (task.selector) {
-          const el = page.locator(task.selector).first();
-          await el.screenshot({ path });
+    for (let batchStart = 0; batchStart < tasks.length; batchStart += BATCH_SIZE) {
+      const batch = tasks.slice(batchStart, batchStart + BATCH_SIZE);
+      const batchResults = await Promise.allSettled(
+        batch.map((task, idx) => {
+          options.onProgress?.(batchStart + idx + 1, task.label);
+          return captureOneRoute(task, beforeCtx, afterCtx, beforeUrl, afterUrl, outputDir, options);
+        })
+      );
+      for (const result of batchResults) {
+        if (result.status === "fulfilled") {
+          results.push(...result.value);
         } else {
-          await page.screenshot({ path, fullPage: true });
+          logger.dim(`Capture failed: ${result.reason}`);
         }
-      };
-      await Promise.all([
-        beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(beforePage)).then(() => task.actions ? performActions(beforePage, task.actions) : void 0).then(() => screenshot(beforePage, beforePath)),
-        afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" }).then(() => settle(afterPage)).then(() => task.actions ? performActions(afterPage, task.actions) : void 0).then(() => screenshot(afterPage, afterPath))
-      ]);
-      results.push({ route: task.label, prefix: task.prefix, beforePath, afterPath });
-      if ((task.changedComponents?.length ?? 0) > 0 && !task.actions && !task.selector) {
-        await captureComponentInstances(
-          afterPage,
-          beforePage,
-          task.changedComponents,
-          task.prefix,
-          task.label,
-          outputDir,
-          beforePath,
-          afterPath,
-          results
-        );
-      }
-      if (options.autoSections && !task.actions && !task.selector && !task.skipAutoSections) {
-        await captureAutoSections(
-          afterPage,
-          beforePage,
-          task.prefix,
-          task.label,
-          outputDir,
-          options,
-          settle,
-          results
-        );
-      }
-      if (options.autoTabs && !task.actions && !task.selector && !task.skipAutoTabs) {
-        await captureAutoTabs(
-          afterPage,
-          beforePage,
-          task,
-          beforeUrl,
-          afterUrl,
-          outputDir,
-          options,
-          settle,
-          results
-        );
       }
     }
     await Promise.all([beforeCtx.close(), afterCtx.close()]);
@@ -1626,109 +1557,70 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
 }
 
 // src/stages/compare.ts
-import { readFileSync as readFileSync5 } from "fs";
-import { join as join7, dirname as dirname2 } from "path";
-import { PNG } from "pngjs";
-import pixelmatch from "pixelmatch";
-function normalizeDimensions(img1, img2) {
-  const width = Math.max(img1.width, img2.width);
-  const height = Math.max(img1.height, img2.height);
-  const pad = (src) => {
-    if (src.width === width && src.height === height) return src;
-    const padded = new PNG({ width, height });
-    for (let i = 0; i < padded.data.length; i += 4) {
-      padded.data[i] = 255;
-      padded.data[i + 1] = 255;
-      padded.data[i + 2] = 255;
-      padded.data[i + 3] = 255;
-    }
-    PNG.bitblt(src, padded, 0, 0, src.width, src.height, 0, 0);
-    return padded;
-  };
-  return [pad(img1), pad(img2)];
-}
-async function generateComposite(beforePath, afterPath, outputPath, browser, bgColor) {
-  const beforeBuf = readFileSync5(beforePath);
-  const afterBuf = readFileSync5(afterPath);
-  const beforeUri = `data:image/png;base64,${beforeBuf.toString("base64")}`;
-  const afterUri = `data:image/png;base64,${afterBuf.toString("base64")}`;
-  const beforePng = PNG.sync.read(beforeBuf);
-  const afterPng = PNG.sync.read(afterBuf);
-  const imgW = Math.max(beforePng.width, afterPng.width);
-  const imgH = Math.max(beforePng.height, afterPng.height);
-  const PADDING = 120;
-  const GAP = 80;
-  const LABEL_H = 70;
-  const canvasW = Math.max(600, Math.min(2400, imgW * 2 + GAP + PADDING * 2));
-  const canvasH = Math.max(300, Math.min(2400, imgH + LABEL_H + PADDING * 2));
-  const maxImgH = canvasH - PADDING * 2 - LABEL_H;
-  const page = await browser.newPage({
-    viewport: { width: canvasW, height: canvasH },
-    deviceScaleFactor: 1
-  });
-  const html = `<!DOCTYPE html>
-<html><head><style>
-  * { margin: 0; box-sizing: border-box; }
-  body { background: ${bgColor}; display: flex; justify-content: center; align-items: center; width: ${canvasW}px; height: ${canvasH}px; padding: ${PADDING}px; gap: ${GAP}px; overflow: hidden; }
-  .col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; max-height: 100%; }
-  img { width: 100%; max-height: ${maxImgH}px; object-fit: contain; }
-  .label { margin-top: 40px; font: 500 30px/1 system-ui, sans-serif; flex-shrink: 0; }
-  .before { color: #888; }
-  .after { color: #22c55e; }
-</style></head><body>
-  <div class="col"><img src="${beforeUri}"><div class="label before">Before</div></div>
-  <div class="col"><img src="${afterUri}"><div class="label after">After</div></div>
-</body></html>`;
-  await page.setContent(html, { waitUntil: "load" });
-  await page.waitForTimeout(200);
-  await page.screenshot({ path: outputPath });
-  await page.close();
-}
-async function compareOne(capture, outputDir, threshold, options) {
-  const dir = dirname2(capture.beforePath);
-  const comparePath = join7(dir, `${capture.prefix}-compare.png`);
-  const beforeBuffer = readFileSync5(capture.beforePath);
-  const afterBuffer = readFileSync5(capture.afterPath);
-  const beforeImg = PNG.sync.read(beforeBuffer);
-  const afterImg = PNG.sync.read(afterBuffer);
-  const [normBefore, normAfter] = normalizeDimensions(beforeImg, afterImg);
-  const { width, height } = normBefore;
-  const totalPixels = width * height;
-  const diffPixels = pixelmatch(
-    normBefore.data,
-    normAfter.data,
-    new Uint8Array(width * height * 4),
-    width,
-    height,
-    { threshold: 0.1 }
-  );
-  const diffPercentage = diffPixels / totalPixels * 100;
-  const changed = diffPercentage > threshold;
-  await generateComposite(
+import { join as join7 } from "path";
+import { unlinkSync } from "fs";
+import { ODiffServer } from "odiff-bin";
+async function compareOne(capture, outputDir, threshold, server) {
+  const diffPath = join7(outputDir, `${capture.prefix}-diff.png`);
+  const result = await server.compare(
     capture.beforePath,
     capture.afterPath,
-    comparePath,
-    options.browser,
-    options.bgColor
+    diffPath,
+    { threshold: 0.1, antialiasing: true }
   );
+  if (result.match) {
+    return {
+      route: capture.route,
+      prefix: capture.prefix,
+      beforePath: capture.beforePath,
+      afterPath: capture.afterPath,
+      diffPixels: 0,
+      totalPixels: 0,
+      diffPercentage: 0,
+      changed: false
+    };
+  }
+  if (result.reason === "pixel-diff") {
+    const changed = result.diffPercentage > threshold;
+    if (!changed) {
+      try {
+        unlinkSync(diffPath);
+      } catch {
+      }
+    }
+    return {
+      route: capture.route,
+      prefix: capture.prefix,
+      beforePath: capture.beforePath,
+      afterPath: capture.afterPath,
+      diffPixels: result.diffCount,
+      totalPixels: 0,
+      diffPercentage: result.diffPercentage,
+      changed
+    };
+  }
   return {
     route: capture.route,
     prefix: capture.prefix,
     beforePath: capture.beforePath,
     afterPath: capture.afterPath,
-    comparePath,
-    diffPixels,
-    totalPixels,
-    diffPercentage,
-    changed
+    diffPixels: 0,
+    totalPixels: 0,
+    diffPercentage: 100,
+    changed: true
   };
 }
-async function compareScreenshots(captures, outputDir, threshold = 0.1, options) {
-  const results = [];
-  for (const capture of captures) {
-    results.push(await compareOne(capture, outputDir, threshold, options));
+async function compareScreenshots(captures, outputDir, threshold = 0.1) {
+  const server = new ODiffServer();
+  try {
+    const results = [];
+    for (const capture of captures) {
+      results.push(await compareOne(capture, outputDir, threshold, server));
+    }
+    return results;
+  } finally {
+    server.stop();
   }
-  return results;
 }
 
 // src/stages/report.ts
@@ -1899,10 +1791,10 @@ function expandRoutes(routes, config, routeComponentMap) {
 async function runPipeline(options) {
   const { base, output, post, cwd } = options;
   const sessionName = generateSessionName(cwd);
-  const outputDir = resolve4(cwd, output, sessionName);
+  const outputDir = resolve3(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.11" : "dev";
+    const version = true ? "0.1.12" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -2003,21 +1895,16 @@ afterbefore v${version} \xB7 Comparing against ${base}
       }
     );
     logger.pipeline(7, "Comparing screenshots...");
-    const bgColor = detectBgColor(cwd);
-    const allResults = await compareScreenshots(captures, outputDir, options.threshold, { browser, bgColor });
+    const allResults = await compareScreenshots(captures, outputDir, options.threshold);
     const results = allResults.filter((r) => {
       const isSubCapture = r.prefix.includes("~");
       if (isSubCapture && !r.changed) {
         try {
-          unlinkSync(r.beforePath);
-        } catch {
-        }
-        try {
-          unlinkSync(r.afterPath);
+          unlinkSync2(r.beforePath);
         } catch {
         }
         try {
-          unlinkSync(r.comparePath);
+          unlinkSync2(r.afterPath);
         } catch {
         }
         return false;
@@ -2036,7 +1923,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
     );
   } finally {
     try {
-      logger.writeLogFile(resolve4(outputDir, "debug.log"));
+      logger.writeLogFile(resolve3(outputDir, "debug.log"));
     } catch {
     }
     await cleanupRegistry.runAll();
@@ -2047,7 +1934,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
 var program = new Command();
 program.name("afterbefore").description(
   "Automatic before/after screenshot capture for PRs. Git diff is the config."
-).version("0.1.11").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
+).version("0.1.12").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
   "--threshold <percent>",
   "Diff threshold percentage (changes below this are ignored)",
   "0.1"