web-corders-vrt 0.1.3 → 0.1.4

package/.claude/settings.local.json

@@ -11,7 +11,12 @@
       "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/ppd_contents_h --no-open)",
       "Bash(open vrt-results/2026-03-02T05-02-45/report.html)",
       "Bash(open vrt-results/2026-03-02T06-41-44/report.html)",
-      "Bash(open vrt-results/2026-03-02T06-49-09/report.html)"
+      "Bash(open vrt-results/2026-03-02T06-49-09/report.html)",
+      "Bash(node dist/bin/vrt.js run --before https://www.video.unext.jp --after http://localhost:3000 --paths /lp/unext_mobile_a263 --no-open)",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''before:'', t.comparison.dimensions.beforeHeight, ''after:'', t.comparison.dimensions.afterHeight, ''aligned:'', t.comparison.alignmentUsed ?? false, ''shifted:'', t.comparison.shiftedRows ?? 0, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%''\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''width:'', t.comparison.dimensions.width, ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(node -e \"const r=JSON.parse\\(require\\(''fs''\\).readFileSync\\(''/dev/stdin'',''utf8''\\)\\); r.results.forEach\\(t => { console.log\\(t.viewport.type, ''aligned:'', t.comparison.alignmentUsed, ''shifted:'', t.comparison.shiftedRows, ''diff:'', t.comparison.diffPercentage.toFixed\\(2\\)+''%'', ''beforeH:'', t.comparison.dimensions.beforeHeight, ''afterH:'', t.comparison.dimensions.afterHeight\\) }\\)\")",
+      "Bash(open vrt-results/2026-03-02T07-22-33/report.html)"
     ]
   }
 }

package/README.md

@@ -2,7 +2,8 @@
 
 Webページのビジュアルリグレッションテスト (VRT) を行うCLIツール。
 
-本番環境と開発環境のスクリーンショットをピクセル単位で比較し、差分を検出する。テスト結果は人間向け（HTMLレポート）とLLM/Claude向け（JSONレポート + diff画像）の両方で出力される。
+本番環境と開発環境のスクリーンショットの差分を検出する。
+テスト結果は人間向け（HTMLレポート + diff画像）とLLM/Claude向け（JSONレポート）の両方で出力される。
 
 ## セットアップ
 
@@ -62,25 +63,11 @@ vrt-results/2026-02-28T10-00-00/
         "diffPercentage": 2.35,
         "diffPixelCount": 12040,
       },
-      "diffRegions": [
-        {
-          "id": 1,
-          "boundingBox": { "x": 0, "y": 480, "width": 750, "height": 200 },
-          "locationHint": {
-            "verticalPosition": "upper",
-            "horizontalPosition": "full-width",
-            "fromTopPx": 480,
-            "estimatedElement": "Likely a hero section or banner",
-          },
-        },
-      ],
     },
   ],
 }
 ```
 
-`diffRegions` の `locationHint` は、差分がページのどの位置にあるかを示す。Claudeがこれを読むことで、修正すべきCSS/HTMLの場所を推定できる。
-
 ## オプション一覧
 
 | オプション           | デフォルト | 説明                                                                    |
@@ -142,7 +129,7 @@ npx web-corders-vrt init \
 2. VRTコマンドを実行
 3. `report.json` を読んで差分を確認
 4. diff画像を視覚的に確認
-5. `locationHint` からCSS/HTMLの修正箇所を特定
+5. diff画像からCSS/HTMLの修正箇所を特定
 6. コードを修正
 7. 再度VRTを実行して確認
 

package/dist/bin/vrt.js

@@ -255,181 +255,6 @@ function normalizeImage(png, targetWidth, targetHeight) {
   return normalized;
 }
 
-// src/core/region-detector.ts
-import { PNG as PNG2 } from "pngjs";
-function detectDiffRegions(diffImageBuffer, options = {}) {
-  const { minRegionSize = 10, mergingDistance = 50 } = options;
-  const png = PNG2.sync.read(diffImageBuffer);
-  const { width, height, data } = png;
-  const diffPixels = [];
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const idx = (y * width + x) * 4;
-      const r = data[idx];
-      const g = data[idx + 1];
-      const b = data[idx + 2];
-      const a = data[idx + 3];
-      if (a > 100 && (r > 200 && g < 100 && b < 100 || r < 100 && g > 150 && b < 100)) {
-        diffPixels.push({ x, y });
-      }
-    }
-  }
-  if (diffPixels.length === 0) {
-    return [];
-  }
-  const clusters = clusterPixels(diffPixels, mergingDistance);
-  const regions = clusters.map((cluster, idx) => {
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    let maxY = -Infinity;
-    for (const p of cluster) {
-      if (p.x < minX) minX = p.x;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.y > maxY) maxY = p.y;
-    }
-    const regionWidth = maxX - minX + 1;
-    const regionHeight = maxY - minY + 1;
-    return {
-      id: idx + 1,
-      boundingBox: {
-        x: minX,
-        y: minY,
-        width: regionWidth,
-        height: regionHeight
-      },
-      diffPixelCount: cluster.length,
-      diffPercentageInRegion: cluster.length / (regionWidth * regionHeight) * 100,
-      locationHint: estimatePosition(
-        minX,
-        minY,
-        regionWidth,
-        regionHeight,
-        width,
-        height
-      )
-    };
-  }).filter((r) => r.diffPixelCount >= minRegionSize).sort((a, b) => b.diffPixelCount - a.diffPixelCount);
-  return regions.map((r, i) => ({ ...r, id: i + 1 }));
-}
-function clusterPixels(pixels, distance) {
-  const cellSize = Math.max(distance, 1);
-  const grid = /* @__PURE__ */ new Map();
-  for (const p of pixels) {
-    const cellX = Math.floor(p.x / cellSize);
-    const cellY = Math.floor(p.y / cellSize);
-    const key = `${cellX},${cellY}`;
-    if (!grid.has(key)) {
-      grid.set(key, []);
-    }
-    grid.get(key).push(p);
-  }
-  const cellKeys = Array.from(grid.keys());
-  const parent = /* @__PURE__ */ new Map();
-  function find(key) {
-    if (!parent.has(key)) parent.set(key, key);
-    let root = key;
-    while (parent.get(root) !== root) {
-      root = parent.get(root);
-    }
-    let current = key;
-    while (current !== root) {
-      const next = parent.get(current);
-      parent.set(current, root);
-      current = next;
-    }
-    return root;
-  }
-  function union(a, b) {
-    const ra = find(a);
-    const rb = find(b);
-    if (ra !== rb) parent.set(ra, rb);
-  }
-  for (const key of cellKeys) {
-    const [cx, cy] = key.split(",").map(Number);
-    for (let dx = -1; dx <= 1; dx++) {
-      for (let dy = -1; dy <= 1; dy++) {
-        if (dx === 0 && dy === 0) continue;
-        const neighborKey = `${cx + dx},${cy + dy}`;
-        if (grid.has(neighborKey)) {
-          union(key, neighborKey);
-        }
-      }
-    }
-  }
-  const clusters = /* @__PURE__ */ new Map();
-  for (const key of cellKeys) {
-    const root = find(key);
-    if (!clusters.has(root)) {
-      clusters.set(root, []);
-    }
-    clusters.get(root).push(...grid.get(key));
-  }
-  return Array.from(clusters.values());
-}
-function estimatePosition(x, y, regionWidth, regionHeight, pageWidth, pageHeight) {
-  const centerY = y + regionHeight / 2;
-  const yRatio = centerY / pageHeight;
-  let verticalPosition;
-  if (yRatio < 0.1) verticalPosition = "top";
-  else if (yRatio < 0.3) verticalPosition = "upper";
-  else if (yRatio < 0.7) verticalPosition = "middle";
-  else if (yRatio < 0.9) verticalPosition = "lower";
-  else verticalPosition = "bottom";
-  const centerX = x + regionWidth / 2;
-  const widthRatio = regionWidth / pageWidth;
-  let horizontalPosition;
-  if (widthRatio > 0.8) {
-    horizontalPosition = "full-width";
-  } else if (centerX < pageWidth * 0.33) {
-    horizontalPosition = "left";
-  } else if (centerX > pageWidth * 0.67) {
-    horizontalPosition = "right";
-  } else {
-    horizontalPosition = "center";
-  }
-  const estimatedElement = guessElement(
-    verticalPosition,
-    horizontalPosition,
-    regionWidth,
-    regionHeight,
-    pageWidth,
-    y
-  );
-  return {
-    verticalPosition,
-    horizontalPosition,
-    fromTopPx: y,
-    fromLeftPx: x,
-    estimatedElement
-  };
-}
-function guessElement(vPos, hPos, width, height, pageWidth, fromTop) {
-  if (vPos === "top" && hPos === "full-width" && fromTop < 100) {
-    return "Likely a header or navigation bar";
-  }
-  if (vPos === "bottom" && hPos === "full-width") {
-    return "Likely a footer";
-  }
-  if (vPos === "upper" && hPos === "full-width" && height > 200) {
-    return "Likely a hero section or banner";
-  }
-  if (width < 200 && height < 60) {
-    return "Likely a button or small UI element";
-  }
-  if (width > pageWidth * 0.5 && height < 40) {
-    return "Likely a text line or heading";
-  }
-  if (width > 200 && width < 500 && height > 100 && height < 400) {
-    return "Likely a card or content block";
-  }
-  if (width > 100 && height > 100 && width < pageWidth * 0.8) {
-    return "Likely an image or media element";
-  }
-  return `UI element at ~${fromTop}px from top`;
-}
-
 // src/reporters/terminal.ts
 import chalk from "chalk";
 function printTerminalReport(report) {
@@ -471,21 +296,6 @@ function printTerminalReport(report) {
         console.log(
           `    ${vpLabel}  ${chalk.red("\u274C FAIL")}  ${chalk.red(diffStr)}  ${chalk.dim(thresholdStr)}`
         );
-        for (const region of result.diffRegions.slice(0, 5)) {
-          const { boundingBox: bb, locationHint: lh } = region;
-          console.log(
-            chalk.dim(
-              `      \u2192 Region ${region.id}: ${bb.width}x${bb.height} at (${bb.x}, ${bb.y}) - ${lh.estimatedElement}`
-            )
-          );
-        }
-        if (result.diffRegions.length > 5) {
-          console.log(
-            chalk.dim(
-              `      \u2192 ...and ${result.diffRegions.length - 5} more regions`
-            )
-          );
-        }
       }
     }
     console.log("");
@@ -532,11 +342,8 @@ function generateHtml(report) {
   return report_default.replace("{{CSS}}", report_default2).replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp).replace("{{DURATION}}", (meta.duration / 1e3).toFixed(1)).replace("{{BEFORE_URL}}", meta.beforeUrl).replace("{{AFTER_URL}}", meta.afterUrl).replace("{{TOTAL}}", String(summary.totalTests)).replace("{{PASSED}}", String(summary.passed)).replace("{{FAILED_STAT}}", failedStat).replace("{{RESULTS}}", resultCards);
 }
 function generateResultCard(result) {
-  const { page, viewport, status, comparison, diffRegions, screenshots } = result;
+  const { page, viewport, status, comparison, screenshots } = result;
   const vpLabel = viewport.type.toUpperCase();
-  const regionsHtml = diffRegions.length > 0 ? diffRegions.slice(0, 5).map(
-    (r) => `<div class="region">Region ${r.id}: ${r.boundingBox.width}x${r.boundingBox.height} at (${r.boundingBox.x}, ${r.boundingBox.y}) \u2014 ${r.locationHint.estimatedElement}</div>`
-  ).join("\n") + (diffRegions.length > 5 ? `<div class="region">...and ${diffRegions.length - 5} more</div>` : "") : "";
   const imagesHtml = `
     <div class="comparison">
       <div class="images">
