npm - web-corders-vrt - Versions diffs - 0.1.4 → 0.1.5 - Mend

web-corders-vrt 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +35 -36
package/bin/vrt.ts +5 -15
package/dist/bin/vrt.js +57 -87
package/dist/bin/vrt.js.map +1 -1
package/package.json +1 -1
package/src/commands/init.ts +9 -50
package/src/commands/run.ts +30 -30
package/src/core/comparator.ts +7 -7
package/src/reporters/html.ts +4 -4
package/src/reporters/terminal.ts +1 -1
package/src/schemas.ts +1 -1
package/src/templates/SKILL-TEMPLATE.md +35 -0
package/src/templates/report.html +1 -1
package/src/templates/types.d.ts +4 -0
package/src/types.ts +6 -6
package/test/comparator.test.ts +5 -5
package/tsup.config.ts +1 -0

package/README.md CHANGED Viewed

@@ -2,28 +2,34 @@
 Webページのビジュアルリグレッションテスト (VRT) を行うCLIツール。
-本番環境と開発環境のスクリーンショットの差分を検出する。
+本番環境と開発/プレビュー環境のスクリーンショットの差分を検出する。
 テスト結果は人間向け（HTMLレポート + diff画像）とLLM/Claude向け（JSONレポート）の両方で出力される。
 ## セットアップ
-インストール不要。`npx` で直接実行できる。初回のみ Playwright のブラウザが必要:
+初回のみ Playwright のブラウザが必要:
 ```bash
 npx playwright install chromium
 ```
+`init` コマンドで、Claude Codeのスキルファイル (`.claude/skills/web-corders-vrt/SKILL.md`) を自動生成できる。
+```bash
+npx web-corders-vrt init --refDomain https://example.com
+```
 ## 基本的な使い方
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://production.com \
   --after http://localhost:3000 \
   --paths /,/about,/pricing
 ```
-- `--before` — 比較元URL（本番環境）
-- `--after` — 比較先URL（開発環境 / ステージング）
+- `--reference` — リファレンスのプロトコル+ドメイン（本番環境）
+- `--after` — 比較するプロトコル+ドメイン（開発 / プレビュー環境）
 - `--paths` — テスト対象のページパス（カンマ区切り）
 実行すると `./vrt-results/` 以下にタイムスタンプ付きのディレクトリが生成され、スクリーンショット・diff画像・レポートが保存される。
@@ -35,10 +41,10 @@ vrt-results/2026-02-28T10-00-00/
 ├── report.json          # JSON レポート（Claude/LLM向け）
 ├── report.html          # HTML レポート（人間向け・ブラウザで開く）
 └── screenshots/
-    ├── top--sp--before.png
+    ├── top--sp--reference.png
     ├── top--sp--after.png
     ├── top--sp--diff.png
-    ├── top--pc--before.png
+    ├── top--pc--reference.png
     ├── top--pc--after.png
     └── top--pc--diff.png
 ```
@@ -72,7 +78,7 @@ vrt-results/2026-02-28T10-00-00/
 | オプション           | デフォルト | 説明                                                                    |
 | -------------------- | ---------- | ----------------------------------------------------------------------- |
-| `--before <url>`     | （必須）   | 比較元URL（本番環境）                                                   |
+| `--reference <url>`  | （必須）   | リファレンスURL（本番環境）                                             |
 | `--after <url>`      | （必須）   | 比較先URL（開発環境 / ステージング）                                    |
 | `--paths <paths>`    | （必須）   | テスト対象のページパス（カンマ区切り）                                  |
 | `--threshold <n>`    | `0.1`      | 差分許容率（%）。これ以下の差分はPASS扱い                               |
@@ -82,57 +88,50 @@ vrt-results/2026-02-28T10-00-00/
 ビューポートはSP（375x812）とPC（1440x900）の2種類で固定。フルページスクリーンショットを取得し、結果は `./vrt-results/` に出力される。
+## Claude Code連携
+### スキルファイルの仕組み
+`init`で生成される `.claude/skills/web-corders-vrt/SKILL.md` には以下の手順が記述される:
+1. 開発サーバーを起動
+2. VRTコマンドを実行
+3. `report.json` を読んで差分を確認
+4. diff画像を視覚的に確認
+5. diff画像からCSS/HTMLの修正箇所を特定
+6. コードを修正
+7. 再度VRTを実行して確認
+以降はCaludeに「VRTして」とか言うだけで使ってくれる　はず。
 ## 実用的な例
 ### 動的要素を隠してテスト
-広告バナーやクッキー同意バーなど、毎回変わる要素を非表示にする:
+テスト対象外にしたい要素を非表示にする。
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --hide ".cookie-banner,.ad-slot,[data-testid='live-chat']"
 ```
+Next.jsツールバーはデフォルトで非表示。
 ### 差分許容率を緩めに設定
 フォントレンダリング差異などを無視したい場合:
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --threshold 1
 ```
-## Claude Code連携
-`vrt init` コマンドで、Claude Codeのスキルファイル (`.claude/commands/vrt.md`) を自動生成できる。
-```bash
-npx web-corders-vrt init \
-  --before https://example.com \
-  --after http://localhost:3000 \
-  --paths /,/about,/pricing
-```
-生成されたファイルをリポジトリにコミットすると、Claude Code上で `/vrt` コマンドを実行するだけで、VRTの実行 → 結果の読み取り → 差分箇所の特定 → コード修正 → 再テストまでを自律的に行えるようになる。
-### スキルファイルの仕組み
-生成される `.claude/commands/vrt.md` には以下の手順が記述される:
-1. 開発サーバーを起動
-2. VRTコマンドを実行
-3. `report.json` を読んで差分を確認
-4. diff画像を視覚的に確認
-5. diff画像からCSS/HTMLの修正箇所を特定
-6. コードを修正
-7. 再度VRTを実行して確認
 ## 広告・計測系スクリプトのブロック
 以下のドメインへのリクエストは自動的にブロックされる。見た目のテストに不要であり、ページ読み込み速度を改善するため。

package/bin/vrt.ts CHANGED Viewed

@@ -14,7 +14,7 @@ program
 program
   .command("run")
   .description("Run visual regression tests")
-  .requiredOption("--before <url>", "Baseline URL (production)")
+  .requiredOption("--reference <url>", "Reference URL (production)")
   .requiredOption("--after <url>", "Comparison URL (local/staging)")
   .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
   .option("--threshold <n>", "Diff tolerance percentage", "0.1")
