afterbefore 0.1.7 → 0.1.9

package/dist/cli.js

@@ -109,6 +109,7 @@ var Logger = class {
       return;
     }
     this.spinner.text = text;
+    this.spinner.render();
   }
   completePipeline(finished = false) {
     this.pipelineActive = false;
@@ -432,12 +433,6 @@ function isGlobalVisualFile(filePath) {
   const p = filePath.replace(/^src\//, "");
   return GLOBAL_FILES.has(p) || /globals?\.(css|scss)$/.test(p);
 }
-var VISUAL_CATEGORIES = /* @__PURE__ */ new Set([
-  "page",
-  "component",
-  "style",
-  "layout"
-]);
 function classifyFile(filePath) {
   const p = filePath.replace(/^src\//, "");
   if (/\.(test|spec)\.[tj]sx?$/.test(p) || /^tests?\//.test(p) || /\/__tests__\//.test(p) || p.includes(".test.") || p.includes(".spec.")) {
@@ -474,9 +469,6 @@ function classifyFiles(files) {
     category: classifyFile(f.path)
   }));
 }
-function filterVisuallyRelevant(files) {
-  return files.filter((f) => VISUAL_CATEGORIES.has(f.category));
-}
 
 // src/stages/graph.ts
 import { readdirSync, readFileSync as readFileSync4 } from "fs";
@@ -728,6 +720,14 @@ function getLayoutDir(filePath) {
   return match[1];
 }
 
+// src/utils/path.ts
+function normalizePath(filePath) {
+  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function sanitizeLabel(label, maxLength = 40) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, maxLength);
+}
+
 // src/stages/impact.ts
 var MAX_DEPTH = 3;
 function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
@@ -795,6 +795,28 @@ function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
   logger.dim(`Found ${routes.length} affected route(s)`);
   return routes;
 }
+function findRoutesForFile(file, graph) {
+  const routes = /* @__PURE__ */ new Set();
+  const start = normalizePath(file);
+  const queue = [{ path: start, depth: 0 }];
+  const visited = /* @__PURE__ */ new Set([start]);
+  while (queue.length > 0) {
+    const { path, depth } = queue.shift();
+    if (isPageFile(path)) {
+      const route = pagePathToRoute(path);
+      if (route) routes.add(route);
+    }
+    if (depth >= MAX_DEPTH) continue;
+    const importers = graph.reverse.get(path);
+    if (!importers) continue;
+    for (const importer of importers) {
+      if (visited.has(importer)) continue;
+      visited.add(importer);
+      queue.push({ path: importer, depth: depth + 1 });
+    }
+  }
+  return Array.from(routes);
+}
 
 // src/stages/worktree.ts
 import { execSync as execSync2 } from "child_process";
@@ -969,7 +991,7 @@ async function detectTabs(page, maxTabs) {
   return allTabs.filter((t) => !t.selected).slice(0, maxTabs);
 }
 function sanitizeTabLabel(label) {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+  return sanitizeLabel(label);
 }
 
 // src/utils/sections.ts
@@ -1061,7 +1083,7 @@ async function cleanupSectionTags(page) {
   });
 }
 function sanitizeSectionLabel(label) {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+  return sanitizeLabel(label);
 }
 
 // src/stages/capture.ts
@@ -1077,11 +1099,9 @@ async function launchBrowser() {
   }
 }
 var MAX_COMPONENT_INSTANCES_PER_SOURCE = 20;
-function normalizePath(filePath) {
-  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
-}
 function sanitizeComponentLabel(label) {
-  return label.toLowerCase().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 60);
+  const noExt = label.replace(/\.[a-z0-9]+$/i, "");
+  return sanitizeLabel(noExt, 60);
 }
 function groupBySource(instances) {
   const map = /* @__PURE__ */ new Map();
@@ -1396,6 +1416,88 @@ async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLa
   await cleanupSectionTags(afterPage);
   await cleanupSectionTags(beforePage);
 }
