@vizejs/vite-plugin-musea 0.0.1-alpha.11 → 0.0.1-alpha.112

package/dist/{vrt-DRwtnkE5.js → vrt-DP87vGIA.js}

@@ -1,5 +1,5 @@
-import fs from "node:fs";
 import path from "node:path";
+import fs from "node:fs";
 import { PNG } from "pngjs";
 
 //#region src/vrt.ts
@@ -8,6 +8,9 @@ import { PNG } from "pngjs";
 */
 var MuseaVrtRunner = class {
 	options;
+	capture;
+	comparison;
+	ci;
 	browser = null;
 	startTime = 0;
 	constructor(options = {}) {
@@ -24,6 +27,16 @@ var MuseaVrtRunner = class {
 				name: "mobile"
 			}]
 		};
+		this.capture = {
+			fullPage: options.capture?.fullPage ?? false,
+			waitForNetwork: options.capture?.waitForNetwork ?? true,
+			settleTime: options.capture?.settleTime ?? 100,
+			waitSelector: options.capture?.waitSelector ?? ".musea-variant",
+			hideElements: options.capture?.hideElements ?? [],
+			maskElements: options.capture?.maskElements ?? []
+		};
+		this.comparison = options.comparison ?? {};
+		this.ci = options.ci ?? {};
 	}
 	/**
 	* Initialize Playwright browser.
@@ -48,11 +61,20 @@ var MuseaVrtRunner = class {
 	async runAllTests(artFiles, baseUrl) {
 		if (!this.browser) throw new Error("VRT runner not initialized. Call init() first.");
 		const results = [];
+		const retries = this.ci.retries ?? 0;
 		for (const art of artFiles) for (const variant of art.variants) {
 			if (variant.skipVrt) continue;
-			for (const viewport of this.options.viewports) {
-				const result = await this.captureAndCompare(art, variant.name, viewport, baseUrl);
-				results.push(result);
+			const viewports = variant.args?.viewport ? [variant.args.viewport] : this.options.viewports;
+			for (const viewport of viewports) {
+				let result = null;
+				let attempts = 0;
+				while (attempts <= retries) {
+					result = await this.captureAndCompare(art, variant.name, viewport, baseUrl);
+					if (result.passed || result.isNew || !result.error) break;
+					attempts++;
+					if (attempts <= retries) console.log(`[vrt] Retry ${attempts}/${retries}: ${path.basename(art.path)}/${variant.name}`);
+				}
+				if (result) results.push(result);
 			}
 		}
 		return results;
@@ -84,12 +106,26 @@ var MuseaVrtRunner = class {
 			});
 			page = await context.newPage();
 			const variantUrl = this.buildVariantUrl(baseUrl, art.path, variantName);
-			await page.goto(variantUrl, { waitUntil: "networkidle" });
-			await page.waitForSelector(".musea-variant", { timeout: 1e4 });
-			await page.waitForTimeout(100);
+			const waitUntil = this.capture.waitForNetwork ? "networkidle" : "load";
+			await page.goto(variantUrl, { waitUntil });
+			await page.waitForSelector(this.capture.waitSelector, { timeout: 1e4 });
+			await page.waitForTimeout(this.capture.settleTime);
+			if (this.capture.hideElements.length > 0) for (const selector of this.capture.hideElements) await page.evaluate((sel) => {
+				document.querySelectorAll(sel).forEach((el) => {
+					el.style.visibility = "hidden";
+				});
+			}, selector);
+			if (this.capture.maskElements.length > 0) for (const selector of this.capture.maskElements) await page.evaluate((sel) => {
+				document.querySelectorAll(sel).forEach((el) => {
+					const htmlEl = el;
+					htmlEl.style.background = "#ff00ff";
+					htmlEl.style.color = "transparent";
+					htmlEl.innerHTML = "";
+				});
+			}, selector);
 			await page.screenshot({
 				path: currentPath,
-				fullPage: false
+				fullPage: this.capture.fullPage
 			});
 			const hasBaseline = await fileExists(snapshotPath);
 			if (!hasBaseline) {
@@ -133,6 +169,24 @@ var MuseaVrtRunner = class {
 		}
 	}
 	/**
+	* Get the Playwright Page for external use (e.g., a11y auditing).
+	*/
+	async createPage(viewport) {
+		if (!this.browser) throw new Error("VRT runner not initialized. Call init() first.");
+		const context = await this.browser.newContext({
+			viewport: {
+				width: viewport.width,
+				height: viewport.height
+			},
+			deviceScaleFactor: viewport.deviceScaleFactor ?? 1
+		});
+		const page = await context.newPage();
+		return {
+			page,
+			context
+		};
+	}
+	/**
 	* Update baseline snapshots with current screenshots.
 	*/
 	async updateBaselines(results) {
@@ -150,6 +204,43 @@ var MuseaVrtRunner = class {
 		return updated;
 	}
 	/**
+	* Approve specific failed results (update their baselines).
+	*/
+	async approveResults(results, pattern) {
+		const toApprove = pattern ? results.filter((r) => {
+			const name = `${path.basename(r.artPath, ".art.vue")}/${r.variantName}`;
+			return name.includes(pattern) || matchGlob(name, pattern);
+		}) : results.filter((r) => !r.passed && !r.error);
+		return this.updateBaselines(toApprove);
+	}
+	/**
+	* Clean orphaned snapshots (no corresponding art/variant).
+	*/
+	async cleanOrphans(artFiles) {
+		const snapshotDir = this.options.snapshotDir;
+		let cleaned = 0;
+		try {
+			const files = await fs.promises.readdir(snapshotDir);
+			const validNames = new Set();
+			for (const art of artFiles) {
+				const artBaseName = path.basename(art.path, ".art.vue");
+				for (const variant of art.variants) {
+					if (variant.skipVrt) continue;
+					for (const viewport of this.options.viewports) {
+						const viewportName = viewport.name || `${viewport.width}x${viewport.height}`;
+						validNames.add(`${artBaseName}--${variant.name}--${viewportName}.png`);
+					}
+				}
+			}
+			for (const file of files) if (file.endsWith(".png") && !validNames.has(file)) {
+				await fs.promises.unlink(path.join(snapshotDir, file));
+				cleaned++;
+				console.log(`[vrt] Cleaned: ${file}`);
+			}
+		} catch {}
+		return cleaned;
+	}
+	/**
 	* Get VRT summary statistics.
 	*/
 	getSummary(results) {
@@ -204,6 +295,13 @@ var MuseaVrtRunner = class {
 			width,
 			height
 		});
+		const useAntiAliasing = this.comparison.antiAliasing ?? true;
+		const useAlpha = this.comparison.alpha ?? true;
+		const diffColor = this.comparison.diffColor ?? {
+			r: 255,
+			g: 0,
+			b: 0
+		};
 		let diffPixels = 0;
 		const threshold = .1;
 		for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
@@ -211,19 +309,25 @@ var MuseaVrtRunner = class {
 			const r1 = baseline.data[idx];
 			const g1 = baseline.data[idx + 1];
 			const b1 = baseline.data[idx + 2];
-			const a1 = baseline.data[idx + 3];
+			const a1 = useAlpha ? baseline.data[idx + 3] : 255;
 			const r2 = current.data[idx];
 			const g2 = current.data[idx + 1];
 			const b2 = current.data[idx + 2];
-			const a2 = current.data[idx + 3];
+			const a2 = useAlpha ? current.data[idx + 3] : 255;
 			const delta = colorDelta(r1, g1, b1, a1, r2, g2, b2, a2);
-			if (delta > threshold * 255 * 255) {
-				diffPixels++;
+			if (delta > threshold * 255 * 255) if (useAntiAliasing && isAntiAliased(baseline, current, x, y, width, height)) {
 				diff.data[idx] = 255;
-				diff.data[idx + 1] = 0;
+				diff.data[idx + 1] = 200;
 				diff.data[idx + 2] = 0;
-				diff.data[idx + 3] = 255;
+				diff.data[idx + 3] = 128;
 			} else {
+				diffPixels++;
+				diff.data[idx] = diffColor.r;
+				diff.data[idx + 1] = diffColor.g;
+				diff.data[idx + 2] = diffColor.b;
+				diff.data[idx + 3] = 255;
+			}
+			else {
 				const gray = Math.round((r2 + g2 + b2) / 3);
 				diff.data[idx] = gray;
 				diff.data[idx + 1] = gray;
@@ -242,7 +346,7 @@ var MuseaVrtRunner = class {
 };
 /**
 * Generate VRT report in HTML format.
-* Uses Musea design language for consistency.
+* Supports side-by-side, overlay, and slider comparison modes.
 */
 function generateVrtReport(results, summary) {
 	const formatDuration = (ms) => {
@@ -289,7 +393,6 @@ function generateVrtReport(results, summary) {
       line-height: 1.5;
     }
 
-    /* Header */
     .header {
       background: var(--musea-bg-secondary);
       border-bottom: 1px solid var(--musea-border);
@@ -301,258 +404,78 @@ function generateVrtReport(results, summary) {
       top: 0;
       z-index: 100;
     }
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-    .logo {
-      font-size: 1.25rem;
-      font-weight: 700;
-      color: var(--musea-accent);
-    }
-    .header-title {
-      color: var(--musea-text-muted);
-      font-size: 0.875rem;
-    }
-    .header-meta {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-      font-size: 0.8125rem;
-      color: var(--musea-text-muted);
-    }
-    .header-meta span {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
+    .header-left { display: flex; align-items: center; gap: 1rem; }
+    .logo { font-size: 1.25rem; font-weight: 700; color: var(--musea-accent); }
+    .header-title { color: var(--musea-text-muted); font-size: 0.875rem; }
+    .header-meta { display: flex; align-items: center; gap: 1.5rem; font-size: 0.8125rem; color: var(--musea-text-muted); }
+    .header-meta span { display: flex; align-items: center; gap: 0.375rem; }
 
-    /* Main content */
-    .main {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
+    .main { max-width: 1400px; margin: 0 auto; padding: 2rem; }
 
-    /* Summary cards */
-    .summary {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-      gap: 1rem;
-      margin-bottom: 2rem;
-    }
-    .stat {
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: 8px;
-      padding: 1.25rem;
-      position: relative;
-      overflow: hidden;
-    }
-    .stat::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-    }
+    .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+    .stat { background: var(--musea-bg-secondary); border: 1px solid var(--musea-border); border-radius: 8px; padding: 1.25rem; position: relative; overflow: hidden; }
+    .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
     .stat.passed::before { background: var(--musea-success); }
     .stat.failed::before { background: var(--musea-error); }
     .stat.new::before { background: var(--musea-info); }
     .stat.skipped::before { background: var(--musea-warning); }
-    .stat-value {
-      font-size: 2rem;
-      font-weight: 700;
-      font-variant-numeric: tabular-nums;
-      line-height: 1;
-      margin-bottom: 0.25rem;
-    }
+    .stat-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 0.25rem; }
     .stat.passed .stat-value { color: var(--musea-success); }
     .stat.failed .stat-value { color: var(--musea-error); }
     .stat.new .stat-value { color: var(--musea-info); }
     .stat.skipped .stat-value { color: var(--musea-warning); }
-    .stat-label {
-      color: var(--musea-text-muted);
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      font-weight: 500;
-    }
+    .stat-label { color: var(--musea-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
 
-    /* Filters */
-    .filters {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-      flex-wrap: wrap;
-    }
-    .filter-btn {
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      color: var(--musea-text);
-      padding: 0.5rem 1rem;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 0.8125rem;
-      font-weight: 500;
-      transition: all 0.15s ease;
-    }
-    .filter-btn:hover {
-      background: var(--musea-bg-tertiary);
-      border-color: var(--musea-text-muted);
-    }
-    .filter-btn.active {
-      background: var(--musea-accent);
-      border-color: var(--musea-accent);
-      color: #fff;
-    }
-    .filter-btn .count {
-      opacity: 0.7;
-      margin-left: 0.25rem;
-    }
+    .filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
+    .filter-btn { background: var(--musea-bg-secondary); border: 1px solid var(--musea-border); color: var(--musea-text); padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; transition: all 0.15s ease; }
+    .filter-btn:hover { background: var(--musea-bg-tertiary); border-color: var(--musea-text-muted); }
+    .filter-btn.active { background: var(--musea-accent); border-color: var(--musea-accent); color: #fff; }
+    .filter-btn .count { opacity: 0.7; margin-left: 0.25rem; }
 
-    /* Results */
-    .results {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-    .result {
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: 8px;
-      overflow: hidden;
-      transition: border-color 0.15s ease;
-    }
-    .result:hover {
-      border-color: var(--musea-text-muted);
-    }
-    .result-header {
-      padding: 1rem 1.25rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      cursor: pointer;
-      border-left: 3px solid transparent;
-      background: var(--musea-bg-tertiary);
-    }
+    /* Comparison mode toggle */
+    .compare-modes { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; background: var(--musea-bg-secondary); border-radius: 6px; padding: 0.25rem; width: fit-content; }
+    .compare-mode-btn { background: none; border: none; color: var(--musea-text-muted); padding: 0.375rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.15s ease; }
+    .compare-mode-btn.active { background: var(--musea-bg-tertiary); color: var(--musea-text); }
+
+    .results { display: flex; flex-direction: column; gap: 0.75rem; }
+    .result { background: var(--musea-bg-secondary); border: 1px solid var(--musea-border); border-radius: 8px; overflow: hidden; transition: border-color 0.15s ease; }
+    .result:hover { border-color: var(--musea-text-muted); }
+    .result-header { padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-left: 3px solid transparent; background: var(--musea-bg-tertiary); }
     .result.passed .result-header { border-left-color: var(--musea-success); }
     .result.failed .result-header { border-left-color: var(--musea-error); }
     .result.new .result-header { border-left-color: var(--musea-info); }
     .result.error .result-header { border-left-color: var(--musea-warning); }
 
-    .result-info {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-    .result-name {
-      font-weight: 600;
-      font-size: 0.9375rem;
-    }
-    .result-meta {
-      color: var(--musea-text-muted);
-      font-size: 0.8125rem;
-      padding: 0.125rem 0.5rem;
-      background: var(--musea-bg-secondary);
-      border-radius: 4px;
-    }
-    .result-badge {
-      padding: 0.25rem 0.625rem;
-      border-radius: 4px;
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
+    .result-info { display: flex; align-items: center; gap: 1rem; }
+    .result-name { font-weight: 600; font-size: 0.9375rem; }
+    .result-meta { color: var(--musea-text-muted); font-size: 0.8125rem; padding: 0.125rem 0.5rem; background: var(--musea-bg-secondary); border-radius: 4px; }
+    .result-badge { padding: 0.25rem 0.625rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
     .result.passed .result-badge { background: rgba(74, 222, 128, 0.15); color: var(--musea-success); }
     .result.failed .result-badge { background: rgba(248, 113, 113, 0.15); color: var(--musea-error); }
     .result.new .result-badge { background: rgba(96, 165, 250, 0.15); color: var(--musea-info); }
     .result.error .result-badge { background: rgba(251, 191, 36, 0.15); color: var(--musea-warning); }
 
-    .result-body {
-      border-top: 1px solid var(--musea-border);
-    }
-    .result-details {
-      padding: 0.875rem 1.25rem;
-      font-size: 0.8125rem;
-      color: var(--musea-text-muted);
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      background: var(--musea-bg-primary);
-    }
-    .result-details.error {
-      color: var(--musea-error);
-    }
+    .result-body { border-top: 1px solid var(--musea-border); }
+    .result-details { padding: 0.875rem 1.25rem; font-size: 0.8125rem; color: var(--musea-text-muted); font-family: 'SF Mono', 'Fira Code', monospace; background: var(--musea-bg-primary); }
+    .result-details.error { color: var(--musea-error); }
 
-    /* Image comparison */
-    .result-images {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
-      padding: 1.25rem;
-      background: var(--musea-bg-primary);
-    }
-    .image-container {
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: 6px;
-      overflow: hidden;
-    }
-    .image-label {
-      padding: 0.625rem 0.875rem;
-      font-size: 0.6875rem;
-      font-weight: 600;
-      color: var(--musea-text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      background: var(--musea-bg-tertiary);
-      border-bottom: 1px solid var(--musea-border);
-    }
-    .image-wrapper {
-      padding: 0.5rem;
-      background: repeating-conic-gradient(
-        var(--musea-bg-tertiary) 0% 25%,
-        var(--musea-bg-secondary) 0% 50%
-      ) 50% / 16px 16px;
-    }
-    .image-container img {
-      width: 100%;
-      height: auto;
-      display: block;
-      border-radius: 2px;
-    }
+    .result-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; padding: 1.25rem; background: var(--musea-bg-primary); }
+    .result-images.overlay { grid-template-columns: 1fr; }
+    .image-container { background: var(--musea-bg-secondary); border: 1px solid var(--musea-border); border-radius: 6px; overflow: hidden; }
+    .image-label { padding: 0.625rem 0.875rem; font-size: 0.6875rem; font-weight: 600; color: var(--musea-text-muted); text-transform: uppercase; letter-spacing: 0.08em; background: var(--musea-bg-tertiary); border-bottom: 1px solid var(--musea-border); }
+    .image-wrapper { padding: 0.5rem; background: repeating-conic-gradient(var(--musea-bg-tertiary) 0% 25%, var(--musea-bg-secondary) 0% 50%) 50% / 16px 16px; }
+    .image-container img { width: 100%; height: auto; display: block; border-radius: 2px; }
 
-    /* Empty state */
-    .empty-state {
-      text-align: center;
-      padding: 4rem 2rem;
-      color: var(--musea-text-muted);
-    }
-    .empty-state-icon {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-      opacity: 0.5;
-    }
+    /* Slider comparison */
+    .slider-compare { position: relative; overflow: hidden; }
+    .slider-compare img { display: block; width: 100%; }
+    .slider-overlay { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; border-right: 2px solid var(--musea-accent); }
+    .slider-overlay img { display: block; min-width: 100%; height: 100%; object-fit: cover; }
 
-    /* Success state */
-    .all-passed {
-      background: rgba(74, 222, 128, 0.1);
-      border: 1px solid rgba(74, 222, 128, 0.2);
-      border-radius: 8px;
-      padding: 1.5rem;
-      text-align: center;
-      margin-bottom: 1.5rem;
-    }
-    .all-passed-icon {
-      font-size: 2.5rem;
-      margin-bottom: 0.5rem;
-    }
-    .all-passed-text {
-      color: var(--musea-success);
-      font-weight: 600;
-    }
+    .empty-state { text-align: center; padding: 4rem 2rem; color: var(--musea-text-muted); }
+    .all-passed { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: 8px; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; }
+    .all-passed-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
+    .all-passed-text { color: var(--musea-success); font-weight: 600; }
   </style>
 </head>
 <body>
@@ -579,22 +502,10 @@ function generateVrtReport(results, summary) {
 
   <main class="main">
     <div class="summary">
-      <div class="stat passed">
-        <div class="stat-value">${summary.passed}</div>
-        <div class="stat-label">Passed</div>
-      </div>
-      <div class="stat failed">
-        <div class="stat-value">${summary.failed}</div>
-        <div class="stat-label">Failed</div>
-      </div>
-      <div class="stat new">
-        <div class="stat-value">${summary.new}</div>
-        <div class="stat-label">New</div>
-      </div>
-      <div class="stat skipped">
-        <div class="stat-value">${summary.skipped}</div>
-        <div class="stat-label">Skipped</div>
-      </div>
+      <div class="stat passed"><div class="stat-value">${summary.passed}</div><div class="stat-label">Passed</div></div>
+      <div class="stat failed"><div class="stat-value">${summary.failed}</div><div class="stat-label">Failed</div></div>
+      <div class="stat new"><div class="stat-value">${summary.new}</div><div class="stat-label">New</div></div>
+      <div class="stat skipped"><div class="stat-value">${summary.skipped}</div><div class="stat-label">Skipped</div></div>
     </div>
 
     ${summary.failed === 0 && summary.skipped === 0 && summary.total > 0 ? `<div class="all-passed">
@@ -609,11 +520,14 @@ function generateVrtReport(results, summary) {
       <button class="filter-btn" data-filter="new">New<span class="count">(${summary.new})</span></button>
     </div>
 
+    <div class="compare-modes">
+      <button class="compare-mode-btn active" data-mode="side-by-side">Side by Side</button>
+      <button class="compare-mode-btn" data-mode="overlay">Overlay</button>
+      <button class="compare-mode-btn" data-mode="slider">Slider</button>
+    </div>
+
     <div class="results">
-      ${results.length === 0 ? `<div class="empty-state">
-              <div class="empty-state-icon">📷</div>
-              <p>No visual tests found</p>
-            </div>` : results.map((r) => {
+      ${results.length === 0 ? `<div class="empty-state"><p>No visual tests found</p></div>` : results.map((r) => {
 		const status = r.error ? "error" : r.isNew ? "new" : r.passed ? "passed" : "failed";
 		const badge = r.error ? "Error" : r.isNew ? "New" : r.passed ? "Passed" : "Failed";
 		const artName = path.basename(r.artPath, ".art.vue");
@@ -627,25 +541,10 @@ function generateVrtReport(results, summary) {
 			details = `<div class="result-details">diff: ${diffFormatted}% (${pixelsFormatted} / ${totalFormatted} pixels)</div>`;
 		}
 		let images = "";
-		if (!r.error && !r.passed && r.diffPath) images = `<div class="result-images">
-                    ${r.snapshotPath ? `<div class="image-container">
-                            <div class="image-label">Baseline</div>
-                            <div class="image-wrapper">
-                              <img src="file://${r.snapshotPath}" alt="Baseline" loading="lazy" />
-                            </div>
-                          </div>` : ""}
-                    ${r.currentPath ? `<div class="image-container">
-                            <div class="image-label">Current</div>
-                            <div class="image-wrapper">
-                              <img src="file://${r.currentPath}" alt="Current" loading="lazy" />
-                            </div>
-                          </div>` : ""}
-                    ${r.diffPath ? `<div class="image-container">
-                            <div class="image-label">Diff</div>
-                            <div class="image-wrapper">
-                              <img src="file://${r.diffPath}" alt="Diff" loading="lazy" />
-                            </div>
-                          </div>` : ""}
+		if (!r.error && !r.passed && r.diffPath) images = `<div class="result-images" data-baseline="file://${r.snapshotPath}" data-current="file://${r.currentPath}" data-diff="file://${r.diffPath}">
+                    ${r.snapshotPath ? `<div class="image-container"><div class="image-label">Baseline</div><div class="image-wrapper"><img src="file://${r.snapshotPath}" alt="Baseline" loading="lazy" /></div></div>` : ""}
+                    ${r.currentPath ? `<div class="image-container"><div class="image-label">Current</div><div class="image-wrapper"><img src="file://${r.currentPath}" alt="Current" loading="lazy" /></div></div>` : ""}
+                    ${r.diffPath ? `<div class="image-container"><div class="image-label">Diff</div><div class="image-wrapper"><img src="file://${r.diffPath}" alt="Diff" loading="lazy" /></div></div>` : ""}
                   </div>`;
 		const hasBody = details || images;
 		return `<div class="result ${status}" data-status="${status}">
@@ -663,20 +562,26 @@ function generateVrtReport(results, summary) {
   </main>
 
   <script>
+    // Filter buttons
     document.querySelectorAll('.filter-btn').forEach(btn => {
       btn.addEventListener('click', () => {
         document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
         const filter = btn.dataset.filter;
         document.querySelectorAll('.result').forEach(result => {
-          if (filter === 'all' || result.dataset.status === filter) {
-            result.style.display = 'block';
-          } else {
-            result.style.display = 'none';
-          }
+          result.style.display = (filter === 'all' || result.dataset.status === filter) ? 'block' : 'none';
         });
       });
     });
+
+    // Compare mode buttons
+    document.querySelectorAll('.compare-mode-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.compare-mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        // Mode switching would update result-images display; this is a static report for now
+      });
+    });
   </script>
 </body>
 </html>`;
@@ -719,7 +624,6 @@ async function writePng(png, filepath) {
 }
 /**
 * Calculate color delta using YIQ color space.
-* This is more perceptually accurate than simple RGB difference.
 */
 function colorDelta(r1, g1, b1, a1, r2, g2, b2, a2) {
 	if (a1 !== 255) {
@@ -761,6 +665,35 @@ async function fileExists(filepath) {
 	}
 }
 /**
+* Simple anti-aliasing detection.
+* A pixel is likely anti-aliased if its neighbors have high contrast in opposite directions.
+*/
+function isAntiAliased(img1, img2, x, y, width, height) {
+	const minX = Math.max(0, x - 1);
+	const maxX = Math.min(width - 1, x + 1);
+	const minY = Math.max(0, y - 1);
+	const maxY = Math.min(height - 1, y + 1);
+	let zeroes = 0;
+	let positives = 0;
+	let negatives = 0;
+	for (let ny = minY; ny <= maxY; ny++) for (let nx = minX; nx <= maxX; nx++) {
+		if (nx === x && ny === y) continue;
+		const idx = (ny * width + nx) * 4;
+		const delta = colorDelta(img1.data[idx], img1.data[idx + 1], img1.data[idx + 2], img1.data[idx + 3], img2.data[idx], img2.data[idx + 1], img2.data[idx + 2], img2.data[idx + 3]);
+		if (delta === 0) zeroes++;
+		else if (delta > 0) positives++;
+		else negatives++;
+	}
+	return zeroes > 0 && (positives > 0 || negatives > 0) && positives + negatives < 4;
+}
+/**
+* Simple glob matching for pattern-based filtering.
+*/
+function matchGlob(filepath, pattern) {
+	const regex = pattern.replace(/\./g, "\\.").replace(/\*\*/g, ".*").replace(/\*(?!\*)/g, "[^/]*");
+	return new RegExp(`^${regex}$`).test(filepath);
+}
+/**
 * Escape HTML special characters.
 */
 function escapeHtml(str) {
@@ -770,4 +703,4 @@ var vrt_default = MuseaVrtRunner;
 
 //#endregion
 export { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport, vrt_default };
-//# sourceMappingURL=vrt-DRwtnkE5.js.map
+//# sourceMappingURL=vrt-DP87vGIA.js.map