@@ -26,7 +26,7 @@ program
       const parsed = cliOptionsSchema.parse(rawOptions);
       const options: ResolvedOptions = {
-        beforeUrl: parsed.before,
+        referenceUrl: parsed.reference,
         afterUrl: parsed.after,
         paths: parsed.paths,
         threshold: parsed.threshold,
@@ -50,22 +50,12 @@ program
 program
   .command("init")
   .description(
-    "Generate .claude/commands/vrt.md skill file for this repository",
+    "Generate .claude/skills/web-corders-vrt/SKILL.md for this repository",
   )
-  .requiredOption("--before <url>", "Baseline URL (production)")
-  .requiredOption("--after <url>", "Comparison URL (local/staging)")
-  .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
-  .option("--threshold <n>", "Diff tolerance percentage", "0.1")
-  .option("--hide <selectors>", "CSS selectors to hide (comma-separated)")
+  .requiredOption("--refDomain <domain>", "Reference domain URL (production)")
   .action(async (options) => {
     try {
-      await runInit({
-        before: options.before,
-        after: options.after,
-        paths: options.paths,
-        threshold: parseFloat(options.threshold),
-        hide: options.hide,
-      });
+      await runInit({ refDomain: options.refDomain });
     } catch (error) {
       if (error instanceof Error) {
         console.error(`Error: ${error.message}`);

package/dist/bin/vrt.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { Command } from "commander";
 // src/schemas.ts
 import { z } from "zod";
 var cliOptionsSchema = z.object({
-  before: z.string().url("--before must be a valid URL"),
+  reference: z.string().url("--reference must be a valid URL"),
   after: z.string().url("--after must be a valid URL"),
   paths: z.string().transform((val) => val.split(",").map((p) => p.trim())),
   threshold: z.coerce.number().min(0).max(100).default(0.1),
@@ -193,16 +193,16 @@ var Screenshotter = class {
 // src/core/comparator.ts
 import pixelmatch from "pixelmatch";
 import { PNG } from "pngjs";
-function compareImages(beforeBuffer, afterBuffer, threshold = 0.1) {
-  const before = PNG.sync.read(beforeBuffer);
+function compareImages(referenceBuffer, afterBuffer, threshold = 0.1) {
+  const reference = PNG.sync.read(referenceBuffer);
   const after = PNG.sync.read(afterBuffer);
-  const width = Math.max(before.width, after.width);
-  const height = Math.max(before.height, after.height);
-  const normalizedBefore = normalizeImage(before, width, height);
+  const width = Math.max(reference.width, after.width);
+  const height = Math.max(reference.height, after.height);
+  const normalizedReference = normalizeImage(reference, width, height);
   const normalizedAfter = normalizeImage(after, width, height);
   const diff = new PNG({ width, height });
   const diffCount = pixelmatch(
-    normalizedBefore.data,
+    normalizedReference.data,
     normalizedAfter.data,
     diff.data,
     width,
@@ -226,7 +226,7 @@ function compareImages(beforeBuffer, afterBuffer, threshold = 0.1) {
     dimensions: {
       width,
       height,
-      beforeHeight: before.height,
+      referenceHeight: reference.height,
       afterHeight: after.height
     }
   };
@@ -264,7 +264,7 @@ function printTerminalReport(report) {
   console.log("=".repeat(50));
   console.log("");
   console.log(
-    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`
+    `Comparing: ${chalk.cyan(meta.referenceUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`
   );
   console.log("");
   const groupedByPage = /* @__PURE__ */ new Map();
@@ -323,7 +323,7 @@ import { writeFile as writeFile2 } from "fs/promises";
 import { join as join2 } from "path";
 // src/templates/report.html
-var report_default = '<!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}} \u2192 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';
+var report_default = '<!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        Reference: {{REFERENCE_URL}} \u2192 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';
 // src/templates/report.css
 var report_default2 = '* {\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';
@@ -339,7 +339,7 @@ function generateHtml(report) {
   const { meta, summary, results } = report;
   const resultCards = results.map((r) => generateResultCard(r)).join("\n");
   const failedStat = summary.failed > 0 ? `<div class="stat fail">${summary.failed} Failed</div>` : "";
-  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);
+  return report_default.replace("{{CSS}}", report_default2).replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp).replace("{{DURATION}}", (meta.duration / 1e3).toFixed(1)).replace("{{REFERENCE_URL}}", meta.referenceUrl).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, screenshots } = result;
@@ -347,9 +347,9 @@ function generateResultCard(result) {
   const imagesHtml = `
     <div class="comparison">
       <div class="images">
-        <div class="img-container img-before">
-          <div class="label">Before</div>
-          <img src="${screenshots.before}" alt="Before" loading="lazy">
+        <div class="img-container img-reference">
+          <div class="label">Reference</div>
+          <img src="${screenshots.reference}" alt="Reference" loading="lazy">
         </div>
         <div class="img-container img-after">
           <div class="label">After</div>
@@ -384,9 +384,9 @@ async function runVrt(options) {
   const spinner = ora("Initializing browser...").start();
   try {
     await screenshotter.initialize();
-    spinner.text = `Taking screenshots of ${chalk2.cyan(options.beforeUrl)}...`;
-    const beforeScreenshots = await screenshotter.captureAll(
-      options.beforeUrl,
+    spinner.text = `Taking screenshots of ${chalk2.cyan(options.referenceUrl)}...`;
+    const referenceScreenshots = await screenshotter.captureAll(
+      options.referenceUrl,
       options.paths,
       VIEWPORTS,
       options.hideSelectors
@@ -400,15 +400,15 @@ async function runVrt(options) {
     );
     spinner.text = "Comparing screenshots...";
     const results = [];
-    for (const beforeShot of beforeScreenshots) {
+    for (const referenceShot of referenceScreenshots) {
       const afterShot = afterScreenshots.find(
-        (a) => a.pagePath === beforeShot.pagePath && a.viewportType === beforeShot.viewportType
+        (a) => a.pagePath === referenceShot.pagePath && a.viewportType === referenceShot.viewportType
       );
       if (!afterShot) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             "After screenshot not found"
           )
@@ -417,33 +417,33 @@ async function runVrt(options) {
       }
       try {
         const comparison = compareImages(
-          beforeShot.buffer,
+          referenceShot.buffer,
           afterShot.buffer,
           options.threshold
         );
-        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
-        const beforePath = join3("screenshots", `${filePrefix}--before.png`);
+        const filePrefix = `${referenceShot.pageName}--${referenceShot.viewportType}`;
+        const referencePath = join3("screenshots", `${filePrefix}--reference.png`);
         const afterPath = join3("screenshots", `${filePrefix}--after.png`);
         const diffPath = join3("screenshots", `${filePrefix}--diff.png`);
-        await writeFile3(join3(runDir, beforePath), beforeShot.buffer);
+        await writeFile3(join3(runDir, referencePath), referenceShot.buffer);
         await writeFile3(join3(runDir, afterPath), afterShot.buffer);
         await writeFile3(join3(runDir, diffPath), comparison.diffImage);
-        const pageName = beforeShot.pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : beforeShot.pagePath.replace(/^\//, "");
-        const viewport = getViewportDimensions(beforeShot.viewportType);
+        const pageName = referenceShot.pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : referenceShot.pagePath.replace(/^\//, "");
+        const viewport = getViewportDimensions(referenceShot.viewportType);
         results.push({
           page: {
-            path: beforeShot.pagePath,
+            path: referenceShot.pagePath,
             name: pageName,
             url: {
-              before: new URL(
-                beforeShot.pagePath,
-                options.beforeUrl
+              reference: new URL(
+                referenceShot.pagePath,
+                options.referenceUrl
               ).toString(),
-              after: new URL(beforeShot.pagePath, options.afterUrl).toString()
+              after: new URL(referenceShot.pagePath, options.afterUrl).toString()
             }
           },
           viewport: {
-            type: beforeShot.viewportType,
+            type: referenceShot.viewportType,
             ...viewport
           },
           status: comparison.passed ? "pass" : "fail",
@@ -455,7 +455,7 @@ async function runVrt(options) {
             dimensions: comparison.dimensions
           },
           screenshots: {
-            before: beforePath,
+            reference: referencePath,
             after: afterPath,
             diff: diffPath
           }
@@ -463,8 +463,8 @@ async function runVrt(options) {
       } catch (error) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             error instanceof Error ? error.message : String(error)
           )
@@ -479,7 +479,7 @@ async function runVrt(options) {
       version: "1.0",
       meta: {
         timestamp,
-        beforeUrl: options.beforeUrl,
+        referenceUrl: options.referenceUrl,
         afterUrl: options.afterUrl,
         duration,
         command: buildCommandString(options)
@@ -522,7 +522,7 @@ function createErrorResult(pagePath, viewportType, options, error) {
       path: pagePath,
       name: pageName,
       url: {
-        before: new URL(pagePath, options.beforeUrl).toString(),
+        reference: new URL(pagePath, options.referenceUrl).toString(),
         after: new URL(pagePath, options.afterUrl).toString()
       }
     },
@@ -533,15 +533,15 @@ function createErrorResult(pagePath, viewportType, options, error) {
       diffPixelCount: 0,
       totalPixels: 0,
       threshold: options.threshold,
-      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 }
+      dimensions: { width: 0, height: 0, referenceHeight: 0, afterHeight: 0 }
     },
-    screenshots: { before: "", after: "", diff: "" },
+    screenshots: { reference: "", after: "", diff: "" },
     error
   };
 }
 function buildCommandString(options) {
   const parts = ["npx web-corders-vrt run"];
-  parts.push(`--before ${options.beforeUrl}`);
+  parts.push(`--reference ${options.referenceUrl}`);
   parts.push(`--after ${options.afterUrl}`);
   parts.push(`--paths ${options.paths.join(",")}`);
   if (options.threshold !== DEFAULT_THRESHOLD) {
@@ -557,16 +557,24 @@ function buildCommandString(options) {
 import { mkdir as mkdir2, writeFile as writeFile4, access } from "fs/promises";
 import { join as join4 } from "path";
 import chalk3 from "chalk";
+// src/templates/SKILL-TEMPLATE.md
+var SKILL_TEMPLATE_default = '---\nname: web-corders-vrt\ndescription: WEB\u7528VRT(Visual Regression Test)\u30C4\u30FC\u30EB\u3002\u672C\u756A\u30C9\u30E1\u30A4\u30F3\u3068\u30ED\u30FC\u30AB\u30EB\u958B\u767A\u307E\u305F\u306F\u30D7\u30EC\u30D3\u30E5\u30FC\u30C9\u30E1\u30A4\u30F3\u306E\u9593\u3067\u3001\u7279\u5B9A\u30D1\u30B9\u306E\u30D3\u30B8\u30E5\u30A2\u30EB\u5DEE\u5206\u3092\u691C\u51FA\u3059\u308B\u3002\n---\n\n## \u4F7F\u3044\u65B9\n\n```bash\nnpx web-corders-vrt run \\\n  --reference ${referenceDomain} \\\n  --after <\u958B\u767A\u74B0\u5883\u306E\u30C9\u30E1\u30A4\u30F3|\u30E6\u30FC\u30B6\u30FC\u304B\u3089\u6307\u793A\u304C\u306A\u3044\u5834\u5408\u306Fhttp://localhost:3000> \\\n  --paths <\u30C6\u30B9\u30C8\u5BFE\u8C61\u306E\u30D1\u30B9\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09> \\\n```\n\n## \u624B\u9806\n\n1. \u30E6\u30FC\u30B6\u30FC\u304B\u3089\u6BD4\u8F03\u5BFE\u8C61\u306E\u30C9\u30E1\u30A4\u30F3\u3092\u6307\u5B9A\u3055\u308C\u305F\u5834\u5408\u3001\u305D\u308C\u306B\u5F93\u3046\u3002\u6307\u793A\u304C\u306A\u3044\u5834\u5408\u3001after\u306F\u958B\u767A\u30B5\u30FC\u30D0\u30FC\u3068\u3057\u3001\u8D77\u52D5\u3057\u3066\u3044\u306A\u3051\u308C\u3070 `npm run dev` \u3067\u8D77\u52D5\u3057\u3066\u5F85\u6A5F\u3059\u308B\u3002\u3053\u3053\u3067\u8D77\u52D5\u3057\u305F\u30C9\u30E1\u30A4\u30F3\u3068\u30D7\u30ED\u30C8\u30B3\u30EB\u3092after\u306E\u30C9\u30E1\u30A4\u30F3\u3068\u3059\u308B\u3002\n2. \u4E0A\u8A18\u306E\u30B3\u30DE\u30F3\u30C9\u3067VRT\u3092\u5B9F\u884C\u3059\u308B\uFF08`--paths` \u306F\u30BF\u30B9\u30AF\u306B\u5FDC\u3058\u3066\u8A2D\u5B9A\u3059\u308B\uFF09\n3. `./vrt-results/` \u5185\u306E\u6700\u65B0\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u306B\u3042\u308B `report.json` \u3092\u8AAD\u3080\n4. `status: "fail"` \u306E\u30C6\u30B9\u30C8\u7D50\u679C\u306B\u6CE8\u76EE\u3059\u308B\n5. \u8A72\u5F53\u3059\u308Bdiff\u753B\u50CF\uFF08`*--diff.png`\uFF09\u3092Read\u30C4\u30FC\u30EB\u3067\u8996\u899A\u7684\u306B\u78BA\u8A8D\u3059\u308B\n6. diff\u753B\u50CF\u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3059\u308B\n7. \u30BD\u30FC\u30B9\u30B3\u30FC\u30C9\u3092\u4FEE\u6B63\u3059\u308B\n8. \u518D\u5EA6VRT\u3092\u5B9F\u884C\u3057\u3066\u4FEE\u6B63\u304C\u53CD\u6620\u3055\u308C\u305F\u3053\u3068\u3092\u78BA\u8A8D\u3059\u308B\n\n## \u30AA\u30D7\u30B7\u30E7\u30F3\n\n| \u30AA\u30D7\u30B7\u30E7\u30F3           | \u8AAC\u660E                                        |\n| -------------------- | ------------------------------------------- |\n| `--reference <url>`  | \u30EA\u30D5\u30A1\u30EC\u30F3\u30B9\u30D7\u30ED\u30C8\u30B3\u30EB+\u30C9\u30E1\u30A4\u30F3\uFF08\u672C\u756A\u74B0\u5883\uFF09 |\n| `--after <url>`      | \u6BD4\u8F03\u5148U\u30D7\u30ED\u30C8\u30B3\u30EB+\u30C9\u30E1\u30A4\u30F3\uFF08\u958B\u767A\u74B0\u5883\uFF09      |\n| `--paths <paths>`    | \u30C6\u30B9\u30C8\u5BFE\u8C61\u306E\u30DA\u30FC\u30B8\u30D1\u30B9\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09      |\n| `--threshold <n>`    | \u5DEE\u5206\u8A31\u5BB9\u7387\uFF08%\uFF09\u3002\u30C7\u30D5\u30A9\u30EB\u30C8: 0.1            |\n| `--hide <selectors>` | \u975E\u8868\u793A\u306B\u3059\u308BCSS\u30BB\u30EC\u30AF\u30BF\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09     |\n| `--no-open`          | HTML\u30EC\u30DD\u30FC\u30C8\u3092\u30D6\u30E9\u30A6\u30B6\u3067\u958B\u304B\u306A\u3044            |\n';
+// src/commands/init.ts
 async function runInit(options) {
-  const outDir = join4(process.cwd(), ".claude", "commands");
-  const outFile = join4(outDir, "vrt.md");
+  const outDir = join4(process.cwd(), ".claude", "skills", "web-corders-vrt");
+  const outFile = join4(outDir, "SKILL.md");
   try {
     await access(outFile);
     console.log(chalk3.yellow(`\u26A0 ${outFile} already exists. Overwriting...`));
   } catch {
   }
   await mkdir2(outDir, { recursive: true });
-  const content = generateSkillFile(options);
+  const content = SKILL_TEMPLATE_default.replace(
+    /\$\{referenceDomain\}/g,
+    options.refDomain
+  );
   await writeFile4(outFile, content, "utf-8");
   console.log(chalk3.green(`\u2705 Created ${outFile}`));
   console.log("");
@@ -577,47 +585,15 @@ async function runInit(options) {
     "Review and customize the file, then commit it to your repository."
   );
 }
-function generateSkillFile(options) {
-  const cmdParts = ["npx web-corders-vrt run"];
-  cmdParts.push(`  --before ${options.before}`);
-  cmdParts.push(`  --after ${options.after}`);
-  cmdParts.push(`  --paths ${options.paths}`);
-  if (options.threshold !== void 0 && options.threshold !== DEFAULT_THRESHOLD) {
-    cmdParts.push(`  --threshold ${options.threshold}`);
-  }
-  if (options.hide) {
-    cmdParts.push(`  --hide "${options.hide}"`);
-  }
-  cmdParts.push("  --no-open");
-  const command = cmdParts.join(" \\\n");
-  return `VRT\u3092\u5B9F\u884C\u3057\u3066\u672C\u756A\u74B0\u5883\u3068\u306E\u30D3\u30B8\u30E5\u30A2\u30EB\u5DEE\u5206\u3092\u691C\u51FA\u3059\u308B\u3002
-## \u624B\u9806
-1. \u958B\u767A\u30B5\u30FC\u30D0\u30FC\u304C\u8D77\u52D5\u3057\u3066\u3044\u306A\u3051\u308C\u3070 \`npm run dev\` \u3067\u8D77\u52D5\u3057\u3066\u5F85\u6A5F\u3059\u308B
-2. \u4EE5\u4E0B\u306E\u30B3\u30DE\u30F3\u30C9\u3067VRT\u3092\u5B9F\u884C:
-\`\`\`bash
-${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. 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
-`;
-}
 // bin/vrt.ts
 var program = new Command();
 program.name("vrt").description("Visual Regression Testing CLI - Compare web pages visually").version("0.1.0");
-program.command("run").description("Run visual regression tests").requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").option("--no-html", "Skip HTML report generation").option("--no-open", "Do not open HTML report in browser").action(async (rawOptions) => {
+program.command("run").description("Run visual regression tests").requiredOption("--reference <url>", "Reference URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").option("--no-html", "Skip HTML report generation").option("--no-open", "Do not open HTML report in browser").action(async (rawOptions) => {
   try {
     const parsed = cliOptionsSchema.parse(rawOptions);
     const options = {
-      beforeUrl: parsed.before,
+      referenceUrl: parsed.reference,
       afterUrl: parsed.after,
       paths: parsed.paths,
       threshold: parsed.threshold,
@@ -637,16 +613,10 @@ program.command("run").description("Run visual regression tests").requiredOption
   }
 });
 program.command("init").description(
-  "Generate .claude/commands/vrt.md skill file for this repository"
-).requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").action(async (options) => {
+  "Generate .claude/skills/web-corders-vrt/SKILL.md for this repository"
+).requiredOption("--refDomain <domain>", "Reference domain URL (production)").action(async (options) => {
   try {
-    await runInit({
-      before: options.before,
-      after: options.after,
-      paths: options.paths,
-      threshold: parseFloat(options.threshold),
-      hide: options.hide
-    });
+    await runInit({ refDomain: options.refDomain });
   } catch (error) {
     if (error instanceof Error) {
       console.error(`Error: ${error.message}`);

package/dist/bin/vrt.js.map CHANGED Viewed

	@@ -1 +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/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":";;;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,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;AAAA,MAEF;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;;;ACrEA,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,YAAY,IAAI;AAC5D,QAAM,UAAU,SAAS,KAAK,YAAY;AAE1C,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;AAEzB;;;APxDA,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;AAEA,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;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,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;;;AU3PA,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;;;AZ3EA,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","writeFile","join","report_default","join","writeFile","report_default","join","chalk","writeFile","mkdir","writeFile","join","chalk","join","chalk","mkdir","writeFile"]}
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/reporters/terminal.ts","../../src/reporters/json.ts","../../src/reporters/html.ts","../../src/templates/report.html","../../src/templates/report.css","../../src/commands/init.ts","../../src/templates/SKILL-TEMPLATE.md"],"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(\"--reference <url>\", \"Reference 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 referenceUrl: parsed.reference,\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/skills/web-corders-vrt/SKILL.md for this repository\",\n )\n .requiredOption(\"--refDomain <domain>\", \"Reference domain URL (production)\")\n .action(async (options) => {\n try {\n await runInit({ refDomain: options.refDomain });\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 reference: z.string().url(\"--reference 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 // Reference スクリーンショット取得\n spinner.text = `Taking screenshots of ${chalk.cyan(options.referenceUrl)}...`;\n const referenceScreenshots = await screenshotter.captureAll(\n options.referenceUrl,\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 referenceShot of referenceScreenshots) {\n const afterShot = afterScreenshots.find(\n (a) =>\n a.pagePath === referenceShot.pagePath &&\n a.viewportType === referenceShot.viewportType,\n );\n\n if (!afterShot) {\n results.push(\n createErrorResult(\n referenceShot.pagePath,\n referenceShot.viewportType,\n options,\n \"After screenshot not found\",\n ),\n );\n continue;\n }\n\n try {\n const comparison = compareImages(\n referenceShot.buffer,\n afterShot.buffer,\n options.threshold,\n );\n // スクリーンショットを保存\n const filePrefix = `${referenceShot.pageName}--${referenceShot.viewportType}`;\n const referencePath = join(\"screenshots\", `${filePrefix}--reference.png`);\n const afterPath = join(\"screenshots\", `${filePrefix}--after.png`);\n const diffPath = join(\"screenshots\", `${filePrefix}--diff.png`);\n\n await writeFile(join(runDir, referencePath), referenceShot.buffer);\n await writeFile(join(runDir, afterPath), afterShot.buffer);\n await writeFile(join(runDir, diffPath), comparison.diffImage);\n\n const pageName =\n referenceShot.pagePath === \"/\"\n ? \"トップページ\"\n : referenceShot.pagePath.replace(/^\\//, \"\");\n const viewport = getViewportDimensions(referenceShot.viewportType);\n\n results.push({\n page: {\n path: referenceShot.pagePath,\n name: pageName,\n url: {\n reference: new URL(\n referenceShot.pagePath,\n options.referenceUrl,\n ).toString(),\n after: new URL(referenceShot.pagePath, options.afterUrl).toString(),\n },\n },\n viewport: {\n type: referenceShot.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 reference: referencePath,\n after: afterPath,\n diff: diffPath,\n },\n });\n } catch (error) {\n results.push(\n createErrorResult(\n referenceShot.pagePath,\n referenceShot.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 referenceUrl: options.referenceUrl,\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 reference: new URL(pagePath, options.referenceUrl).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, referenceHeight: 0, afterHeight: 0 },\n },\n screenshots: { reference: \"\", after: \"\", diff: \"\" },\n error,\n };\n}\n\nfunction buildCommandString(options: ResolvedOptions): string {\n const parts = [\"npx web-corders-vrt run\"];\n parts.push(`--reference ${options.referenceUrl}`);\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 referenceBuffer: Buffer,\n afterBuffer: Buffer,\n threshold: number = 0.1,\n): ComparisonResult {\n const reference = PNG.sync.read(referenceBuffer);\n const after = PNG.sync.read(afterBuffer);\n\n const width = Math.max(reference.width, after.width);\n const height = Math.max(reference.height, after.height);\n\n // サイズが異なる場合は正規化\n const normalizedReference = normalizeImage(reference, width, height);\n const normalizedAfter = normalizeImage(after, width, height);\n\n const diff = new PNG({ width, height });\n\n const diffCount = pixelmatch(\n normalizedReference.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 referenceHeight: reference.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.referenceUrl)} 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(\"{{REFERENCE_URL}}\", meta.referenceUrl)\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-reference\">\n <div class=\"label\">Reference</div>\n <img src=\"${screenshots.reference}\" alt=\"Reference\" 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 Reference: {{REFERENCE_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 skillTemplate from \"../templates/SKILL-TEMPLATE.md\";\n\nexport interface InitOptions {\n refDomain: string;\n}\n\n/\n .claude/skills/web-corders-vrt/SKILL.md スキルファイルを生成する。\n /\nexport async function runInit(options: InitOptions): Promise<void> {\n const outDir = join(process.cwd(), \".claude\", \"skills\", \"web-corders-vrt\");\n const outFile = join(outDir, \"SKILL.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 = (skillTemplate as string).replace(\n /\\$\\{referenceDomain\\}/g,\n options.refDomain,\n );\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","---\nname: web-corders-vrt\ndescription: WEB用VRT(Visual Regression Test)ツール。本番ドメインとローカル開発またはプレビュードメインの間で、特定パスのビジュアル差分を検出する。\n---\n\n## 使い方\n\n```bash\nnpx web-corders-vrt run \\\n --reference ${referenceDomain} \\\n --after <開発環境のドメイン\|ユーザーから指示がない場合はhttp://localhost:3000> \\\n --paths <テスト対象のパス（カンマ区切り）> \\\n```\n\n## 手順\n\n1. ユーザーから比較対象のドメインを指定された場合、それに従う。指示がない場合、afterは開発サーバーとし、起動していなければ `npm run dev` で起動して待機する。ここで起動したドメインとプロトコルをafterのドメインとする。\n2. 上記のコマンドでVRTを実行する（`--paths` はタスクに応じて設定する）\n3. `./vrt-results/` 内の最新ディレクトリにある `report.json` を読む\n4. `status: \"fail\"` のテスト結果に注目する\n5. 該当するdiff画像（`--diff.png`）をReadツールで視覚的に確認する\n6. diff画像から修正すべきCSSやHTMLの場所を特定する\n7. ソースコードを修正する\n8. 再度VRTを実行して修正が反映されたことを確認する\n\n## オプション\n\n\| オプション \| 説明 \|\n\| -------------------- \| ------------------------------------------- \|\n\| `--reference <url>` \| リファレンスプロトコル+ドメイン（本番環境） \|\n\| `--after <url>` \| 比較先Uプロトコル+ドメイン（開発環境） \|\n\| `--paths <paths>` \| テスト対象のページパス（カンマ区切り） \|\n\| `--threshold <n>` \| 差分許容率（%）。デフォルト: 0.1 \|\n\| `--hide <selectors>` \| 非表示にするCSSセレクタ（カンマ区切り） \|\n\| `--no-open` \| HTMLレポートをブラウザで開かない \|\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 CHANGED Viewed

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

package/src/commands/init.ts CHANGED Viewed

@@ -1,22 +1,18 @@
 import { mkdir, writeFile, access } from "node:fs/promises";
 import { join } from "node:path";
 import chalk from "chalk";
-import { DEFAULT_THRESHOLD } from "../constants.js";
+import skillTemplate from "../templates/SKILL-TEMPLATE.md";
 export interface InitOptions {
-  before: string;
-  after: string;
-  paths: string;
-  threshold?: number;
-  hide?: string;
+  refDomain: string;
 }
 /**
- * .claude/commands/vrt.md スキルファイルを生成する。
+ * .claude/skills/web-corders-vrt/SKILL.md スキルファイルを生成する。
  */
 export async function runInit(options: InitOptions): Promise<void> {
-  const outDir = join(process.cwd(), ".claude", "commands");
-  const outFile = join(outDir, "vrt.md");
+  const outDir = join(process.cwd(), ".claude", "skills", "web-corders-vrt");
+  const outFile = join(outDir, "SKILL.md");
   // 既存ファイルの確認
   try {
@@ -28,7 +24,10 @@ export async function runInit(options: InitOptions): Promise<void> {
   await mkdir(outDir, { recursive: true });
-  const content = generateSkillFile(options);
+  const content = (skillTemplate as string).replace(
+    /\$\{referenceDomain\}/g,
+    options.refDomain,
+  );
   await writeFile(outFile, content, "utf-8");
   console.log(chalk.green(`✅ Created ${outFile}`));
@@ -40,43 +39,3 @@ export async function runInit(options: InitOptions): Promise<void> {
     "Review and customize the file, then commit it to your repository.",
   );
 }
-function generateSkillFile(options: InitOptions): string {
-  // CLI コマンドを構築
-  const cmdParts = ["npx web-corders-vrt run"];
-  cmdParts.push(`  --before ${options.before}`);
-  cmdParts.push(`  --after ${options.after}`);
-  cmdParts.push(`  --paths ${options.paths}`);
-  if (options.threshold !== undefined && options.threshold !== DEFAULT_THRESHOLD) {
-    cmdParts.push(`  --threshold ${options.threshold}`);
-  }
-  if (options.hide) {
-    cmdParts.push(`  --hide "${options.hide}"`);
-  }
-  // --no-open をデフォルトでつける（Claude実行時にブラウザを開かないため）
-  cmdParts.push("  --no-open");
-  const command = cmdParts.join(" \\\n");
-  return `VRTを実行して本番環境とのビジュアル差分を検出する。
-## 手順
-1. 開発サーバーが起動していなければ \`npm run dev\` で起動して待機する
-2. 以下のコマンドでVRTを実行:
-\`\`\`bash
-${command}
-\`\`\`
-3. \`./vrt-results/\` 内の最新ディレクトリにある \`report.json\` を読む
-4. \`status: "fail"\` のテスト結果に注目する
-5. 該当するdiff画像（\`*--diff.png\`）をReadツールで視覚的に確認する
-6. diff画像から修正すべきCSSやHTMLの場所を特定する
-7. ソースコードを修正する
-8. 再度VRTを実行して修正が反映されたことを確認する
-`;
-}

package/src/commands/run.ts CHANGED Viewed

@@ -41,10 +41,10 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
   try {
     await screenshotter.initialize();
-    // Before スクリーンショット取得
-    spinner.text = `Taking screenshots of ${chalk.cyan(options.beforeUrl)}...`;
-    const beforeScreenshots = await screenshotter.captureAll(
-      options.beforeUrl,
+    // Reference スクリーンショット取得
+    spinner.text = `Taking screenshots of ${chalk.cyan(options.referenceUrl)}...`;
+    const referenceScreenshots = await screenshotter.captureAll(
+      options.referenceUrl,
       options.paths,
       VIEWPORTS,
       options.hideSelectors,
@@ -64,18 +64,18 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
     // 比較を実行
     const results: VrtTestResult[] = [];
-    for (const beforeShot of beforeScreenshots) {
+    for (const referenceShot of referenceScreenshots) {
       const afterShot = afterScreenshots.find(
         (a) =>
-          a.pagePath === beforeShot.pagePath &&
-          a.viewportType === beforeShot.viewportType,
+          a.pagePath === referenceShot.pagePath &&
+          a.viewportType === referenceShot.viewportType,
       );
       if (!afterShot) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             "After screenshot not found",
           ),
@@ -85,40 +85,40 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
       try {
         const comparison = compareImages(
-          beforeShot.buffer,
+          referenceShot.buffer,
           afterShot.buffer,
           options.threshold,
         );
         // スクリーンショットを保存
-        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
-        const beforePath = join("screenshots", `${filePrefix}--before.png`);
+        const filePrefix = `${referenceShot.pageName}--${referenceShot.viewportType}`;
+        const referencePath = join("screenshots", `${filePrefix}--reference.png`);
         const afterPath = join("screenshots", `${filePrefix}--after.png`);
         const diffPath = join("screenshots", `${filePrefix}--diff.png`);
-        await writeFile(join(runDir, beforePath), beforeShot.buffer);
+        await writeFile(join(runDir, referencePath), referenceShot.buffer);
         await writeFile(join(runDir, afterPath), afterShot.buffer);
         await writeFile(join(runDir, diffPath), comparison.diffImage);
         const pageName =
-          beforeShot.pagePath === "/"
+          referenceShot.pagePath === "/"
             ? "トップページ"
-            : beforeShot.pagePath.replace(/^\//, "");
-        const viewport = getViewportDimensions(beforeShot.viewportType);
+            : referenceShot.pagePath.replace(/^\//, "");
+        const viewport = getViewportDimensions(referenceShot.viewportType);
         results.push({
           page: {
-            path: beforeShot.pagePath,
+            path: referenceShot.pagePath,
             name: pageName,
             url: {
-              before: new URL(
-                beforeShot.pagePath,
-                options.beforeUrl,
+              reference: new URL(
+                referenceShot.pagePath,
+                options.referenceUrl,
               ).toString(),
-              after: new URL(beforeShot.pagePath, options.afterUrl).toString(),
+              after: new URL(referenceShot.pagePath, options.afterUrl).toString(),
             },
           },
           viewport: {
-            type: beforeShot.viewportType,
+            type: referenceShot.viewportType,
             ...viewport,
           },
           status: comparison.passed ? "pass" : "fail",
@@ -130,7 +130,7 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
             dimensions: comparison.dimensions,
           },
           screenshots: {
-            before: beforePath,
+            reference: referencePath,
             after: afterPath,
             diff: diffPath,
           },
@@ -138,8 +138,8 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
       } catch (error) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             error instanceof Error ? error.message : String(error),
           ),
@@ -156,7 +156,7 @@ export async function runVrt(options: ResolvedOptions): Promise<VrtReport> {
       version: "1.0",
       meta: {
         timestamp,
-        beforeUrl: options.beforeUrl,
+        referenceUrl: options.referenceUrl,
         afterUrl: options.afterUrl,
         duration,
         command: buildCommandString(options),
@@ -219,7 +219,7 @@ function createErrorResult(
       path: pagePath,
       name: pageName,
       url: {
-        before: new URL(pagePath, options.beforeUrl).toString(),
+        reference: new URL(pagePath, options.referenceUrl).toString(),
         after: new URL(pagePath, options.afterUrl).toString(),
       },
     },
@@ -230,16 +230,16 @@ function createErrorResult(
       diffPixelCount: 0,
       totalPixels: 0,
       threshold: options.threshold,
-      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 },
+      dimensions: { width: 0, height: 0, referenceHeight: 0, afterHeight: 0 },
     },
-    screenshots: { before: "", after: "", diff: "" },
+    screenshots: { reference: "", after: "", diff: "" },
     error,
   };
 }
 function buildCommandString(options: ResolvedOptions): string {
   const parts = ["npx web-corders-vrt run"];
-  parts.push(`--before ${options.beforeUrl}`);
+  parts.push(`--reference ${options.referenceUrl}`);
   parts.push(`--after ${options.afterUrl}`);
   parts.push(`--paths ${options.paths.join(",")}`);
   if (options.threshold !== DEFAULT_THRESHOLD) {

package/src/core/comparator.ts CHANGED Viewed

@@ -7,24 +7,24 @@ import type { ComparisonResult } from "../types.js";
  * サイズが異なる場合は大きい方に合わせて白パディングで拡張する。
  */
 export function compareImages(
-  beforeBuffer: Buffer,
+  referenceBuffer: Buffer,
   afterBuffer: Buffer,
   threshold: number = 0.1,
 ): ComparisonResult {
-  const before = PNG.sync.read(beforeBuffer);
+  const reference = PNG.sync.read(referenceBuffer);
   const after = PNG.sync.read(afterBuffer);
-  const width = Math.max(before.width, after.width);
-  const height = Math.max(before.height, after.height);
+  const width = Math.max(reference.width, after.width);
+  const height = Math.max(reference.height, after.height);
   // サイズが異なる場合は正規化
-  const normalizedBefore = normalizeImage(before, width, height);
+  const normalizedReference = normalizeImage(reference, width, height);
   const normalizedAfter = normalizeImage(after, width, height);
   const diff = new PNG({ width, height });
   const diffCount = pixelmatch(
-    normalizedBefore.data,
+    normalizedReference.data,
     normalizedAfter.data,
     diff.data,
     width,
@@ -50,7 +50,7 @@ export function compareImages(
     dimensions: {
       width,
       height,
-      beforeHeight: before.height,
+      referenceHeight: reference.height,
       afterHeight: after.height,
     },
   };

package/src/reporters/html.ts CHANGED Viewed

@@ -32,7 +32,7 @@ function generateHtml(report: VrtReport): string {
     .replace("{{CSS}}", reportStyles as string)
     .replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp)
     .replace("{{DURATION}}", (meta.duration / 1000).toFixed(1))
-    .replace("{{BEFORE_URL}}", meta.beforeUrl)
+    .replace("{{REFERENCE_URL}}", meta.referenceUrl)
     .replace("{{AFTER_URL}}", meta.afterUrl)
     .replace("{{TOTAL}}", String(summary.totalTests))
     .replace("{{PASSED}}", String(summary.passed))
@@ -47,9 +47,9 @@ function generateResultCard(result: VrtTestResult): string {
   const imagesHtml = `
     <div class="comparison">
       <div class="images">
-        <div class="img-container img-before">
-          <div class="label">Before</div>
-          <img src="${screenshots.before}" alt="Before" loading="lazy">
+        <div class="img-container img-reference">
+          <div class="label">Reference</div>
+          <img src="${screenshots.reference}" alt="Reference" loading="lazy">
         </div>
         <div class="img-container img-after">
           <div class="label">After</div>

package/src/reporters/terminal.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export function printTerminalReport(report: VrtReport): void {
   console.log("=".repeat(50));
   console.log("");
   console.log(
-    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`,
+    `Comparing: ${chalk.cyan(meta.referenceUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`,
   );
   console.log("");

package/src/schemas.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { z } from "zod";
 export const cliOptionsSchema = z.object({
-  before: z.string().url("--before must be a valid URL"),
+  reference: z.string().url("--reference must be a valid URL"),
   after: z.string().url("--after must be a valid URL"),
   paths: z.string().transform((val) => val.split(",").map((p) => p.trim())),
   threshold: z.coerce.number().min(0).max(100).default(0.1),

package/src/templates/SKILL-TEMPLATE.md ADDED Viewed

@@ -0,0 +1,35 @@
+---
+name: web-corders-vrt
+description: WEB用VRT(Visual Regression Test)ツール。本番ドメインとローカル開発またはプレビュードメインの間で、特定パスのビジュアル差分を検出する。
+---
+## 使い方
+```bash
+npx web-corders-vrt run \
+  --reference ${referenceDomain} \
+  --after <開発環境のドメイン|ユーザーから指示がない場合はhttp://localhost:3000> \
+  --paths <テスト対象のパス（カンマ区切り）> \
+```
+## 手順
+1. ユーザーから比較対象のドメインを指定された場合、それに従う。指示がない場合、afterは開発サーバーとし、起動していなければ `npm run dev` で起動して待機する。ここで起動したドメインとプロトコルをafterのドメインとする。
+2. 上記のコマンドでVRTを実行する（`--paths` はタスクに応じて設定する）
+3. `./vrt-results/` 内の最新ディレクトリにある `report.json` を読む
+4. `status: "fail"` のテスト結果に注目する
+5. 該当するdiff画像（`*--diff.png`）をReadツールで視覚的に確認する
+6. diff画像から修正すべきCSSやHTMLの場所を特定する
+7. ソースコードを修正する
+8. 再度VRTを実行して修正が反映されたことを確認する
+## オプション
+| オプション           | 説明                                        |
+| -------------------- | ------------------------------------------- |
+| `--reference <url>`  | リファレンスプロトコル+ドメイン（本番環境） |
+| `--after <url>`      | 比較先Uプロトコル+ドメイン（開発環境）      |
+| `--paths <paths>`    | テスト対象のページパス（カンマ区切り）      |
+| `--threshold <n>`    | 差分許容率（%）。デフォルト: 0.1            |
+| `--hide <selectors>` | 非表示にするCSSセレクタ（カンマ区切り）     |
+| `--no-open`          | HTMLレポートをブラウザで開かない            |

package/src/templates/report.html CHANGED Viewed

@@ -13,7 +13,7 @@
       <h1>web-corders-vrt</h1>
       <div class="meta">
         {{TIMESTAMP}} | Duration: {{DURATION}}s<br />
-        Before: {{BEFORE_URL}} → After: {{AFTER_URL}}
+        Reference: {{REFERENCE_URL}} → After: {{AFTER_URL}}
       </div>
     </div>
     <div class="summary">

package/src/templates/types.d.ts CHANGED Viewed

@@ -6,3 +6,7 @@ declare module "*.css" {
   const content: string;
   export default content;
 }
+declare module "*.md" {
+  const content: string;
+  export default content;
+}

package/src/types.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export interface VrtReport {
   version: "1.0";
   meta: {
     timestamp: string;
-    beforeUrl: string;
+    referenceUrl: string;
     afterUrl: string;
     duration: number;
     command: string;
@@ -24,7 +24,7 @@ export interface VrtTestResult {
     path: string;
     name: string;
     url: {
-      before: string;
+      reference: string;
       after: string;
     };
   };
@@ -42,12 +42,12 @@ export interface VrtTestResult {
     dimensions: {
       width: number;
       height: number;
-      beforeHeight: number;
+      referenceHeight: number;
       afterHeight: number;
     };
   };
   screenshots: {
-    before: string;
+    reference: string;
     after: string;
     diff: string;
   };
@@ -59,7 +59,7 @@ export type TestStatus = "pass" | "fail" | "error";
 /** CLI実行時の解決済みオプション */
 export interface ResolvedOptions {
-  beforeUrl: string;
+  referenceUrl: string;
   afterUrl: string;
   paths: string[];
   threshold: number;
@@ -88,7 +88,7 @@ export interface ComparisonResult {
   dimensions: {
     width: number;
     height: number;
-    beforeHeight: number;
+    referenceHeight: number;
     afterHeight: number;
   };
 }

package/test/comparator.test.ts CHANGED Viewed

@@ -85,7 +85,7 @@ describe("compareImages", () => {
   });
   it("一部だけ異なる画像の場合、差分率が正しく計算される", () => {
-    const before = createSolidPng(100, 100, 255, 255, 255);
+    const reference = createSolidPng(100, 100, 255, 255, 255);
     // 右下10x10だけ赤にする
     const after = createPngWithRegion(100, 100, 255, 255, 255, {
       x: 90,
@@ -97,7 +97,7 @@ describe("compareImages", () => {
       b: 0,
     });
-    const result = compareImages(before, after);
+    const result = compareImages(reference, after);
     expect(result.diffCount).toBeGreaterThan(0);
     // 10*10=100 / 100*100=10000 = 1%
@@ -112,14 +112,14 @@ describe("compareImages", () => {
     expect(result.dimensions.width).toBe(100);
     expect(result.dimensions.height).toBe(100);
-    expect(result.dimensions.beforeHeight).toBe(50);
+    expect(result.dimensions.referenceHeight).toBe(50);
     expect(result.dimensions.afterHeight).toBe(100);
     // 白でパディングされるので一部は同じ、拡張部分も白=白で差分なし
     expect(result.diffCount).toBe(0);
   });
   it("threshold以下の差分はpassになる", () => {
-    const before = createSolidPng(100, 100, 255, 255, 255);
+    const reference = createSolidPng(100, 100, 255, 255, 255);
     // 1ピクセルだけ微妙に違う
     const afterPng = new PNG({ width: 100, height: 100 });
     for (let i = 0; i < afterPng.data.length; i += 4) {
@@ -132,7 +132,7 @@ describe("compareImages", () => {
     afterPng.data[0] = 200;
     const after = PNG.sync.write(afterPng);
-    const result = compareImages(before, after, 1.0); // threshold 1%
+    const result = compareImages(reference, after, 1.0); // threshold 1%
     // 1px / 10000px = 0.01% < 1%
     expect(result.passed).toBe(true);
   });

package/tsup.config.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export default defineConfig({
   loader: {
     ".html": "text",
     ".css": "text",
+    ".md": "text",
   },
   banner: {
     js: "#!/usr/bin/env node",