+async function captureAutoTabs(afterPage, beforePage, task, beforeUrl, afterUrl, outputDir, options, settle, results) {
+  const tabs = await detectTabs(afterPage, options.maxTabsPerRoute);
+  const usedPrefixes = /* @__PURE__ */ new Set();
+  for (const tab of tabs) {
+    let slug = sanitizeTabLabel(tab.label);
+    if (!slug) continue;
+    if (usedPrefixes.has(slug)) {
+      let suffix = 2;
+      while (usedPrefixes.has(`${slug}-${suffix}`)) suffix++;
+      slug = `${slug}-${suffix}`;
+    }
+    usedPrefixes.add(slug);
+    const tabPrefix = `${task.prefix}~${slug}`;
+    const tabLabel = `${task.label} [${tab.label}]`;
+    const tabBeforePath = join6(outputDir, `${tabPrefix}-before.png`);
+    const tabAfterPath = join6(outputDir, `${tabPrefix}-after.png`);
+    try {
+      const afterUrlBefore = afterPage.url();
+      await afterPage.getByRole("tab", { name: tab.label }).first().click();
+      await settle(afterPage);
+      if (afterPage.url() !== afterUrlBefore) {
+        await afterPage.goBack({ waitUntil: "networkidle" });
+        await settle(afterPage);
+        continue;
+      }
+      await afterPage.screenshot({ path: tabAfterPath, fullPage: true });
+      try {
+        const beforeUrlBefore = beforePage.url();
+        await beforePage.getByRole("tab", { name: tab.label }).first().click({ timeout: 2e3 });
+        await settle(beforePage);
+        if (beforePage.url() !== beforeUrlBefore) {
+          await beforePage.goBack({ waitUntil: "networkidle" });
+          await settle(beforePage);
+          await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+        } else {
+          await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+        }
+      } catch {
+        await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+      }
+      results.push({
+        route: tabLabel,
+        prefix: tabPrefix,
+        beforePath: tabBeforePath,
+        afterPath: tabAfterPath
+      });
+      if ((task.changedComponents?.length ?? 0) > 0) {
+        await captureComponentInstances(
+          afterPage,
+          beforePage,
+          task.changedComponents,
+          tabPrefix,
+          tabLabel,
+          outputDir,
+          tabBeforePath,
+          tabAfterPath,
+          results
+        );
+      }
+      if (options.autoSections && !task.skipAutoSections) {
+        await captureAutoSections(
+          afterPage,
+          beforePage,
+          tabPrefix,
+          tabLabel,
+          outputDir,
+          options,
+          settle,
+          results
+        );
+      }
+    } catch {
+      logger.dim(`  Skipped tab "${tab.label}" on ${task.route}`);
+    }
+  }
+  if (tabs.length > 0) {
+    await Promise.all([
+      beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }),
+      afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" })
+    ]);
+  }
+}
 async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
   const browser = options.browser ?? await launchBrowser();
   const ownsBrowser = !options.browser;
@@ -1478,86 +1580,17 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
         );
       }
       if (options.autoTabs && !task.actions && !task.selector && !task.skipAutoTabs) {
-        const tabs = await detectTabs(afterPage, options.maxTabsPerRoute);
-        const usedPrefixes = /* @__PURE__ */ new Set();
-        for (const tab of tabs) {
-          let slug = sanitizeTabLabel(tab.label);
-          if (!slug) continue;
-          if (usedPrefixes.has(slug)) {
-            let suffix = 2;
-            while (usedPrefixes.has(`${slug}-${suffix}`)) suffix++;
-            slug = `${slug}-${suffix}`;
-          }
-          usedPrefixes.add(slug);
-          const tabPrefix = `${task.prefix}~${slug}`;
-          const tabLabel = `${task.label} [${tab.label}]`;
-          const tabBeforePath = join6(outputDir, `${tabPrefix}-before.png`);
-          const tabAfterPath = join6(outputDir, `${tabPrefix}-after.png`);
-          try {
-            const afterUrlBefore = afterPage.url();
-            await afterPage.getByRole("tab", { name: tab.label }).first().click();
-            await settle(afterPage);
-            if (afterPage.url() !== afterUrlBefore) {
-              await afterPage.goBack({ waitUntil: "networkidle" });
-              await settle(afterPage);
-              continue;
-            }
-            await afterPage.screenshot({ path: tabAfterPath, fullPage: true });
-            try {
-              const beforeUrlBefore = beforePage.url();
-              await beforePage.getByRole("tab", { name: tab.label }).first().click({ timeout: 2e3 });
-              await settle(beforePage);
-              if (beforePage.url() !== beforeUrlBefore) {
-                await beforePage.goBack({ waitUntil: "networkidle" });
-                await settle(beforePage);
-                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-              } else {
-                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-              }
-            } catch {
-              await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-            }
-            results.push({
-              route: tabLabel,
-              prefix: tabPrefix,
-              beforePath: tabBeforePath,
-              afterPath: tabAfterPath
-            });
-            if ((task.changedComponents?.length ?? 0) > 0) {
-              await captureComponentInstances(
-                afterPage,
-                beforePage,
-                task.changedComponents,
-                tabPrefix,
-                tabLabel,
-                outputDir,
-                tabBeforePath,
-                tabAfterPath,
-                results
-              );
-            }
-            if (options.autoSections && !task.skipAutoSections) {
-              await captureAutoSections(
-                afterPage,
-                beforePage,
-                tabPrefix,
-                tabLabel,
-                outputDir,
-                options,
-                settle,
-                results
-              );
-            }
-          } catch {
-            logger.dim(`  Skipped tab "${tab.label}" on ${task.route}`);
-          }
-        }
-        if (tabs.length > 0) {
-          await Promise.all([
-            beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }),
-            afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" })
-          ]);
-        }
+        await captureAutoTabs(
+          afterPage,
+          beforePage,
+          task,
+          beforeUrl,
+          afterUrl,
+          outputDir,
+          options,
+          settle,
+          results
+        );
       }
     }
     await Promise.all([beforeCtx.close(), afterCtx.close()]);
