@logicsync/pixelprobe 0.1.0

package/dist/extractor/StyleExtractor.js

@@ -0,0 +1,88 @@
+import { STYLE_CATEGORIES } from "../types/config.js";
+export class StyleExtractor {
+    /**
+     * Extract computed styles for specific categories from an element.
+     */
+    static async extractStyles(locator, categories) {
+        const propertiesToExtract = StyleExtractor.getProperties(categories);
+        return await locator.evaluate((el, props) => {
+            const computed = window.getComputedStyle(el);
+            const styles = {};
+            for (const prop of props) {
+                const value = computed.getPropertyValue(prop);
+                if (value) {
+                    styles[prop] = value;
+                }
+            }
+            return styles;
+        }, propertiesToExtract);
+    }
+    /**
+     * Extract layout metrics (box model) from an element.
+     */
+    static async extractLayoutMetrics(locator) {
+        return await locator.evaluate((el) => {
+            const rect = el.getBoundingClientRect();
+            const computed = window.getComputedStyle(el);
+            const parseNum = (val) => parseFloat(val) || 0;
+            return {
+                boundingBox: {
+                    x: Math.round(rect.x * 100) / 100,
+                    y: Math.round(rect.y * 100) / 100,
+                    width: Math.round(rect.width * 100) / 100,
+                    height: Math.round(rect.height * 100) / 100,
+                },
+                margin: {
+                    top: parseNum(computed.marginTop),
+                    right: parseNum(computed.marginRight),
+                    bottom: parseNum(computed.marginBottom),
+                    left: parseNum(computed.marginLeft),
+                },
+                padding: {
+                    top: parseNum(computed.paddingTop),
+                    right: parseNum(computed.paddingRight),
+                    bottom: parseNum(computed.paddingBottom),
+                    left: parseNum(computed.paddingLeft),
+                },
+                border: {
+                    top: parseNum(computed.borderTopWidth),
+                    right: parseNum(computed.borderRightWidth),
+                    bottom: parseNum(computed.borderBottomWidth),
+                    left: parseNum(computed.borderLeftWidth),
+                },
+                scrollWidth: el.scrollWidth,
+                scrollHeight: el.scrollHeight,
+            };
+        });
+    }
+    /**
+     * Extract computed styles for ALL properties (not just categorized ones).
+     * Useful for deep analysis.
+     */
+    static async extractAllStyles(locator) {
+        return await locator.evaluate((el) => {
+            const computed = window.getComputedStyle(el);
+            const styles = {};
+            for (let i = 0; i < computed.length; i++) {
+                const prop = computed[i];
+                styles[prop] = computed.getPropertyValue(prop);
+            }
+            return styles;
+        });
+    }
+    /**
+     * Get the flat list of CSS properties for given categories.
+     */
+    static getProperties(categories) {
+        const cats = categories ?? Object.keys(STYLE_CATEGORIES);
+        const props = [];
+        for (const cat of cats) {
+            const catProps = STYLE_CATEGORIES[cat];
+            if (catProps) {
+                props.push(...catProps);
+            }
+        }
+        return [...new Set(props)]; // deduplicate
+    }
+}
+//# sourceMappingURL=StyleExtractor.js.map