@@ -562,7 +369,6 @@ function generateResultCard(result) {
         <span class="badge ${status}">${status === "error" ? "ERROR" : `${status.toUpperCase()} ${comparison.diffPercentage.toFixed(2)}%`}</span>
       </div>
       ${screenshotSection}
-      ${regionsHtml ? `<div class="diff-info">${regionsHtml}</div>` : ""}
     </div>`;
 }
 
@@ -615,7 +421,6 @@ async function runVrt(options) {
           afterShot.buffer,
           options.threshold
         );
-        const diffRegions = comparison.passed ? [] : detectDiffRegions(comparison.diffImage);
         const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
         const beforePath = join3("screenshots", `${filePrefix}--before.png`);
         const afterPath = join3("screenshots", `${filePrefix}--after.png`);
@@ -649,7 +454,6 @@ async function runVrt(options) {
             threshold: options.threshold,
             dimensions: comparison.dimensions
           },
-          diffRegions,
           screenshots: {
             before: beforePath,
             after: afterPath,
@@ -731,7 +535,6 @@ function createErrorResult(pagePath, viewportType, options, error) {
       threshold: options.threshold,
       dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 }
     },
-    diffRegions: [],
     screenshots: { before: "", after: "", diff: "" },
     error
   };
@@ -801,7 +604,7 @@ ${command}
 3. \`./vrt-results/\` \u5185\u306E\u6700\u65B0\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u306B\u3042\u308B \`report.json\` \u3092\u8AAD\u3080
 4. \`status: "fail"\` \u306E\u30C6\u30B9\u30C8\u7D50\u679C\u306B\u6CE8\u76EE\u3059\u308B
 5. \u8A72\u5F53\u3059\u308Bdiff\u753B\u50CF\uFF08\`*--diff.png\`\uFF09\u3092Read\u30C4\u30FC\u30EB\u3067\u8996\u899A\u7684\u306B\u78BA\u8A8D\u3059\u308B
-6. \`diffRegions\` \u306E \`locationHint\` \u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3059\u308B
+6. diff\u753B\u50CF\u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3059\u308B
 7. \u30BD\u30FC\u30B9\u30B3\u30FC\u30C9\u3092\u4FEE\u6B63\u3059\u308B
 8. \u518D\u5EA6VRT\u3092\u5B9F\u884C\u3057\u3066\u4FEE\u6B63\u304C\u53CD\u6620\u3055\u308C\u305F\u3053\u3068\u3092\u78BA\u8A8D\u3059\u308B
 `;

package/dist/bin/vrt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../bin/vrt.ts","../../src/schemas.ts","../../src/commands/run.ts","../../src/core/screenshotter.ts","../../src/constants.ts","../../src/core/stabilizer.ts","../../src/core/comparator.ts","../../src/core/region-detector.ts","../../src/reporters/terminal.ts","../../src/reporters/json.ts","../../src/reporters/html.ts","../../src/templates/report.html","../../src/templates/report.css","../../src/commands/init.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport { cliOptionsSchema } from \"../src/schemas.js\";\nimport { runVrt } from \"../src/commands/run.js\";\nimport { runInit } from \"../src/commands/init.js\";\nimport type { ResolvedOptions } from \"../src/types.js\";\n\nconst program = new Command();\n\nprogram\n  .name(\"vrt\")\n  .description(\"Visual Regression Testing CLI - Compare web pages visually\")\n  .version(\"0.1.0\");\n\nprogram\n  .command(\"run\")\n  .description(\"Run visual regression tests\")\n  .requiredOption(\"--before <url>\", \"Baseline URL (production)\")\n  .requiredOption(\"--after <url>\", \"Comparison URL (local/staging)\")\n  .requiredOption(\"--paths <paths>\", \"Page paths to compare (comma-separated)\")\n  .option(\"--threshold <n>\", \"Diff tolerance percentage\", \"0.1\")\n  .option(\"--hide <selectors>\", \"CSS selectors to hide (comma-separated)\")\n  .option(\"--no-html\", \"Skip HTML report generation\")\n  .option(\"--no-open\", \"Do not open HTML report in browser\")\n  .action(async (rawOptions) => {\n    try {\n      const parsed = cliOptionsSchema.parse(rawOptions);\n\n      const options: ResolvedOptions = {\n        beforeUrl: parsed.before,\n        afterUrl: parsed.after,\n        paths: parsed.paths,\n        threshold: parsed.threshold,\n        hideSelectors: parsed.hide,\n        html: parsed.html,\n        open: parsed.open,\n      };\n\n      const report = await runVrt(options);\n      process.exit(report.summary.overallStatus === \"pass\" ? 0 : 1);\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(`Error: ${error.message}`);\n      } else {\n        console.error(\"An unexpected error occurred\");\n      }\n      process.exit(2);\n    }\n  });\n\nprogram\n  .command(\"init\")\n  .description(\n    \"Generate .claude/commands/vrt.md skill file for this repository\",\n  )\n  .requiredOption(\"--before <url>\", \"Baseline URL (production)\")\n  .requiredOption(\"--after <url>\", \"Comparison URL (local/staging)\")\n  .requiredOption(\"--paths <paths>\", \"Page paths to compare (comma-separated)\")\n  .option(\"--threshold <n>\", \"Diff tolerance percentage\", \"0.1\")\n  .option(\"--hide <selectors>\", \"CSS selectors to hide (comma-separated)\")\n  .action(async (options) => {\n    try {\n      await runInit({\n        before: options.before,\n        after: options.after,\n        paths: options.paths,\n        threshold: parseFloat(options.threshold),\n        hide: options.hide,\n      });\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(`Error: ${error.message}`);\n      }\n      process.exit(1);\n    }\n  });\n\nprogram.parse();\n","import { z } from \"zod\";\n\nexport const cliOptionsSchema = z.object({\n  before: z.string().url(\"--before must be a valid URL\"),\n  after: z.string().url(\"--after must be a valid URL\"),\n  paths: z.string().transform((val) => val.split(\",\").map((p) => p.trim())),\n  threshold: z.coerce.number().min(0).max(100).default(0.1),\n  hide: z\n    .string()\n    .optional()\n    .transform((val) => (val ? val.split(\",\").map((s) => s.trim()) : [])),\n  html: z.boolean().default(true),\n  open: z.boolean().default(true),\n});\n\nexport type CliOptions = z.input<typeof cliOptionsSchema>;\n","import { mkdir, writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport ora from \"ora\";\nimport chalk from \"chalk\";\nimport { Screenshotter } from \"../core/screenshotter.js\";\nimport { compareImages } from \"../core/comparator.js\";\nimport { detectDiffRegions } from \"../core/region-detector.js\";\nimport { printTerminalReport } from \"../reporters/terminal.js\";\nimport { writeJsonReport } from \"../reporters/json.js\";\nimport { writeHtmlReport } from \"../reporters/html.js\";\nimport {\n  DEFAULT_SP_VIEWPORT,\n  DEFAULT_PC_VIEWPORT,\n  DEFAULT_OUT_DIR,\n  DEFAULT_THRESHOLD,\n} from \"../constants.js\";\nimport type {\n  ResolvedOptions,\n  VrtReport,\n  VrtTestResult,\n  ViewportType,\n} from \"../types.js\";\n\nconst VIEWPORTS: ViewportType[] = [\"sp\", \"pc\"];\n\n/**\n * VRTのメイン実行コマンド。\n * スクリーンショット取得 → 比較 → レポート生成を一気に行う。\n */\nexport async function runVrt(options: ResolvedOptions): Promise<VrtReport> {\n  const startTime = Date.now();\n\n  // 出力ディレクトリを作成\n  const timestamp = new Date().toISOString().replace(/[:.]/g, \"-\").slice(0, 19);\n  const runDir = join(DEFAULT_OUT_DIR, timestamp);\n  const screenshotsDir = join(runDir, \"screenshots\");\n  await mkdir(screenshotsDir, { recursive: true });\n\n  const screenshotter = new Screenshotter();\n  const spinner = ora(\"Initializing browser...\").start();\n\n  try {\n    await screenshotter.initialize();\n\n    // Before スクリーンショット取得\n    spinner.text = `Taking screenshots of ${chalk.cyan(options.beforeUrl)}...`;\n    const beforeScreenshots = await screenshotter.captureAll(\n      options.beforeUrl,\n      options.paths,\n      VIEWPORTS,\n      options.hideSelectors,\n    );\n\n    // After スクリーンショット取得\n    spinner.text = `Taking screenshots of ${chalk.cyan(options.afterUrl)}...`;\n    const afterScreenshots = await screenshotter.captureAll(\n      options.afterUrl,\n      options.paths,\n      VIEWPORTS,\n      options.hideSelectors,\n    );\n\n    spinner.text = \"Comparing screenshots...\";\n\n    // 比較を実行\n    const results: VrtTestResult[] = [];\n\n    for (const beforeShot of beforeScreenshots) {\n      const afterShot = afterScreenshots.find(\n        (a) =>\n          a.pagePath === beforeShot.pagePath &&\n          a.viewportType === beforeShot.viewportType,\n      );\n\n      if (!afterShot) {\n        results.push(\n          createErrorResult(\n            beforeShot.pagePath,\n            beforeShot.viewportType,\n            options,\n            \"After screenshot not found\",\n          ),\n        );\n        continue;\n      }\n\n      try {\n        const comparison = compareImages(\n          beforeShot.buffer,\n          afterShot.buffer,\n          options.threshold,\n        );\n        const diffRegions = comparison.passed\n          ? []\n          : detectDiffRegions(comparison.diffImage);\n\n        // スクリーンショットを保存\n        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;\n        const beforePath = join(\"screenshots\", `${filePrefix}--before.png`);\n        const afterPath = join(\"screenshots\", `${filePrefix}--after.png`);\n        const diffPath = join(\"screenshots\", `${filePrefix}--diff.png`);\n\n        await writeFile(join(runDir, beforePath), beforeShot.buffer);\n        await writeFile(join(runDir, afterPath), afterShot.buffer);\n        await writeFile(join(runDir, diffPath), comparison.diffImage);\n\n        const pageName =\n          beforeShot.pagePath === \"/\"\n            ? \"トップページ\"\n            : beforeShot.pagePath.replace(/^\\//, \"\");\n        const viewport = getViewportDimensions(beforeShot.viewportType);\n\n        results.push({\n          page: {\n            path: beforeShot.pagePath,\n            name: pageName,\n            url: {\n              before: new URL(\n                beforeShot.pagePath,\n                options.beforeUrl,\n              ).toString(),\n              after: new URL(beforeShot.pagePath, options.afterUrl).toString(),\n            },\n          },\n          viewport: {\n            type: beforeShot.viewportType,\n            ...viewport,\n          },\n          status: comparison.passed ? \"pass\" : \"fail\",\n          comparison: {\n            diffPercentage: comparison.diffPercentage,\n            diffPixelCount: comparison.diffCount,\n            totalPixels: comparison.totalPixels,\n            threshold: options.threshold,\n            dimensions: comparison.dimensions,\n          },\n          diffRegions,\n          screenshots: {\n            before: beforePath,\n            after: afterPath,\n            diff: diffPath,\n          },\n        });\n      } catch (error) {\n        results.push(\n          createErrorResult(\n            beforeShot.pagePath,\n            beforeShot.viewportType,\n            options,\n            error instanceof Error ? error.message : String(error),\n          ),\n        );\n      }\n    }\n\n    const duration = Date.now() - startTime;\n    const passed = results.filter((r) => r.status === \"pass\").length;\n    const failed = results.filter((r) => r.status === \"fail\").length;\n    const errored = results.filter((r) => r.status === \"error\").length;\n\n    const report: VrtReport = {\n      version: \"1.0\",\n      meta: {\n        timestamp,\n        beforeUrl: options.beforeUrl,\n        afterUrl: options.afterUrl,\n        duration,\n        command: buildCommandString(options),\n      },\n      summary: {\n        totalTests: results.length,\n        passed,\n        failed,\n        errored,\n        overallStatus: failed > 0 || errored > 0 ? \"fail\" : \"pass\",\n      },\n      results,\n    };\n\n    spinner.stop();\n\n    // レポート出力\n    printTerminalReport(report);\n\n    const jsonPath = await writeJsonReport(report, runDir);\n    console.log(`JSON report: ${chalk.dim(jsonPath)}`);\n\n    if (options.html) {\n      const htmlPath = await writeHtmlReport(report, runDir);\n      console.log(`HTML report: ${chalk.dim(htmlPath)}`);\n\n      if (options.open) {\n        const { exec } = await import(\"node:child_process\");\n        exec(`open \"${htmlPath}\"`);\n      }\n    }\n\n    console.log(`Output dir:  ${chalk.dim(runDir)}`);\n\n    return report;\n  } finally {\n    await screenshotter.cleanup();\n  }\n}\n\nfunction getViewportDimensions(\n  type: ViewportType,\n): { width: number; height: number } {\n  return type === \"sp\"\n    ? { ...DEFAULT_SP_VIEWPORT }\n    : { ...DEFAULT_PC_VIEWPORT };\n}\n\nfunction createErrorResult(\n  pagePath: string,\n  viewportType: ViewportType,\n  options: ResolvedOptions,\n  error: string,\n): VrtTestResult {\n  const viewport = getViewportDimensions(viewportType);\n  const pageName =\n    pagePath === \"/\" ? \"トップページ\" : pagePath.replace(/^\\//, \"\");\n  return {\n    page: {\n      path: pagePath,\n      name: pageName,\n      url: {\n        before: new URL(pagePath, options.beforeUrl).toString(),\n        after: new URL(pagePath, options.afterUrl).toString(),\n      },\n    },\n    viewport: { type: viewportType, ...viewport },\n    status: \"error\",\n    comparison: {\n      diffPercentage: 0,\n      diffPixelCount: 0,\n      totalPixels: 0,\n      threshold: options.threshold,\n      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 },\n    },\n    diffRegions: [],\n    screenshots: { before: \"\", after: \"\", diff: \"\" },\n    error,\n  };\n}\n\nfunction buildCommandString(options: ResolvedOptions): string {\n  const parts = [\"npx web-corders-vrt run\"];\n  parts.push(`--before ${options.beforeUrl}`);\n  parts.push(`--after ${options.afterUrl}`);\n  parts.push(`--paths ${options.paths.join(\",\")}`);\n  if (options.threshold !== DEFAULT_THRESHOLD) {\n    parts.push(`--threshold ${options.threshold}`);\n  }\n  if (options.hideSelectors.length > 0) {\n    parts.push(`--hide \"${options.hideSelectors.join(\",\")}\"`);\n  }\n  return parts.join(\" \\\\\\n  \");\n}\n","import { chromium, type Browser, type BrowserContext } from \"playwright\";\nimport type { ScreenshotResult, ViewportType } from \"../types.js\";\nimport {\n  DEFAULT_SP_VIEWPORT,\n  DEFAULT_PC_VIEWPORT,\n  DEFAULT_DELAY,\n  DEFAULT_CONCURRENCY,\n  SP_USER_AGENT,\n  BLOCKED_DOMAINS,\n} from \"../constants.js\";\nimport { stabilizePage, getDateMockScript } from \"./stabilizer.js\";\n\nexport class Screenshotter {\n  private browser: Browser | null = null;\n\n  async initialize(): Promise<void> {\n    this.browser = await chromium.launch();\n  }\n\n  /**\n   * 指定URLのスクリーンショットを取得する。\n   */\n  async capture(\n    url: string,\n    pagePath: string,\n    viewportType: ViewportType,\n    hideSelectors: string[],\n  ): Promise<ScreenshotResult> {\n    if (!this.browser) {\n      throw new Error(\"Browser not initialized. Call initialize() first.\");\n    }\n\n    const viewport =\n      viewportType === \"sp\"\n        ? { ...DEFAULT_SP_VIEWPORT }\n        : { ...DEFAULT_PC_VIEWPORT };\n\n    const context: BrowserContext = await this.browser.newContext({\n      viewport,\n      deviceScaleFactor: viewportType === \"sp\" ? 2 : 1,\n      userAgent: viewportType === \"sp\" ? SP_USER_AGENT : undefined,\n    });\n\n    const page = await context.newPage();\n\n    // 日付をモック\n    await page.addInitScript(getDateMockScript());\n\n    // 広告・計測系リクエストをブロック\n    await page.route(\"**/*\", (route) => {\n      const reqUrl = route.request().url();\n      const shouldBlock = BLOCKED_DOMAINS.some((domain) =>\n        reqUrl.includes(domain),\n      );\n      if (shouldBlock) {\n        return route.abort();\n      }\n      return route.continue();\n    });\n\n    // ページにアクセス\n    await page.goto(url, { waitUntil: \"load\", timeout: 60000 });\n\n    // ページの安定化\n    await stabilizePage(page, {\n      hideSelectors,\n      delay: DEFAULT_DELAY,\n    });\n\n    // スクリーンショット取得\n    const buffer = await page.screenshot({\n      fullPage: true,\n      type: \"png\",\n    });\n\n    // 画像サイズを取得（PNGヘッダから読む）\n    const width = buffer.readUInt32BE(16);\n    const height = buffer.readUInt32BE(20);\n\n    await context.close();\n\n    // パスからページ名を生成\n    const pageName =\n      pagePath === \"/\"\n        ? \"top\"\n        : pagePath.replace(/^\\//, \"\").replace(/\\//g, \"-\");\n\n    return {\n      pagePath,\n      pageName,\n      viewportType,\n      buffer: Buffer.from(buffer),\n      width,\n      height,\n    };\n  }\n\n  /**\n   * 複数のページ・ビューポートのスクリーンショットを並行で取得する。\n   */\n  async captureAll(\n    baseUrl: string,\n    paths: string[],\n    viewports: ViewportType[],\n    hideSelectors: string[],\n  ): Promise<ScreenshotResult[]> {\n    const tasks: Array<{ url: string; path: string; viewport: ViewportType }> =\n      [];\n\n    for (const pagePath of paths) {\n      const url = new URL(pagePath, baseUrl).toString();\n      for (const viewport of viewports) {\n        tasks.push({ url, path: pagePath, viewport });\n      }\n    }\n\n    // 並行実行制御\n    const results: ScreenshotResult[] = [];\n\n    for (let i = 0; i < tasks.length; i += DEFAULT_CONCURRENCY) {\n      const batch = tasks.slice(i, i + DEFAULT_CONCURRENCY);\n      const batchResults = await Promise.all(\n        batch.map((task) =>\n          this.capture(task.url, task.path, task.viewport, hideSelectors),\n        ),\n      );\n      results.push(...batchResults);\n    }\n\n    return results;\n  }\n\n  async cleanup(): Promise<void> {\n    await this.browser?.close();\n    this.browser = null;\n  }\n}\n","export const DEFAULT_SP_VIEWPORT = { width: 375, height: 812 } as const;\nexport const DEFAULT_PC_VIEWPORT = { width: 1440, height: 900 } as const;\n\nexport const DEFAULT_THRESHOLD = 0.1;\nexport const DEFAULT_DELAY = 1000;\nexport const DEFAULT_CONCURRENCY = 3;\nexport const DEFAULT_OUT_DIR = \"./vrt-results\";\n\nexport const SP_USER_AGENT =\n  \"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1\";\n\n/** VRTに不要な広告・計測系ドメイン（常にブロック） */\nexport const BLOCKED_DOMAINS = [\n  \"googletagmanager.com\",\n  \"google-analytics.com\",\n  \"googleadservices.com\",\n  \"googlesyndication.com\",\n  \"doubleclick.net\",\n  \"facebook.net\",\n  \"fbcdn.net\",\n  \"analytics.yahoo.co.jp\",\n  \"clarity.ms\",\n  \"hotjar.com\",\n  \"newrelic.com\",\n  \"sentry.io\",\n  \"datadoghq.com\",\n];\n\n/** VRTに不要な開発ツール系要素（常に非表示） */\nexport const DEFAULT_HIDE_SELECTORS = [\"#devtools-indicator\"];\n\n/** アニメーション・トランジションを無効化するCSS */\nexport const DISABLE_ANIMATIONS_CSS = `\n*, *::before, *::after {\n  animation-duration: 0s !important;\n  animation-delay: 0s !important;\n  transition-duration: 0s !important;\n  transition-delay: 0s !important;\n  scroll-behavior: auto !important;\n  caret-color: transparent !important;\n}\n`;\n","import type { Page } from \"playwright\";\nimport {\n  DISABLE_ANIMATIONS_CSS,\n  DEFAULT_HIDE_SELECTORS,\n} from \"../constants.js\";\n\nexport interface StabilizeOptions {\n  disableAnimations?: boolean;\n  hideSelectors?: string[];\n  delay?: number;\n}\n\n/**\n * ページの動的コンテンツを安定化させる。\n * アニメーション無効化、要素の非表示、日付のモックなどを行う。\n */\nexport async function stabilizePage(\n  page: Page,\n  options: StabilizeOptions,\n): Promise<void> {\n  // アニメーション・トランジションを無効化\n  if (options.disableAnimations !== false) {\n    await page.addStyleTag({ content: DISABLE_ANIMATIONS_CSS });\n  }\n\n  // 指定要素を非表示にする（visibility: hidden でレイアウトを崩さない）\n  const allHideSelectors = [\n    ...DEFAULT_HIDE_SELECTORS,\n    ...(options.hideSelectors ?? []),\n  ];\n  if (allHideSelectors.length > 0) {\n    const hideCSS = allHideSelectors\n      .map((s) => `${s} { visibility: hidden !important; }`)\n      .join(\"\\n\");\n    await page.addStyleTag({ content: hideCSS });\n  }\n\n  // 追加の待機時間（hydration完了を待つ）\n  if (options.delay && options.delay > 0) {\n    await page.waitForTimeout(options.delay);\n  }\n\n  // Shadow DOM内の要素はCSSが届かないのでJSで削除（Next.js devtools等）\n  if (allHideSelectors.length > 0) {\n    await page.evaluate(`\n      for (const sel of ${JSON.stringify(allHideSelectors)}) {\n        document.querySelectorAll(sel).forEach(el => el.remove());\n        document.querySelectorAll(\"*\").forEach(el => {\n          if (el.shadowRoot) {\n            el.shadowRoot.querySelectorAll(sel).forEach(inner => inner.remove());\n          }\n        });\n      }\n    `);\n  }\n}\n\n/**\n * 日付をモックして固定値にする初期化スクリプト。\n * page.goto() の前に page.addInitScript() で使う。\n */\nexport function getDateMockScript(): string {\n  return `\n    (() => {\n      const fixedDate = new Date('2025-01-01T00:00:00Z');\n      const OrigDate = Date;\n      const MockDate = class extends OrigDate {\n        constructor(...args) {\n          if (args.length === 0) {\n            super(fixedDate.getTime());\n          } else {\n            super(...args);\n          }\n        }\n        static now() { return fixedDate.getTime(); }\n      };\n      globalThis.Date = MockDate;\n    })();\n  `;\n}\n","import pixelmatch from \"pixelmatch\";\nimport { PNG } from \"pngjs\";\nimport type { ComparisonResult } from \"../types.js\";\n\n/**\n * 2つのPNG画像をピクセル単位で比較し、差分画像を生成する。\n * サイズが異なる場合は大きい方に合わせて白パディングで拡張する。\n */\nexport function compareImages(\n  beforeBuffer: Buffer,\n  afterBuffer: Buffer,\n  threshold: number = 0.1,\n): ComparisonResult {\n  const before = PNG.sync.read(beforeBuffer);\n  const after = PNG.sync.read(afterBuffer);\n\n  const width = Math.max(before.width, after.width);\n  const height = Math.max(before.height, after.height);\n\n  // サイズが異なる場合は正規化\n  const normalizedBefore = normalizeImage(before, width, height);\n  const normalizedAfter = normalizeImage(after, width, height);\n\n  const diff = new PNG({ width, height });\n\n  const diffCount = pixelmatch(\n    normalizedBefore.data,\n    normalizedAfter.data,\n    diff.data,\n    width,\n    height,\n    {\n      threshold: 0.1,\n      includeAA: false,\n      alpha: 0.1,\n      diffColor: [255, 0, 0],\n      diffColorAlt: [0, 200, 0],\n    },\n  );\n\n  const totalPixels = width * height;\n  const diffPercentage = (diffCount / totalPixels) * 100;\n\n  return {\n    diffCount,\n    totalPixels,\n    diffPercentage,\n    diffImage: PNG.sync.write(diff),\n    passed: diffPercentage <= threshold,\n    dimensions: {\n      width,\n      height,\n      beforeHeight: before.height,\n      afterHeight: after.height,\n    },\n  };\n}\n\n/**\n * 画像を指定サイズに正規化する。\n * 小さい場合は白（#ffffff）でパディングする。\n */\nfunction normalizeImage(\n  png: PNG,\n  targetWidth: number,\n  targetHeight: number,\n): PNG {\n  if (png.width === targetWidth && png.height === targetHeight) {\n    return png;\n  }\n\n  const normalized = new PNG({ width: targetWidth, height: targetHeight });\n\n  // 白で埋める\n  for (let i = 0; i < normalized.data.length; i += 4) {\n    normalized.data[i] = 255; // R\n    normalized.data[i + 1] = 255; // G\n    normalized.data[i + 2] = 255; // B\n    normalized.data[i + 3] = 255; // A\n  }\n\n  // 元の画像をコピー\n  for (let y = 0; y < png.height; y++) {\n    for (let x = 0; x < png.width; x++) {\n      const srcIdx = (y * png.width + x) * 4;\n      const dstIdx = (y * targetWidth + x) * 4;\n      normalized.data[dstIdx] = png.data[srcIdx];\n      normalized.data[dstIdx + 1] = png.data[srcIdx + 1];\n      normalized.data[dstIdx + 2] = png.data[srcIdx + 2];\n      normalized.data[dstIdx + 3] = png.data[srcIdx + 3];\n    }\n  }\n\n  return normalized;\n}\n","import { PNG } from \"pngjs\";\nimport type {\n  VrtDiffRegion,\n  VerticalPosition,\n  HorizontalPosition,\n} from \"../types.js\";\n\nexport interface RegionDetectorOptions {\n  /** この面積(px)未満の領域は無視する */\n  minRegionSize?: number;\n  /** この距離(px)以下の差分ピクセルを同一領域としてマージする */\n  mergingDistance?: number;\n}\n\n/**\n * diff画像から差分領域を検出し、座標・位置ヒントを返す。\n * Connected Component Labeling + bounding box 方式。\n */\nexport function detectDiffRegions(\n  diffImageBuffer: Buffer,\n  options: RegionDetectorOptions = {},\n): VrtDiffRegion[] {\n  const { minRegionSize = 10, mergingDistance = 50 } = options;\n\n  const png = PNG.sync.read(diffImageBuffer);\n  const { width, height, data } = png;\n\n  // 1. diff ピクセル（赤色）の座標を収集\n  const diffPixels: Array<{ x: number; y: number }> = [];\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      const idx = (y * width + x) * 4;\n      const r = data[idx];\n      const g = data[idx + 1];\n      const b = data[idx + 2];\n      const a = data[idx + 3];\n\n      // pixelmatch の diffColor [255, 0, 0] または diffColorAlt [0, 200, 0] を検出\n      if (\n        a > 100 &&\n        ((r > 200 && g < 100 && b < 100) || (r < 100 && g > 150 && b < 100))\n      ) {\n        diffPixels.push({ x, y });\n      }\n    }\n  }\n\n  if (diffPixels.length === 0) {\n    return [];\n  }\n\n  // 2. グリッドベースのクラスタリング（高速化のため）\n  const clusters = clusterPixels(diffPixels, mergingDistance);\n\n  // 3. 各クラスタの bounding box を計算し、フィルタリング\n  const regions: VrtDiffRegion[] = clusters\n    .map((cluster, idx) => {\n      let minX = Infinity;\n      let maxX = -Infinity;\n      let minY = Infinity;\n      let maxY = -Infinity;\n      for (const p of cluster) {\n        if (p.x < minX) minX = p.x;\n        if (p.x > maxX) maxX = p.x;\n        if (p.y < minY) minY = p.y;\n        if (p.y > maxY) maxY = p.y;\n      }\n      const regionWidth = maxX - minX + 1;\n      const regionHeight = maxY - minY + 1;\n\n      return {\n        id: idx + 1,\n        boundingBox: {\n          x: minX,\n          y: minY,\n          width: regionWidth,\n          height: regionHeight,\n        },\n        diffPixelCount: cluster.length,\n        diffPercentageInRegion:\n          (cluster.length / (regionWidth * regionHeight)) * 100,\n        locationHint: estimatePosition(\n          minX,\n          minY,\n          regionWidth,\n          regionHeight,\n          width,\n          height,\n        ),\n      };\n    })\n    .filter((r) => r.diffPixelCount >= minRegionSize)\n    .sort((a, b) => b.diffPixelCount - a.diffPixelCount);\n\n  // IDを振り直す\n  return regions.map((r, i) => ({ ...r, id: i + 1 }));\n}\n\n/**\n * ピクセルをグリッドベースでクラスタリングする。\n * mergingDistance をセルサイズとしてグリッドに分割し、\n * 隣接セルのピクセルを同一クラスタとしてマージする。\n */\nfunction clusterPixels(\n  pixels: Array<{ x: number; y: number }>,\n  distance: number,\n): Array<Array<{ x: number; y: number }>> {\n  const cellSize = Math.max(distance, 1);\n  const grid = new Map<string, Array<{ x: number; y: number }>>();\n\n  // グリッドに割り当て\n  for (const p of pixels) {\n    const cellX = Math.floor(p.x / cellSize);\n    const cellY = Math.floor(p.y / cellSize);\n    const key = `${cellX},${cellY}`;\n    if (!grid.has(key)) {\n      grid.set(key, []);\n    }\n    grid.get(key)!.push(p);\n  }\n\n  // Union-Find でセルをクラスタリング\n  const cellKeys = Array.from(grid.keys());\n  const parent = new Map<string, string>();\n\n  function find(key: string): string {\n    if (!parent.has(key)) parent.set(key, key);\n    // 反復的にルートを探索\n    let root = key;\n    while (parent.get(root) !== root) {\n      root = parent.get(root)!;\n    }\n    // パス圧縮\n    let current = key;\n    while (current !== root) {\n      const next = parent.get(current)!;\n      parent.set(current, root);\n      current = next;\n    }\n    return root;\n  }\n\n  function union(a: string, b: string): void {\n    const ra = find(a);\n    const rb = find(b);\n    if (ra !== rb) parent.set(ra, rb);\n  }\n\n  // 隣接セルをマージ\n  for (const key of cellKeys) {\n    const [cx, cy] = key.split(\",\").map(Number);\n    for (let dx = -1; dx <= 1; dx++) {\n      for (let dy = -1; dy <= 1; dy++) {\n        if (dx === 0 && dy === 0) continue;\n        const neighborKey = `${cx + dx},${cy + dy}`;\n        if (grid.has(neighborKey)) {\n          union(key, neighborKey);\n        }\n      }\n    }\n  }\n\n  // クラスタごとにピクセルを集約\n  const clusters = new Map<string, Array<{ x: number; y: number }>>();\n  for (const key of cellKeys) {\n    const root = find(key);\n    if (!clusters.has(root)) {\n      clusters.set(root, []);\n    }\n    clusters.get(root)!.push(...grid.get(key)!);\n  }\n\n  return Array.from(clusters.values());\n}\n\n/**\n * 差分領域の位置から、CSSの修正箇所を推定するヒントを生成する。\n */\nfunction estimatePosition(\n  x: number,\n  y: number,\n  regionWidth: number,\n  regionHeight: number,\n  pageWidth: number,\n  pageHeight: number,\n): VrtDiffRegion[\"locationHint\"] {\n  // 垂直位置の推定\n  const centerY = y + regionHeight / 2;\n  const yRatio = centerY / pageHeight;\n  let verticalPosition: VerticalPosition;\n  if (yRatio < 0.1) verticalPosition = \"top\";\n  else if (yRatio < 0.3) verticalPosition = \"upper\";\n  else if (yRatio < 0.7) verticalPosition = \"middle\";\n  else if (yRatio < 0.9) verticalPosition = \"lower\";\n  else verticalPosition = \"bottom\";\n\n  // 水平位置の推定\n  const centerX = x + regionWidth / 2;\n  const widthRatio = regionWidth / pageWidth;\n  let horizontalPosition: HorizontalPosition;\n  if (widthRatio > 0.8) {\n    horizontalPosition = \"full-width\";\n  } else if (centerX < pageWidth * 0.33) {\n    horizontalPosition = \"left\";\n  } else if (centerX > pageWidth * 0.67) {\n    horizontalPosition = \"right\";\n  } else {\n    horizontalPosition = \"center\";\n  }\n\n  // 要素の推定\n  const estimatedElement = guessElement(\n    verticalPosition,\n    horizontalPosition,\n    regionWidth,\n    regionHeight,\n    pageWidth,\n    y,\n  );\n\n  return {\n    verticalPosition,\n    horizontalPosition,\n    fromTopPx: y,\n    fromLeftPx: x,\n    estimatedElement,\n  };\n}\n\n/**\n * 位置とサイズから、可能性のあるUI要素を推測する。\n */\nfunction guessElement(\n  vPos: VerticalPosition,\n  hPos: HorizontalPosition,\n  width: number,\n  height: number,\n  pageWidth: number,\n  fromTop: number,\n): string {\n  // ページ最上部の全幅要素 → ヘッダー/ナビゲーション\n  if (vPos === \"top\" && hPos === \"full-width\" && fromTop < 100) {\n    return \"Likely a header or navigation bar\";\n  }\n\n  // ページ最下部の全幅要素 → フッター\n  if (vPos === \"bottom\" && hPos === \"full-width\") {\n    return \"Likely a footer\";\n  }\n\n  // 上部の大きな要素 → ヒーローセクション\n  if (vPos === \"upper\" && hPos === \"full-width\" && height > 200) {\n    return \"Likely a hero section or banner\";\n  }\n\n  // 小さなボタンサイズ\n  if (width < 200 && height < 60) {\n    return \"Likely a button or small UI element\";\n  }\n\n  // 横長の細い要素 → テキスト行\n  if (width > pageWidth * 0.5 && height < 40) {\n    return \"Likely a text line or heading\";\n  }\n\n  // カードサイズ\n  if (width > 200 && width < 500 && height > 100 && height < 400) {\n    return \"Likely a card or content block\";\n  }\n\n  // 画像サイズ\n  if (width > 100 && height > 100 && width < pageWidth * 0.8) {\n    return \"Likely an image or media element\";\n  }\n\n  return `UI element at ~${fromTop}px from top`;\n}\n","import chalk from \"chalk\";\nimport type { VrtReport } from \"../types.js\";\n\n/**\n * ターミナルにカラー出力でVRT結果を表示する。\n */\nexport function printTerminalReport(report: VrtReport): void {\n  const { meta, summary, results } = report;\n\n  console.log(\"\");\n  console.log(chalk.bold(`VRT Results - ${meta.timestamp}`));\n  console.log(\"=\".repeat(50));\n  console.log(\"\");\n  console.log(\n    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`,\n  );\n  console.log(\"\");\n\n  // ページごとにグループ化\n  const groupedByPage = new Map<string, typeof results>();\n  for (const result of results) {\n    const key = result.page.path;\n    if (!groupedByPage.has(key)) {\n      groupedByPage.set(key, []);\n    }\n    groupedByPage.get(key)!.push(result);\n  }\n\n  for (const [pagePath, pageResults] of groupedByPage) {\n    const pageName = pageResults[0].page.name;\n    console.log(`  Page: ${chalk.bold(pageName)} (${pagePath})`);\n\n    for (const result of pageResults) {\n      const vpLabel = `${result.viewport.type.toUpperCase()} (${result.viewport.width}x${result.viewport.height})`;\n\n      if (result.status === \"error\") {\n        console.log(\n          `    ${vpLabel}  ${chalk.yellow(\"⚠ ERROR\")}  ${result.error || \"Unknown error\"}`,\n        );\n        continue;\n      }\n\n      const diffStr = `diff: ${result.comparison.diffPercentage.toFixed(2)}%`;\n\n      if (result.status === \"pass\") {\n        console.log(\n          `    ${vpLabel}  ${chalk.green(\"✅ PASS\")}  ${chalk.dim(diffStr)}`,\n        );\n      } else {\n        const thresholdStr = `(threshold: ${result.comparison.threshold}%)`;\n        console.log(\n          `    ${vpLabel}  ${chalk.red(\"❌ FAIL\")}  ${chalk.red(diffStr)}  ${chalk.dim(thresholdStr)}`,\n        );\n\n        // 差分領域の詳細\n        for (const region of result.diffRegions.slice(0, 5)) {\n          const { boundingBox: bb, locationHint: lh } = region;\n          console.log(\n            chalk.dim(\n              `      → Region ${region.id}: ${bb.width}x${bb.height} at (${bb.x}, ${bb.y}) - ${lh.estimatedElement}`,\n            ),\n          );\n        }\n        if (result.diffRegions.length > 5) {\n          console.log(\n            chalk.dim(\n              `      → ...and ${result.diffRegions.length - 5} more regions`,\n            ),\n          );\n        }\n      }\n    }\n\n    console.log(\"\");\n  }\n\n  // サマリー\n  const statusColor =\n    summary.overallStatus === \"pass\" ? chalk.green : chalk.red;\n  console.log(\n    `Summary: ${chalk.green(`${summary.passed} passed`)}, ${summary.failed > 0 ? chalk.red(`${summary.failed} failed`) : `${summary.failed} failed`}${summary.errored > 0 ? `, ${chalk.yellow(`${summary.errored} errored`)}` : \"\"} / ${summary.totalTests} total`,\n  );\n  console.log(`Overall: ${statusColor(summary.overallStatus.toUpperCase())}`);\n  console.log(`Duration: ${(meta.duration / 1000).toFixed(1)}s`);\n  console.log(\"\");\n}\n","import { writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { VrtReport } from \"../types.js\";\n\n/**\n * VrtReport を JSON ファイルとして保存する。\n */\nexport async function writeJsonReport(\n  report: VrtReport,\n  outDir: string,\n): Promise<string> {\n  const filePath = join(outDir, \"report.json\");\n  await writeFile(filePath, JSON.stringify(report, null, 2), \"utf-8\");\n  return filePath;\n}\n","import { writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { VrtReport, VrtTestResult } from \"../types.js\";\nimport reportTemplate from \"../templates/report.html\";\nimport reportStyles from \"../templates/report.css\";\n\n/**\n * 単一HTMLファイルのレポートを生成する。\n * 外部依存なし、CSSはインライン。\n */\nexport async function writeHtmlReport(\n  report: VrtReport,\n  outDir: string,\n): Promise<string> {\n  const html = generateHtml(report);\n  const filePath = join(outDir, \"report.html\");\n  await writeFile(filePath, html, \"utf-8\");\n  return filePath;\n}\n\nfunction generateHtml(report: VrtReport): string {\n  const { meta, summary, results } = report;\n\n  const resultCards = results.map((r) => generateResultCard(r)).join(\"\\n\");\n\n  const failedStat =\n    summary.failed > 0\n      ? `<div class=\"stat fail\">${summary.failed} Failed</div>`\n      : \"\";\n\n  return (reportTemplate as string)\n    .replace(\"{{CSS}}\", reportStyles as string)\n    .replace(/\\{\\{TIMESTAMP\\}\\}/g, meta.timestamp)\n    .replace(\"{{DURATION}}\", (meta.duration / 1000).toFixed(1))\n    .replace(\"{{BEFORE_URL}}\", meta.beforeUrl)\n    .replace(\"{{AFTER_URL}}\", meta.afterUrl)\n    .replace(\"{{TOTAL}}\", String(summary.totalTests))\n    .replace(\"{{PASSED}}\", String(summary.passed))\n    .replace(\"{{FAILED_STAT}}\", failedStat)\n    .replace(\"{{RESULTS}}\", resultCards);\n}\n\nfunction generateResultCard(result: VrtTestResult): string {\n  const { page, viewport, status, comparison, diffRegions, screenshots } =\n    result;\n  const vpLabel = viewport.type.toUpperCase();\n\n  const regionsHtml =\n    diffRegions.length > 0\n      ? diffRegions\n          .slice(0, 5)\n          .map(\n            (r) =>\n              `<div class=\"region\">Region ${r.id}: ${r.boundingBox.width}x${r.boundingBox.height} at (${r.boundingBox.x}, ${r.boundingBox.y}) — ${r.locationHint.estimatedElement}</div>`,\n          )\n          .join(\"\\n\") +\n        (diffRegions.length > 5\n          ? `<div class=\"region\">...and ${diffRegions.length - 5} more</div>`\n          : \"\")\n      : \"\";\n\n  const imagesHtml = `\n    <div class=\"comparison\">\n      <div class=\"images\">\n        <div class=\"img-container img-before\">\n          <div class=\"label\">Before</div>\n          <img src=\"${screenshots.before}\" alt=\"Before\" loading=\"lazy\">\n        </div>\n        <div class=\"img-container img-after\">\n          <div class=\"label\">After</div>\n          <img src=\"${screenshots.after}\" alt=\"After\" loading=\"lazy\">\n        </div>\n        <div class=\"img-container img-diff\">\n          <div class=\"label\">Diff</div>\n          <img src=\"${screenshots.diff}\" alt=\"Diff\" loading=\"lazy\">\n        </div>\n      </div>\n    </div>`;\n\n  // Passしたテストはアコーディオンに格納\n  const screenshotSection =\n    status === \"pass\"\n      ? `<details class=\"screenshot-accordion\"><summary>Show</summary>${imagesHtml}</details>`\n      : imagesHtml;\n\n  return `\n    <div class=\"card ${viewport.type}\">\n      <div class=\"card-header\">\n        <h3>${page.path} - ${vpLabel}</h3>\n        <span class=\"badge ${status}\">${status === \"error\" ? \"ERROR\" : `${status.toUpperCase()} ${comparison.diffPercentage.toFixed(2)}%`}</span>\n      </div>\n      ${screenshotSection}\n      ${regionsHtml ? `<div class=\"diff-info\">${regionsHtml}</div>` : \"\"}\n    </div>`;\n}\n","<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>VRT Report - {{TIMESTAMP}}</title>\n    <style>\n      {{CSS}}\n    </style>\n  </head>\n  <body>\n    <div class=\"header\">\n      <h1>web-corders-vrt</h1>\n      <div class=\"meta\">\n        {{TIMESTAMP}} | Duration: {{DURATION}}s<br />\n        Before: {{BEFORE_URL}} → After: {{AFTER_URL}}\n      </div>\n    </div>\n    <div class=\"summary\">\n      <div class=\"stat total\">{{TOTAL}} Total</div>\n      <div class=\"stat pass\">{{PASSED}} Passed</div>\n      {{FAILED_STAT}}\n    </div>\n    <div class=\"results\">\n      {{RESULTS}}\n    </div>\n  </body>\n</html>\n","* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  background: #f5f5f5;\n  color: #333;\n}\n\n.header {\n  background: #1a1a2e;\n  color: white;\n  padding: 24px 32px;\n  text-align: center;\n}\n\n.header h1 {\n  font-size: 20px;\n  margin-bottom: 8px;\n}\n\n.header .meta {\n  font-size: 13px;\n  color: #aaa;\n}\n\n.summary {\n  display: flex;\n  gap: 16px;\n  padding: 16px 32px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.summary .stat {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.stat.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.stat.total {\n  background: #e3f2fd;\n  color: #1565c0;\n}\n\n.results {\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.card-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.card-header h3 {\n  font-size: 15px;\n}\n\n.badge {\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.badge.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.badge.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.badge.error {\n  background: #fff3e0;\n  color: #e65100;\n}\n\n.comparison {\n  padding: 16px 20px;\n}\n\n.images {\n  display: flex;\n  gap: 8px;\n}\n\n.card.sp .img-container {\n  flex: none;\n  width: 375px;\n}\n\n.card.sp .img-container img {\n  width: 375px;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.card.pc .img-container {\n  flex: 1;\n  min-width: 0;\n}\n\n.card.pc .img-container img {\n  width: 100%;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.img-container .label {\n  font-size: 11px;\n  color: #888;\n  margin-bottom: 4px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.diff-info {\n  padding: 8px 20px 16px;\n  font-size: 13px;\n  color: #666;\n}\n\n.diff-info .region {\n  margin: 4px 0;\n  padding-left: 16px;\n}\n\n/* Accordion for passed tests */\n.screenshot-accordion {\n  border-top: 1px solid #eee;\n}\n\n.screenshot-accordion summary {\n  padding: 12px 20px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 600;\n  color: #666;\n  user-select: none;\n}\n\n.screenshot-accordion summary:hover {\n  background: #fafafa;\n}\n","import { mkdir, writeFile, access } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport chalk from \"chalk\";\nimport { DEFAULT_THRESHOLD } from \"../constants.js\";\n\nexport interface InitOptions {\n  before: string;\n  after: string;\n  paths: string;\n  threshold?: number;\n  hide?: string;\n}\n\n/**\n * .claude/commands/vrt.md スキルファイルを生成する。\n */\nexport async function runInit(options: InitOptions): Promise<void> {\n  const outDir = join(process.cwd(), \".claude\", \"commands\");\n  const outFile = join(outDir, \"vrt.md\");\n\n  // 既存ファイルの確認\n  try {\n    await access(outFile);\n    console.log(chalk.yellow(`⚠ ${outFile} already exists. Overwriting...`));\n  } catch {\n    // ファイルが存在しない場合は正常\n  }\n\n  await mkdir(outDir, { recursive: true });\n\n  const content = generateSkillFile(options);\n  await writeFile(outFile, content, \"utf-8\");\n\n  console.log(chalk.green(`✅ Created ${outFile}`));\n  console.log(\"\");\n  console.log(\n    \"This skill file allows Claude Code to run VRT with the /vrt command.\",\n  );\n  console.log(\n    \"Review and customize the file, then commit it to your repository.\",\n  );\n}\n\nfunction generateSkillFile(options: InitOptions): string {\n  // CLI コマンドを構築\n  const cmdParts = [\"npx web-corders-vrt run\"];\n  cmdParts.push(`  --before ${options.before}`);\n  cmdParts.push(`  --after ${options.after}`);\n  cmdParts.push(`  --paths ${options.paths}`);\n\n  if (options.threshold !== undefined && options.threshold !== DEFAULT_THRESHOLD) {\n    cmdParts.push(`  --threshold ${options.threshold}`);\n  }\n\n  if (options.hide) {\n    cmdParts.push(`  --hide \"${options.hide}\"`);\n  }\n\n  // --no-open をデフォルトでつける（Claude実行時にブラウザを開かないため）\n  cmdParts.push(\"  --no-open\");\n\n  const command = cmdParts.join(\" \\\\\\n\");\n\n  return `VRTを実行して本番環境とのビジュアル差分を検出する。\n\n## 手順\n\n1. 開発サーバーが起動していなければ \\`npm run dev\\` で起動して待機する\n2. 以下のコマンドでVRTを実行:\n\n\\`\\`\\`bash\n${command}\n\\`\\`\\`\n\n3. \\`./vrt-results/\\` 内の最新ディレクトリにある \\`report.json\\` を読む\n4. \\`status: \"fail\"\\` のテスト結果に注目する\n5. 該当するdiff画像（\\`*--diff.png\\`）をReadツールで視覚的に確認する\n6. \\`diffRegions\\` の \\`locationHint\\` から修正すべきCSSやHTMLの場所を特定する\n7. ソースコードを修正する\n8. 再度VRTを実行して修正が反映されたことを確認する\n`;\n}\n"],"mappings":";;;AAAA,SAAS,eAAe;;;ACAxB,SAAS,SAAS;AAEX,IAAM,mBAAmB,EAAE,OAAO;AAAA,EACvC,QAAQ,EAAE,OAAO,EAAE,IAAI,8BAA8B;AAAA,EACrD,OAAO,EAAE,OAAO,EAAE,IAAI,6BAA6B;AAAA,EACnD,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,QAAQ,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAAA,EACxE,WAAW,EAAE,OAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IAAI,GAAG,EAAE,QAAQ,GAAG;AAAA,EACxD,MAAM,EACH,OAAO,EACP,SAAS,EACT,UAAU,CAAC,QAAS,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAE;AAAA,EACtE,MAAM,EAAE,QAAQ,EAAE,QAAQ,IAAI;AAAA,EAC9B,MAAM,EAAE,QAAQ,EAAE,QAAQ,IAAI;AAChC,CAAC;;;ACbD,SAAS,OAAO,aAAAA,kBAAiB;AACjC,SAAS,QAAAC,aAAY;AACrB,OAAO,SAAS;AAChB,OAAOC,YAAW;;;ACHlB,SAAS,gBAAmD;;;ACArD,IAAM,sBAAsB,EAAE,OAAO,KAAK,QAAQ,IAAI;AACtD,IAAM,sBAAsB,EAAE,OAAO,MAAM,QAAQ,IAAI;AAEvD,IAAM,oBAAoB;AAC1B,IAAM,gBAAgB;AACtB,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAExB,IAAM,gBACX;AAGK,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,yBAAyB,CAAC,qBAAqB;AAGrD,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AChBtC,eAAsB,cACpB,MACA,SACe;AAEf,MAAI,QAAQ,sBAAsB,OAAO;AACvC,UAAM,KAAK,YAAY,EAAE,SAAS,uBAAuB,CAAC;AAAA,EAC5D;AAGA,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,GAAI,QAAQ,iBAAiB,CAAC;AAAA,EAChC;AACA,MAAI,iBAAiB,SAAS,GAAG;AAC/B,UAAM,UAAU,iBACb,IAAI,CAAC,MAAM,GAAG,CAAC,qCAAqC,EACpD,KAAK,IAAI;AACZ,UAAM,KAAK,YAAY,EAAE,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAGA,MAAI,QAAQ,SAAS,QAAQ,QAAQ,GAAG;AACtC,UAAM,KAAK,eAAe,QAAQ,KAAK;AAAA,EACzC;AAGA,MAAI,iBAAiB,SAAS,GAAG;AAC/B,UAAM,KAAK,SAAS;AAAA,0BACE,KAAK,UAAU,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQrD;AAAA,EACH;AACF;AAMO,SAAS,oBAA4B;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBT;;;AFnEO,IAAM,gBAAN,MAAoB;AAAA,EACjB,UAA0B;AAAA,EAElC,MAAM,aAA4B;AAChC,SAAK,UAAU,MAAM,SAAS,OAAO;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QACJ,KACA,UACA,cACA,eAC2B;AAC3B,QAAI,CAAC,KAAK,SAAS;AACjB,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAEA,UAAM,WACJ,iBAAiB,OACb,EAAE,GAAG,oBAAoB,IACzB,EAAE,GAAG,oBAAoB;AAE/B,UAAM,UAA0B,MAAM,KAAK,QAAQ,WAAW;AAAA,MAC5D;AAAA,MACA,mBAAmB,iBAAiB,OAAO,IAAI;AAAA,MAC/C,WAAW,iBAAiB,OAAO,gBAAgB;AAAA,IACrD,CAAC;AAED,UAAM,OAAO,MAAM,QAAQ,QAAQ;AAGnC,UAAM,KAAK,cAAc,kBAAkB,CAAC;AAG5C,UAAM,KAAK,MAAM,QAAQ,CAAC,UAAU;AAClC,YAAM,SAAS,MAAM,QAAQ,EAAE,IAAI;AACnC,YAAM,cAAc,gBAAgB;AAAA,QAAK,CAAC,WACxC,OAAO,SAAS,MAAM;AAAA,MACxB;AACA,UAAI,aAAa;AACf,eAAO,MAAM,MAAM;AAAA,MACrB;AACA,aAAO,MAAM,SAAS;AAAA,IACxB,CAAC;AAGD,UAAM,KAAK,KAAK,KAAK,EAAE,WAAW,QAAQ,SAAS,IAAM,CAAC;AAG1D,UAAM,cAAc,MAAM;AAAA,MACxB;AAAA,MACA,OAAO;AAAA,IACT,CAAC;AAGD,UAAM,SAAS,MAAM,KAAK,WAAW;AAAA,MACnC,UAAU;AAAA,MACV,MAAM;AAAA,IACR,CAAC;AAGD,UAAM,QAAQ,OAAO,aAAa,EAAE;AACpC,UAAM,SAAS,OAAO,aAAa,EAAE;AAErC,UAAM,QAAQ,MAAM;AAGpB,UAAM,WACJ,aAAa,MACT,QACA,SAAS,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,GAAG;AAEpD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,KAAK,MAAM;AAAA,MAC1B;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,WACJ,SACA,OACA,WACA,eAC6B;AAC7B,UAAM,QACJ,CAAC;AAEH,eAAW,YAAY,OAAO;AAC5B,YAAM,MAAM,IAAI,IAAI,UAAU,OAAO,EAAE,SAAS;AAChD,iBAAW,YAAY,WAAW;AAChC,cAAM,KAAK,EAAE,KAAK,MAAM,UAAU,SAAS,CAAC;AAAA,MAC9C;AAAA,IACF;AAGA,UAAM,UAA8B,CAAC;AAErC,aAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,qBAAqB;AAC1D,YAAM,QAAQ,MAAM,MAAM,GAAG,IAAI,mBAAmB;AACpD,YAAM,eAAe,MAAM,QAAQ;AAAA,QACjC,MAAM;AAAA,UAAI,CAAC,SACT,KAAK,QAAQ,KAAK,KAAK,KAAK,MAAM,KAAK,UAAU,aAAa;AAAA,QAChE;AAAA,MACF;AACA,cAAQ,KAAK,GAAG,YAAY;AAAA,IAC9B;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,MAAM,UAAyB;AAC7B,UAAM,KAAK,SAAS,MAAM;AAC1B,SAAK,UAAU;AAAA,EACjB;AACF;;;AGxIA,OAAO,gBAAgB;AACvB,SAAS,WAAW;AAOb,SAAS,cACd,cACA,aACA,YAAoB,KACF;AAClB,QAAM,SAAS,IAAI,KAAK,KAAK,YAAY;AACzC,QAAM,QAAQ,IAAI,KAAK,KAAK,WAAW;AAEvC,QAAM,QAAQ,KAAK,IAAI,OAAO,OAAO,MAAM,KAAK;AAChD,QAAM,SAAS,KAAK,IAAI,OAAO,QAAQ,MAAM,MAAM;AAGnD,QAAM,mBAAmB,eAAe,QAAQ,OAAO,MAAM;AAC7D,QAAM,kBAAkB,eAAe,OAAO,OAAO,MAAM;AAE3D,QAAM,OAAO,IAAI,IAAI,EAAE,OAAO,OAAO,CAAC;AAEtC,QAAM,YAAY;AAAA,IAChB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAAA,MACX,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW,CAAC,KAAK,GAAG,CAAC;AAAA,MACrB,cAAc,CAAC,GAAG,KAAK,CAAC;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,cAAc,QAAQ;AAC5B,QAAM,iBAAkB,YAAY,cAAe;AAEnD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,IAAI,KAAK,MAAM,IAAI;AAAA,IAC9B,QAAQ,kBAAkB;AAAA,IAC1B,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,cAAc,OAAO;AAAA,MACrB,aAAa,MAAM;AAAA,IACrB;AAAA,EACF;AACF;AAMA,SAAS,eACP,KACA,aACA,cACK;AACL,MAAI,IAAI,UAAU,eAAe,IAAI,WAAW,cAAc;AAC5D,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,IAAI,IAAI,EAAE,OAAO,aAAa,QAAQ,aAAa,CAAC;AAGvE,WAAS,IAAI,GAAG,IAAI,WAAW,KAAK,QAAQ,KAAK,GAAG;AAClD,eAAW,KAAK,CAAC,IAAI;AACrB,eAAW,KAAK,IAAI,CAAC,IAAI;AACzB,eAAW,KAAK,IAAI,CAAC,IAAI;AACzB,eAAW,KAAK,IAAI,CAAC,IAAI;AAAA,EAC3B;AAGA,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK;AACnC,aAAS,IAAI,GAAG,IAAI,IAAI,OAAO,KAAK;AAClC,YAAM,UAAU,IAAI,IAAI,QAAQ,KAAK;AACrC,YAAM,UAAU,IAAI,cAAc,KAAK;AACvC,iBAAW,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM;AACzC,iBAAW,KAAK,SAAS,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC;AACjD,iBAAW,KAAK,SAAS,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC;AACjD,iBAAW,KAAK,SAAS,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC;AAAA,IACnD;AAAA,EACF;AAEA,SAAO;AACT;;;AC9FA,SAAS,OAAAC,YAAW;AAkBb,SAAS,kBACd,iBACA,UAAiC,CAAC,GACjB;AACjB,QAAM,EAAE,gBAAgB,IAAI,kBAAkB,GAAG,IAAI;AAErD,QAAM,MAAMA,KAAI,KAAK,KAAK,eAAe;AACzC,QAAM,EAAE,OAAO,QAAQ,KAAK,IAAI;AAGhC,QAAM,aAA8C,CAAC;AACrD,WAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,aAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,YAAM,OAAO,IAAI,QAAQ,KAAK;AAC9B,YAAM,IAAI,KAAK,GAAG;AAClB,YAAM,IAAI,KAAK,MAAM,CAAC;AACtB,YAAM,IAAI,KAAK,MAAM,CAAC;AACtB,YAAM,IAAI,KAAK,MAAM,CAAC;AAGtB,UACE,IAAI,QACF,IAAI,OAAO,IAAI,OAAO,IAAI,OAAS,IAAI,OAAO,IAAI,OAAO,IAAI,MAC/D;AACA,mBAAW,KAAK,EAAE,GAAG,EAAE,CAAC;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,MAAI,WAAW,WAAW,GAAG;AAC3B,WAAO,CAAC;AAAA,EACV;AAGA,QAAM,WAAW,cAAc,YAAY,eAAe;AAG1D,QAAM,UAA2B,SAC9B,IAAI,CAAC,SAAS,QAAQ;AACrB,QAAI,OAAO;AACX,QAAI,OAAO;AACX,QAAI,OAAO;AACX,QAAI,OAAO;AACX,eAAW,KAAK,SAAS;AACvB,UAAI,EAAE,IAAI,KAAM,QAAO,EAAE;AACzB,UAAI,EAAE,IAAI,KAAM,QAAO,EAAE;AACzB,UAAI,EAAE,IAAI,KAAM,QAAO,EAAE;AACzB,UAAI,EAAE,IAAI,KAAM,QAAO,EAAE;AAAA,IAC3B;AACA,UAAM,cAAc,OAAO,OAAO;AAClC,UAAM,eAAe,OAAO,OAAO;AAEnC,WAAO;AAAA,MACL,IAAI,MAAM;AAAA,MACV,aAAa;AAAA,QACX,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,gBAAgB,QAAQ;AAAA,MACxB,wBACG,QAAQ,UAAU,cAAc,gBAAiB;AAAA,MACpD,cAAc;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC,EACA,OAAO,CAAC,MAAM,EAAE,kBAAkB,aAAa,EAC/C,KAAK,CAAC,GAAG,MAAM,EAAE,iBAAiB,EAAE,cAAc;AAGrD,SAAO,QAAQ,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,IAAI,EAAE,EAAE;AACpD;AAOA,SAAS,cACP,QACA,UACwC;AACxC,QAAM,WAAW,KAAK,IAAI,UAAU,CAAC;AACrC,QAAM,OAAO,oBAAI,IAA6C;AAG9D,aAAW,KAAK,QAAQ;AACtB,UAAM,QAAQ,KAAK,MAAM,EAAE,IAAI,QAAQ;AACvC,UAAM,QAAQ,KAAK,MAAM,EAAE,IAAI,QAAQ;AACvC,UAAM,MAAM,GAAG,KAAK,IAAI,KAAK;AAC7B,QAAI,CAAC,KAAK,IAAI,GAAG,GAAG;AAClB,WAAK,IAAI,KAAK,CAAC,CAAC;AAAA,IAClB;AACA,SAAK,IAAI,GAAG,EAAG,KAAK,CAAC;AAAA,EACvB;AAGA,QAAM,WAAW,MAAM,KAAK,KAAK,KAAK,CAAC;AACvC,QAAM,SAAS,oBAAI,IAAoB;AAEvC,WAAS,KAAK,KAAqB;AACjC,QAAI,CAAC,OAAO,IAAI,GAAG,EAAG,QAAO,IAAI,KAAK,GAAG;AAEzC,QAAI,OAAO;AACX,WAAO,OAAO,IAAI,IAAI,MAAM,MAAM;AAChC,aAAO,OAAO,IAAI,IAAI;AAAA,IACxB;AAEA,QAAI,UAAU;AACd,WAAO,YAAY,MAAM;AACvB,YAAM,OAAO,OAAO,IAAI,OAAO;AAC/B,aAAO,IAAI,SAAS,IAAI;AACxB,gBAAU;AAAA,IACZ;AACA,WAAO;AAAA,EACT;AAEA,WAAS,MAAM,GAAW,GAAiB;AACzC,UAAM,KAAK,KAAK,CAAC;AACjB,UAAM,KAAK,KAAK,CAAC;AACjB,QAAI,OAAO,GAAI,QAAO,IAAI,IAAI,EAAE;AAAA,EAClC;AAGA,aAAW,OAAO,UAAU;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1C,aAAS,KAAK,IAAI,MAAM,GAAG,MAAM;AAC/B,eAAS,KAAK,IAAI,MAAM,GAAG,MAAM;AAC/B,YAAI,OAAO,KAAK,OAAO,EAAG;AAC1B,cAAM,cAAc,GAAG,KAAK,EAAE,IAAI,KAAK,EAAE;AACzC,YAAI,KAAK,IAAI,WAAW,GAAG;AACzB,gBAAM,KAAK,WAAW;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,QAAM,WAAW,oBAAI,IAA6C;AAClE,aAAW,OAAO,UAAU;AAC1B,UAAM,OAAO,KAAK,GAAG;AACrB,QAAI,CAAC,SAAS,IAAI,IAAI,GAAG;AACvB,eAAS,IAAI,MAAM,CAAC,CAAC;AAAA,IACvB;AACA,aAAS,IAAI,IAAI,EAAG,KAAK,GAAG,KAAK,IAAI,GAAG,CAAE;AAAA,EAC5C;AAEA,SAAO,MAAM,KAAK,SAAS,OAAO,CAAC;AACrC;AAKA,SAAS,iBACP,GACA,GACA,aACA,cACA,WACA,YAC+B;AAE/B,QAAM,UAAU,IAAI,eAAe;AACnC,QAAM,SAAS,UAAU;AACzB,MAAI;AACJ,MAAI,SAAS,IAAK,oBAAmB;AAAA,WAC5B,SAAS,IAAK,oBAAmB;AAAA,WACjC,SAAS,IAAK,oBAAmB;AAAA,WACjC,SAAS,IAAK,oBAAmB;AAAA,MACrC,oBAAmB;AAGxB,QAAM,UAAU,IAAI,cAAc;AAClC,QAAM,aAAa,cAAc;AACjC,MAAI;AACJ,MAAI,aAAa,KAAK;AACpB,yBAAqB;AAAA,EACvB,WAAW,UAAU,YAAY,MAAM;AACrC,yBAAqB;AAAA,EACvB,WAAW,UAAU,YAAY,MAAM;AACrC,yBAAqB;AAAA,EACvB,OAAO;AACL,yBAAqB;AAAA,EACvB;AAGA,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,EACF;AACF;AAKA,SAAS,aACP,MACA,MACA,OACA,QACA,WACA,SACQ;AAER,MAAI,SAAS,SAAS,SAAS,gBAAgB,UAAU,KAAK;AAC5D,WAAO;AAAA,EACT;AAGA,MAAI,SAAS,YAAY,SAAS,cAAc;AAC9C,WAAO;AAAA,EACT;AAGA,MAAI,SAAS,WAAW,SAAS,gBAAgB,SAAS,KAAK;AAC7D,WAAO;AAAA,EACT;AAGA,MAAI,QAAQ,OAAO,SAAS,IAAI;AAC9B,WAAO;AAAA,EACT;AAGA,MAAI,QAAQ,YAAY,OAAO,SAAS,IAAI;AAC1C,WAAO;AAAA,EACT;AAGA,MAAI,QAAQ,OAAO,QAAQ,OAAO,SAAS,OAAO,SAAS,KAAK;AAC9D,WAAO;AAAA,EACT;AAGA,MAAI,QAAQ,OAAO,SAAS,OAAO,QAAQ,YAAY,KAAK;AAC1D,WAAO;AAAA,EACT;AAEA,SAAO,kBAAkB,OAAO;AAClC;;;ACpRA,OAAO,WAAW;AAMX,SAAS,oBAAoB,QAAyB;AAC3D,QAAM,EAAE,MAAM,SAAS,QAAQ,IAAI;AAEnC,UAAQ,IAAI,EAAE;AACd,UAAQ,IAAI,MAAM,KAAK,iBAAiB,KAAK,SAAS,EAAE,CAAC;AACzD,UAAQ,IAAI,IAAI,OAAO,EAAE,CAAC;AAC1B,UAAQ,IAAI,EAAE;AACd,UAAQ;AAAA,IACN,cAAc,MAAM,KAAK,KAAK,SAAS,CAAC,SAAS,MAAM,KAAK,KAAK,QAAQ,CAAC;AAAA,EAC5E;AACA,UAAQ,IAAI,EAAE;AAGd,QAAM,gBAAgB,oBAAI,IAA4B;AACtD,aAAW,UAAU,SAAS;AAC5B,UAAM,MAAM,OAAO,KAAK;AACxB,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,oBAAc,IAAI,KAAK,CAAC,CAAC;AAAA,IAC3B;AACA,kBAAc,IAAI,GAAG,EAAG,KAAK,MAAM;AAAA,EACrC;AAEA,aAAW,CAAC,UAAU,WAAW,KAAK,eAAe;AACnD,UAAM,WAAW,YAAY,CAAC,EAAE,KAAK;AACrC,YAAQ,IAAI,WAAW,MAAM,KAAK,QAAQ,CAAC,KAAK,QAAQ,GAAG;AAE3D,eAAW,UAAU,aAAa;AAChC,YAAM,UAAU,GAAG,OAAO,SAAS,KAAK,YAAY,CAAC,KAAK,OAAO,SAAS,KAAK,IAAI,OAAO,SAAS,MAAM;AAEzG,UAAI,OAAO,WAAW,SAAS;AAC7B,gBAAQ;AAAA,UACN,OAAO,OAAO,KAAK,MAAM,OAAO,cAAS,CAAC,KAAK,OAAO,SAAS,eAAe;AAAA,QAChF;AACA;AAAA,MACF;AAEA,YAAM,UAAU,SAAS,OAAO,WAAW,eAAe,QAAQ,CAAC,CAAC;AAEpE,UAAI,OAAO,WAAW,QAAQ;AAC5B,gBAAQ;AAAA,UACN,OAAO,OAAO,KAAK,MAAM,MAAM,aAAQ,CAAC,KAAK,MAAM,IAAI,OAAO,CAAC;AAAA,QACjE;AAAA,MACF,OAAO;AACL,cAAM,eAAe,eAAe,OAAO,WAAW,SAAS;AAC/D,gBAAQ;AAAA,UACN,OAAO,OAAO,KAAK,MAAM,IAAI,aAAQ,CAAC,KAAK,MAAM,IAAI,OAAO,CAAC,KAAK,MAAM,IAAI,YAAY,CAAC;AAAA,QAC3F;AAGA,mBAAW,UAAU,OAAO,YAAY,MAAM,GAAG,CAAC,GAAG;AACnD,gBAAM,EAAE,aAAa,IAAI,cAAc,GAAG,IAAI;AAC9C,kBAAQ;AAAA,YACN,MAAM;AAAA,cACJ,uBAAkB,OAAO,EAAE,KAAK,GAAG,KAAK,IAAI,GAAG,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,gBAAgB;AAAA,YACtG;AAAA,UACF;AAAA,QACF;AACA,YAAI,OAAO,YAAY,SAAS,GAAG;AACjC,kBAAQ;AAAA,YACN,MAAM;AAAA,cACJ,uBAAkB,OAAO,YAAY,SAAS,CAAC;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,YAAQ,IAAI,EAAE;AAAA,EAChB;AAGA,QAAM,cACJ,QAAQ,kBAAkB,SAAS,MAAM,QAAQ,MAAM;AACzD,UAAQ;AAAA,IACN,YAAY,MAAM,MAAM,GAAG,QAAQ,MAAM,SAAS,CAAC,KAAK,QAAQ,SAAS,IAAI,MAAM,IAAI,GAAG,QAAQ,MAAM,SAAS,IAAI,GAAG,QAAQ,MAAM,SAAS,GAAG,QAAQ,UAAU,IAAI,KAAK,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,CAAC,KAAK,EAAE,MAAM,QAAQ,UAAU;AAAA,EACxP;AACA,UAAQ,IAAI,YAAY,YAAY,QAAQ,cAAc,YAAY,CAAC,CAAC,EAAE;AAC1E,UAAQ,IAAI,cAAc,KAAK,WAAW,KAAM,QAAQ,CAAC,CAAC,GAAG;AAC7D,UAAQ,IAAI,EAAE;AAChB;;;ACrFA,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAMrB,eAAsB,gBACpB,QACA,QACiB;AACjB,QAAM,WAAW,KAAK,QAAQ,aAAa;AAC3C,QAAM,UAAU,UAAU,KAAK,UAAU,QAAQ,MAAM,CAAC,GAAG,OAAO;AAClE,SAAO;AACT;;;ACdA,SAAS,aAAAC,kBAAiB;AAC1B,SAAS,QAAAC,aAAY;;;ACDrB;;;ACAA,IAAAC,kBAAA;;;AFUA,eAAsB,gBACpB,QACA,QACiB;AACjB,QAAM,OAAO,aAAa,MAAM;AAChC,QAAM,WAAWC,MAAK,QAAQ,aAAa;AAC3C,QAAMC,WAAU,UAAU,MAAM,OAAO;AACvC,SAAO;AACT;AAEA,SAAS,aAAa,QAA2B;AAC/C,QAAM,EAAE,MAAM,SAAS,QAAQ,IAAI;AAEnC,QAAM,cAAc,QAAQ,IAAI,CAAC,MAAM,mBAAmB,CAAC,CAAC,EAAE,KAAK,IAAI;AAEvE,QAAM,aACJ,QAAQ,SAAS,IACb,0BAA0B,QAAQ,MAAM,kBACxC;AAEN,SAAQ,eACL,QAAQ,WAAWC,eAAsB,EACzC,QAAQ,sBAAsB,KAAK,SAAS,EAC5C,QAAQ,iBAAiB,KAAK,WAAW,KAAM,QAAQ,CAAC,CAAC,EACzD,QAAQ,kBAAkB,KAAK,SAAS,EACxC,QAAQ,iBAAiB,KAAK,QAAQ,EACtC,QAAQ,aAAa,OAAO,QAAQ,UAAU,CAAC,EAC/C,QAAQ,cAAc,OAAO,QAAQ,MAAM,CAAC,EAC5C,QAAQ,mBAAmB,UAAU,EACrC,QAAQ,eAAe,WAAW;AACvC;AAEA,SAAS,mBAAmB,QAA+B;AACzD,QAAM,EAAE,MAAM,UAAU,QAAQ,YAAY,aAAa,YAAY,IACnE;AACF,QAAM,UAAU,SAAS,KAAK,YAAY;AAE1C,QAAM,cACJ,YAAY,SAAS,IACjB,YACG,MAAM,GAAG,CAAC,EACV;AAAA,IACC,CAAC,MACC,8BAA8B,EAAE,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,EAAE,YAAY,MAAM,QAAQ,EAAE,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,YAAO,EAAE,aAAa,gBAAgB;AAAA,EACvK,EACC,KAAK,IAAI,KACX,YAAY,SAAS,IAClB,8BAA8B,YAAY,SAAS,CAAC,gBACpD,MACJ;AAEN,QAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKC,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA,sBAIlB,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,sBAIjB,YAAY,IAAI;AAAA;AAAA;AAAA;AAMpC,QAAM,oBACJ,WAAW,SACP,gEAAgE,UAAU,eAC1E;AAEN,SAAO;AAAA,uBACc,SAAS,IAAI;AAAA;AAAA,cAEtB,KAAK,IAAI,MAAM,OAAO;AAAA,6BACP,MAAM,KAAK,WAAW,UAAU,UAAU,GAAG,OAAO,YAAY,CAAC,IAAI,WAAW,eAAe,QAAQ,CAAC,CAAC,GAAG;AAAA;AAAA,QAEjI,iBAAiB;AAAA,QACjB,cAAc,0BAA0B,WAAW,WAAW,EAAE;AAAA;AAExE;;;ARvEA,IAAM,YAA4B,CAAC,MAAM,IAAI;AAM7C,eAAsB,OAAO,SAA8C;AACzE,QAAM,YAAY,KAAK,IAAI;AAG3B,QAAM,aAAY,oBAAI,KAAK,GAAE,YAAY,EAAE,QAAQ,SAAS,GAAG,EAAE,MAAM,GAAG,EAAE;AAC5E,QAAM,SAASC,MAAK,iBAAiB,SAAS;AAC9C,QAAM,iBAAiBA,MAAK,QAAQ,aAAa;AACjD,QAAM,MAAM,gBAAgB,EAAE,WAAW,KAAK,CAAC;AAE/C,QAAM,gBAAgB,IAAI,cAAc;AACxC,QAAM,UAAU,IAAI,yBAAyB,EAAE,MAAM;AAErD,MAAI;AACF,UAAM,cAAc,WAAW;AAG/B,YAAQ,OAAO,yBAAyBC,OAAM,KAAK,QAAQ,SAAS,CAAC;AACrE,UAAM,oBAAoB,MAAM,cAAc;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,IACV;AAGA,YAAQ,OAAO,yBAAyBA,OAAM,KAAK,QAAQ,QAAQ,CAAC;AACpE,UAAM,mBAAmB,MAAM,cAAc;AAAA,MAC3C,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,YAAQ,OAAO;AAGf,UAAM,UAA2B,CAAC;AAElC,eAAW,cAAc,mBAAmB;AAC1C,YAAM,YAAY,iBAAiB;AAAA,QACjC,CAAC,MACC,EAAE,aAAa,WAAW,YAC1B,EAAE,iBAAiB,WAAW;AAAA,MAClC;AAEA,UAAI,CAAC,WAAW;AACd,gBAAQ;AAAA,UACN;AAAA,YACE,WAAW;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AAEA,UAAI;AACF,cAAM,aAAa;AAAA,UACjB,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AACA,cAAM,cAAc,WAAW,SAC3B,CAAC,IACD,kBAAkB,WAAW,SAAS;AAG1C,cAAM,aAAa,GAAG,WAAW,QAAQ,KAAK,WAAW,YAAY;AACrE,cAAM,aAAaD,MAAK,eAAe,GAAG,UAAU,cAAc;AAClE,cAAM,YAAYA,MAAK,eAAe,GAAG,UAAU,aAAa;AAChE,cAAM,WAAWA,MAAK,eAAe,GAAG,UAAU,YAAY;AAE9D,cAAME,WAAUF,MAAK,QAAQ,UAAU,GAAG,WAAW,MAAM;AAC3D,cAAME,WAAUF,MAAK,QAAQ,SAAS,GAAG,UAAU,MAAM;AACzD,cAAME,WAAUF,MAAK,QAAQ,QAAQ,GAAG,WAAW,SAAS;AAE5D,cAAM,WACJ,WAAW,aAAa,MACpB,yCACA,WAAW,SAAS,QAAQ,OAAO,EAAE;AAC3C,cAAM,WAAW,sBAAsB,WAAW,YAAY;AAE9D,gBAAQ,KAAK;AAAA,UACX,MAAM;AAAA,YACJ,MAAM,WAAW;AAAA,YACjB,MAAM;AAAA,YACN,KAAK;AAAA,cACH,QAAQ,IAAI;AAAA,gBACV,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,EAAE,SAAS;AAAA,cACX,OAAO,IAAI,IAAI,WAAW,UAAU,QAAQ,QAAQ,EAAE,SAAS;AAAA,YACjE;AAAA,UACF;AAAA,UACA,UAAU;AAAA,YACR,MAAM,WAAW;AAAA,YACjB,GAAG;AAAA,UACL;AAAA,UACA,QAAQ,WAAW,SAAS,SAAS;AAAA,UACrC,YAAY;AAAA,YACV,gBAAgB,WAAW;AAAA,YAC3B,gBAAgB,WAAW;AAAA,YAC3B,aAAa,WAAW;AAAA,YACxB,WAAW,QAAQ;AAAA,YACnB,YAAY,WAAW;AAAA,UACzB;AAAA,UACA;AAAA,UACA,aAAa;AAAA,YACX,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,MAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,MACH,SAAS,OAAO;AACd,gBAAQ;AAAA,UACN;AAAA,YACE,WAAW;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AAAA,UACvD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,KAAK,IAAI,IAAI;AAC9B,UAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAC1D,UAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAC1D,UAAM,UAAU,QAAQ,OAAO,CAAC,MAAM,EAAE,WAAW,OAAO,EAAE;AAE5D,UAAM,SAAoB;AAAA,MACxB,SAAS;AAAA,MACT,MAAM;AAAA,QACJ;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB,UAAU,QAAQ;AAAA,QAClB;AAAA,QACA,SAAS,mBAAmB,OAAO;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAS,KAAK,UAAU,IAAI,SAAS;AAAA,MACtD;AAAA,MACA;AAAA,IACF;AAEA,YAAQ,KAAK;AAGb,wBAAoB,MAAM;AAE1B,UAAM,WAAW,MAAM,gBAAgB,QAAQ,MAAM;AACrD,YAAQ,IAAI,gBAAgBC,OAAM,IAAI,QAAQ,CAAC,EAAE;AAEjD,QAAI,QAAQ,MAAM;AAChB,YAAM,WAAW,MAAM,gBAAgB,QAAQ,MAAM;AACrD,cAAQ,IAAI,gBAAgBA,OAAM,IAAI,QAAQ,CAAC,EAAE;AAEjD,UAAI,QAAQ,MAAM;AAChB,cAAM,EAAE,KAAK,IAAI,MAAM,OAAO,eAAoB;AAClD,aAAK,SAAS,QAAQ,GAAG;AAAA,MAC3B;AAAA,IACF;AAEA,YAAQ,IAAI,gBAAgBA,OAAM,IAAI,MAAM,CAAC,EAAE;AAE/C,WAAO;AAAA,EACT,UAAE;AACA,UAAM,cAAc,QAAQ;AAAA,EAC9B;AACF;AAEA,SAAS,sBACP,MACmC;AACnC,SAAO,SAAS,OACZ,EAAE,GAAG,oBAAoB,IACzB,EAAE,GAAG,oBAAoB;AAC/B;AAEA,SAAS,kBACP,UACA,cACA,SACA,OACe;AACf,QAAM,WAAW,sBAAsB,YAAY;AACnD,QAAM,WACJ,aAAa,MAAM,yCAAW,SAAS,QAAQ,OAAO,EAAE;AAC1D,SAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,QACH,QAAQ,IAAI,IAAI,UAAU,QAAQ,SAAS,EAAE,SAAS;AAAA,QACtD,OAAO,IAAI,IAAI,UAAU,QAAQ,QAAQ,EAAE,SAAS;AAAA,MACtD;AAAA,IACF;AAAA,IACA,UAAU,EAAE,MAAM,cAAc,GAAG,SAAS;AAAA,IAC5C,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW,QAAQ;AAAA,MACnB,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,GAAG,aAAa,EAAE;AAAA,IACrE;AAAA,IACA,aAAa,CAAC;AAAA,IACd,aAAa,EAAE,QAAQ,IAAI,OAAO,IAAI,MAAM,GAAG;AAAA,IAC/C;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,SAAkC;AAC5D,QAAM,QAAQ,CAAC,yBAAyB;AACxC,QAAM,KAAK,YAAY,QAAQ,SAAS,EAAE;AAC1C,QAAM,KAAK,WAAW,QAAQ,QAAQ,EAAE;AACxC,QAAM,KAAK,WAAW,QAAQ,MAAM,KAAK,GAAG,CAAC,EAAE;AAC/C,MAAI,QAAQ,cAAc,mBAAmB;AAC3C,UAAM,KAAK,eAAe,QAAQ,SAAS,EAAE;AAAA,EAC/C;AACA,MAAI,QAAQ,cAAc,SAAS,GAAG;AACpC,UAAM,KAAK,WAAW,QAAQ,cAAc,KAAK,GAAG,CAAC,GAAG;AAAA,EAC1D;AACA,SAAO,MAAM,KAAK,SAAS;AAC7B;;;AWlQA,SAAS,SAAAE,QAAO,aAAAC,YAAW,cAAc;AACzC,SAAS,QAAAC,aAAY;AACrB,OAAOC,YAAW;AAclB,eAAsB,QAAQ,SAAqC;AACjE,QAAM,SAASC,MAAK,QAAQ,IAAI,GAAG,WAAW,UAAU;AACxD,QAAM,UAAUA,MAAK,QAAQ,QAAQ;AAGrC,MAAI;AACF,UAAM,OAAO,OAAO;AACpB,YAAQ,IAAIC,OAAM,OAAO,UAAK,OAAO,iCAAiC,CAAC;AAAA,EACzE,QAAQ;AAAA,EAER;AAEA,QAAMC,OAAM,QAAQ,EAAE,WAAW,KAAK,CAAC;AAEvC,QAAM,UAAU,kBAAkB,OAAO;AACzC,QAAMC,WAAU,SAAS,SAAS,OAAO;AAEzC,UAAQ,IAAIF,OAAM,MAAM,kBAAa,OAAO,EAAE,CAAC;AAC/C,UAAQ,IAAI,EAAE;AACd,UAAQ;AAAA,IACN;AAAA,EACF;AACA,UAAQ;AAAA,IACN;AAAA,EACF;AACF;AAEA,SAAS,kBAAkB,SAA8B;AAEvD,QAAM,WAAW,CAAC,yBAAyB;AAC3C,WAAS,KAAK,cAAc,QAAQ,MAAM,EAAE;AAC5C,WAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AAC1C,WAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AAE1C,MAAI,QAAQ,cAAc,UAAa,QAAQ,cAAc,mBAAmB;AAC9E,aAAS,KAAK,iBAAiB,QAAQ,SAAS,EAAE;AAAA,EACpD;AAEA,MAAI,QAAQ,MAAM;AAChB,aAAS,KAAK,aAAa,QAAQ,IAAI,GAAG;AAAA,EAC5C;AAGA,WAAS,KAAK,aAAa;AAE3B,QAAM,UAAU,SAAS,KAAK,OAAO;AAErC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQP,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUT;;;Ab3EA,IAAM,UAAU,IAAI,QAAQ;AAE5B,QACG,KAAK,KAAK,EACV,YAAY,4DAA4D,EACxE,QAAQ,OAAO;AAElB,QACG,QAAQ,KAAK,EACb,YAAY,6BAA6B,EACzC,eAAe,kBAAkB,2BAA2B,EAC5D,eAAe,iBAAiB,gCAAgC,EAChE,eAAe,mBAAmB,yCAAyC,EAC3E,OAAO,mBAAmB,6BAA6B,KAAK,EAC5D,OAAO,sBAAsB,yCAAyC,EACtE,OAAO,aAAa,6BAA6B,EACjD,OAAO,aAAa,oCAAoC,EACxD,OAAO,OAAO,eAAe;AAC5B,MAAI;AACF,UAAM,SAAS,iBAAiB,MAAM,UAAU;AAEhD,UAAM,UAA2B;AAAA,MAC/B,WAAW,OAAO;AAAA,MAClB,UAAU,OAAO;AAAA,MACjB,OAAO,OAAO;AAAA,MACd,WAAW,OAAO;AAAA,MAClB,eAAe,OAAO;AAAA,MACtB,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,IACf;AAEA,UAAM,SAAS,MAAM,OAAO,OAAO;AACnC,YAAQ,KAAK,OAAO,QAAQ,kBAAkB,SAAS,IAAI,CAAC;AAAA,EAC9D,SAAS,OAAO;AACd,QAAI,iBAAiB,OAAO;AAC1B,cAAQ,MAAM,UAAU,MAAM,OAAO,EAAE;AAAA,IACzC,OAAO;AACL,cAAQ,MAAM,8BAA8B;AAAA,IAC9C;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AACF,CAAC;AAEH,QACG,QAAQ,MAAM,EACd;AAAA,EACC;AACF,EACC,eAAe,kBAAkB,2BAA2B,EAC5D,eAAe,iBAAiB,gCAAgC,EAChE,eAAe,mBAAmB,yCAAyC,EAC3E,OAAO,mBAAmB,6BAA6B,KAAK,EAC5D,OAAO,sBAAsB,yCAAyC,EACtE,OAAO,OAAO,YAAY;AACzB,MAAI;AACF,UAAM,QAAQ;AAAA,MACZ,QAAQ,QAAQ;AAAA,MAChB,OAAO,QAAQ;AAAA,MACf,OAAO,QAAQ;AAAA,MACf,WAAW,WAAW,QAAQ,SAAS;AAAA,MACvC,MAAM,QAAQ;AAAA,IAChB,CAAC;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iBAAiB,OAAO;AAC1B,cAAQ,MAAM,UAAU,MAAM,OAAO,EAAE;AAAA,IACzC;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AACF,CAAC;AAEH,QAAQ,MAAM;","names":["writeFile","join","chalk","PNG","writeFile","join","report_default","join","writeFile","report_default","join","chalk","writeFile","mkdir","writeFile","join","chalk","join","chalk","mkdir","writeFile"]}
+{"version":3,"sources":["../../bin/vrt.ts","../../src/schemas.ts","../../src/commands/run.ts","../../src/core/screenshotter.ts","../../src/constants.ts","../../src/core/stabilizer.ts","../../src/core/comparator.ts","../../src/reporters/terminal.ts","../../src/reporters/json.ts","../../src/reporters/html.ts","../../src/templates/report.html","../../src/templates/report.css","../../src/commands/init.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport { cliOptionsSchema } from \"../src/schemas.js\";\nimport { runVrt } from \"../src/commands/run.js\";\nimport { runInit } from \"../src/commands/init.js\";\nimport type { ResolvedOptions } from \"../src/types.js\";\n\nconst program = new Command();\n\nprogram\n  .name(\"vrt\")\n  .description(\"Visual Regression Testing CLI - Compare web pages visually\")\n  .version(\"0.1.0\");\n\nprogram\n  .command(\"run\")\n  .description(\"Run visual regression tests\")\n  .requiredOption(\"--before <url>\", \"Baseline URL (production)\")\n  .requiredOption(\"--after <url>\", \"Comparison URL (local/staging)\")\n  .requiredOption(\"--paths <paths>\", \"Page paths to compare (comma-separated)\")\n  .option(\"--threshold <n>\", \"Diff tolerance percentage\", \"0.1\")\n  .option(\"--hide <selectors>\", \"CSS selectors to hide (comma-separated)\")\n  .option(\"--no-html\", \"Skip HTML report generation\")\n  .option(\"--no-open\", \"Do not open HTML report in browser\")\n  .action(async (rawOptions) => {\n    try {\n      const parsed = cliOptionsSchema.parse(rawOptions);\n\n      const options: ResolvedOptions = {\n        beforeUrl: parsed.before,\n        afterUrl: parsed.after,\n        paths: parsed.paths,\n        threshold: parsed.threshold,\n        hideSelectors: parsed.hide,\n        html: parsed.html,\n        open: parsed.open,\n      };\n\n      const report = await runVrt(options);\n      process.exit(report.summary.overallStatus === \"pass\" ? 0 : 1);\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(`Error: ${error.message}`);\n      } else {\n        console.error(\"An unexpected error occurred\");\n      }\n      process.exit(2);\n    }\n  });\n\nprogram\n  .command(\"init\")\n  .description(\n    \"Generate .claude/commands/vrt.md skill file for this repository\",\n  )\n  .requiredOption(\"--before <url>\", \"Baseline URL (production)\")\n  .requiredOption(\"--after <url>\", \"Comparison URL (local/staging)\")\n  .requiredOption(\"--paths <paths>\", \"Page paths to compare (comma-separated)\")\n  .option(\"--threshold <n>\", \"Diff tolerance percentage\", \"0.1\")\n  .option(\"--hide <selectors>\", \"CSS selectors to hide (comma-separated)\")\n  .action(async (options) => {\n    try {\n      await runInit({\n        before: options.before,\n        after: options.after,\n        paths: options.paths,\n        threshold: parseFloat(options.threshold),\n        hide: options.hide,\n      });\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(`Error: ${error.message}`);\n      }\n      process.exit(1);\n    }\n  });\n\nprogram.parse();\n","import { z } from \"zod\";\n\nexport const cliOptionsSchema = z.object({\n  before: z.string().url(\"--before must be a valid URL\"),\n  after: z.string().url(\"--after must be a valid URL\"),\n  paths: z.string().transform((val) => val.split(\",\").map((p) => p.trim())),\n  threshold: z.coerce.number().min(0).max(100).default(0.1),\n  hide: z\n    .string()\n    .optional()\n    .transform((val) => (val ? val.split(\",\").map((s) => s.trim()) : [])),\n  html: z.boolean().default(true),\n  open: z.boolean().default(true),\n});\n\nexport type CliOptions = z.input<typeof cliOptionsSchema>;\n","import { mkdir, writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport ora from \"ora\";\nimport chalk from \"chalk\";\nimport { Screenshotter } from \"../core/screenshotter.js\";\nimport { compareImages } from \"../core/comparator.js\";\nimport { printTerminalReport } from \"../reporters/terminal.js\";\nimport { writeJsonReport } from \"../reporters/json.js\";\nimport { writeHtmlReport } from \"../reporters/html.js\";\nimport {\n  DEFAULT_SP_VIEWPORT,\n  DEFAULT_PC_VIEWPORT,\n  DEFAULT_OUT_DIR,\n  DEFAULT_THRESHOLD,\n} from \"../constants.js\";\nimport type {\n  ResolvedOptions,\n  VrtReport,\n  VrtTestResult,\n  ViewportType,\n} from \"../types.js\";\n\nconst VIEWPORTS: ViewportType[] = [\"sp\", \"pc\"];\n\n/**\n * VRTのメイン実行コマンド。\n * スクリーンショット取得 → 比較 → レポート生成を一気に行う。\n */\nexport async function runVrt(options: ResolvedOptions): Promise<VrtReport> {\n  const startTime = Date.now();\n\n  // 出力ディレクトリを作成\n  const timestamp = new Date().toISOString().replace(/[:.]/g, \"-\").slice(0, 19);\n  const runDir = join(DEFAULT_OUT_DIR, timestamp);\n  const screenshotsDir = join(runDir, \"screenshots\");\n  await mkdir(screenshotsDir, { recursive: true });\n\n  const screenshotter = new Screenshotter();\n  const spinner = ora(\"Initializing browser...\").start();\n\n  try {\n    await screenshotter.initialize();\n\n    // Before スクリーンショット取得\n    spinner.text = `Taking screenshots of ${chalk.cyan(options.beforeUrl)}...`;\n    const beforeScreenshots = await screenshotter.captureAll(\n      options.beforeUrl,\n      options.paths,\n      VIEWPORTS,\n      options.hideSelectors,\n    );\n\n    // After スクリーンショット取得\n    spinner.text = `Taking screenshots of ${chalk.cyan(options.afterUrl)}...`;\n    const afterScreenshots = await screenshotter.captureAll(\n      options.afterUrl,\n      options.paths,\n      VIEWPORTS,\n      options.hideSelectors,\n    );\n\n    spinner.text = \"Comparing screenshots...\";\n\n    // 比較を実行\n    const results: VrtTestResult[] = [];\n\n    for (const beforeShot of beforeScreenshots) {\n      const afterShot = afterScreenshots.find(\n        (a) =>\n          a.pagePath === beforeShot.pagePath &&\n          a.viewportType === beforeShot.viewportType,\n      );\n\n      if (!afterShot) {\n        results.push(\n          createErrorResult(\n            beforeShot.pagePath,\n            beforeShot.viewportType,\n            options,\n            \"After screenshot not found\",\n          ),\n        );\n        continue;\n      }\n\n      try {\n        const comparison = compareImages(\n          beforeShot.buffer,\n          afterShot.buffer,\n          options.threshold,\n        );\n        // スクリーンショットを保存\n        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;\n        const beforePath = join(\"screenshots\", `${filePrefix}--before.png`);\n        const afterPath = join(\"screenshots\", `${filePrefix}--after.png`);\n        const diffPath = join(\"screenshots\", `${filePrefix}--diff.png`);\n\n        await writeFile(join(runDir, beforePath), beforeShot.buffer);\n        await writeFile(join(runDir, afterPath), afterShot.buffer);\n        await writeFile(join(runDir, diffPath), comparison.diffImage);\n\n        const pageName =\n          beforeShot.pagePath === \"/\"\n            ? \"トップページ\"\n            : beforeShot.pagePath.replace(/^\\//, \"\");\n        const viewport = getViewportDimensions(beforeShot.viewportType);\n\n        results.push({\n          page: {\n            path: beforeShot.pagePath,\n            name: pageName,\n            url: {\n              before: new URL(\n                beforeShot.pagePath,\n                options.beforeUrl,\n              ).toString(),\n              after: new URL(beforeShot.pagePath, options.afterUrl).toString(),\n            },\n          },\n          viewport: {\n            type: beforeShot.viewportType,\n            ...viewport,\n          },\n          status: comparison.passed ? \"pass\" : \"fail\",\n          comparison: {\n            diffPercentage: comparison.diffPercentage,\n            diffPixelCount: comparison.diffCount,\n            totalPixels: comparison.totalPixels,\n            threshold: options.threshold,\n            dimensions: comparison.dimensions,\n          },\n          screenshots: {\n            before: beforePath,\n            after: afterPath,\n            diff: diffPath,\n          },\n        });\n      } catch (error) {\n        results.push(\n          createErrorResult(\n            beforeShot.pagePath,\n            beforeShot.viewportType,\n            options,\n            error instanceof Error ? error.message : String(error),\n          ),\n        );\n      }\n    }\n\n    const duration = Date.now() - startTime;\n    const passed = results.filter((r) => r.status === \"pass\").length;\n    const failed = results.filter((r) => r.status === \"fail\").length;\n    const errored = results.filter((r) => r.status === \"error\").length;\n\n    const report: VrtReport = {\n      version: \"1.0\",\n      meta: {\n        timestamp,\n        beforeUrl: options.beforeUrl,\n        afterUrl: options.afterUrl,\n        duration,\n        command: buildCommandString(options),\n      },\n      summary: {\n        totalTests: results.length,\n        passed,\n        failed,\n        errored,\n        overallStatus: failed > 0 || errored > 0 ? \"fail\" : \"pass\",\n      },\n      results,\n    };\n\n    spinner.stop();\n\n    // レポート出力\n    printTerminalReport(report);\n\n    const jsonPath = await writeJsonReport(report, runDir);\n    console.log(`JSON report: ${chalk.dim(jsonPath)}`);\n\n    if (options.html) {\n      const htmlPath = await writeHtmlReport(report, runDir);\n      console.log(`HTML report: ${chalk.dim(htmlPath)}`);\n\n      if (options.open) {\n        const { exec } = await import(\"node:child_process\");\n        exec(`open \"${htmlPath}\"`);\n      }\n    }\n\n    console.log(`Output dir:  ${chalk.dim(runDir)}`);\n\n    return report;\n  } finally {\n    await screenshotter.cleanup();\n  }\n}\n\nfunction getViewportDimensions(\n  type: ViewportType,\n): { width: number; height: number } {\n  return type === \"sp\"\n    ? { ...DEFAULT_SP_VIEWPORT }\n    : { ...DEFAULT_PC_VIEWPORT };\n}\n\nfunction createErrorResult(\n  pagePath: string,\n  viewportType: ViewportType,\n  options: ResolvedOptions,\n  error: string,\n): VrtTestResult {\n  const viewport = getViewportDimensions(viewportType);\n  const pageName =\n    pagePath === \"/\" ? \"トップページ\" : pagePath.replace(/^\\//, \"\");\n  return {\n    page: {\n      path: pagePath,\n      name: pageName,\n      url: {\n        before: new URL(pagePath, options.beforeUrl).toString(),\n        after: new URL(pagePath, options.afterUrl).toString(),\n      },\n    },\n    viewport: { type: viewportType, ...viewport },\n    status: \"error\",\n    comparison: {\n      diffPercentage: 0,\n      diffPixelCount: 0,\n      totalPixels: 0,\n      threshold: options.threshold,\n      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 },\n    },\n    screenshots: { before: \"\", after: \"\", diff: \"\" },\n    error,\n  };\n}\n\nfunction buildCommandString(options: ResolvedOptions): string {\n  const parts = [\"npx web-corders-vrt run\"];\n  parts.push(`--before ${options.beforeUrl}`);\n  parts.push(`--after ${options.afterUrl}`);\n  parts.push(`--paths ${options.paths.join(\",\")}`);\n  if (options.threshold !== DEFAULT_THRESHOLD) {\n    parts.push(`--threshold ${options.threshold}`);\n  }\n  if (options.hideSelectors.length > 0) {\n    parts.push(`--hide \"${options.hideSelectors.join(\",\")}\"`);\n  }\n  return parts.join(\" \\\\\\n  \");\n}\n","import { chromium, type Browser, type BrowserContext } from \"playwright\";\nimport type { ScreenshotResult, ViewportType } from \"../types.js\";\nimport {\n  DEFAULT_SP_VIEWPORT,\n  DEFAULT_PC_VIEWPORT,\n  DEFAULT_DELAY,\n  DEFAULT_CONCURRENCY,\n  SP_USER_AGENT,\n  BLOCKED_DOMAINS,\n} from \"../constants.js\";\nimport { stabilizePage, getDateMockScript } from \"./stabilizer.js\";\n\nexport class Screenshotter {\n  private browser: Browser | null = null;\n\n  async initialize(): Promise<void> {\n    this.browser = await chromium.launch();\n  }\n\n  /**\n   * 指定URLのスクリーンショットを取得する。\n   */\n  async capture(\n    url: string,\n    pagePath: string,\n    viewportType: ViewportType,\n    hideSelectors: string[],\n  ): Promise<ScreenshotResult> {\n    if (!this.browser) {\n      throw new Error(\"Browser not initialized. Call initialize() first.\");\n    }\n\n    const viewport =\n      viewportType === \"sp\"\n        ? { ...DEFAULT_SP_VIEWPORT }\n        : { ...DEFAULT_PC_VIEWPORT };\n\n    const context: BrowserContext = await this.browser.newContext({\n      viewport,\n      deviceScaleFactor: viewportType === \"sp\" ? 2 : 1,\n      userAgent: viewportType === \"sp\" ? SP_USER_AGENT : undefined,\n    });\n\n    const page = await context.newPage();\n\n    // 日付をモック\n    await page.addInitScript(getDateMockScript());\n\n    // 広告・計測系リクエストをブロック\n    await page.route(\"**/*\", (route) => {\n      const reqUrl = route.request().url();\n      const shouldBlock = BLOCKED_DOMAINS.some((domain) =>\n        reqUrl.includes(domain),\n      );\n      if (shouldBlock) {\n        return route.abort();\n      }\n      return route.continue();\n    });\n\n    // ページにアクセス\n    await page.goto(url, { waitUntil: \"load\", timeout: 60000 });\n\n    // ページの安定化\n    await stabilizePage(page, {\n      hideSelectors,\n      delay: DEFAULT_DELAY,\n    });\n\n    // スクリーンショット取得\n    const buffer = await page.screenshot({\n      fullPage: true,\n      type: \"png\",\n    });\n\n    // 画像サイズを取得（PNGヘッダから読む）\n    const width = buffer.readUInt32BE(16);\n    const height = buffer.readUInt32BE(20);\n\n    await context.close();\n\n    // パスからページ名を生成\n    const pageName =\n      pagePath === \"/\"\n        ? \"top\"\n        : pagePath.replace(/^\\//, \"\").replace(/\\//g, \"-\");\n\n    return {\n      pagePath,\n      pageName,\n      viewportType,\n      buffer: Buffer.from(buffer),\n      width,\n      height,\n    };\n  }\n\n  /**\n   * 複数のページ・ビューポートのスクリーンショットを並行で取得する。\n   */\n  async captureAll(\n    baseUrl: string,\n    paths: string[],\n    viewports: ViewportType[],\n    hideSelectors: string[],\n  ): Promise<ScreenshotResult[]> {\n    const tasks: Array<{ url: string; path: string; viewport: ViewportType }> =\n      [];\n\n    for (const pagePath of paths) {\n      const url = new URL(pagePath, baseUrl).toString();\n      for (const viewport of viewports) {\n        tasks.push({ url, path: pagePath, viewport });\n      }\n    }\n\n    // 並行実行制御\n    const results: ScreenshotResult[] = [];\n\n    for (let i = 0; i < tasks.length; i += DEFAULT_CONCURRENCY) {\n      const batch = tasks.slice(i, i + DEFAULT_CONCURRENCY);\n      const batchResults = await Promise.all(\n        batch.map((task) =>\n          this.capture(task.url, task.path, task.viewport, hideSelectors),\n        ),\n      );\n      results.push(...batchResults);\n    }\n\n    return results;\n  }\n\n  async cleanup(): Promise<void> {\n    await this.browser?.close();\n    this.browser = null;\n  }\n}\n","export const DEFAULT_SP_VIEWPORT = { width: 375, height: 812 } as const;\nexport const DEFAULT_PC_VIEWPORT = { width: 1440, height: 900 } as const;\n\nexport const DEFAULT_THRESHOLD = 0.1;\nexport const DEFAULT_DELAY = 1000;\nexport const DEFAULT_CONCURRENCY = 3;\nexport const DEFAULT_OUT_DIR = \"./vrt-results\";\n\nexport const SP_USER_AGENT =\n  \"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1\";\n\n/** VRTに不要な広告・計測系ドメイン（常にブロック） */\nexport const BLOCKED_DOMAINS = [\n  \"googletagmanager.com\",\n  \"google-analytics.com\",\n  \"googleadservices.com\",\n  \"googlesyndication.com\",\n  \"doubleclick.net\",\n  \"facebook.net\",\n  \"fbcdn.net\",\n  \"analytics.yahoo.co.jp\",\n  \"clarity.ms\",\n  \"hotjar.com\",\n  \"newrelic.com\",\n  \"sentry.io\",\n  \"datadoghq.com\",\n];\n\n/** VRTに不要な開発ツール系要素（常に非表示） */\nexport const DEFAULT_HIDE_SELECTORS = [\"#devtools-indicator\"];\n\n/** アニメーション・トランジションを無効化するCSS */\nexport const DISABLE_ANIMATIONS_CSS = `\n*, *::before, *::after {\n  animation-duration: 0s !important;\n  animation-delay: 0s !important;\n  transition-duration: 0s !important;\n  transition-delay: 0s !important;\n  scroll-behavior: auto !important;\n  caret-color: transparent !important;\n}\n`;\n","import type { Page } from \"playwright\";\nimport {\n  DISABLE_ANIMATIONS_CSS,\n  DEFAULT_HIDE_SELECTORS,\n} from \"../constants.js\";\n\nexport interface StabilizeOptions {\n  disableAnimations?: boolean;\n  hideSelectors?: string[];\n  delay?: number;\n}\n\n/**\n * ページの動的コンテンツを安定化させる。\n * アニメーション無効化、要素の非表示、日付のモックなどを行う。\n */\nexport async function stabilizePage(\n  page: Page,\n  options: StabilizeOptions,\n): Promise<void> {\n  // アニメーション・トランジションを無効化\n  if (options.disableAnimations !== false) {\n    await page.addStyleTag({ content: DISABLE_ANIMATIONS_CSS });\n  }\n\n  // 指定要素を非表示にする（visibility: hidden でレイアウトを崩さない）\n  const allHideSelectors = [\n    ...DEFAULT_HIDE_SELECTORS,\n    ...(options.hideSelectors ?? []),\n  ];\n  if (allHideSelectors.length > 0) {\n    const hideCSS = allHideSelectors\n      .map((s) => `${s} { visibility: hidden !important; }`)\n      .join(\"\\n\");\n    await page.addStyleTag({ content: hideCSS });\n  }\n\n  // 追加の待機時間（hydration完了を待つ）\n  if (options.delay && options.delay > 0) {\n    await page.waitForTimeout(options.delay);\n  }\n\n  // Shadow DOM内の要素はCSSが届かないのでJSで削除（Next.js devtools等）\n  if (allHideSelectors.length > 0) {\n    await page.evaluate(`\n      for (const sel of ${JSON.stringify(allHideSelectors)}) {\n        document.querySelectorAll(sel).forEach(el => el.remove());\n        document.querySelectorAll(\"*\").forEach(el => {\n          if (el.shadowRoot) {\n            el.shadowRoot.querySelectorAll(sel).forEach(inner => inner.remove());\n          }\n        });\n      }\n    `);\n  }\n}\n\n/**\n * 日付をモックして固定値にする初期化スクリプト。\n * page.goto() の前に page.addInitScript() で使う。\n */\nexport function getDateMockScript(): string {\n  return `\n    (() => {\n      const fixedDate = new Date('2025-01-01T00:00:00Z');\n      const OrigDate = Date;\n      const MockDate = class extends OrigDate {\n        constructor(...args) {\n          if (args.length === 0) {\n            super(fixedDate.getTime());\n          } else {\n            super(...args);\n          }\n        }\n        static now() { return fixedDate.getTime(); }\n      };\n      globalThis.Date = MockDate;\n    })();\n  `;\n}\n","import pixelmatch from \"pixelmatch\";\nimport { PNG } from \"pngjs\";\nimport type { ComparisonResult } from \"../types.js\";\n\n/**\n * 2つのPNG画像をピクセル単位で比較し、差分画像を生成する。\n * サイズが異なる場合は大きい方に合わせて白パディングで拡張する。\n */\nexport function compareImages(\n  beforeBuffer: Buffer,\n  afterBuffer: Buffer,\n  threshold: number = 0.1,\n): ComparisonResult {\n  const before = PNG.sync.read(beforeBuffer);\n  const after = PNG.sync.read(afterBuffer);\n\n  const width = Math.max(before.width, after.width);\n  const height = Math.max(before.height, after.height);\n\n  // サイズが異なる場合は正規化\n  const normalizedBefore = normalizeImage(before, width, height);\n  const normalizedAfter = normalizeImage(after, width, height);\n\n  const diff = new PNG({ width, height });\n\n  const diffCount = pixelmatch(\n    normalizedBefore.data,\n    normalizedAfter.data,\n    diff.data,\n    width,\n    height,\n    {\n      threshold: 0.1,\n      includeAA: false,\n      alpha: 0.1,\n      diffColor: [255, 0, 0],\n      diffColorAlt: [0, 200, 0],\n    },\n  );\n\n  const totalPixels = width * height;\n  const diffPercentage = (diffCount / totalPixels) * 100;\n\n  return {\n    diffCount,\n    totalPixels,\n    diffPercentage,\n    diffImage: PNG.sync.write(diff),\n    passed: diffPercentage <= threshold,\n    dimensions: {\n      width,\n      height,\n      beforeHeight: before.height,\n      afterHeight: after.height,\n    },\n  };\n}\n\n/**\n * 画像を指定サイズに正規化する。\n * 小さい場合は白（#ffffff）でパディングする。\n */\nfunction normalizeImage(\n  png: PNG,\n  targetWidth: number,\n  targetHeight: number,\n): PNG {\n  if (png.width === targetWidth && png.height === targetHeight) {\n    return png;\n  }\n\n  const normalized = new PNG({ width: targetWidth, height: targetHeight });\n\n  // 白で埋める\n  for (let i = 0; i < normalized.data.length; i += 4) {\n    normalized.data[i] = 255; // R\n    normalized.data[i + 1] = 255; // G\n    normalized.data[i + 2] = 255; // B\n    normalized.data[i + 3] = 255; // A\n  }\n\n  // 元の画像をコピー\n  for (let y = 0; y < png.height; y++) {\n    for (let x = 0; x < png.width; x++) {\n      const srcIdx = (y * png.width + x) * 4;\n      const dstIdx = (y * targetWidth + x) * 4;\n      normalized.data[dstIdx] = png.data[srcIdx];\n      normalized.data[dstIdx + 1] = png.data[srcIdx + 1];\n      normalized.data[dstIdx + 2] = png.data[srcIdx + 2];\n      normalized.data[dstIdx + 3] = png.data[srcIdx + 3];\n    }\n  }\n\n  return normalized;\n}\n","import chalk from \"chalk\";\nimport type { VrtReport } from \"../types.js\";\n\n/**\n * ターミナルにカラー出力でVRT結果を表示する。\n */\nexport function printTerminalReport(report: VrtReport): void {\n  const { meta, summary, results } = report;\n\n  console.log(\"\");\n  console.log(chalk.bold(`VRT Results - ${meta.timestamp}`));\n  console.log(\"=\".repeat(50));\n  console.log(\"\");\n  console.log(\n    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`,\n  );\n  console.log(\"\");\n\n  // ページごとにグループ化\n  const groupedByPage = new Map<string, typeof results>();\n  for (const result of results) {\n    const key = result.page.path;\n    if (!groupedByPage.has(key)) {\n      groupedByPage.set(key, []);\n    }\n    groupedByPage.get(key)!.push(result);\n  }\n\n  for (const [pagePath, pageResults] of groupedByPage) {\n    const pageName = pageResults[0].page.name;\n    console.log(`  Page: ${chalk.bold(pageName)} (${pagePath})`);\n\n    for (const result of pageResults) {\n      const vpLabel = `${result.viewport.type.toUpperCase()} (${result.viewport.width}x${result.viewport.height})`;\n\n      if (result.status === \"error\") {\n        console.log(\n          `    ${vpLabel}  ${chalk.yellow(\"⚠ ERROR\")}  ${result.error || \"Unknown error\"}`,\n        );\n        continue;\n      }\n\n      const diffStr = `diff: ${result.comparison.diffPercentage.toFixed(2)}%`;\n\n      if (result.status === \"pass\") {\n        console.log(\n          `    ${vpLabel}  ${chalk.green(\"✅ PASS\")}  ${chalk.dim(diffStr)}`,\n        );\n      } else {\n        const thresholdStr = `(threshold: ${result.comparison.threshold}%)`;\n        console.log(\n          `    ${vpLabel}  ${chalk.red(\"❌ FAIL\")}  ${chalk.red(diffStr)}  ${chalk.dim(thresholdStr)}`,\n        );\n\n      }\n    }\n\n    console.log(\"\");\n  }\n\n  // サマリー\n  const statusColor =\n    summary.overallStatus === \"pass\" ? chalk.green : chalk.red;\n  console.log(\n    `Summary: ${chalk.green(`${summary.passed} passed`)}, ${summary.failed > 0 ? chalk.red(`${summary.failed} failed`) : `${summary.failed} failed`}${summary.errored > 0 ? `, ${chalk.yellow(`${summary.errored} errored`)}` : \"\"} / ${summary.totalTests} total`,\n  );\n  console.log(`Overall: ${statusColor(summary.overallStatus.toUpperCase())}`);\n  console.log(`Duration: ${(meta.duration / 1000).toFixed(1)}s`);\n  console.log(\"\");\n}\n","import { writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { VrtReport } from \"../types.js\";\n\n/**\n * VrtReport を JSON ファイルとして保存する。\n */\nexport async function writeJsonReport(\n  report: VrtReport,\n  outDir: string,\n): Promise<string> {\n  const filePath = join(outDir, \"report.json\");\n  await writeFile(filePath, JSON.stringify(report, null, 2), \"utf-8\");\n  return filePath;\n}\n","import { writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport type { VrtReport, VrtTestResult } from \"../types.js\";\nimport reportTemplate from \"../templates/report.html\";\nimport reportStyles from \"../templates/report.css\";\n\n/**\n * 単一HTMLファイルのレポートを生成する。\n * 外部依存なし、CSSはインライン。\n */\nexport async function writeHtmlReport(\n  report: VrtReport,\n  outDir: string,\n): Promise<string> {\n  const html = generateHtml(report);\n  const filePath = join(outDir, \"report.html\");\n  await writeFile(filePath, html, \"utf-8\");\n  return filePath;\n}\n\nfunction generateHtml(report: VrtReport): string {\n  const { meta, summary, results } = report;\n\n  const resultCards = results.map((r) => generateResultCard(r)).join(\"\\n\");\n\n  const failedStat =\n    summary.failed > 0\n      ? `<div class=\"stat fail\">${summary.failed} Failed</div>`\n      : \"\";\n\n  return (reportTemplate as string)\n    .replace(\"{{CSS}}\", reportStyles as string)\n    .replace(/\\{\\{TIMESTAMP\\}\\}/g, meta.timestamp)\n    .replace(\"{{DURATION}}\", (meta.duration / 1000).toFixed(1))\n    .replace(\"{{BEFORE_URL}}\", meta.beforeUrl)\n    .replace(\"{{AFTER_URL}}\", meta.afterUrl)\n    .replace(\"{{TOTAL}}\", String(summary.totalTests))\n    .replace(\"{{PASSED}}\", String(summary.passed))\n    .replace(\"{{FAILED_STAT}}\", failedStat)\n    .replace(\"{{RESULTS}}\", resultCards);\n}\n\nfunction generateResultCard(result: VrtTestResult): string {\n  const { page, viewport, status, comparison, screenshots } = result;\n  const vpLabel = viewport.type.toUpperCase();\n\n  const imagesHtml = `\n    <div class=\"comparison\">\n      <div class=\"images\">\n        <div class=\"img-container img-before\">\n          <div class=\"label\">Before</div>\n          <img src=\"${screenshots.before}\" alt=\"Before\" loading=\"lazy\">\n        </div>\n        <div class=\"img-container img-after\">\n          <div class=\"label\">After</div>\n          <img src=\"${screenshots.after}\" alt=\"After\" loading=\"lazy\">\n        </div>\n        <div class=\"img-container img-diff\">\n          <div class=\"label\">Diff</div>\n          <img src=\"${screenshots.diff}\" alt=\"Diff\" loading=\"lazy\">\n        </div>\n      </div>\n    </div>`;\n\n  // Passしたテストはアコーディオンに格納\n  const screenshotSection =\n    status === \"pass\"\n      ? `<details class=\"screenshot-accordion\"><summary>Show</summary>${imagesHtml}</details>`\n      : imagesHtml;\n\n  return `\n    <div class=\"card ${viewport.type}\">\n      <div class=\"card-header\">\n        <h3>${page.path} - ${vpLabel}</h3>\n        <span class=\"badge ${status}\">${status === \"error\" ? \"ERROR\" : `${status.toUpperCase()} ${comparison.diffPercentage.toFixed(2)}%`}</span>\n      </div>\n      ${screenshotSection}\n    </div>`;\n}\n","<!doctype html>\n<html lang=\"ja\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>VRT Report - {{TIMESTAMP}}</title>\n    <style>\n      {{CSS}}\n    </style>\n  </head>\n  <body>\n    <div class=\"header\">\n      <h1>web-corders-vrt</h1>\n      <div class=\"meta\">\n        {{TIMESTAMP}} | Duration: {{DURATION}}s<br />\n        Before: {{BEFORE_URL}} → After: {{AFTER_URL}}\n      </div>\n    </div>\n    <div class=\"summary\">\n      <div class=\"stat total\">{{TOTAL}} Total</div>\n      <div class=\"stat pass\">{{PASSED}} Passed</div>\n      {{FAILED_STAT}}\n    </div>\n    <div class=\"results\">\n      {{RESULTS}}\n    </div>\n  </body>\n</html>\n","* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  background: #f5f5f5;\n  color: #333;\n}\n\n.header {\n  background: #1a1a2e;\n  color: white;\n  padding: 24px 32px;\n  text-align: center;\n}\n\n.header h1 {\n  font-size: 20px;\n  margin-bottom: 8px;\n}\n\n.header .meta {\n  font-size: 13px;\n  color: #aaa;\n}\n\n.summary {\n  display: flex;\n  gap: 16px;\n  padding: 16px 32px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.summary .stat {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.stat.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.stat.total {\n  background: #e3f2fd;\n  color: #1565c0;\n}\n\n.results {\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.card-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.card-header h3 {\n  font-size: 15px;\n}\n\n.badge {\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.badge.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.badge.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.badge.error {\n  background: #fff3e0;\n  color: #e65100;\n}\n\n.comparison {\n  padding: 16px 20px;\n}\n\n.images {\n  display: flex;\n  gap: 8px;\n}\n\n.card.sp .img-container {\n  flex: none;\n  width: 375px;\n}\n\n.card.sp .img-container img {\n  width: 375px;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.card.pc .img-container {\n  flex: 1;\n  min-width: 0;\n}\n\n.card.pc .img-container img {\n  width: 100%;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.img-container .label {\n  font-size: 11px;\n  color: #888;\n  margin-bottom: 4px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.diff-info {\n  padding: 8px 20px 16px;\n  font-size: 13px;\n  color: #666;\n}\n\n.diff-info .region {\n  margin: 4px 0;\n  padding-left: 16px;\n}\n\n/* Accordion for passed tests */\n.screenshot-accordion {\n  border-top: 1px solid #eee;\n}\n\n.screenshot-accordion summary {\n  padding: 12px 20px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 600;\n  color: #666;\n  user-select: none;\n}\n\n.screenshot-accordion summary:hover {\n  background: #fafafa;\n}\n","import { mkdir, writeFile, access } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport chalk from \"chalk\";\nimport { DEFAULT_THRESHOLD } from \"../constants.js\";\n\nexport interface InitOptions {\n  before: string;\n  after: string;\n  paths: string;\n  threshold?: number;\n  hide?: string;\n}\n\n/**\n * .claude/commands/vrt.md スキルファイルを生成する。\n */\nexport async function runInit(options: InitOptions): Promise<void> {\n  const outDir = join(process.cwd(), \".claude\", \"commands\");\n  const outFile = join(outDir, \"vrt.md\");\n\n  // 既存ファイルの確認\n  try {\n    await access(outFile);\n    console.log(chalk.yellow(`⚠ ${outFile} already exists. Overwriting...`));\n  } catch {\n    // ファイルが存在しない場合は正常\n  }\n\n  await mkdir(outDir, { recursive: true });\n\n  const content = generateSkillFile(options);\n  await writeFile(outFile, content, \"utf-8\");\n\n  console.log(chalk.green(`✅ Created ${outFile}`));\n  console.log(\"\");\n  console.log(\n    \"This skill file allows Claude Code to run VRT with the /vrt command.\",\n  );\n  console.log(\n    \"Review and customize the file, then commit it to your repository.\",\n  );\n}\n\nfunction generateSkillFile(options: InitOptions): string {\n  // CLI コマンドを構築\n  const cmdParts = [\"npx web-corders-vrt run\"];\n  cmdParts.push(`  --before ${options.before}`);\n  cmdParts.push(`  --after ${options.after}`);\n  cmdParts.push(`  --paths ${options.paths}`);\n\n  if (options.threshold !== undefined && options.threshold !== DEFAULT_THRESHOLD) {\n    cmdParts.push(`  --threshold ${options.threshold}`);\n  }\n\n  if (options.hide) {\n    cmdParts.push(`  --hide \"${options.hide}\"`);\n  }\n\n  // --no-open をデフォルトでつける（Claude実行時にブラウザを開かないため）\n  cmdParts.push(\"  --no-open\");\n\n  const command = cmdParts.join(\" \\\\\\n\");\n\n  return `VRTを実行して本番環境とのビジュアル差分を検出する。\n\n## 手順\n\n1. 開発サーバーが起動していなければ \\`npm run dev\\` で起動して待機する\n2. 以下のコマンドでVRTを実行:\n\n\\`\\`\\`bash\n${command}\n\\`\\`\\`\n\n3. \\`./vrt-results/\\` 内の最新ディレクトリにある \\`report.json\\` を読む\n4. \\`status: \"fail\"\\` のテスト結果に注目する\n5. 該当するdiff画像（\\`*--diff.png\\`）をReadツールで視覚的に確認する\n6. diff画像から修正すべきCSSやHTMLの場所を特定する\n7. ソースコードを修正する\n8. 再度VRTを実行して修正が反映されたことを確認する\n`;\n}\n"],"mappings":"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","names":["writeFile","join","chalk","writeFile","join","report_default","join","writeFile","report_default","join","chalk","writeFile","mkdir","writeFile","join","chalk","join","chalk","mkdir","writeFile"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-corders-vrt",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Visual Regression Testing CLI tool for comparing web pages",
   "type": "module",
   "bin": {

package/src/commands/init.ts

@@ -75,7 +75,7 @@ ${command}
 3. \`./vrt-results/\` 内の最新ディレクトリにある \`report.json\` を読む
 4. \`status: "fail"\` のテスト結果に注目する
 5. 該当するdiff画像（\`*--diff.png\`）をReadツールで視覚的に確認する
-6. \`diffRegions\` の \`locationHint\` から修正すべきCSSやHTMLの場所を特定する
+6. diff画像から修正すべきCSSやHTMLの場所を特定する
 7. ソースコードを修正する
 8. 再度VRTを実行して修正が反映されたことを確認する
 `;

package/src/commands/run.ts

@@ -4,7 +4,6 @@ import ora from "ora";
 import chalk from "chalk";
 import { Screenshotter } from "../core/screenshotter.js";
 import { compareImages } from "../core/comparator.js";
-import { detectDiffRegions } from "../core/region-detector.js";
 import { printTerminalReport } from "../reporters/terminal.js";
 import { writeJsonReport } from "../reporters/json.js";
 import { writeHtmlReport } from "../reporters/html.js";
@@ -90,10 +89,6 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
           afterShot.buffer,
           options.threshold,
         );
-        const diffRegions = comparison.passed
-          ? []
-          : detectDiffRegions(comparison.diffImage);
-
         // スクリーンショットを保存
         const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
         const beforePath = join("screenshots", `${filePrefix}--before.png`);
@@ -134,7 +129,6 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
             threshold: options.threshold,
             dimensions: comparison.dimensions,
           },
-          diffRegions,
           screenshots: {
             before: beforePath,
             after: afterPath,
@@ -238,7 +232,6 @@ function createErrorResult(
       threshold: options.threshold,
       dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 },
     },
-    diffRegions: [],
     screenshots: { before: "", after: "", diff: "" },
     error,
   };

