afterbefore 0.1.18 → 0.2.0

package/dist/index.js

@@ -1,2602 +0,0 @@
-// src/pipeline.ts
-import { resolve as resolve4, basename } from "path";
-import { writeFileSync as writeFileSync2, unlinkSync as unlinkSync2 } from "fs";
-import { execSync as execSync5 } from "child_process";
-import chalk2 from "chalk";
-
-// src/logger.ts
-import { writeFileSync } from "fs";
-import chalk from "chalk";
-import ora from "ora";
-var BAR_WIDTH = 20;
-var BAR_SPINNER = { interval: 80, frames: [" "] };
-var Logger = class {
-  spinner = null;
-  pipelineTotal = 0;
-  lastStep = 0;
-  lastLabel = "";
-  pipelineActive = false;
-  logBuffer = [];
-  isTTY = !!process.stderr.isTTY;
-  log(level, message) {
-    const ts = (/* @__PURE__ */ new Date()).toISOString();
-    this.logBuffer.push(`${ts} [${level}] ${message}`);
-  }
-  info(message) {
-    this.log("info", message);
-    if (this.pipelineActive) return;
-    if (this.spinner) {
-      this.spinner.clear();
-      console.log(chalk.blue("\u2139"), message);
-      this.spinner.render();
-    } else {
-      console.log(chalk.blue("\u2139"), message);
-    }
-  }
-  success(message) {
-    this.log("ok", message);
-    if (this.pipelineActive) return;
-    if (this.spinner) {
-      this.spinner.clear();
-      console.log(chalk.green("\u2714"), message);
-      this.spinner.render();
-    } else {
-      console.log(chalk.green("\u2714"), message);
-    }
-  }
-  warn(message) {
-    this.log("warn", message);
-    if (this.spinner) {
-      this.spinner.clear();
-      console.log(chalk.yellow("\u26A0"), message);
-      this.spinner.render();
-    } else {
-      console.log(chalk.yellow("\u26A0"), message);
-    }
-  }
-  error(message) {
-    this.log("error", message);
-    if (this.spinner) {
-      this.spinner.clear();
-      console.error(chalk.red("\u2716"), message);
-      this.spinner.render();
-    } else {
-      console.error(chalk.red("\u2716"), message);
-    }
-  }
-  dim(message) {
-    this.log("debug", message);
-    if (this.pipelineActive) return;
-    if (this.spinner) {
-      this.spinner.clear();
-      console.log(chalk.dim(message));
-      this.spinner.render();
-    } else {
-      console.log(chalk.dim(message));
-    }
-  }
-  spin(message) {
-    this.log("info", message);
-    this.clearSpinner();
-    this.spinner = ora(message).start();
-    return this.spinner;
-  }
-  stopSpinner() {
-    this.clearSpinner();
-  }
-  startPipeline(total) {
-    this.pipelineTotal = total;
-    this.lastStep = 0;
-    this.lastLabel = "";
-    this.pipelineActive = true;
-    this.clearSpinner();
-    this.log("info", `Pipeline started (${total} steps)`);
-    const text = this.renderPipeline(0, "Starting...");
-    if (this.isTTY) {
-      this.spinner = ora({
-        text: chalk.dim(text),
-        spinner: BAR_SPINNER
-      }).start();
-    } else {
-      console.error(chalk.dim(text));
-    }
-  }
-  pipeline(step, label) {
-    if (step === this.lastStep && label === this.lastLabel) return;
-    this.lastStep = step;
-    this.lastLabel = label;
-    this.log("step", `${step}/${this.pipelineTotal} ${label}`);
-    const text = chalk.dim(this.renderPipeline(step, label));
-    if (!this.isTTY) {
-      return;
-    }
-    if (!this.spinner) {
-      this.spinner = ora({
-        text,
-        spinner: BAR_SPINNER
-      }).start();
-      return;
-    }
-    this.spinner.text = text;
-    this.spinner.render();
-  }
-  stageComplete(name, detail, durationMs) {
-    const duration = durationMs < 1e3 ? `${Math.round(durationMs)}ms` : `${(durationMs / 1e3).toFixed(1)}s`;
-    const line = `  ${chalk.green("\u2713")} ${name.padEnd(12)} ${chalk.dim(detail.padEnd(50))} ${chalk.dim(duration)}`;
-    this.log("stage", `${name}: ${detail} (${duration})`);
-    if (this.isTTY && this.spinner) {
-      this.spinner.clear();
-      console.log(line);
-      this.spinner.render();
-    } else {
-      console.log(line);
-    }
-  }
-  completePipeline(finished = false) {
-    this.pipelineActive = false;
-    this.log("info", `Pipeline ${finished ? "completed" : "stopped"}`);
-    if (this.spinner) {
-      if (finished) {
-        const bar = "\u2588".repeat(BAR_WIDTH);
-        this.spinner.succeed(` ${bar}`);
-      } else {
-        this.spinner.stop();
-      }
-      this.spinner = null;
-    } else if (finished) {
-      const bar = "\u2588".repeat(BAR_WIDTH);
-      console.error(`${chalk.green("\u2714")} ${bar}`);
-    }
-    this.pipelineTotal = 0;
-    this.lastStep = 0;
-    this.lastLabel = "";
-  }
-  writeLogFile(filePath) {
-    if (this.logBuffer.length === 0) return;
-    writeFileSync(filePath, this.logBuffer.join("\n") + "\n", "utf-8");
-  }
-  renderPipeline(step, label) {
-    const total = this.pipelineTotal || 1;
-    const clampedStep = Math.max(0, Math.min(step, total));
-    const filled = Math.round(clampedStep / total * BAR_WIDTH);
-    const bar = "\u2588".repeat(filled) + "\u2591".repeat(BAR_WIDTH - filled);
-    return `  ${bar} ${clampedStep}/${total} ${label}`;
-  }
-  clearSpinner() {
-    if (this.spinner) {
-      this.spinner.stop();
-      this.spinner = null;
-    }
-  }
-};
-var logger = new Logger();
-
-// src/cleanup.ts
-var CleanupRegistry = class {
-  cleanups = [];
-  registered = false;
-  register(fn) {
-    this.cleanups.push(fn);
-    this.ensureSignalHandlers();
-  }
-  async runAll() {
-    const fns = [...this.cleanups].reverse();
-    this.cleanups = [];
-    for (const fn of fns) {
-      try {
-        await fn();
-      } catch (err) {
-        logger.warn(
-          `Cleanup failed: ${err instanceof Error ? err.message : String(err)}`
-        );
-      }
-    }
-  }
-  ensureSignalHandlers() {
-    if (this.registered) return;
-    this.registered = true;
-    const handler = async (signal) => {
-      logger.dim(`
-Received ${signal}, cleaning up...`);
-      await this.runAll();
-      process.exit(signal === "SIGINT" ? 130 : 143);
-    };
-    process.on("SIGINT", () => handler("SIGINT"));
-    process.on("SIGTERM", () => handler("SIGTERM"));
-    process.on("exit", () => {
-      if (this.cleanups.length > 0) {
-        for (const fn of [...this.cleanups].reverse()) {
-          try {
-            fn();
-          } catch {
-          }
-        }
-        this.cleanups = [];
-      }
-    });
-  }
-};
-var cleanupRegistry = new CleanupRegistry();
-
-// src/config.ts
-import { resolve } from "path";
-import { existsSync, readFileSync } from "fs";
-import { pathToFileURL } from "url";
-var CONFIG_FILES = [
-  "afterbefore.config.json",
-  "afterbefore.config.js",
-  "afterbefore.config.mjs"
-];
-async function loadConfig(cwd) {
-  for (const name of CONFIG_FILES) {
-    const filePath = resolve(cwd, name);
-    if (!existsSync(filePath)) continue;
-    logger.dim(`  Config: ${name}`);
-    if (name.endsWith(".json")) {
-      const raw = readFileSync(filePath, "utf-8");
-      return JSON.parse(raw);
-    }
-    const mod = await import(pathToFileURL(filePath).href);
-    return mod.default ?? mod;
-  }
-  return null;
-}
-
-// src/utils/fs.ts
-import { mkdir } from "fs/promises";
-async function ensureDir(dir) {
-  await mkdir(dir, { recursive: true });
-}
-
-// src/utils/port.ts
-import { createServer } from "net";
-function findPort() {
-  return new Promise((resolve5, reject) => {
-    const server = createServer();
-    server.listen(0, () => {
-      const addr = server.address();
-      if (!addr || typeof addr === "string") {
-        server.close();
-        reject(new Error("Failed to get port"));
-        return;
-      }
-      const port = addr.port;
-      server.close(() => resolve5(port));
-    });
-    server.on("error", reject);
-  });
-}
-async function findAvailablePort(exclude) {
-  for (let i = 0; i < 5; i++) {
-    const port = await findPort();
-    if (!exclude || !exclude.has(port)) return port;
-  }
-  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/utils/git.ts
-import { execSync } from "child_process";
-
-// src/errors.ts
-var AfterbeforeError = class extends Error {
-  constructor(message, suggestion) {
-    super(message);
-    this.suggestion = suggestion;
-    this.name = "AfterbeforeError";
-  }
-};
-
-// src/utils/git.ts
-function git(args, cwd) {
-  try {
-    return execSync(`git ${args}`, {
-      cwd,
-      encoding: "utf-8",
-      stdio: ["pipe", "pipe", "pipe"]
-    }).trim();
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    if (message.includes("ENOENT") || message.includes("not found")) {
-      throw new AfterbeforeError(
-        "Git is not installed or not in PATH.",
-        "Install git: https://git-scm.com/downloads"
-      );
-    }
-    throw err;
-  }
-}
-function getMergeBase(base, cwd) {
-  try {
-    return git(`merge-base ${base} HEAD`, cwd);
-  } catch {
-    throw new AfterbeforeError(
-      `Could not find merge base for "${base}". The branch or ref may not exist.`,
-      `Run "git branch -a" to see available branches. Did you mean "master" instead of "main"?`
-    );
-  }
-}
-function getDiffNameStatus(base, cwd) {
-  const mergeBase = getMergeBase(base, cwd);
-  return git(`diff --name-status ${mergeBase}`, cwd);
-}
-function getGitDiff(base, cwd) {
-  const mergeBase = getMergeBase(base, cwd);
-  return git(`diff ${mergeBase}`, cwd);
-}
-function getCurrentBranch(cwd) {
-  return git("rev-parse --abbrev-ref HEAD", cwd);
-}
-
-// src/stages/diff.ts
-var VALID_STATUSES = /* @__PURE__ */ new Set(["A", "M", "D", "R", "C"]);
-function parseDiffOutput(raw) {
-  if (!raw.trim()) return [];
-  const results = [];
-  for (const line of raw.trim().split("\n")) {
-    const parts = line.split("	");
-    const statusRaw = parts[0].charAt(0);
-    if (!VALID_STATUSES.has(statusRaw)) continue;
-    const status = statusRaw;
-    if (status === "R" || status === "C") {
-      results.push({ status, oldPath: parts[1], path: parts[2] });
-    } else {
-      results.push({ status, path: parts[1] });
-    }
-  }
-  return results;
-}
-function getChangedFiles(base, cwd) {
-  const raw = getDiffNameStatus(base, cwd);
-  return parseDiffOutput(raw);
-}
-
-// src/stages/classify.ts
-var GLOBAL_FILES = /* @__PURE__ */ new Set([
-  "tailwind.config.ts",
-  "tailwind.config.js",
-  "postcss.config.js",
-  "postcss.config.mjs",
-  "postcss.config.cjs"
-]);
-function isGlobalVisualFile(filePath) {
-  const p = filePath.replace(/^src\//, "");
-  return GLOBAL_FILES.has(p) || /globals?\.(css|scss)$/.test(p);
-}
-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.")) {
-    return "test";
-  }
-  if (/^(tsconfig|next\.config|tailwind\.config|postcss\.config|\.eslint|\.prettier|vitest\.config|jest\.config)/.test(
-    p
-  ) || p === "package.json" || p === "package-lock.json" || p.endsWith(".config.ts") || p.endsWith(".config.js") || p.endsWith(".config.mjs")) {
-    return "config";
-  }
-  if (/\.(css|scss|sass|less)$/.test(p) || p === "tailwind.config.ts") {
-    return "style";
-  }
-  if (/\/layout\.[tj]sx?$/.test(p) || /^app\/layout\.[tj]sx?$/.test(p)) {
-    return "layout";
-  }
-  if (/\/page\.[tj]sx?$/.test(p) || /^app\/page\.[tj]sx?$/.test(p)) {
-    return "page";
-  }
-  if (/^(components|app)\//.test(p) && /\.[tj]sx?$/.test(p)) {
-    return "component";
-  }
-  if (/^(lib|utils|hooks|helpers|services|api)\//.test(p) && /\.[tj]sx?$/.test(p)) {
-    return "utility";
-  }
-  if (/\.[tj]sx?$/.test(p)) {
-    return "component";
-  }
-  return "other";
-}
-function classifyFiles(files) {
-  return files.map((f) => ({
-    ...f,
-    category: classifyFile(f.path)
-  }));
-}
-
-// src/stages/graph.ts
-import { readdirSync, readFileSync as readFileSync4 } 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";
-var EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
-function createResolver(projectRoot) {
-  const mappings = loadPathMappings(projectRoot);
-  const existsCache = /* @__PURE__ */ new Map();
-  function cachedExists(p) {
-    const cached = existsCache.get(p);
-    if (cached !== void 0) return cached;
-    const result = existsSync3(p);
-    existsCache.set(p, result);
-    return result;
-  }
-  function tryResolve(candidate) {
-    if (cachedExists(candidate) && !isDirectory(candidate)) return candidate;
-    for (const ext of EXTENSIONS) {
-      const withExt = candidate + ext;
-      if (cachedExists(withExt)) return withExt;
-    }
-    for (const ext of EXTENSIONS) {
-      const indexFile = join(candidate, `index${ext}`);
-      if (cachedExists(indexFile)) return indexFile;
-    }
-    return null;
-  }
-  function isDirectory(p) {
-    try {
-      return statSync(p).isDirectory();
-    } catch {
-      return false;
-    }
-  }
-  return (specifier, fromFile) => {
-    if (specifier.startsWith(".")) {
-      const dir = dirname(fromFile);
-      const candidate = resolve3(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 result = tryResolve(candidate);
-        if (result) return result;
-      }
-    }
-    return null;
-  };
-}
-function loadPathMappings(projectRoot) {
-  const tsconfigPath = join(projectRoot, "tsconfig.json");
-  if (!existsSync3(tsconfigPath)) {
-    logger.dim("No tsconfig.json found, skipping path alias resolution");
-    return [];
-  }
-  try {
-    const raw = readFileSync3(tsconfigPath, "utf-8");
-    const cleaned = stripJsonComments(raw);
-    const config = JSON.parse(cleaned);
-    const paths = config?.compilerOptions?.paths;
-    if (!paths) return [];
-    const baseUrl = config?.compilerOptions?.baseUrl || ".";
-    const mappings = [];
-    for (const [pattern, targets] of Object.entries(paths)) {
-      const prefix = pattern.replace(/\*$/, "");
-      const resolvedTargets = targets.map(
-        (t) => t.replace(/\*$/, "")
-      );
-      const absoluteTargets = resolvedTargets.map(
-        (t) => join(baseUrl, t)
-      );
-      mappings.push({ prefix, targets: absoluteTargets });
-    }
-    return mappings;
-  } catch (e) {
-    logger.warn(`Failed to parse tsconfig.json: ${e}`);
-    return [];
-  }
-}
-function stripJsonComments(input) {
-  let result = "";
-  let i = 0;
-  const len = input.length;
-  while (i < len) {
-    const ch = input[i];
-    if (ch === '"') {
-      let j = i + 1;
-      while (j < len) {
-        if (input[j] === "\\") {
-          j += 2;
-        } else if (input[j] === '"') {
-          j++;
-          break;
-        } else {
-          j++;
-        }
-      }
-      result += input.slice(i, j);
-      i = j;
-      continue;
-    }
-    if (ch === "/" && input[i + 1] === "/") {
-      i += 2;
-      while (i < len && input[i] !== "\n") i++;
-      continue;
-    }
-    if (ch === "/" && input[i + 1] === "*") {
-      i += 2;
-      while (i < len && !(input[i] === "*" && input[i + 1] === "/")) i++;
-      i += 2;
-      continue;
-    }
-    if (ch === ",") {
-      let j = i + 1;
-      while (j < len && /\s/.test(input[j])) j++;
-      if (input[j] === "}" || input[j] === "]") {
-        i = j;
-        continue;
-      }
-    }
-    result += ch;
-    i++;
-  }
-  return result;
-}
-
-// src/stages/graph.ts
-var SOURCE_EXTENSIONS = /* @__PURE__ */ new Set([".ts", ".tsx", ".js", ".jsx"]);
-var SOURCE_DIRS = ["app", "src", "components", "lib"];
-function collectFiles(dir) {
-  const results = [];
-  let entries;
-  try {
-    entries = readdirSync(dir, { withFileTypes: true });
-  } catch {
-    return results;
-  }
-  for (const entry of entries) {
-    const fullPath = join2(dir, entry.name);
-    if (entry.isDirectory()) {
-      if (entry.name.startsWith(".") || entry.name === "node_modules" || entry.name === "dist") {
-        continue;
-      }
-      results.push(...collectFiles(fullPath));
-    } else if (entry.isFile()) {
-      const ext = entry.name.slice(entry.name.lastIndexOf("."));
-      if (SOURCE_EXTENSIONS.has(ext)) {
-        results.push(fullPath);
-      }
-    }
-  }
-  return results;
-}
-function parseImports(filePath) {
-  let source;
-  try {
-    source = readFileSync4(filePath, "utf-8");
-  } catch {
-    return [];
-  }
-  try {
-    const cleaned = source.replace(/import\s+type\s+/g, "import ").replace(/export\s+type\s+/g, "export ");
-    const [imports] = parse(cleaned);
-    return imports.map((imp) => imp.n).filter((n) => n !== void 0 && n !== "");
-  } catch {
-    const specifiers = [];
-    const importRegex = /(?:import|from)\s+["']([^"']+)["']/g;
-    let match;
-    while ((match = importRegex.exec(source)) !== null) {
-      specifiers.push(match[1]);
-    }
-    return specifiers;
-  }
-}
-async function buildImportGraph(projectRoot) {
-  await init;
-  const resolve5 = createResolver(projectRoot);
-  const allFiles = [];
-  for (const dir of SOURCE_DIRS) {
-    const fullDir = join2(projectRoot, dir);
-    allFiles.push(...collectFiles(fullDir));
-  }
-  const fileSet = new Set(allFiles);
-  const forward = /* @__PURE__ */ new Map();
-  const reverse = /* @__PURE__ */ new Map();
-  for (const filePath of fileSet) {
-    const relPath = relative(projectRoot, filePath);
-    const specifiers = parseImports(filePath);
-    const deps = /* @__PURE__ */ new Set();
-    for (const spec of specifiers) {
-      const resolved = resolve5(spec, filePath);
-      if (!resolved) continue;
-      const relResolved = relative(projectRoot, resolved);
-      deps.add(relResolved);
-      if (!reverse.has(relResolved)) {
-        reverse.set(relResolved, /* @__PURE__ */ new Set());
-      }
-      reverse.get(relResolved).add(relPath);
-    }
-    forward.set(relPath, deps);
-  }
-  logger.dim(`Import graph: ${fileSet.size} files, ${countEdges(forward)} edges`);
-  return { forward, reverse };
-}
-function countEdges(forward) {
-  let count = 0;
-  for (const deps of forward.values()) {
-    count += deps.size;
-  }
-  return count;
-}
-
-// src/utils/nextjs.ts
-function pagePathToRoute(pagePath) {
-  let p = pagePath.replace(/^src\//, "");
-  const match = p.match(/^app\/(.*)\/page\.[tj]sx?$/);
-  if (!match) {
-    if (/^app\/page\.[tj]sx?$/.test(p)) return "/";
-    return null;
-  }
-  let route = match[1];
-  if (/\[.*\]/.test(route)) {
-    logger.warn(`Skipping dynamic route: /${route} (dynamic segments not supported)`);
-    return null;
-  }
-  route = route.split("/").filter((seg) => !seg.startsWith("(")).join("/");
-  return `/${route}` || "/";
-}
-function isPageFile(filePath) {
-  const p = filePath.replace(/^src\//, "");
-  return /^app\/(.+\/)?page\.[tj]sx?$/.test(p);
-}
-function isLayoutFile(filePath) {
-  const p = filePath.replace(/^src\//, "");
-  return /^app\/(.+\/)?layout\.[tj]sx?$/.test(p);
-}
-function getLayoutDir(filePath) {
-  const p = filePath.replace(/^src\//, "");
-  const match = p.match(/^(app\/.*\/)layout\.[tj]sx?$/);
-  if (!match) return "app/";
-  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 DEFAULT_MAX_DEPTH = 10;
-function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0, maxDepth = DEFAULT_MAX_DEPTH) {
-  const routeMap = /* @__PURE__ */ new Map();
-  for (const file of changedFiles) {
-    const visited = /* @__PURE__ */ new Set();
-    const queue = [
-      { path: file, depth: 0, chain: [file] }
-    ];
-    visited.add(file);
-    while (queue.length > 0) {
-      const { path, depth, chain } = queue.shift();
-      if (isPageFile(path)) {
-        const route = pagePathToRoute(path);
-        if (route !== null && !routeMap.has(route)) {
-          routeMap.set(route, {
-            pagePath: path,
-            route,
-            reason: depth === 0 ? "direct" : "transitive",
-            depth,
-            triggerChain: chain
-          });
-        }
-      }
-      if (depth >= maxDepth) 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, chain: [...chain, importer] });
-      }
-    }
-  }
-  for (const file of changedFiles) {
-    if (!isLayoutFile(file)) continue;
-    const layoutDir = getLayoutDir(file);
-    for (const knownFile of graph.forward.keys()) {
-      if (knownFile.startsWith(layoutDir) && isPageFile(knownFile)) {
-        const route = pagePathToRoute(knownFile);
-        if (route !== null && !routeMap.has(route)) {
-          routeMap.set(route, {
-            pagePath: knownFile,
-            route,
-            reason: "transitive",
-            depth: 1,
-            triggerChain: [file, knownFile]
-          });
-        }
-      }
-    }
-  }
-  const routes = Array.from(routeMap.values()).sort(
-    (a, b) => a.depth - b.depth
-  );
-  if (maxRoutes > 0 && routes.length > maxRoutes) {
-    const skipped = routes.length - maxRoutes;
-    logger.warn(
-      `Limiting to ${maxRoutes} route(s), skipping ${skipped} deeper route(s). Use --max-routes 0 for unlimited.`
-    );
-    const limited = routes.slice(0, maxRoutes);
-    logger.dim(`Found ${limited.length} affected route(s) (of ${routes.length} total)`);
-    return limited;
-  }
-  logger.dim(`Found ${routes.length} affected route(s)`);
-  return routes;
-}
-function findRoutesForFile(file, graph, maxDepth = DEFAULT_MAX_DEPTH) {
-  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 >= maxDepth) 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 { exec as execCb, execSync as execSync2 } from "child_process";
-import { promisify } from "util";
-import { rm, mkdtemp } from "fs/promises";
-import { join as join4 } from "path";
-import { tmpdir } from "os";
-
-// src/utils/pm.ts
-import { existsSync as existsSync4 } from "fs";
-import { join as join3 } from "path";
-function detectPackageManager(dir) {
-  if (existsSync4(join3(dir, "bun.lockb")) || existsSync4(join3(dir, "bun.lock")))
-    return "bun";
-  if (existsSync4(join3(dir, "pnpm-lock.yaml"))) return "pnpm";
-  if (existsSync4(join3(dir, "yarn.lock"))) return "yarn";
-  return "npm";
-}
-function pmExec(pm) {
-  switch (pm) {
-    case "bun":
-      return "bunx";
-    case "pnpm":
-      return "pnpm exec";
-    case "yarn":
-      return "yarn";
-    default:
-      return "npx";
-  }
-}
-
-// src/stages/worktree.ts
-var exec = promisify(execCb);
-async function createWorktree(base, cwd) {
-  const worktreeDir = await mkdtemp(join4(tmpdir(), "afterbefore-wt-"));
-  logger.dim(`Creating worktree for ${base} at ${worktreeDir}`);
-  try {
-    await exec(`git worktree add "${worktreeDir}" "${base}"`, { cwd });
-  } catch (err) {
-    throw new AfterbeforeError(
-      `Failed to create worktree for ref "${base}".`,
-      `Make sure the branch/ref "${base}" exists. Run "git branch -a" to see available refs.`
-    );
-  }
-  const pm = detectPackageManager(cwd);
-  logger.dim(`Installing dependencies with ${pm}`);
-  await exec(`${pm} install`, { cwd: worktreeDir });
-  const cleanup = async () => {
-    logger.dim(`Cleaning up worktree at ${worktreeDir}`);
-    try {
-      execSync2(`git worktree remove --force "${worktreeDir}"`, {
-        cwd,
-        stdio: ["pipe", "pipe", "pipe"]
-      });
-    } catch {
-      try {
-        await rm(worktreeDir, { recursive: true, force: true });
-        execSync2("git worktree prune", {
-          cwd,
-          stdio: ["pipe", "pipe", "pipe"]
-        });
-      } catch {
-        logger.warn(`Failed to clean up worktree at ${worktreeDir}`);
-      }
-    }
-  };
-  cleanupRegistry.register(cleanup);
-  return { path: worktreeDir, ref: base, cleanup };
-}
-
-// src/stages/server.ts
-import { spawn } from "child_process";
-import { existsSync as existsSync5 } from "fs";
-import { join as join5 } from "path";
-function waitForServer(url, timeoutMs) {
-  const start = Date.now();
-  return new Promise((resolve5, reject) => {
-    const poll = async () => {
-      if (Date.now() - start > timeoutMs) {
-        reject(
-          new AfterbeforeError(
-            `Server at ${url} did not respond within ${timeoutMs / 1e3}s.`,
-            `Try running "next dev" manually to check for errors. Also check if port ${url.split(":").pop()} is already in use.`
-          )
-        );
-        return;
-      }
-      try {
-        await fetch(url);
-        resolve5();
-      } catch {
-        setTimeout(poll, 150);
-      }
-    };
-    poll();
-  });
-}
-async function startServer(projectDir, port) {
-  const url = `http://localhost:${port}`;
-  const pm = detectPackageManager(projectDir);
-  const exec2 = pmExec(pm);
-  const [cmd, ...baseArgs] = exec2.split(" ");
-  const lockFile = join5(projectDir, ".next", "dev", "lock");
-  if (existsSync5(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.`
-    );
-  }
-  logger.info(`Starting Next.js dev server on ${url} (using ${pm})`);
-  const child = spawn(cmd, [...baseArgs, "next", "dev", "-p", String(port)], {
-    cwd: projectDir,
-    stdio: ["pipe", "pipe", "pipe"],
-    detached: true
-  });
-  child.stderr?.on("data", (data) => {
-    const msg = data.toString().trim();
-    if (msg) logger.dim(`[next:${port}] ${msg}`);
-  });
-  await waitForServer(url, 6e4);
-  logger.success(`Server ready at ${url}`);
-  return { port, process: child, url };
-}
-async function stopServer(server) {
-  logger.dim(`Stopping server on port ${server.port}`);
-  const pid = server.process.pid;
-  try {
-    process.kill(-pid, "SIGTERM");
-  } catch {
-  }
-  await new Promise((resolve5) => {
-    const timeout = setTimeout(() => {
-      try {
-        process.kill(-pid, "SIGKILL");
-      } catch {
-      }
-      resolve5();
-    }, 5e3);
-    server.process.on("exit", () => {
-      clearTimeout(timeout);
-      resolve5();
-    });
-  });
-}
-
-// src/stages/capture.ts
-import { join as join6 } from "path";
-import { execSync as execSync3 } from "child_process";
-import { chromium, devices } from "playwright";
-
-// src/utils/tabs.ts
-async function detectTabs(page, maxTabs) {
-  const allTabs = await page.evaluate(() => {
-    const tablists = document.querySelectorAll('[role="tablist"]');
-    const results = [];
-    for (const tablist of tablists) {
-      if (tablist.closest('[role="tabpanel"]')) continue;
-      const tabs = tablist.querySelectorAll('[role="tab"]');
-      for (const tab of tabs) {
-        const label = (tab.textContent ?? "").trim();
-        if (!label) continue;
-        const selected = tab.getAttribute("aria-selected") === "true" || tab.getAttribute("data-state") === "active";
-        results.push({ label, selected });
-      }
-    }
-    return results;
-  });
-  return allTabs.filter((t) => !t.selected).slice(0, maxTabs);
-}
-function sanitizeTabLabel(label) {
-  return sanitizeLabel(label);
-}
-
-// src/utils/sections.ts
-async function detectSections(page, maxSections) {
-  const sections = await page.evaluate((max) => {
-    const headings = Array.from(document.querySelectorAll("h2, h3"));
-    const valid = headings.filter((h) => (h.textContent ?? "").trim().length > 0);
-    if (valid.length < 3) return [];
-    const results = [];
-    const tagged = /* @__PURE__ */ new Set();
-    let idx = 0;
-    for (const heading of valid) {
-      if (idx >= max) break;
-      const container = findSectionContainer(heading);
-      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(),
-        index: idx
-      });
-      idx++;
-    }
-    return results;
-    function findSectionContainer(heading) {
-      let el = heading;
-      const headingTag = heading.tagName.toLowerCase();
-      while (el && el !== document.body) {
-        const parentEl = el.parentElement;
-        if (!parentEl) return el;
-        const parentTag = parentEl.tagName.toLowerCase();
-        if (parentTag === "section" || parentTag === "article") return parentEl;
-        if (parentEl.getAttribute("role") === "region") return parentEl;
-        if (parentTag === "body" || parentTag === "main") return el;
-        const siblingHeadings = parentEl.querySelectorAll(`:scope > * ${headingTag}, :scope > ${headingTag}`);
-        if (siblingHeadings.length > 1) return el;
-        el = parentEl;
-      }
-      return el;
-    }
-  }, maxSections);
-  return sections;
-}
-async function tagSectionOnPage(page, headingText, index) {
-  return page.evaluate(
-    ({ text, idx }) => {
-      const headings = Array.from(document.querySelectorAll("h2, h3"));
-      const match = headings.find(
-        (h) => (h.textContent ?? "").trim() === text
-      );
-      if (!match) return false;
-      let el = match;
-      const headingTag = match.tagName.toLowerCase();
-      while (el && el !== document.body) {
-        const parentEl = el.parentElement;
-        if (!parentEl) break;
-        const parentTag = parentEl.tagName.toLowerCase();
-        if (parentTag === "section" || parentTag === "article") {
-          el = parentEl;
-          break;
-        }
-        if (parentEl.getAttribute("role") === "region") {
-          el = parentEl;
-          break;
-        }
-        if (parentTag === "body" || parentTag === "main") break;
-        const siblingHeadings = parentEl.querySelectorAll(
-          `:scope > * ${headingTag}, :scope > ${headingTag}`
-        );
-        if (siblingHeadings.length > 1) break;
-        el = parentEl;
-      }
-      if (el) {
-        el.setAttribute("data-ab-section", String(idx));
-        match.setAttribute("data-ab-heading", String(idx));
-        return true;
-      }
-      return false;
-    },
-    { 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(() => {
-    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) {
-  return sanitizeLabel(label);
-}
-
-// src/stages/capture.ts
-async function launchBrowser() {
-  try {
-    return await chromium.launch();
-  } catch {
-    logger.dim("Chromium not found, installing...");
-    try {
-      execSync3("npx playwright install chromium", {
-        stdio: ["pipe", "pipe", "pipe"]
-      });
-      return await chromium.launch();
-    } catch {
-      throw new AfterbeforeError(
-        "Could not install or launch Playwright Chromium.",
-        'Run "npx playwright install chromium" manually, then try again.'
-      );
-    }
-  }
-}
-var MAX_COMPONENT_INSTANCES_PER_SOURCE = 5;
-function sanitizeComponentLabel(label) {
-  const noExt = label.replace(/\.[a-z0-9]+$/i, "");
-  return sanitizeLabel(noExt, 60);
-}
-function groupBySource(instances) {
-  const map = /* @__PURE__ */ new Map();
-  for (const instance of instances) {
-    const list = map.get(instance.source) ?? [];
-    list.push(instance);
-    map.set(instance.source, list);
-  }
-  for (const [source, list] of map.entries()) {
-    list.sort((a, b) => a.index - b.index);
-    map.set(source, list);
-  }
-  return map;
-}
-async function captureByAttr(page, attrName, attrValue, outPath) {
-  try {
-    const locator = page.locator(`[${attrName}="${attrValue}"]`).first();
-    if (await locator.count() === 0) return false;
-    await locator.screenshot({ path: outPath });
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function tagChangedComponentInstances(page, changedComponents, maxPerSource = MAX_COMPONENT_INSTANCES_PER_SOURCE) {
-  const normalized = changedComponents.map(normalizePath);
-  return page.evaluate(
-    ({ changed, maxPerSource: maxPerSource2 }) => {
-      const normalize = (p) => p.replace(/\\/g, "/").replace(/^\.\//, "");
-      const targets = changed.map((original) => {
-        const norm = normalize(original);
-        const noSrc = norm.replace(/^src\//, "");
-        return {
-          original: norm,
-          variants: Array.from(/* @__PURE__ */ new Set([norm, noSrc, `src/${noSrc}`]))
-        };
-      });
-      for (const el of document.querySelectorAll("[data-ab-comp-key]")) {
-        el.removeAttribute("data-ab-comp-key");
-      }
-      for (const el of document.querySelectorAll("[data-ab-parent-key]")) {
-        el.removeAttribute("data-ab-parent-key");
-      }
-      const getFiber = (el) => {
-        const anyEl = el;
-        for (const key in anyEl) {
-          if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
-            return anyEl[key];
-          }
-        }
-        return null;
-      };
-      const matchSource = (rawSource) => {
-        const normalizedSource = normalize(rawSource);
-        for (const target of targets) {
-          for (const variant of target.variants) {
-            if (normalizedSource === variant || normalizedSource.endsWith(`/${variant}`)) {
-              return target.original;
-            }
-          }
-        }
-        return null;
-      };
-      const getComponentMatch = (el) => {
-        const fiber = getFiber(el);
-        if (!fiber) return null;
-        let current = fiber;
-        while (current) {
-          const sourceFile = current?._debugSource?.fileName ?? current?.elementType?._debugSource?.fileName ?? current?.type?._debugSource?.fileName;
-          if (typeof sourceFile === "string") {
-            const source = matchSource(sourceFile);
-            if (source) {
-              const type = current?.elementType ?? current?.type;
-              const name = typeof type === "function" && (type.displayName || type.name) || (typeof type === "string" ? type : void 0) || source.split("/").pop() || source;
-              return { source, name };
-            }
-          }
-          current = current.return;
-        }
-        return null;
-      };
-      const pickParentContainer = (el) => {
-        const ownRect = el.getBoundingClientRect();
-        let parent = el.parentElement;
-        while (parent && parent !== document.body) {
-          const rect = parent.getBoundingClientRect();
-          if (rect.width >= ownRect.width * 1.15 || rect.height >= ownRect.height * 1.15) {
-            return parent;
-          }
-          parent = parent.parentElement;
-        }
-        return el.parentElement ?? el;
-      };
-      const bySource = /* @__PURE__ */ new Map();
-      const elements = Array.from(document.querySelectorAll("body *"));
-      for (const el of elements) {
-        const rect = el.getBoundingClientRect();
-        if (rect.width < 4 || rect.height < 4) continue;
-        if (rect.bottom < 0 || rect.right < 0) continue;
-        const match = getComponentMatch(el);
-        if (!match) continue;
-        const parent = el.parentElement;
-        if (parent) {
-          const parentMatch = getComponentMatch(parent);
-          if (parentMatch && parentMatch.source === match.source) {
-            continue;
-          }
-        }
-        const list = bySource.get(match.source) ?? [];
-        list.push({
-          el,
-          parent: pickParentContainer(el),
-          name: match.name,
-          top: rect.top + window.scrollY,
-          left: rect.left + window.scrollX
-        });
-        bySource.set(match.source, list);
-      }
-      for (const target of targets) {
-        if (bySource.has(target.original) && bySource.get(target.original).length > 0) continue;
-        const fileName = target.original.split("/").pop() ?? "";
-        const componentName = fileName.replace(/\.[a-z0-9]+$/i, "");
-        if (!componentName || componentName.length < 2) continue;
-        const pattern = new RegExp("\\b" + componentName + "\\b", "i");
-        const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4"));
-        for (const heading of headings) {
-          const text = (heading.textContent ?? "").trim();
-          if (!pattern.test(text)) continue;
-          let container = heading;
-          const headingTag = heading.tagName.toLowerCase();
-          let walkParent = heading.parentElement;
-          while (walkParent && walkParent !== document.body) {
-            const parentTag = walkParent.tagName.toLowerCase();
-            if (parentTag === "section" || parentTag === "article") {
-              container = walkParent;
-              break;
-            }
-            if (walkParent.getAttribute("role") === "region") {
-              container = walkParent;
-              break;
-            }
-            if (parentTag === "body" || parentTag === "main") break;
-            const siblingHeadings = walkParent.querySelectorAll(`:scope > * ${headingTag}, :scope > ${headingTag}`);
-            if (siblingHeadings.length > 1) break;
-            container = walkParent;
-            walkParent = walkParent.parentElement;
-          }
-          const rect = container.getBoundingClientRect();
-          if (rect.width < 4 || rect.height < 4) continue;
-          const list = bySource.get(target.original) ?? [];
-          list.push({
-            el: container,
-            parent: pickParentContainer(container),
-            name: componentName,
-            top: rect.top + window.scrollY,
-            left: rect.left + window.scrollX
-          });
-          bySource.set(target.original, list);
-          break;
-        }
-      }
-      const tagged = [];
-      for (let sourceIndex = 0; sourceIndex < targets.length; sourceIndex++) {
-        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 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 = deduped[i];
-          const componentKey = `ab-comp-${sourceIndex}-${i}`;
-          const parentKey = `ab-parent-${sourceIndex}-${i}`;
-          instance.el.setAttribute("data-ab-comp-key", componentKey);
-          instance.parent.setAttribute("data-ab-parent-key", parentKey);
-          tagged.push({
-            source,
-            name: instance.name,
-            index: i,
-            componentKey,
-            parentKey
-          });
-        }
-      }
-      return tagged;
-    },
-    { changed: normalized, maxPerSource }
-  );
-}
-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),
-    tagChangedComponentInstances(beforePage, deduped)
-  ]);
-  logger.dim(`  Component detection on ${captureLabel}: ${deduped.length} source(s), ${afterInstances.length} after / ${beforeInstances.length} before instance(s)`);
-  const afterBySource = groupBySource(afterInstances);
-  const beforeBySource = groupBySource(beforeInstances);
-  for (const source of deduped) {
-    const afterList = afterBySource.get(source) ?? [];
-    const beforeList = beforeBySource.get(source) ?? [];
-    const pairCount = Math.min(afterList.length, beforeList.length);
-    if (pairCount === 0) {
-      if (afterList.length > 0 || beforeList.length > 0) {
-        logger.dim(`  ${source}: ${afterList.length} after / ${beforeList.length} before (skipping unpaired)`);
-      }
-      continue;
-    }
-    for (let pairIndex = 0; pairIndex < pairCount; pairIndex++) {
-      const afterInstance = afterList[pairIndex];
-      const beforeInstance = beforeList[pairIndex];
-      const sourceSlug = sanitizeComponentLabel(source) || "component";
-      const itemSlug = `${sourceSlug}-${pairIndex + 1}`;
-      const componentName = afterInstance.name || beforeInstance.name || source.split("/").pop() || source;
-      const baseLabel = `${captureLabel} [${componentName} #${pairIndex + 1}]`;
-      const parentPrefix = `${capturePrefix}~cmp.${itemSlug}~parent`;
-      const parentBeforePath = join6(outputDir, `${parentPrefix}-before.png`);
-      const parentAfterPath = join6(outputDir, `${parentPrefix}-after.png`);
-      const [parentBeforeOk, parentAfterOk] = await Promise.all([
-        captureByAttr(
-          beforePage,
-          "data-ab-parent-key",
-          beforeInstance.parentKey,
-          parentBeforePath
-        ),
-        captureByAttr(
-          afterPage,
-          "data-ab-parent-key",
-          afterInstance.parentKey,
-          parentAfterPath
-        )
-      ]);
-      if (parentBeforeOk && parentAfterOk) {
-        results.push({
-          route: `${baseLabel} [parent]`,
-          prefix: parentPrefix,
-          beforePath: parentBeforePath,
-          afterPath: parentAfterPath,
-          level: "parent",
-          parentPrefix: capturePrefix,
-          componentSource: source,
-          componentName
-        });
-      }
-      const componentPrefix = `${capturePrefix}~cmp.${itemSlug}~component`;
-      const componentBeforePath = join6(outputDir, `${componentPrefix}-before.png`);
-      const componentAfterPath = join6(outputDir, `${componentPrefix}-after.png`);
-      const [componentBeforeOk, componentAfterOk] = await Promise.all([
-        captureByAttr(
-          beforePage,
-          "data-ab-comp-key",
-          beforeInstance.componentKey,
-          componentBeforePath
-        ),
-        captureByAttr(
-          afterPage,
-          "data-ab-comp-key",
-          afterInstance.componentKey,
-          componentAfterPath
-        )
-      ]);
-      if (componentBeforeOk && componentAfterOk) {
-        results.push({
-          route: `${baseLabel} [component]`,
-          prefix: componentPrefix,
-          beforePath: componentBeforePath,
-          afterPath: componentAfterPath,
-          level: "component",
-          parentPrefix: capturePrefix,
-          componentSource: source,
-          componentName
-        });
-      }
-    }
-  }
-}
-async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLabel, outputDir, options, settle, results) {
-  const sections = await detectSections(afterPage, options.maxSectionsPerRoute);
-  if (sections.length === 0) return;
-  const usedSlugs = /* @__PURE__ */ new Set();
-  for (const section of sections) {
-    let slug = sanitizeSectionLabel(section.label);
-    if (!slug) continue;
-    if (usedSlugs.has(slug)) {
-      let suffix = 2;
-      while (usedSlugs.has(`${slug}-${suffix}`)) suffix++;
-      slug = `${slug}-${suffix}`;
-    }
-    usedSlugs.add(slug);
-    const sectionPrefix = `${parentPrefix}~s.${slug}`;
-    const sectionLabel = `${parentLabel} [${section.label}]`;
-    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;
-      }
-      results.push({
-        route: sectionLabel,
-        prefix: sectionPrefix,
-        beforePath: sectionBeforePath,
-        afterPath: sectionAfterPath,
-        level: "section"
-      });
-    } catch {
-    }
-  }
-  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,
-        level: "tab"
-      });
-      if ((task.changedComponents?.length ?? 0) > 0) {
-        await captureComponentInstances(
-          afterPage,
-          beforePage,
-          task.changedComponents,
-          tabPrefix,
-          tabLabel,
-          outputDir,
-          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 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;
-  const results = [];
-  try {
-    const device = options.device ? devices[options.device] : void 0;
-    const contextOpts = device ? { ...device } : {
-      viewport: { width: options.width, height: options.height },
-      deviceScaleFactor: 2
-    };
-    const [beforeCtx, afterCtx] = await Promise.all([
-      browser.newContext(contextOpts),
-      browser.newContext(contextOpts)
-    ]);
-    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 {
-          logger.dim(`Capture failed: ${result.reason}`);
-        }
-      }
-    }
-    await Promise.all([beforeCtx.close(), afterCtx.close()]);
-  } finally {
-    if (ownsBrowser) {
-      await browser.close();
-    }
-  }
-  return results;
-}
-
-// src/stages/compare.ts
-import { join as join7, dirname as dirname2 } from "path";
-import { unlinkSync } from "fs";
-import { ODiffServer } from "odiff-bin";
-import sharp from "sharp";
-async function trimImage(path) {
-  const { data, info } = await sharp(path).trim({ threshold: 50 }).toBuffer({ resolveWithObject: true });
-  return { data, width: info.width, height: info.height };
-}
-function roundCornersSvg(w, h, r) {
-  return Buffer.from(
-    `<svg width="${w}" height="${h}"><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" ry="${r}" fill="white"/></svg>`
-  );
-}
-async function roundImage(buf, width, height, radius) {
-  const mask = roundCornersSvg(width, height, radius);
-  return sharp(buf).resize(width, height, { fit: "fill" }).composite([{ input: mask, blend: "dest-in" }]).png().toBuffer();
-}
-async function generateComposite(beforePath, afterPath, outputPath, bgColor, metadata) {
-  const [beforeTrimmed, afterTrimmed] = await Promise.all([
-    trimImage(beforePath),
-    trimImage(afterPath)
-  ]);
-  const CANVAS_W = 1200;
-  const PADDING = 32;
-  const GAP = 24;
-  const HEADER_H = 48;
-  const BADGE_H = 40;
-  const FOOTER_H = 24;
-  const CORNER_R = 12;
-  const contentW = CANVAS_W - PADDING * 2;
-  const colW = Math.floor((contentW - GAP) / 2);
-  const imgW = Math.max(beforeTrimmed.width, afterTrimmed.width);
-  const imgH = Math.max(beforeTrimmed.height, afterTrimmed.height);
-  const imgAspect = imgH / (imgW || 1);
-  const scaledH = Math.min(Math.round(colW * imgAspect), 520);
-  const CANVAS_H = PADDING + HEADER_H + scaledH + BADGE_H + FOOTER_H + PADDING;
-  const [beforeBuf, afterBuf] = await Promise.all(
-    [beforeTrimmed, afterTrimmed].map(async (trimmed) => {
-      const resized = await sharp(trimmed.data).resize(colW, scaledH, { fit: "contain", background: bgColor }).toBuffer({ resolveWithObject: true });
-      return {
-        data: await roundImage(resized.data, resized.info.width, resized.info.height, CORNER_R),
-        width: resized.info.width,
-        height: resized.info.height
-      };
-    })
-  );
-  const imgTop = PADDING + HEADER_H;
-  const beforeLeft = PADDING;
-  const afterLeft = PADDING + colW + GAP;
-  const badgeY = imgTop + scaledH + 8;
-  const beforeBadgeCX = PADDING + Math.floor(colW / 2);
-  const afterBadgeCX = PADDING + colW + GAP + Math.floor(colW / 2);
-  const diffPct = metadata.diffPercentage.toFixed(1);
-  const diffBadgeW = Math.max(80, diffPct.length * 12 + 40);
-  const overlaySvg = Buffer.from(
-    `<svg width="${CANVAS_W}" height="${CANVAS_H}" xmlns="http://www.w3.org/2000/svg">
-      <!-- Header: route name + diff badge -->
-      <text x="${PADDING}" y="${PADDING + 28}"
-            font-family="'SF Mono', 'Fira Code', 'Consolas', monospace" font-size="18" font-weight="600"
-            fill="#e0e0e0">${escapeXml(metadata.route)}</text>
-
-      <rect x="${CANVAS_W - PADDING - diffBadgeW}" y="${PADDING + 6}" width="${diffBadgeW}" height="28" rx="14"
-            fill="#f59e0b" fill-opacity="0.2"/>
-      <text x="${CANVAS_W - PADDING - diffBadgeW / 2}" y="${PADDING + 25}"
-            font-family="system-ui, sans-serif" font-size="13" font-weight="700" text-anchor="middle"
-            fill="#f59e0b">${diffPct}% changed</text>
-
-      <!-- "Before" pill badge -->
-      <rect x="${beforeBadgeCX - 44}" y="${badgeY}" width="88" height="28" rx="14"
-            fill="#555" fill-opacity="0.5"/>
-      <text x="${beforeBadgeCX}" y="${badgeY + 19}"
-            font-family="system-ui, sans-serif" font-size="13" font-weight="600" text-anchor="middle"
-            fill="#ccc">Before</text>
-
-      <!-- "After" pill badge -->
-      <rect x="${afterBadgeCX - 40}" y="${badgeY}" width="80" height="28" rx="14"
-            fill="#22c55e" fill-opacity="0.25"/>
-      <text x="${afterBadgeCX}" y="${badgeY + 19}"
-            font-family="system-ui, sans-serif" font-size="13" font-weight="600" text-anchor="middle"
-            fill="#22c55e">After</text>
-
-      <!-- Branding -->
-      <text x="${CANVAS_W - PADDING}" y="${CANVAS_H - 10}"
-            font-family="system-ui, sans-serif" font-size="10" text-anchor="end"
-            fill="#444">afterbefore</text>
-    </svg>`
-  );
-  await sharp({
-    create: {
-      width: CANVAS_W,
-      height: CANVAS_H,
-      channels: 4,
-      background: "#1a1a2e"
-    }
-  }).composite([
-    { input: beforeBuf.data, left: beforeLeft, top: imgTop },
-    { input: afterBuf.data, left: afterLeft, top: imgTop },
-    { input: overlaySvg, left: 0, top: 0 }
-  ]).png().toFile(outputPath);
-}
-function escapeXml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
-}
-async function compareOne(capture, outputDir, threshold, server, options) {
-  const diffPath = join7(outputDir, `${capture.prefix}-diff.png`);
-  const dir = dirname2(capture.beforePath);
-  const comparePath = join7(dir, `${capture.prefix}-compare.png`);
-  const result = await server.compare(
-    capture.beforePath,
-    capture.afterPath,
-    diffPath,
-    { threshold: 0.1, antialiasing: true }
-  );
-  try {
-    unlinkSync(diffPath);
-  } catch {
-  }
-  let diffPixels = 0;
-  let totalPixels = 0;
-  let diffPercentage = 0;
-  let changed = false;
-  if (result.match) {
-  } else if (result.reason === "pixel-diff") {
-    diffPixels = result.diffCount;
-    diffPercentage = result.diffPercentage;
-    changed = diffPercentage > threshold;
-  } else {
-    diffPercentage = 100;
-    changed = true;
-  }
-  if (changed) {
-    await generateComposite(
-      capture.beforePath,
-      capture.afterPath,
-      comparePath,
-      options.bgColor,
-      { route: capture.route, diffPercentage }
-    );
-  } else {
-    try {
-      unlinkSync(capture.beforePath);
-    } catch {
-    }
-    try {
-      unlinkSync(capture.afterPath);
-    } catch {
-    }
-  }
-  return {
-    route: capture.route,
-    prefix: capture.prefix,
-    beforePath: capture.beforePath,
-    afterPath: capture.afterPath,
-    comparePath: changed ? comparePath : "",
-    diffPixels,
-    totalPixels,
-    diffPercentage,
-    changed
-  };
-}
-async function compareScreenshots(captures, outputDir, threshold = 0.1, options) {
-  const server = new ODiffServer();
-  try {
-    const results = [];
-    for (const capture of captures) {
-      results.push(await compareOne(capture, outputDir, threshold, server, options));
-    }
-    return results;
-  } finally {
-    server.stop();
-  }
-}
-
-// src/stages/report.ts
-import { execSync as execSync4 } from "child_process";
-
-// src/templates/summary.md.ts
-function generateSummaryMd(results, gitDiff, options) {
-  const includeFilePaths = options?.includeFilePaths ?? true;
-  const changed = results.filter((r) => r.changed);
-  const lines = [];
-  lines.push("<!-- afterbefore -->");
-  lines.push("");
-  lines.push("## afterbefore Report");
-  lines.push("");
-  if (changed.length === 0) {
-    lines.push("No visual changes detected.");
-    lines.push("");
-    lines.push(`${results.length} route(s) captured, all unchanged.`);
-    return lines.join("\n");
-  }
-  lines.push(
-    `${results.length} route(s) captured, **${changed.length}** with visual changes.`
-  );
-  lines.push("");
-  lines.push("| Route | Diff % | Status |");
-  lines.push("|-------|--------|--------|");
-  for (const r of results) {
-    const status = r.changed ? "Changed" : "Unchanged";
-    const pct = r.changed ? `${r.diffPercentage.toFixed(2)}%` : "0%";
-    lines.push(`| \`${r.route}\` | ${pct} | ${status} |`);
-  }
-  if (gitDiff) {
-    lines.push("");
-    lines.push("### Changed files");
-    lines.push("```diff");
-    lines.push(gitDiff);
-    lines.push("```");
-  }
-  if (includeFilePaths) {
-    lines.push("");
-    lines.push("### Screenshots");
-    lines.push("| Route | Before | After | Compare |");
-    lines.push("|-------|--------|-------|---------|");
-    for (const r of changed) {
-      lines.push(`| \`${r.route}\` | \`${r.beforePath}\` | \`${r.afterPath}\` | \`${r.comparePath}\` |`);
-    }
-    lines.push("");
-    lines.push("Review the before/after screenshots above to verify the visual changes match the code diff.");
-  }
-  return lines.join("\n");
-}
-
-// src/stages/report.ts
-var COMMENT_MARKER = "<!-- afterbefore -->";
-function isGhInstalled() {
-  try {
-    execSync4("gh --version", { stdio: ["pipe", "pipe", "pipe"] });
-    return true;
-  } catch {
-    return false;
-  }
-}
-function findPrNumber() {
-  if (!isGhInstalled()) {
-    logger.warn(
-      "GitHub CLI (gh) is not installed. Install it from https://cli.github.com"
-    );
-    return null;
-  }
-  try {
-    const output = execSync4("gh pr view --json number -q .number", {
-      encoding: "utf-8",
-      stdio: ["pipe", "pipe", "pipe"]
-    }).trim();
-    return output || null;
-  } catch {
-    return null;
-  }
-}
-function findExistingCommentId(prNumber) {
-  try {
-    const output = execSync4(
-      `gh api repos/{owner}/{repo}/issues/${prNumber}/comments --jq '.[] | select(.body | contains("${COMMENT_MARKER}")) | .id'`,
-      { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }
-    ).trim();
-    const ids = output.split("\n").filter(Boolean);
-    return ids[0] || null;
-  } catch {
-    return null;
-  }
-}
-function postOrUpdateComment(prNumber, body) {
-  const existingId = findExistingCommentId(prNumber);
-  if (existingId) {
-    logger.info(`Updating existing PR comment (id: ${existingId})`);
-    execSync4(
-      `gh api repos/{owner}/{repo}/issues/comments/${existingId} -X PATCH -f body=@-`,
-      {
-        input: body,
-        encoding: "utf-8",
-        stdio: ["pipe", "pipe", "pipe"]
-      }
-    );
-  } else {
-    logger.info(`Creating new PR comment`);
-    execSync4(
-      `gh api repos/{owner}/{repo}/issues/${prNumber}/comments -f body=@-`,
-      {
-        input: body,
-        encoding: "utf-8",
-        stdio: ["pipe", "pipe", "pipe"]
-      }
-    );
-  }
-}
-async function generateReport(results, outputDir, options) {
-  if (options.post) {
-    const prNumber = findPrNumber();
-    if (!prNumber) {
-      logger.warn(
-        "No open PR found for this branch. Push your branch and open a PR first, then run `npx afterbefore --post` again."
-      );
-      return;
-    }
-    const prSummary = generateSummaryMd(results, void 0, { includeFilePaths: false });
-    postOrUpdateComment(prNumber, prSummary);
-    logger.success(`Posted results to PR #${prNumber}`);
-  }
-}
-
-// src/templates/report.html.ts
-function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function generateReportHtml(results, sessionName) {
-  const changed = results.filter((r) => r.changed);
-  const unchanged = results.filter((r) => !r.changed);
-  const totalChecked = results.length;
-  const changedCount = changed.length;
-  const changedCards = changed.map((r) => {
-    const diffPct = r.diffPercentage.toFixed(2);
-    const beforeFile = r.beforePath.split("/").pop() || "";
-    const afterFile = r.afterPath.split("/").pop() || "";
-    const compareFile = r.comparePath ? r.comparePath.split("/").pop() || "" : "";
-    return `
-    <div class="card">
-      <div class="card-header">
-        <span class="route">${escapeHtml(r.route)}</span>
-        <span class="badge">${diffPct}% changed</span>
-      </div>
-      ${compareFile ? `
-      <div class="compare-wrap">
-        <img src="${escapeHtml(compareFile)}" alt="Side-by-side comparison of ${escapeHtml(r.route)}" class="compare-img" loading="lazy">
-      </div>
-      ` : ""}
-      <div class="slider-section">
-        <p class="slider-label">Interactive comparison \u2014 drag the divider</p>
-        <div class="slider" style="--pos: 50%">
-          <img src="${escapeHtml(beforeFile)}" alt="Before" class="slider-img">
-          <img src="${escapeHtml(afterFile)}" alt="After" class="slider-img slider-after" style="clip-path: inset(0 0 0 var(--pos))">
-          <input type="range" min="0" max="100" value="50" class="slider-range"
-                 oninput="this.parentElement.style.setProperty('--pos', this.value + '%')">
-          <div class="slider-labels">
-            <span>Before</span>
-            <span>After</span>
-          </div>
-        </div>
-      </div>
-    </div>`;
-  }).join("\n");
-  const unchangedSection = unchanged.length > 0 ? `
-    <details class="unchanged-section">
-      <summary>${unchanged.length} route${unchanged.length === 1 ? "" : "s"} unchanged</summary>
-      <ul>
-        ${unchanged.map((r) => `<li><code>${escapeHtml(r.route)}</code></li>`).join("\n        ")}
-      </ul>
-    </details>` : "";
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>afterbefore report \u2014 ${escapeHtml(sessionName)}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0f0f17;
-      color: #e0e0e0;
-      padding: 2rem;
-      max-width: 1400px;
-      margin: 0 auto;
-    }
-
-    h1 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 0.25rem;
-    }
-
-    .subtitle {
-      color: #888;
-      font-size: 0.9rem;
-      margin-bottom: 2rem;
-    }
-
-    .summary {
-      display: flex;
-      gap: 1.5rem;
-      margin-bottom: 2rem;
-      flex-wrap: wrap;
-    }
-
-    .stat {
-      background: #1a1a2e;
-      border-radius: 8px;
-      padding: 1rem 1.5rem;
-      min-width: 140px;
-    }
-
-    .stat-value {
-      font-size: 1.8rem;
-      font-weight: 700;
-    }
-
-    .stat-value.changed { color: #f59e0b; }
-    .stat-value.total { color: #3b82f6; }
-    .stat-value.unchanged { color: #22c55e; }
-
-    .stat-label {
-      color: #888;
-      font-size: 0.8rem;
-      margin-top: 0.25rem;
-    }
-
-    .card {
-      background: #1a1a2e;
-      border-radius: 12px;
-      margin-bottom: 2rem;
-      overflow: hidden;
-    }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem 1.5rem;
-      border-bottom: 1px solid #2a2a3e;
-    }
-
-    .route {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 1.1rem;
-      font-weight: 600;
-    }
-
-    .badge {
-      background: #f59e0b20;
-      color: #f59e0b;
-      padding: 0.25rem 0.75rem;
-      border-radius: 999px;
-      font-size: 0.8rem;
-      font-weight: 600;
-    }
-
-    .compare-wrap {
-      padding: 1rem;
-    }
-
-    .compare-img {
-      width: 100%;
-      border-radius: 8px;
-    }
-
-    .slider-section {
-      padding: 1rem 1.5rem 1.5rem;
-    }
-
-    .slider-label {
-      color: #666;
-      font-size: 0.75rem;
-      margin-bottom: 0.75rem;
-    }
-
-    .slider {
-      position: relative;
-      overflow: hidden;
-      border-radius: 8px;
-      background: #111;
-    }
-
-    .slider-img {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
-
-    .slider-after {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-
-    .slider-range {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: col-resize;
-      z-index: 2;
-    }
-
-    .slider-labels {
-      display: flex;
-      justify-content: space-between;
-      padding: 0.5rem 0;
-      color: #666;
-      font-size: 0.75rem;
-    }
-
-    .unchanged-section {
-      background: #1a1a2e;
-      border-radius: 12px;
-      padding: 1rem 1.5rem;
-      margin-bottom: 2rem;
-    }
-
-    .unchanged-section summary {
-      cursor: pointer;
-      color: #888;
-      font-size: 0.9rem;
-    }
-
-    .unchanged-section ul {
-      margin-top: 0.75rem;
-      padding-left: 1.5rem;
-    }
-
-    .unchanged-section li {
-      color: #666;
-      margin-bottom: 0.25rem;
-    }
-
-    .unchanged-section code {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 0.85rem;
-    }
-
-    .summary-table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-bottom: 2rem;
-    }
-
-    .summary-table th {
-      text-align: left;
-      padding: 0.5rem 1rem;
-      border-bottom: 2px solid #2a2a3e;
-      color: #888;
-      font-size: 0.8rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .summary-table td {
-      padding: 0.5rem 1rem;
-      border-bottom: 1px solid #1a1a2e;
-      font-size: 0.9rem;
-    }
-
-    .summary-table code {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 0.85rem;
-    }
-
-    .status-changed { color: #f59e0b; }
-    .status-unchanged { color: #22c55e; }
-
-    footer {
-      text-align: center;
-      padding: 2rem 0;
-      color: #444;
-      font-size: 0.75rem;
-    }
-
-    footer a {
-      color: #555;
-      text-decoration: none;
-    }
-
-    footer a:hover {
-      color: #888;
-    }
-  </style>
-</head>
-<body>
-  <h1>afterbefore report</h1>
-  <p class="subtitle">${escapeHtml(sessionName)}</p>
-
-  <div class="summary">
-    <div class="stat">
-      <div class="stat-value total">${totalChecked}</div>
-      <div class="stat-label">Routes checked</div>
-    </div>
-    <div class="stat">
-      <div class="stat-value changed">${changedCount}</div>
-      <div class="stat-label">With visual changes</div>
-    </div>
-    <div class="stat">
-      <div class="stat-value unchanged">${unchanged.length}</div>
-      <div class="stat-label">Unchanged</div>
-    </div>
-  </div>
-
-  <table class="summary-table">
-    <thead>
-      <tr><th>Route</th><th>Diff %</th><th>Status</th></tr>
-    </thead>
-    <tbody>
-      ${results.map((r) => {
-    const status = r.changed ? "Changed" : "Unchanged";
-    const statusClass = r.changed ? "status-changed" : "status-unchanged";
-    const pct = r.changed ? `${r.diffPercentage.toFixed(2)}%` : "0%";
-    return `<tr><td><code>${escapeHtml(r.route)}</code></td><td>${pct}</td><td class="${statusClass}">${status}</td></tr>`;
-  }).join("\n      ")}
-    </tbody>
-  </table>
-
-  ${changedCards}
-  ${unchangedSection}
-
-  <footer>
-    Generated by <a href="https://github.com/kairevicius/afterbefore">afterbefore</a>
-  </footer>
-</body>
-</html>`;
-}
-
-// src/pipeline.ts
-function generateSessionName(cwd) {
-  const branch = getCurrentBranch(cwd);
-  const name = branch.replace(/^(feat|fix|perf|chore|refactor|docs|style|test|ci|build)\//, "");
-  const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-  return `${name}_${date}`;
-}
-function routeToPrefix(route) {
-  if (route === "/") return "_root";
-  return route.replace(/^\//, "").replace(/\//g, "-");
-}
-function mapRouteToChangedComponents(changedComponentFiles, graph) {
-  const routeMap = /* @__PURE__ */ new Map();
-  for (const componentPath of changedComponentFiles) {
-    const routes = findRoutesForFile(componentPath, graph);
-    for (const route of routes) {
-      const next = routeMap.get(route) ?? [];
-      next.push(componentPath);
-      routeMap.set(route, next);
-    }
-  }
-  for (const [route, files] of routeMap.entries()) {
-    routeMap.set(route, Array.from(new Set(files)).sort((a, b) => a.localeCompare(b)));
-  }
-  return routeMap;
-}
-function expandRoutes(routes, config, routeComponentMap) {
-  const tasks = [];
-  for (const r of routes) {
-    const scenarios = config?.scenarios?.[r.route] ?? [];
-    const changedComponents = routeComponentMap.get(r.route) ?? [];
-    tasks.push({
-      route: r.route,
-      label: r.route,
-      prefix: routeToPrefix(r.route),
-      skipAutoTabs: scenarios.length > 0,
-      skipAutoSections: scenarios.length > 0,
-      changedComponents
-    });
-    for (const s of scenarios) {
-      tasks.push({
-        route: r.route,
-        label: `${r.route} [${s.name}]`,
-        prefix: `${routeToPrefix(r.route)}~${s.name}`,
-        actions: s.actions,
-        selector: s.selector
-      });
-    }
-  }
-  return tasks;
-}
-function applyConfigDefaults(options, config) {
-  if (!config?.defaults) return;
-  const defaults = config.defaults;
-  const cliDefaults = {
-    base: "main",
-    output: ".afterbefore",
-    post: false,
-    threshold: 0.1,
-    maxRoutes: 6,
-    width: 1280,
-    height: 720,
-    delay: 0,
-    autoTabs: true,
-    maxTabsPerRoute: 5,
-    autoSections: true,
-    maxSectionsPerRoute: 10,
-    maxDepth: 10,
-    dryRun: false,
-    verbose: false,
-    open: false
-  };
-  const opts = options;
-  for (const [key, value] of Object.entries(defaults)) {
-    if (key === "cwd" || value === void 0) continue;
-    if (key in cliDefaults && opts[key] === cliDefaults[key]) {
-      opts[key] = value;
-    }
-  }
-}
-async function runPipeline(options) {
-  const { base, output, post, cwd } = options;
-  const sessionName = generateSessionName(cwd);
-  const outputDir = resolve4(cwd, output, sessionName);
-  const startTime = Date.now();
-  try {
-    const version = true ? "0.1.18" : "dev";
-    const mode = options.dryRun ? "Dry run" : "Comparing";
-    console.log(`
-afterbefore v${version} \xB7 ${mode} against ${base}
-`);
-    const config = await loadConfig(cwd);
-    applyConfigDefaults(options, config);
-    logger.startPipeline(options.dryRun ? 3 : 8);
-    const t1 = Date.now();
-    logger.pipeline(1, "Analyzing diff...");
-    const diffFiles = getChangedFiles(base, cwd);
-    const gitDiff = options.dryRun ? "" : getGitDiff(base, cwd);
-    logger.stageComplete("Diff", `${diffFiles.length} files changed`, Date.now() - t1);
-    if (diffFiles.length === 0) {
-      logger.completePipeline();
-      logger.success("No changed files detected. Nothing to do.");
-      return;
-    }
-    const t2 = Date.now();
-    const classified = classifyFiles(diffFiles);
-    const impactfulFiles = classified.filter(
-      (f) => f.category !== "test" && f.category !== "other"
-    );
-    if (impactfulFiles.length === 0) {
-      logger.completePipeline();
-      logger.success(
-        "No visually relevant changes detected (only test/other files changed)."
-      );
-      return;
-    }
-    logger.pipeline(2, "Building import graph...");
-    const worktreePromise = options.dryRun ? null : createWorktree(base, cwd);
-    const graph = await buildImportGraph(cwd);
-    const graphEdges = Array.from(graph.forward.values()).reduce((sum, deps) => sum + deps.size, 0);
-    logger.stageComplete("Graph", `${graph.forward.size} modules, ${graphEdges} edges`, Date.now() - t2);
-    const t3 = Date.now();
-    logger.pipeline(3, "Finding affected routes...");
-    const changedPaths = impactfulFiles.map((f) => f.path);
-    let affectedRoutes = findAffectedRoutes(changedPaths, graph, cwd, options.maxRoutes, options.maxDepth);
-    const changedComponentFiles = impactfulFiles.filter((f) => f.category === "component").map((f) => f.path);
-    const routeComponentMap = mapRouteToChangedComponents(changedComponentFiles, graph);
-    if (affectedRoutes.length === 0) {
-      const hasGlobalChanges = impactfulFiles.some((f) => isGlobalVisualFile(f.path));
-      if (hasGlobalChanges) {
-        const allRoutes = [];
-        for (const file of graph.forward.keys()) {
-          if (!isPageFile(file)) continue;
-          const route = pagePathToRoute(file);
-          if (route === null) continue;
-          allRoutes.push({
-            pagePath: file,
-            route,
-            reason: "transitive",
-            depth: 0,
-            triggerChain: [file]
-          });
-        }
-        allRoutes.sort((a, b) => a.route.localeCompare(b.route));
-        if (options.maxRoutes > 0 && allRoutes.length > options.maxRoutes) {
-          affectedRoutes = allRoutes.slice(0, options.maxRoutes);
-        } else {
-          affectedRoutes = allRoutes;
-        }
-      }
-    }
-    const directCount = affectedRoutes.filter((r) => r.reason === "direct").length;
-    const transitiveCount = affectedRoutes.length - directCount;
-    const impactDetail = directCount > 0 && transitiveCount > 0 ? `${affectedRoutes.length} routes (${directCount} direct, ${transitiveCount} transitive)` : `${affectedRoutes.length} routes`;
-    logger.stageComplete("Impact", impactDetail, Date.now() - t3);
-    if (options.verbose) {
-      console.log("");
-      for (const r of affectedRoutes) {
-        const chain = r.triggerChain.map((f) => basename(f)).join(" \u2192 ");
-        const depthLabel = r.depth === 0 ? "direct" : `depth ${r.depth}`;
-        console.log(chalk2.dim(`  ${r.route.padEnd(24)} ${depthLabel.padEnd(10)} ${chain}`));
-      }
-      console.log("");
-    }
-    if (affectedRoutes.length === 0) {
-      worktreePromise?.then((w) => w.cleanup()).catch(() => {
-      });
-      logger.completePipeline();
-      logger.success(
-        "No affected routes found. Changed files don't impact any pages."
-      );
-      return;
-    }
-    if (options.dryRun) {
-      worktreePromise?.then((w) => w.cleanup()).catch(() => {
-      });
-      logger.completePipeline();
-      console.log(`
-${affectedRoutes.length} route(s) would be captured:
-`);
-      for (const r of affectedRoutes) {
-        const chain = r.triggerChain.map((f) => basename(f)).join(" \u2192 ");
-        const depthLabel = r.depth === 0 ? "direct" : `depth ${r.depth}`;
-        console.log(`  ${r.route.padEnd(24)} ${chalk2.dim(depthLabel.padEnd(10))} ${chalk2.dim(chain)}`);
-      }
-      const elapsed2 = ((Date.now() - startTime) / 1e3).toFixed(1);
-      console.log(chalk2.dim(`
-  Completed in ${elapsed2}s (dry run \u2014 no screenshots captured)
-`));
-      return;
-    }
-    const t4 = Date.now();
-    logger.pipeline(4, "Setting up worktree...");
-    const worktree = await worktreePromise;
-    logger.stageComplete("Worktree", "created + dependencies installed", Date.now() - t4);
-    const t5 = Date.now();
-    logger.pipeline(5, "Starting servers...");
-    await ensureDir(outputDir);
-    const beforePort = await findAvailablePort();
-    const afterPort = await findAvailablePort(/* @__PURE__ */ new Set([beforePort]));
-    const [beforeServer, afterServer, browser] = await Promise.all([
-      startServer(worktree.path, beforePort),
-      startServer(cwd, afterPort),
-      launchBrowser()
-    ]);
-    cleanupRegistry.register(() => stopServer(beforeServer));
-    cleanupRegistry.register(() => stopServer(afterServer));
-    cleanupRegistry.register(() => browser.close());
-    logger.stageComplete("Servers", `ready on :${beforePort} and :${afterPort}`, Date.now() - t5);
-    const t6 = Date.now();
-    logger.pipeline(6, "Capturing screenshots...");
-    const tasks = expandRoutes(affectedRoutes, config, routeComponentMap);
-    const captures = await captureRoutes(
-      tasks,
-      beforeServer.url,
-      afterServer.url,
-      outputDir,
-      {
-        browser,
-        width: options.width,
-        height: options.height,
-        device: options.device,
-        delay: options.delay,
-        autoTabs: options.autoTabs,
-        maxTabsPerRoute: options.maxTabsPerRoute,
-        autoSections: options.autoSections,
-        maxSectionsPerRoute: options.maxSectionsPerRoute,
-        onProgress: (i, label) => logger.pipeline(6, `Capturing ${label} (${i}/${tasks.length})...`)
-      }
-    );
-    logger.stageComplete("Capture", `${captures.length} screenshots from ${tasks.length} routes`, Date.now() - t6);
-    const t7 = Date.now();
-    logger.pipeline(7, "Comparing screenshots...");
-    const bgColor = detectBgColor(cwd);
-    const allResults = await compareScreenshots(captures, outputDir, options.threshold, { bgColor });
-    const results = allResults.filter((r) => {
-      const isSubCapture = r.prefix.includes("~");
-      if (isSubCapture && !r.changed) {
-        if (r.comparePath) {
-          try {
-            unlinkSync2(r.comparePath);
-          } catch {
-          }
-        }
-        return false;
-      }
-      return true;
-    });
-    const changedCount = results.filter((r) => r.changed).length;
-    const unchangedCount = results.length - changedCount;
-    logger.stageComplete("Compare", `${changedCount} changed, ${unchangedCount} unchanged`, Date.now() - t7);
-    const t8 = Date.now();
-    logger.pipeline(8, "Generating report...");
-    await generateReport(results, outputDir, { post });
-    const reportHtml = generateReportHtml(results, sessionName);
-    const reportPath = resolve4(outputDir, "report.html");
-    writeFileSync2(reportPath, reportHtml, "utf-8");
-    logger.stageComplete("Report", reportPath.replace(cwd + "/", ""), Date.now() - t8);
-    const summary = generateSummaryMd(results, gitDiff);
-    logger.completePipeline(true);
-    console.log("\n" + summary);
-    const elapsed = ((Date.now() - startTime) / 1e3).toFixed(1);
-    logger.success(
-      `Done in ${elapsed}s \u2014 ${results.length} route(s) checked, ${changedCount} with visual changes`
-    );
-    const changedResults = results.filter((r) => r.changed);
-    if (changedResults.length > 0) {
-      const hero = changedResults.reduce((best, r) => r.diffPercentage > best.diffPercentage ? r : best);
-      if (hero.comparePath) {
-        console.log(chalk2.dim(`
-  Biggest change: ${hero.route} (${hero.diffPercentage.toFixed(1)}%) \u2014 ${hero.comparePath.replace(cwd + "/", "")}`));
-      }
-    }
-    if (!post) {
-      console.log(chalk2.dim(`  View report: open ${reportPath.replace(cwd + "/", "")}`));
-      console.log(chalk2.dim("  Post to your PR: npx afterbefore --post\n"));
-    }
-    if (options.open) {
-      try {
-        const openCmd = process.platform === "darwin" ? "open" : "xdg-open";
-        execSync5(`${openCmd} "${reportPath}"`, { stdio: "ignore" });
-      } catch {
-      }
-    }
-  } finally {
-    try {
-      logger.writeLogFile(resolve4(outputDir, "debug.log"));
-    } catch {
-    }
-    await cleanupRegistry.runAll();
-  }
-}
-export {
-  loadConfig,
-  runPipeline
-};
-//# sourceMappingURL=index.js.map