package/dist/extractor/StyleExtractor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleExtractor.js","sourceRoot":"","sources":["../../src/extractor/StyleExtractor.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { WebSectionComparator } from "./core.js";
+export type { ComparisonConfig, ResolvedConfig, Breakpoint, PresetBreakpointName, StyleCategory, } from "./types/config.js";
+export { ComparisonConfigSchema, PRESET_BREAKPOINTS, STYLE_CATEGORIES, } from "./types/config.js";
+export type { ComparisonResult, ComparisonSummary, BreakpointResult, StyleDifference, StyleComparisonResult, PixelComparisonResult, LayoutDifference, LayoutComparisonResult, ElementInfo, ExtractedSection, LayoutMetrics, ProgressCallback, ProgressEvent, Severity, } from "./types/comparison.js";
+export { JSONReporter } from "./reporter/JSONReporter.js";
+export { HTMLReporter } from "./reporter/HTMLReporter.js";
+export { ViewportManager } from "./browser/ViewportManager.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAGjD,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,QAAQ,GACT,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+// ── Main API ────────────────────────────────────────────────────────
+export { WebSectionComparator } from "./core.js";
+export { ComparisonConfigSchema, PRESET_BREAKPOINTS, STYLE_CATEGORIES, } from "./types/config.js";
+// ── Reporters ───────────────────────────────────────────────────────
+export { JSONReporter } from "./reporter/JSONReporter.js";
+export { HTMLReporter } from "./reporter/HTMLReporter.js";
+// ── Browser utilities ───────────────────────────────────────────────
+export { ViewportManager } from "./browser/ViewportManager.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAWjD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAmB3B,uEAAuE;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,uEAAuE;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/mcp/server.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=server.d.ts.map

package/dist/mcp/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":""}

package/dist/mcp/server.js