package/src/reporters/html.ts

@@ -41,24 +41,9 @@ function generateHtml(report: VrtReport): string {
 }
 
 function generateResultCard(result: VrtTestResult): string {
-  const { page, viewport, status, comparison, diffRegions, screenshots } =
-    result;
+  const { page, viewport, status, comparison, screenshots } = result;
   const vpLabel = viewport.type.toUpperCase();
 
-  const regionsHtml =
-    diffRegions.length > 0
-      ? diffRegions
-          .slice(0, 5)
-          .map(
-            (r) =>
-              `<div class="region">Region ${r.id}: ${r.boundingBox.width}x${r.boundingBox.height} at (${r.boundingBox.x}, ${r.boundingBox.y}) — ${r.locationHint.estimatedElement}</div>`,
-          )
-          .join("\n") +
-        (diffRegions.length > 5
-          ? `<div class="region">...and ${diffRegions.length - 5} more</div>`
-          : "")
-      : "";
-
   const imagesHtml = `
     <div class="comparison">
       <div class="images">
@@ -90,6 +75,5 @@ function generateResultCard(result: VrtTestResult): string {
         <span class="badge ${status}">${status === "error" ? "ERROR" : `${status.toUpperCase()} ${comparison.diffPercentage.toFixed(2)}%`}</span>
       </div>
       ${screenshotSection}
-      ${regionsHtml ? `<div class="diff-info">${regionsHtml}</div>` : ""}
     </div>`;
 }