@@ -1592,18 +1625,30 @@ function normalizeDimensions(img1, img2) {
   return [pad(img1), pad(img2)];
 }
 async function generateComposite(beforePath, afterPath, outputPath, browser, bgColor) {
-  const beforeUri = `data:image/png;base64,${readFileSync5(beforePath).toString("base64")}`;
-  const afterUri = `data:image/png;base64,${readFileSync5(afterPath).toString("base64")}`;
+  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: 2400, height: 1600 },
+    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: 2400px; height: 1600px; padding: 120px; gap: 80px; overflow: hidden; }
+  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: 1280px; object-fit: contain; }
+  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; }
@@ -1788,36 +1833,10 @@ function routeToPrefix(route) {
   if (route === "/") return "_root";
   return route.replace(/^\//, "").replace(/\//g, "-");
 }
-var ROUTE_IMPACT_MAX_DEPTH = 3;
-function normalizePath2(filePath) {
-  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
-}
-function findRoutesForChangedFile(changedFile, graph) {
-  const routes = /* @__PURE__ */ new Set();
-  const start = normalizePath2(changedFile);
-  const queue = [{ file: start, depth: 0 }];
-  const visited = /* @__PURE__ */ new Set([start]);
-  while (queue.length > 0) {
-    const { file, depth } = queue.shift();
-    if (isPageFile(file)) {
-      const route = pagePathToRoute(file);
-      if (route) routes.add(route);
-    }
-    if (depth >= ROUTE_IMPACT_MAX_DEPTH) continue;
-    const importers = graph.reverse.get(file);
-    if (!importers) continue;
-    for (const importer of importers) {
-      if (visited.has(importer)) continue;
-      visited.add(importer);
-      queue.push({ file: importer, depth: depth + 1 });
-    }
-  }
-  return Array.from(routes);
-}
 function mapRouteToChangedComponents(changedComponentFiles, graph) {
   const routeMap = /* @__PURE__ */ new Map();
   for (const componentPath of changedComponentFiles) {
-    const routes = findRoutesForChangedFile(componentPath, graph);
+    const routes = findRoutesForFile(componentPath, graph);
     for (const route of routes) {
       const next = routeMap.get(route) ?? [];
       next.push(componentPath);
@@ -1860,7 +1879,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.7" : "dev";
+    const version = true ? "0.1.9" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -1875,7 +1894,6 @@ afterbefore v${version} \xB7 Comparing against ${base}
       return;
     }
     const classified = classifyFiles(diffFiles);
-    const visualFiles = filterVisuallyRelevant(classified);
     const impactfulFiles = classified.filter(
       (f) => f.category !== "test" && f.category !== "other"
     );
@@ -2006,7 +2024,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.7").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.9").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"
@@ -2014,7 +2032,7 @@ program.name("afterbefore").description(
   "--max-routes <count>",
   "Maximum routes to capture (0 = unlimited)",
   "6"
-).option("--width <pixels>", "Viewport width", "1280").option("--height <pixels>", "Viewport height", "720").option("--device <name>", 'Playwright device descriptor (e.g. "iPhone 14")').option("--delay <ms>", "Extra wait time (ms) after page load", "0").option("--no-auto-tabs", "Disable auto-detection of ARIA tab states").option("--max-tabs <count>", "Max auto-detected tabs per route", "5").option("--auto-sections", "Auto-detect and capture heading-labeled sections").option("--max-sections <count>", "Max auto-detected sections per page state", "10").action(async (opts) => {
+).option("--width <pixels>", "Viewport width", "1280").option("--height <pixels>", "Viewport height", "720").option("--device <name>", 'Playwright device descriptor (e.g. "iPhone 14")').option("--delay <ms>", "Extra wait time (ms) after page load", "0").option("--no-auto-tabs", "Disable auto-detection of ARIA tab states").option("--max-tabs <count>", "Max auto-detected tabs per route", "5").option("--no-auto-sections", "Disable auto-detection of heading-labeled sections").option("--max-sections <count>", "Max auto-detected sections per page state", "10").action(async (opts) => {
   const cwd = process.cwd();
   if (!isGitRepo(cwd)) {
     logger.error("Not a git repository. Run this from inside a git repo.");
@@ -2032,7 +2050,7 @@ program.name("afterbefore").description(
     delay: parseInt(opts.delay, 10),
     autoTabs: opts.autoTabs,
     maxTabsPerRoute: parseInt(opts.maxTabs, 10),
-    autoSections: opts.autoSections ?? false,
+    autoSections: opts.autoSections,
     maxSectionsPerRoute: parseInt(opts.maxSections, 10),
     cwd
   };