@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { WebSectionComparator } from "../core.js";
+import { JSONReporter } from "../reporter/JSONReporter.js";
+import { HTMLReporter } from "../reporter/HTMLReporter.js";
+import { PRESET_BREAKPOINTS } from "../types/config.js";
+const server = new McpServer({
+    name: "pixelprobe",
+    version: "0.1.0",
+});
+// ── Tool: compare_sections ──────────────────────────────────────────
+server.tool("compare_sections", "Compare a web page section between source and target URLs across responsive breakpoints. " +
+    "Returns detailed style, layout, and visual differences at each breakpoint. " +
+    "Use this to verify that a rebuilt section matches the original design.", {
+    sourceUrl: z.string().url().describe("Source URL (the reference/original page)"),
+    targetUrl: z.string().url().describe("Target URL (the local build or new version)"),
+    selector: z
+        .string()
+        .min(1)
+        .describe('CSS selector for the section on the source page (e.g. ".hero-section", "#pricing")'),
+    targetSelector: z
+        .string()
+        .min(1)
+        .optional()
+        .describe('CSS selector for the section on the target page, if different from source. Falls back to selector.'),
+    elementIndex: z
+        .number()
+        .int()
+        .min(0)
+        .optional()
+        .describe("Element index if selector matches multiple elements (default: 0)"),
+    breakpoints: z
+        .array(z.string())
+        .optional()
+        .describe('Breakpoint names to test. Presets: mobile, tablet, desktop, desktop-lg. Or use WIDTHxHEIGHT format. Default: ["mobile", "tablet", "desktop", "desktop-lg"]'),
+    pixelThreshold: z
+        .number()
+        .min(0)
+        .max(1)
+        .optional()
+        .describe("Pixel comparison sensitivity (0-1, lower = stricter). Default: 0.1"),
+    includeVisual: z
+        .boolean()
+        .optional()
+        .describe("Include pixel-level visual comparison. Default: true"),
+    includeStyles: z
+        .boolean()
+        .optional()
+        .describe("Include computed style comparison. Default: true"),
+    includeLayout: z
+        .boolean()
+        .optional()
+        .describe("Include layout metrics comparison. Default: true"),
+    waitForTimeout: z
+        .number()
+        .int()
+        .min(0)
+        .optional()
+        .describe("Wait N ms after page load before capturing. Default: 0"),
+    outputDir: z
+        .string()
+        .optional()
+        .describe("Directory to save report artifacts. Default: ./pixelprobe-output"),
+}, async (args) => {
+    const comparator = new WebSectionComparator({
+        headless: true,
+        timeout: 30000,
+    });
+    try {
+        const result = await comparator.compare({
+            sourceUrl: args.sourceUrl,
+            targetUrl: args.targetUrl,
+            selector: args.selector,
+            targetSelector: args.targetSelector,
+            elementIndex: args.elementIndex ?? 0,
+            breakpoints: args.breakpoints,
+            pixelThreshold: args.pixelThreshold ?? 0.1,
+            includeVisual: args.includeVisual ?? true,
+            includeStyles: args.includeStyles ?? true,
+            includeLayout: args.includeLayout ?? true,
+            waitForTimeout: args.waitForTimeout ?? 0,
+        });
+        // Save reports into a timestamped run directory
+        const baseDir = args.outputDir ?? "./pixelprobe-output";
+        const timestamp = new Date()
+            .toISOString()
+            .replace(/[:.]/g, "-")
+            .replace("T", "_")
+            .slice(0, 19);
+        const runDir = `${baseDir}/run_${timestamp}_${result.id}`;
+        const jsonPath = await JSONReporter.generate(result, runDir);
+        const htmlPath = await HTMLReporter.generate(result, runDir);
+        result.artifacts.jsonPath = jsonPath;
+        result.artifacts.htmlReportPath = htmlPath;
+        // Return compact summary for the agent
+        const summary = JSONReporter.toCompactSummary(result);
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: JSON.stringify(summary, null, 2),
+                },
+                {
+                    type: "text",
+                    text: `\n---\nReports saved:\n  JSON: ${jsonPath}\n  HTML: ${htmlPath}`,
+                },
+            ],
+        };
+    }
+    catch (err) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Error during comparison: ${err.message}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// ── Tool: capture_section ───────────────────────────────────────────
+server.tool("capture_section", "Capture information about a section on a web page — its computed styles, layout metrics, " +
+    "and a screenshot. Useful for inspecting a single page before running a comparison.", {
+    url: z.string().url().describe("URL of the page to inspect"),
+    selector: z.string().min(1).describe("CSS selector for the section"),
+    elementIndex: z
+        .number()
+        .int()
+        .min(0)
+        .optional()
+        .describe("Element index if selector matches multiple (default: 0)"),
+    breakpoint: z
+        .string()
+        .optional()
+        .describe('Breakpoint to use. Default: "desktop"'),
+}, async (args) => {
+    const comparator = new WebSectionComparator({ headless: true });
+    try {
+        // First enumerate to show what's available
+        const elements = await comparator.enumerate(args.url, args.selector, args.breakpoint);
+        if (elements.length === 0) {
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `No elements found matching "${args.selector}" on ${args.url}`,
+                    },
+                ],
+                isError: true,
+            };
+        }
+        const elementList = elements
+            .map((el) => `  [${el.index}] <${el.tagName}> ${el.boundingBox.width}×${el.boundingBox.height} at (${el.boundingBox.x},${el.boundingBox.y}) — "${el.textPreview}"`)
+            .join("\n");
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Found ${elements.length} element(s) matching "${args.selector}":\n${elementList}\n\nUse elementIndex to select a specific one for comparison.`,
+                },
+            ],
+        };
+    }
+    catch (err) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Error: ${err.message}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// ── Tool: list_breakpoints ──────────────────────────────────────────
+server.tool("list_breakpoints", "List all available responsive breakpoint presets with their dimensions.", {}, async () => {
+    const presets = Object.entries(PRESET_BREAKPOINTS)
+        .map(([name, bp]) => `  ${name.padEnd(14)} ${bp.width}×${bp.height}  ${bp.label}`)
+        .join("\n");
+    return {
+        content: [
+            {
+                type: "text",
+                text: `Available breakpoint presets:\n${presets}\n\nYou can also use custom WIDTHxHEIGHT format (e.g. "1440x900").`,
+            },
+        ],
+    };
+});
+// ── Start Server ────────────────────────────────────────────────────
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("pixelprobe MCP server running on stdio");
+}
+main().catch((err) => {
+    console.error("Fatal error:", err);
+    process.exit(1);
+});
+//# sourceMappingURL=server.js.map

package/dist/mcp/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":"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"}

package/dist/reporter/HTMLReporter.d.ts

@@ -0,0 +1,8 @@
+import type { ComparisonResult } from "../types/comparison.js";
+export declare class HTMLReporter {
+    /**
+     * Generate a self-contained interactive HTML report.
+     */
+    static generate(result: ComparisonResult, outputDir: string): Promise<string>;
+}
+//# sourceMappingURL=HTMLReporter.d.ts.map

package/dist/reporter/HTMLReporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLReporter.d.ts","sourceRoot":"","sources":["../../src/reporter/HTMLReporter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,wBAAwB,CAAC;AAEjF,qBAAa,YAAY;IACvB;;OAEG;WACU,QAAQ,CACnB,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,MAAM,CAAC;CA2BnB"}

package/dist/reporter/HTMLReporter.js

@@ -0,0 +1,219 @@
+import { writeFile, mkdir } from "node:fs/promises";
+import { join } from "node:path";
+export class HTMLReporter {
+    /**
+     * Generate a self-contained interactive HTML report.
+     */
+    static async generate(result, outputDir) {
+        await mkdir(outputDir, { recursive: true });
+        // Save screenshots and diff images, collect base64 for embedding
+        const imageData = {};
+        for (const [bpName, bpResult] of Object.entries(result.breakpoints)) {
+            imageData[bpName] = {};
+            if (bpResult.visual?.diffImage) {
+                imageData[bpName].diff = bufferToDataUrl(bpResult.visual.diffImage);
+                // Also save to disk
+                const diffPath = join(outputDir, `diff-${bpName}.png`);
+                await writeFile(diffPath, bpResult.visual.diffImage);
+                result.artifacts.diffImages[bpName] = diffPath;
+            }
+        }
+        const html = buildHTML(result, imageData);
+        const htmlPath = join(outputDir, `report-${result.id}.html`);
+        await writeFile(htmlPath, html);
+        return htmlPath;
+    }
+}
+function bufferToDataUrl(buf) {
+    return `data:image/png;base64,${buf.toString("base64")}`;
+}
+function severityBadge(severity) {
+    const colors = {
+        critical: "#ef4444",
+        warning: "#f59e0b",
+        info: "#3b82f6",
+        pass: "#22c55e",
+    };
+    const color = colors[severity] || "#6b7280";
+    return `<span style="background:${color};color:white;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase">${severity}</span>`;
+}
+function buildHTML(result, imageData) {
+    const breakpointTabs = Object.entries(result.breakpoints)
+        .map(([name, bp], i) => `
+      <button class="tab ${i === 0 ? "active" : ""}" onclick="showTab('${name}', this)">
+        ${name} (${bp.breakpoint.width}px)
+        ${bp.error ? "⚠️" : bp.styles?.summary.critical ? "🔴" : bp.styles?.summary.warning ? "🟡" : "🟢"}
+      </button>`)
+        .join("");
+    const breakpointPanels = Object.entries(result.breakpoints)
+        .map(([name, bp], i) => `
+      <div class="panel ${i === 0 ? "active" : ""}" id="panel-${name}">
+        ${bp.error ? `<div class="error">Error: ${escapeHtml(bp.error)}</div>` : buildBreakpointPanel(name, bp, imageData[name])}
+      </div>`)
+        .join("");
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Selection Comparison Report — ${result.id}</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #e2e8f0; padding: 24px; }
+  .container { max-width: 1400px; margin: 0 auto; }
+  h1 { font-size: 24px; margin-bottom: 8px; }
+  .meta { color: #94a3b8; font-size: 14px; margin-bottom: 24px; }
+  .meta a { color: #60a5fa; }
+  .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
+  .summary-card { background: #1e293b; border-radius: 8px; padding: 16px; }
+  .summary-card .label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
+  .summary-card .value { font-size: 28px; font-weight: 700; margin-top: 4px; }
+  .tabs { display: flex; gap: 4px; border-bottom: 2px solid #1e293b; margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; }
+  .tab { background: none; border: none; color: #94a3b8; padding: 10px 16px; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
+  .tab:hover { color: #e2e8f0; }
+  .tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
+  .panel { display: none; }
+  .panel.active { display: block; }
+  .section { background: #1e293b; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
+  .section h3 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+  .diff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .diff-table th { text-align: left; padding: 8px 12px; border-bottom: 1px solid #334155; color: #94a3b8; font-weight: 500; }
+  .diff-table td { padding: 8px 12px; border-bottom: 1px solid #1e293b; font-family: "SF Mono", Monaco, monospace; font-size: 12px; }
+  .diff-table tr:hover { background: #334155; }
+  .severity-critical { color: #ef4444; }
+  .severity-warning { color: #f59e0b; }
+  .severity-info { color: #3b82f6; }
+  .diff-img { max-width: 100%; border-radius: 4px; border: 1px solid #334155; }
+  .error { background: #451a1a; border: 1px solid #ef4444; border-radius: 8px; padding: 16px; color: #fca5a5; }
+  .pixel-stats { display: flex; gap: 24px; margin-bottom: 12px; font-size: 14px; }
+  .pixel-stats .stat { color: #94a3b8; }
+  .pixel-stats .stat strong { color: #e2e8f0; }
+  .category-tag { background: #334155; color: #94a3b8; padding: 2px 6px; border-radius: 3px; font-size: 11px; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>Selection Comparison Report</h1>
+  <div class="meta">
+    <strong>Source:</strong> <a href="${escapeHtml(result.config.sourceUrl)}">${escapeHtml(result.config.sourceUrl)}</a> · <code>${escapeHtml(result.config.selector)}</code><br>
+    <strong>Target:</strong> <a href="${escapeHtml(result.config.targetUrl)}">${escapeHtml(result.config.targetUrl)}</a> · <code>${escapeHtml(result.config.targetSelector ?? result.config.selector)}</code><br>
+    <strong>Duration:</strong> ${(result.duration / 1000).toFixed(1)}s ·
+    <strong>Generated:</strong> ${result.timestamp}
+  </div>
+
+  <div class="summary-grid">
+    <div class="summary-card">
+      <div class="label">Overall</div>
+      <div class="value">${severityBadge(result.summary.overallSeverity)}</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Breakpoints with Differences</div>
+      <div class="value">${result.summary.breakpointsWithDifferences}/${result.summary.totalBreakpoints}</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Style Differences</div>
+      <div class="value">${result.summary.totalStyleDifferences}</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Avg Pixel Diff</div>
+      <div class="value">${result.summary.averagePixelDiff}%</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Worst Breakpoint</div>
+      <div class="value" style="font-size:18px">${result.summary.worstBreakpoint ?? "None"}</div>
+    </div>
+  </div>
+
+  <div class="tabs">${breakpointTabs}</div>
+  ${breakpointPanels}
+</div>
+
+<script>
+function showTab(name, btn) {
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById('panel-' + name).classList.add('active');
+}
+</script>
+</body>
+</html>`;
+}
+function buildBreakpointPanel(name, bp, images) {
+    let html = "";
+    // Visual diff
+    if (bp.visual) {
+        html += `
+    <div class="section">
+      <h3>Visual Comparison ${severityBadge(bp.visual.diffPercentage > 5 ? "critical" : bp.visual.diffPercentage > 1 ? "warning" : bp.visual.diffPercentage > 0 ? "info" : "pass")}</h3>
+      <div class="pixel-stats">
+        <div class="stat">Pixels changed: <strong>${bp.visual.diffPixelCount.toLocaleString()}</strong> / ${bp.visual.totalPixels.toLocaleString()}</div>
+        <div class="stat">Diff: <strong>${bp.visual.diffPercentage}%</strong></div>
+        <div class="stat">Source size: <strong>${bp.visual.sourceWidth}×${bp.visual.sourceHeight}</strong></div>
+        <div class="stat">Target size: <strong>${bp.visual.targetWidth}×${bp.visual.targetHeight}</strong></div>
+        ${bp.visual.sizeMismatch ? '<div class="stat severity-warning">⚠ Size mismatch</div>' : ""}
+      </div>
+      ${images?.diff ? `<img class="diff-img" src="${images.diff}" alt="Visual diff for ${name}">` : ""}
+    </div>`;
+    }
+    // Style diffs
+    if (bp.styles && bp.styles.differences.length > 0) {
+        html += `
+    <div class="section">
+      <h3>Style Differences (${bp.styles.summary.total}) ${severityBadge(bp.styles.summary.critical > 0 ? "critical" : bp.styles.summary.warning > 0 ? "warning" : "info")}</h3>
+      <table class="diff-table">
+        <thead><tr><th>Property</th><th>Category</th><th>Source</th><th>Target</th><th>Severity</th></tr></thead>
+        <tbody>
+          ${bp.styles.differences
+            .map((d) => `
+          <tr>
+            <td><strong>${escapeHtml(d.property)}</strong></td>
+            <td><span class="category-tag">${escapeHtml(d.category)}</span></td>
+            <td>${escapeHtml(d.sourceValue)}</td>
+            <td>${escapeHtml(d.targetValue)}</td>
+            <td class="severity-${d.severity}">${d.severity}</td>
+          </tr>`)
+            .join("")}
+        </tbody>
+      </table>
+    </div>`;
+    }
+    else if (bp.styles) {
+        html += `<div class="section"><h3>Style Differences ${severityBadge("pass")}</h3><p style="color:#94a3b8">No style differences found.</p></div>`;
+    }
+    // Layout diffs
+    if (bp.layout && bp.layout.differences.length > 0) {
+        html += `
+    <div class="section">
+      <h3>Layout Differences (${bp.layout.summary.total}) ${severityBadge(bp.layout.summary.critical > 0 ? "critical" : bp.layout.summary.warning > 0 ? "warning" : "info")}</h3>
+      <table class="diff-table">
+        <thead><tr><th>Property</th><th>Source</th><th>Target</th><th>Diff (px)</th><th>Diff (%)</th><th>Severity</th></tr></thead>
+        <tbody>
+          ${bp.layout.differences
+            .map((d) => `
+          <tr>
+            <td><strong>${escapeHtml(d.property)}</strong></td>
+            <td>${d.sourceValue}px</td>
+            <td>${d.targetValue}px</td>
+            <td>${d.absoluteDiff > 0 ? "+" : ""}${d.absoluteDiff}px</td>
+            <td>${d.percentageDiff > 0 ? "+" : ""}${d.percentageDiff}%</td>
+            <td class="severity-${d.severity}">${d.severity}</td>
+          </tr>`)
+            .join("")}
+        </tbody>
+      </table>
+    </div>`;
+    }
+    else if (bp.layout) {
+        html += `<div class="section"><h3>Layout Differences ${severityBadge("pass")}</h3><p style="color:#94a3b8">No layout differences found.</p></div>`;
+    }
+    return html;
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+//# sourceMappingURL=HTMLReporter.js.map

package/dist/reporter/HTMLReporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLReporter.js","sourceRoot":"","sources":["../../src/reporter/HTMLReporter.ts"],"names":[],"mappings":"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"}

package/dist/reporter/JSONReporter.d.ts

@@ -0,0 +1,17 @@
+import type { ComparisonResult } from "../types/comparison.js";
+export declare class JSONReporter {
+    /**
+     * Generate a JSON report file.
+     * Strips binary data (screenshots, diff images) and replaces with file paths.
+     */
+    static generate(result: ComparisonResult, outputDir: string): Promise<string>;
+    /**
+     * Convert result to a JSON-safe object (no Buffers).
+     */
+    static toSerializable(result: ComparisonResult): any;
+    /**
+     * Generate a compact JSON summary (no per-property details).
+     */
+    static toCompactSummary(result: ComparisonResult): object;
+}
+//# sourceMappingURL=JSONReporter.d.ts.map

package/dist/reporter/JSONReporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONReporter.d.ts","sourceRoot":"","sources":["../../src/reporter/JSONReporter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,qBAAa,YAAY;IACvB;;;OAGG;WACU,QAAQ,CACnB,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,MAAM,CAAC;IAwBlB;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,gBAAgB,GAAG,GAAG;IAuBpD;;OAEG;IACH,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM;CA2B1D"}