package/src/reporters/terminal.ts

@@ -52,22 +52,6 @@ export function printTerminalReport(report: VrtReport): void {
           `    ${vpLabel}  ${chalk.red("❌ FAIL")}  ${chalk.red(diffStr)}  ${chalk.dim(thresholdStr)}`,
         );
 
-        // 差分領域の詳細
-        for (const region of result.diffRegions.slice(0, 5)) {
-          const { boundingBox: bb, locationHint: lh } = region;
-          console.log(
-            chalk.dim(
-              `      → Region ${region.id}: ${bb.width}x${bb.height} at (${bb.x}, ${bb.y}) - ${lh.estimatedElement}`,
-            ),
-          );
-        }
-        if (result.diffRegions.length > 5) {
-          console.log(
-            chalk.dim(
-              `      → ...and ${result.diffRegions.length - 5} more regions`,
-            ),
-          );
-        }
       }
     }
 

package/src/types.ts

@@ -46,7 +46,6 @@ export interface VrtTestResult {
       afterHeight: number;
     };
   };
-  diffRegions: VrtDiffRegion[];
   screenshots: {
     before: string;
     after: string;
@@ -55,30 +54,8 @@ export interface VrtTestResult {
   error?: string;
 }
 
-/** 差分が検出された領域 */
-export interface VrtDiffRegion {
-  id: number;
-  boundingBox: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-  diffPixelCount: number;
-  diffPercentageInRegion: number;
-  locationHint: {
-    verticalPosition: VerticalPosition;
-    horizontalPosition: HorizontalPosition;
-    fromTopPx: number;
-    fromLeftPx: number;
-    estimatedElement: string;
-  };
-}
-
 export type ViewportType = "sp" | "pc";
 export type TestStatus = "pass" | "fail" | "error";
-export type VerticalPosition = "top" | "upper" | "middle" | "lower" | "bottom";
-export type HorizontalPosition = "left" | "center" | "right" | "full-width";
 
 /** CLI実行時の解決済みオプション */
 export interface ResolvedOptions {

package/src/core/region-detector.ts

@@ -1,277 +0,0 @@
-import { PNG } from "pngjs";
-import type {
-  VrtDiffRegion,
-  VerticalPosition,
-  HorizontalPosition,
-} from "../types.js";
-
-export interface RegionDetectorOptions {
-  /** この面積(px)未満の領域は無視する */
-  minRegionSize?: number;
-  /** この距離(px)以下の差分ピクセルを同一領域としてマージする */
-  mergingDistance?: number;
-}
-
-/**
- * diff画像から差分領域を検出し、座標・位置ヒントを返す。
- * Connected Component Labeling + bounding box 方式。
- */
-export function detectDiffRegions(
-  diffImageBuffer: Buffer,
-  options: RegionDetectorOptions = {},
-): VrtDiffRegion[] {
-  const { minRegionSize = 10, mergingDistance = 50 } = options;
-
-  const png = PNG.sync.read(diffImageBuffer);
-  const { width, height, data } = png;
-
-  // 1. diff ピクセル（赤色）の座標を収集
-  const diffPixels: Array<{ x: number; y: number }> = [];
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const idx = (y * width + x) * 4;
-      const r = data[idx];
-      const g = data[idx + 1];
-      const b = data[idx + 2];
-      const a = data[idx + 3];
-
-      // pixelmatch の diffColor [255, 0, 0] または diffColorAlt [0, 200, 0] を検出
-      if (
-        a > 100 &&
-        ((r > 200 && g < 100 && b < 100) || (r < 100 && g > 150 && b < 100))
-      ) {
-        diffPixels.push({ x, y });
-      }
-    }
-  }
-
-  if (diffPixels.length === 0) {
-    return [];
-  }
-
-  // 2. グリッドベースのクラスタリング（高速化のため）
-  const clusters = clusterPixels(diffPixels, mergingDistance);
-
-  // 3. 各クラスタの bounding box を計算し、フィルタリング
-  const regions: VrtDiffRegion[] = clusters
-    .map((cluster, idx) => {
-      let minX = Infinity;
-      let maxX = -Infinity;
-      let minY = Infinity;
-      let maxY = -Infinity;
-      for (const p of cluster) {
-        if (p.x < minX) minX = p.x;
-        if (p.x > maxX) maxX = p.x;
-        if (p.y < minY) minY = p.y;
-        if (p.y > maxY) maxY = p.y;
-      }
-      const regionWidth = maxX - minX + 1;
-      const regionHeight = maxY - minY + 1;
-
-      return {
-        id: idx + 1,
-        boundingBox: {
-          x: minX,
-          y: minY,
-          width: regionWidth,
-          height: regionHeight,
-        },
-        diffPixelCount: cluster.length,
-        diffPercentageInRegion:
-          (cluster.length / (regionWidth * regionHeight)) * 100,
-        locationHint: estimatePosition(
-          minX,
-          minY,
-          regionWidth,
-          regionHeight,
-          width,
-          height,
-        ),
-      };
-    })
-    .filter((r) => r.diffPixelCount >= minRegionSize)
-    .sort((a, b) => b.diffPixelCount - a.diffPixelCount);
-
-  // IDを振り直す
-  return regions.map((r, i) => ({ ...r, id: i + 1 }));
-}
-
-/**
- * ピクセルをグリッドベースでクラスタリングする。
- * mergingDistance をセルサイズとしてグリッドに分割し、
- * 隣接セルのピクセルを同一クラスタとしてマージする。
- */
-function clusterPixels(
-  pixels: Array<{ x: number; y: number }>,
-  distance: number,
-): Array<Array<{ x: number; y: number }>> {
-  const cellSize = Math.max(distance, 1);
-  const grid = new Map<string, Array<{ x: number; y: number }>>();
-
-  // グリッドに割り当て
-  for (const p of pixels) {
-    const cellX = Math.floor(p.x / cellSize);
-    const cellY = Math.floor(p.y / cellSize);
-    const key = `${cellX},${cellY}`;
-    if (!grid.has(key)) {
-      grid.set(key, []);
-    }
-    grid.get(key)!.push(p);
-  }
-
-  // Union-Find でセルをクラスタリング
-  const cellKeys = Array.from(grid.keys());
-  const parent = new Map<string, string>();
-
-  function find(key: string): string {
-    if (!parent.has(key)) parent.set(key, key);
-    // 反復的にルートを探索
-    let root = key;
-    while (parent.get(root) !== root) {
-      root = parent.get(root)!;
-    }
-    // パス圧縮
-    let current = key;
-    while (current !== root) {
-      const next = parent.get(current)!;
-      parent.set(current, root);
-      current = next;
-    }
-    return root;
-  }
-
-  function union(a: string, b: string): void {
-    const ra = find(a);
-    const rb = find(b);
-    if (ra !== rb) parent.set(ra, rb);
-  }
-
-  // 隣接セルをマージ
-  for (const key of cellKeys) {
-    const [cx, cy] = key.split(",").map(Number);
-    for (let dx = -1; dx <= 1; dx++) {
-      for (let dy = -1; dy <= 1; dy++) {
-        if (dx === 0 && dy === 0) continue;
-        const neighborKey = `${cx + dx},${cy + dy}`;
-        if (grid.has(neighborKey)) {
-          union(key, neighborKey);
-        }
-      }
-    }
-  }
-
-  // クラスタごとにピクセルを集約
-  const clusters = new Map<string, Array<{ x: number; y: number }>>();
-  for (const key of cellKeys) {
-    const root = find(key);
-    if (!clusters.has(root)) {
-      clusters.set(root, []);
-    }
-    clusters.get(root)!.push(...grid.get(key)!);
-  }
-
-  return Array.from(clusters.values());
-}
-
-/**
- * 差分領域の位置から、CSSの修正箇所を推定するヒントを生成する。
- */
-function estimatePosition(
-  x: number,
-  y: number,
-  regionWidth: number,
-  regionHeight: number,
-  pageWidth: number,
-  pageHeight: number,
-): VrtDiffRegion["locationHint"] {
-  // 垂直位置の推定
-  const centerY = y + regionHeight / 2;
-  const yRatio = centerY / pageHeight;
-  let verticalPosition: VerticalPosition;
-  if (yRatio < 0.1) verticalPosition = "top";
-  else if (yRatio < 0.3) verticalPosition = "upper";
-  else if (yRatio < 0.7) verticalPosition = "middle";
-  else if (yRatio < 0.9) verticalPosition = "lower";
-  else verticalPosition = "bottom";
-
-  // 水平位置の推定
-  const centerX = x + regionWidth / 2;
-  const widthRatio = regionWidth / pageWidth;
-  let horizontalPosition: HorizontalPosition;
-  if (widthRatio > 0.8) {
-    horizontalPosition = "full-width";
-  } else if (centerX < pageWidth * 0.33) {
-    horizontalPosition = "left";
-  } else if (centerX > pageWidth * 0.67) {
-    horizontalPosition = "right";
-  } else {
-    horizontalPosition = "center";
-  }
-
-  // 要素の推定
-  const estimatedElement = guessElement(
-    verticalPosition,
-    horizontalPosition,
-    regionWidth,
-    regionHeight,
-    pageWidth,
-    y,
-  );
-
-  return {
-    verticalPosition,
-    horizontalPosition,
-    fromTopPx: y,
-    fromLeftPx: x,
-    estimatedElement,
-  };
-}
-
-/**
- * 位置とサイズから、可能性のあるUI要素を推測する。
- */
-function guessElement(
-  vPos: VerticalPosition,
-  hPos: HorizontalPosition,
-  width: number,
-  height: number,
-  pageWidth: number,
-  fromTop: number,
-): string {
-  // ページ最上部の全幅要素 → ヘッダー/ナビゲーション
-  if (vPos === "top" && hPos === "full-width" && fromTop < 100) {
-    return "Likely a header or navigation bar";
-  }
-
-  // ページ最下部の全幅要素 → フッター
-  if (vPos === "bottom" && hPos === "full-width") {
-    return "Likely a footer";
-  }
-
-  // 上部の大きな要素 → ヒーローセクション
-  if (vPos === "upper" && hPos === "full-width" && height > 200) {
-    return "Likely a hero section or banner";
-  }
-
-  // 小さなボタンサイズ
-  if (width < 200 && height < 60) {
-    return "Likely a button or small UI element";
-  }
-
-  // 横長の細い要素 → テキスト行
-  if (width > pageWidth * 0.5 && height < 40) {
-    return "Likely a text line or heading";
-  }
-
-  // カードサイズ
-  if (width > 200 && width < 500 && height > 100 && height < 400) {
-    return "Likely a card or content block";
-  }
-
-  // 画像サイズ
-  if (width > 100 && height > 100 && width < pageWidth * 0.8) {
-    return "Likely an image or media element";
-  }
-
-  return `UI element at ~${fromTop}px from top`;
-}

