afterbefore 0.1.8 → 0.1.10

package/dist/cli.js

@@ -1009,6 +1009,7 @@ async function detectSections(page, maxSections) {
       if (!container || tagged.has(container)) continue;
       if (container.scrollHeight > document.documentElement.scrollHeight * 0.9) continue;
       container.setAttribute("data-ab-section", String(idx));
+      heading.setAttribute("data-ab-heading", String(idx));
       tagged.add(container);
       results.push({
         label: (heading.textContent ?? "").trim(),
@@ -1067,6 +1068,7 @@ async function tagSectionOnPage(page, headingText, index) {
       }
       if (el) {
         el.setAttribute("data-ab-section", String(idx));
+        match.setAttribute("data-ab-heading", String(idx));
         return true;
       }
       return false;
@@ -1074,12 +1076,33 @@ async function tagSectionOnPage(page, headingText, index) {
     { text: headingText, idx: index }
   );
 }
+async function hideSectionHeading(page, sectionIndex) {
+  await page.evaluate((idx) => {
+    const heading = document.querySelector(`[data-ab-heading="${idx}"]`);
+    if (heading instanceof HTMLElement) {
+      heading.style.display = "none";
+    }
+  }, sectionIndex);
+}
+async function showSectionHeading(page, sectionIndex) {
+  await page.evaluate((idx) => {
+    const heading = document.querySelector(`[data-ab-heading="${idx}"]`);
+    if (heading instanceof HTMLElement) {
+      heading.style.display = "";
+    }
+  }, sectionIndex);
+}
 async function cleanupSectionTags(page) {
   await page.evaluate(() => {
-    const tagged = document.querySelectorAll("[data-ab-section]");
-    for (const el of tagged) {
+    for (const el of document.querySelectorAll("[data-ab-section]")) {
       el.removeAttribute("data-ab-section");
     }
+    for (const el of document.querySelectorAll("[data-ab-heading]")) {
+      el.removeAttribute("data-ab-heading");
+      if (el instanceof HTMLElement) {
+        el.style.display = "";
+      }
+    }
   });
 }
 function sanitizeSectionLabel(label) {
@@ -1395,12 +1418,16 @@ async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLa
     const sectionAfterPath = join6(outputDir, `${sectionPrefix}-after.png`);
     const sectionBeforePath = join6(outputDir, `${sectionPrefix}-before.png`);
     try {
+      await hideSectionHeading(afterPage, section.index);
       const afterEl = afterPage.locator(`[data-ab-section="${section.index}"]`).first();
       await afterEl.screenshot({ path: sectionAfterPath });
+      await showSectionHeading(afterPage, section.index);
       const found = await tagSectionOnPage(beforePage, section.label, section.index);
       if (found) {
+        await hideSectionHeading(beforePage, section.index);
         const beforeEl = beforePage.locator(`[data-ab-section="${section.index}"]`).first();
         await beforeEl.screenshot({ path: sectionBeforePath });
+        await showSectionHeading(beforePage, section.index);
       } else {
         continue;
       }
@@ -1625,18 +1652,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; }
@@ -1867,7 +1906,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.8" : "dev";
+    const version = true ? "0.1.10" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -2012,7 +2051,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.8").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.10").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"