package/test/region-detector.test.ts

@@ -1,147 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { PNG } from "pngjs";
-import { detectDiffRegions } from "../src/core/region-detector.js";
-
-/**
- * pixelmatchが出力するような diff画像を手動で生成する。
- * 指定領域を赤 (255, 0, 0) にし、残りを半透明にする。
- */
-function createDiffImage(
-  width: number,
-  height: number,
-  regions: Array<{ x: number; y: number; w: number; h: number }>,
-): Buffer {
-  const png = new PNG({ width, height });
-
-  // 背景を半透明に
-  for (let i = 0; i < png.data.length; i += 4) {
-    png.data[i] = 0;
-    png.data[i + 1] = 0;
-    png.data[i + 2] = 0;
-    png.data[i + 3] = 25; // alpha 0.1 * 255 ≈ 25
-  }
-
-  // 差分領域を赤にする
-  for (const region of regions) {
-    for (let y = region.y; y < region.y + region.h && y < height; y++) {
-      for (let x = region.x; x < region.x + region.w && x < width; x++) {
-        const idx = (y * width + x) * 4;
-        png.data[idx] = 255; // R
-        png.data[idx + 1] = 0; // G
-        png.data[idx + 2] = 0; // B
-        png.data[idx + 3] = 255; // A
-      }
-    }
-  }
-
-  return PNG.sync.write(png);
-}
-
-describe("detectDiffRegions", () => {
-  it("差分がない画像からは領域を検出しない", () => {
-    const png = new PNG({ width: 100, height: 100 });
-    for (let i = 0; i < png.data.length; i += 4) {
-      png.data[i] = 0;
-      png.data[i + 1] = 0;
-      png.data[i + 2] = 0;
-      png.data[i + 3] = 25;
-    }
-    const buffer = PNG.sync.write(png);
-
-    const regions = detectDiffRegions(buffer);
-    expect(regions).toHaveLength(0);
-  });
-
-  it("単一の差分領域を正しく検出する", () => {
-    const diffImage = createDiffImage(200, 200, [
-      { x: 50, y: 50, w: 40, h: 30 },
-    ]);
-
-    const regions = detectDiffRegions(diffImage, { minRegionSize: 1 });
-
-    expect(regions.length).toBeGreaterThanOrEqual(1);
-    const region = regions[0];
-
-    // bounding box が概ね正しい
-    expect(region.boundingBox.x).toBeGreaterThanOrEqual(50);
-    expect(region.boundingBox.y).toBeGreaterThanOrEqual(50);
-    expect(region.boundingBox.x + region.boundingBox.width).toBeLessThanOrEqual(
-      100,
-    );
-    expect(
-      region.boundingBox.y + region.boundingBox.height,
-    ).toBeLessThanOrEqual(90);
-  });
-
-  it("離れた2つの差分領域を別々に検出する", () => {
-    const diffImage = createDiffImage(400, 400, [
-      { x: 10, y: 10, w: 30, h: 30 },
-      { x: 350, y: 350, w: 30, h: 30 },
-    ]);
-
-    const regions = detectDiffRegions(diffImage, {
-      minRegionSize: 1,
-      mergingDistance: 20, // 離れてるのでマージされない
-    });
-
-    expect(regions.length).toBe(2);
-  });
-
-  it("近い差分領域はマージされる", () => {
-    const diffImage = createDiffImage(200, 200, [
-      { x: 10, y: 10, w: 20, h: 20 },
-      { x: 40, y: 10, w: 20, h: 20 }, // 10px しか離れてない
-    ]);
-
-    const regions = detectDiffRegions(diffImage, {
-      minRegionSize: 1,
-      mergingDistance: 50, // 50px 以下はマージ
-    });
-
-    expect(regions.length).toBe(1);
-  });
-
-  it("locationHint が正しく設定される", () => {
-    // ページ上部にフル幅の差分
-    const diffImage = createDiffImage(1440, 900, [
-      { x: 0, y: 10, w: 1440, h: 60 },
-    ]);
-
-    const regions = detectDiffRegions(diffImage, { minRegionSize: 1 });
-
-    expect(regions.length).toBeGreaterThanOrEqual(1);
-    const hint = regions[0].locationHint;
-    expect(hint.verticalPosition).toBe("top");
-    expect(hint.horizontalPosition).toBe("full-width");
-    expect(hint.estimatedElement).toContain("header");
-  });
-
-  it("小さすぎる差分はminRegionSizeでフィルタされる", () => {
-    const diffImage = createDiffImage(200, 200, [
-      { x: 50, y: 50, w: 2, h: 2 }, // 4ピクセルしかない
-    ]);
-
-    const regions = detectDiffRegions(diffImage, { minRegionSize: 10 });
-    expect(regions).toHaveLength(0);
-  });
-
-  it("IDが大きい差分順に振られる", () => {
-    const diffImage = createDiffImage(400, 400, [
-      { x: 10, y: 10, w: 10, h: 10 }, // 100px
-      { x: 300, y: 300, w: 50, h: 50 }, // 2500px
-    ]);
-
-    const regions = detectDiffRegions(diffImage, {
-      minRegionSize: 1,
-      mergingDistance: 20,
-    });
-
-    expect(regions.length).toBe(2);
-    // 大きい差分が先（id=1）
-    expect(regions[0].diffPixelCount).toBeGreaterThan(
-      regions[1].diffPixelCount,
-    );
-    expect(regions[0].id).toBe(1);
-    expect(regions[1].id).toBe(2);
-  });
-});