@logicsync/pixelprobe 0.1.0

package/dist/browser/BrowserManager.js

@@ -0,0 +1,64 @@
+import { chromium } from "playwright";
+export class BrowserManager {
+    browser = null;
+    options;
+    constructor(options = {}) {
+        this.options = {
+            headless: options.headless ?? true,
+            timeout: options.timeout ?? 30000,
+        };
+    }
+    async launch() {
+        if (this.browser)
+            return;
+        this.browser = await chromium.launch({
+            headless: this.options.headless,
+        });
+    }
+    async createPage(breakpoint) {
+        if (!this.browser) {
+            await this.launch();
+        }
+        const context = await this.browser.newContext({
+            viewport: {
+                width: breakpoint.width,
+                height: breakpoint.height,
+            },
+            deviceScaleFactor: 1,
+        });
+        context.setDefaultTimeout(this.options.timeout);
+        const page = await context.newPage();
+        return page;
+    }
+    async navigateAndWait(page, url, options = {}) {
+        // Use domcontentloaded first (fast), then wait for selector/timeout
+        // "networkidle" is unreliable on sites with analytics, chat widgets, etc.
+        await page.goto(url, {
+            waitUntil: "domcontentloaded",
+            timeout: this.options.timeout,
+        });
+        // Wait for the target selector to appear in the DOM
+        if (options.waitForSelector) {
+            await page.waitForSelector(options.waitForSelector, {
+                timeout: this.options.timeout,
+            });
+        }
+        // Let remaining assets (fonts, images, lazy-loaded CSS) settle.
+        // Default 1s even if no explicit wait was requested, to avoid
+        // capturing half-rendered pages.
+        const settleTime = options.waitForTimeout && options.waitForTimeout > 0
+            ? options.waitForTimeout
+            : 1000;
+        await page.waitForTimeout(settleTime);
+    }
+    async close() {
+        if (this.browser) {
+            await this.browser.close();
+            this.browser = null;
+        }
+    }
+    get isLaunched() {
+        return this.browser !== null;
+    }
+}
+//# sourceMappingURL=BrowserManager.js.map

package/dist/browser/BrowserManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserManager.js","sourceRoot":"","sources":["../../src/browser/BrowserManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgD,MAAM,YAAY,CAAC;AAQpF,MAAM,OAAO,cAAc;IACjB,OAAO,GAAmB,IAAI,CAAC;IAC/B,OAAO,CAAkC;IAEjD,YAAY,UAAiC,EAAE;QAC7C,IAAI,CAAC,OAAO,GAAG;YACb,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,IAAI;YAClC,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,KAAK;SAClC,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QACzB,IAAI,CAAC,OAAO,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;SAChC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,UAAsB;QACrC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;QAED,MAAM,OAAO,GAAmB,MAAM,IAAI,CAAC,OAAQ,CAAC,UAAU,CAAC;YAC7D,QAAQ,EAAE;gBACR,KAAK,EAAE,UAAU,CAAC,KAAK;gBACvB,MAAM,EAAE,UAAU,CAAC,MAAM;aAC1B;YACD,iBAAiB,EAAE,CAAC;SACrB,CAAC,CAAC;QAEH,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEhD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK,CAAC,eAAe,CACnB,IAAU,EACV,GAAW,EACX,UAGI,EAAE;QAEN,oEAAoE;QACpE,0EAA0E;QAC1E,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACnB,SAAS,EAAE,kBAAkB;YAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;SAC9B,CAAC,CAAC;QAEH,oDAAoD;QACpD,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC;YAC5B,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,eAAe,EAAE;gBAClD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;aAC9B,CAAC,CAAC;QACL,CAAC;QAED,gEAAgE;QAChE,8DAA8D;QAC9D,iCAAiC;QACjC,MAAM,UAAU,GAAG,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,cAAc,GAAG,CAAC;YACrE,CAAC,CAAC,OAAO,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,KAAK,CAAC,KAAK;QACT,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IAC/B,CAAC;CACF"}

package/dist/browser/ViewportManager.d.ts

@@ -0,0 +1,15 @@
+import { type Breakpoint } from "../types/config.js";
+export declare class ViewportManager {
+    /**
+     * Resolve breakpoint names (preset or custom) to Breakpoint objects.
+     */
+    static resolve(breakpointNames?: string[], customBreakpoints?: Record<string, {
+        width: number;
+        height: number;
+    }>): Breakpoint[];
+    /**
+     * List all available preset breakpoints.
+     */
+    static listPresets(): Breakpoint[];
+}
+//# sourceMappingURL=ViewportManager.d.ts.map

package/dist/browser/ViewportManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportManager.d.ts","sourceRoot":"","sources":["../../src/browser/ViewportManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAS5B,qBAAa,eAAe;IAC1B;;OAEG;IACH,MAAM,CAAC,OAAO,CACZ,eAAe,CAAC,EAAE,MAAM,EAAE,EAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,GACpE,UAAU,EAAE;IAoDf;;OAEG;IACH,MAAM,CAAC,WAAW,IAAI,UAAU,EAAE;CAQnC"}

package/dist/browser/ViewportManager.js

@@ -0,0 +1,65 @@
+import { PRESET_BREAKPOINTS, } from "../types/config.js";
+const DEFAULT_BREAKPOINT_NAMES = [
+    "mobile",
+    "tablet",
+    "desktop",
+    "desktop-lg",
+];
+export class ViewportManager {
+    /**
+     * Resolve breakpoint names (preset or custom) to Breakpoint objects.
+     */
+    static resolve(breakpointNames, customBreakpoints) {
+        const names = breakpointNames ?? DEFAULT_BREAKPOINT_NAMES;
+        const resolved = [];
+        for (const name of names) {
+            // Check custom breakpoints first
+            if (customBreakpoints && name in customBreakpoints) {
+                const custom = customBreakpoints[name];
+                resolved.push({
+                    name,
+                    width: custom.width,
+                    height: custom.height,
+                    label: name,
+                });
+                continue;
+            }
+            // Check preset breakpoints
+            if (name in PRESET_BREAKPOINTS) {
+                const preset = PRESET_BREAKPOINTS[name];
+                resolved.push({
+                    name,
+                    width: preset.width,
+                    height: preset.height,
+                    label: preset.label,
+                });
+                continue;
+            }
+            // Try parsing "WIDTHxHEIGHT" format (e.g. "1440x900")
+            const match = name.match(/^(\d+)x(\d+)$/);
+            if (match) {
+                resolved.push({
+                    name,
+                    width: parseInt(match[1], 10),
+                    height: parseInt(match[2], 10),
+                    label: `${match[1]}×${match[2]}`,
+                });
+                continue;
+            }
+            throw new Error(`Unknown breakpoint "${name}". Available presets: ${Object.keys(PRESET_BREAKPOINTS).join(", ")}. Or use WIDTHxHEIGHT format (e.g. 1440x900).`);
+        }
+        return resolved;
+    }
+    /**
+     * List all available preset breakpoints.
+     */
+    static listPresets() {
+        return Object.entries(PRESET_BREAKPOINTS).map(([name, bp]) => ({
+            name,
+            width: bp.width,
+            height: bp.height,
+            label: bp.label,
+        }));
+    }
+}
+//# sourceMappingURL=ViewportManager.js.map

package/dist/browser/ViewportManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportManager.js","sourceRoot":"","sources":["../../src/browser/ViewportManager.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GAGnB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,wBAAwB,GAA2B;IACvD,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,YAAY;CACb,CAAC;AAEF,MAAM,OAAO,eAAe;IAC1B;;OAEG;IACH,MAAM,CAAC,OAAO,CACZ,eAA0B,EAC1B,iBAAqE;QAErE,MAAM,KAAK,GAAG,eAAe,IAAI,wBAAwB,CAAC;QAC1D,MAAM,QAAQ,GAAiB,EAAE,CAAC;QAElC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,iCAAiC;YACjC,IAAI,iBAAiB,IAAI,IAAI,IAAI,iBAAiB,EAAE,CAAC;gBACnD,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBACvC,QAAQ,CAAC,IAAI,CAAC;oBACZ,IAAI;oBACJ,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,KAAK,EAAE,IAAI;iBACZ,CAAC,CAAC;gBACH,SAAS;YACX,CAAC;YAED,2BAA2B;YAC3B,IAAI,IAAI,IAAI,kBAAkB,EAAE,CAAC;gBAC/B,MAAM,MAAM,GACV,kBAAkB,CAAC,IAA4B,CAAC,CAAC;gBACnD,QAAQ,CAAC,IAAI,CAAC;oBACZ,IAAI;oBACJ,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAC,CAAC;gBACH,SAAS;YACX,CAAC;YAED,sDAAsD;YACtD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YAC1C,IAAI,KAAK,EAAE,CAAC;gBACV,QAAQ,CAAC,IAAI,CAAC;oBACZ,IAAI;oBACJ,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;oBAC7B,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;oBAC9B,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;iBACjC,CAAC,CAAC;gBACH,SAAS;YACX,CAAC;YAED,MAAM,IAAI,KAAK,CACb,uBAAuB,IAAI,yBAAyB,MAAM,CAAC,IAAI,CAC7D,kBAAkB,CACnB,CAAC,IAAI,CAAC,IAAI,CAAC,+CAA+C,CAC5D,CAAC;QACJ,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,WAAW;QAChB,OAAO,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YAC7D,IAAI;YACJ,KAAK,EAAE,EAAE,CAAC,KAAK;YACf,MAAM,EAAE,EAAE,CAAC,MAAM;YACjB,KAAK,EAAE,EAAE,CAAC,KAAK;SAChB,CAAC,CAAC,CAAC;IACN,CAAC;CACF"}

package/dist/cli/formatter.d.ts

@@ -0,0 +1,4 @@
+import type { ComparisonResult } from "../types/comparison.js";
+export declare function formatSeverity(severity: string): string;
+export declare function formatResult(result: ComparisonResult): string;
+//# sourceMappingURL=formatter.d.ts.map

package/dist/cli/formatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../src/cli/formatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,wBAAwB,CAAC;AAmBjF,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAavD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,CAgH7D"}

package/dist/cli/formatter.js

@@ -0,0 +1,107 @@
+// ANSI color codes (no dependency needed for basic colors)
+const c = {
+    reset: "\x1b[0m",
+    bold: "\x1b[1m",
+    dim: "\x1b[2m",
+    red: "\x1b[31m",
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    blue: "\x1b[34m",
+    cyan: "\x1b[36m",
+    white: "\x1b[37m",
+    bgRed: "\x1b[41m",
+    bgGreen: "\x1b[42m",
+    bgYellow: "\x1b[43m",
+    bgBlue: "\x1b[44m",
+};
+export function formatSeverity(severity) {
+    switch (severity) {
+        case "critical":
+            return `${c.bgRed}${c.white} CRITICAL ${c.reset}`;
+        case "warning":
+            return `${c.bgYellow}${c.white} WARNING ${c.reset}`;
+        case "info":
+            return `${c.bgBlue}${c.white} INFO ${c.reset}`;
+        case "pass":
+            return `${c.bgGreen}${c.white} PASS ${c.reset}`;
+        default:
+            return severity;
+    }
+}
+export function formatResult(result) {
+    const lines = [];
+    lines.push("");
+    lines.push(`${c.bold}═══ Selection Comparison Report ═══${c.reset}`);
+    lines.push("");
+    const tgtSelector = result.config.targetSelector ?? result.config.selector;
+    const selectorsMatch = tgtSelector === result.config.selector;
+    lines.push(`  ${c.dim}Source:${c.reset}   ${result.config.sourceUrl}  ${c.cyan}${result.config.selector}${c.reset}`);
+    lines.push(`  ${c.dim}Target:${c.reset}   ${result.config.targetUrl}  ${c.cyan}${tgtSelector}${c.reset}${!selectorsMatch ? `  ${c.dim}(different selector)${c.reset}` : ""}`);
+    lines.push(`  ${c.dim}Duration:${c.reset} ${(result.duration / 1000).toFixed(1)}s`);
+    lines.push("");
+    // Summary
+    lines.push(`  ${c.bold}Overall:${c.reset} ${formatSeverity(result.summary.overallSeverity)}  ` +
+        `${c.dim}Breakpoints with diffs:${c.reset} ${result.summary.breakpointsWithDifferences}/${result.summary.totalBreakpoints}  ` +
+        `${c.dim}Avg pixel diff:${c.reset} ${result.summary.averagePixelDiff}%`);
+    if (result.summary.worstBreakpoint) {
+        lines.push(`  ${c.dim}Worst breakpoint:${c.reset} ${c.red}${result.summary.worstBreakpoint}${c.reset}`);
+    }
+    lines.push("");
+    // Per-breakpoint
+    for (const [name, bp] of Object.entries(result.breakpoints)) {
+        lines.push(`${c.bold}── ${name} (${bp.breakpoint.width}×${bp.breakpoint.height}) ──${c.reset}  ${c.dim}${bp.duration}ms${c.reset}`);
+        if (bp.error) {
+            lines.push(`  ${c.red}Error: ${bp.error}${c.reset}`);
+            lines.push("");
+            continue;
+        }
+        // Visual
+        if (bp.visual) {
+            const pct = bp.visual.diffPercentage;
+            const color = pct > 5 ? c.red : pct > 1 ? c.yellow : pct > 0 ? c.blue : c.green;
+            lines.push(`  ${c.dim}Visual:${c.reset} ${color}${pct}% different${c.reset} (${bp.visual.diffPixelCount.toLocaleString()} pixels)` +
+                (bp.visual.sizeMismatch ? ` ${c.yellow}⚠ size mismatch${c.reset}` : ""));
+        }
+        // Styles
+        if (bp.styles) {
+            const s = bp.styles.summary;
+            if (s.total === 0) {
+                lines.push(`  ${c.dim}Styles:${c.reset} ${c.green}No differences${c.reset}`);
+            }
+            else {
+                lines.push(`  ${c.dim}Styles:${c.reset} ${s.total} differences ` +
+                    `(${c.red}${s.critical} critical${c.reset}, ${c.yellow}${s.warning} warning${c.reset}, ${c.blue}${s.info} info${c.reset})`);
+                // Show critical and warning diffs
+                for (const diff of bp.styles.differences.filter((d) => d.severity !== "info")) {
+                    const sev = diff.severity === "critical"
+                        ? `${c.red}●${c.reset}`
+                        : `${c.yellow}●${c.reset}`;
+                    lines.push(`    ${sev} ${c.bold}${diff.property}${c.reset} ${c.dim}(${diff.category})${c.reset}`);
+                    lines.push(`      ${c.red}- ${diff.sourceValue}${c.reset}`);
+                    lines.push(`      ${c.green}+ ${diff.targetValue}${c.reset}`);
+                }
+            }
+        }
+        // Layout
+        if (bp.layout) {
+            const l = bp.layout.summary;
+            if (l.total === 0) {
+                lines.push(`  ${c.dim}Layout:${c.reset} ${c.green}No differences${c.reset}`);
+            }
+            else {
+                lines.push(`  ${c.dim}Layout:${c.reset} ${l.total} differences ` +
+                    `(${c.red}${l.critical} critical${c.reset}, ${c.yellow}${l.warning} warning${c.reset}, ${c.blue}${l.info} info${c.reset})`);
+                for (const diff of bp.layout.differences.filter((d) => d.severity !== "info")) {
+                    const sev = diff.severity === "critical"
+                        ? `${c.red}●${c.reset}`
+                        : `${c.yellow}●${c.reset}`;
+                    const sign = diff.absoluteDiff > 0 ? "+" : "";
+                    lines.push(`    ${sev} ${c.bold}${diff.property}${c.reset}: ${diff.sourceValue}px → ${diff.targetValue}px (${sign}${diff.absoluteDiff}px / ${sign}${diff.percentageDiff}%)`);
+                }
+            }
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+//# sourceMappingURL=formatter.js.map

package/dist/cli/formatter.js.map

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

package/dist/comparator/DiffAggregator.d.ts

@@ -0,0 +1,24 @@
+import type { Page } from "playwright";
+import type { Breakpoint, StyleCategory } from "../types/config.js";
+import type { BreakpointResult, ExtractedSection } from "../types/comparison.js";
+export interface AggregatorOptions {
+    selector: string;
+    targetSelector?: string;
+    elementIndex: number;
+    styleCategories?: StyleCategory[];
+    pixelThreshold?: number;
+    includeVisual?: boolean;
+    includeStyles?: boolean;
+    includeLayout?: boolean;
+}
+export declare class DiffAggregator {
+    /**
+     * Extract section data from a page.
+     */
+    static extractSection(page: Page, selector: string, elementIndex: number, styleCategories?: StyleCategory[]): Promise<ExtractedSection>;
+    /**
+     * Compare extracted sections from source and target for a single breakpoint.
+     */
+    static compareBreakpoint(sourcePage: Page, targetPage: Page, breakpoint: Breakpoint, options: AggregatorOptions): Promise<BreakpointResult>;
+}
+//# sourceMappingURL=DiffAggregator.d.ts.map

package/dist/comparator/DiffAggregator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffAggregator.d.ts","sourceRoot":"","sources":["../../src/comparator/DiffAggregator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAEjB,MAAM,wBAAwB,CAAC;AAQhC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,cAAc;IACzB;;OAEG;WACU,cAAc,CACzB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,MAAM,EACpB,eAAe,CAAC,EAAE,aAAa,EAAE,GAChC,OAAO,CAAC,gBAAgB,CAAC;IA2B5B;;OAEG;WACU,iBAAiB,CAC5B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,iBAAiB,GACzB,OAAO,CAAC,gBAAgB,CAAC;CAuF7B"}

package/dist/comparator/DiffAggregator.js

@@ -0,0 +1,94 @@
+import { SectionExtractor } from "../extractor/SectionExtractor.js";
+import { StyleExtractor } from "../extractor/StyleExtractor.js";
+import { ScreenshotCapturer } from "../extractor/ScreenshotCapturer.js";
+import { StyleComparator } from "./StyleComparator.js";
+import { PixelComparator } from "./PixelComparator.js";
+import { LayoutComparator } from "./LayoutComparator.js";
+export class DiffAggregator {
+    /**
+     * Extract section data from a page.
+     */
+    static async extractSection(page, selector, elementIndex, styleCategories) {
+        const { info, locator } = await SectionExtractor.getElement(page, selector, elementIndex);
+        if (!info.exists) {
+            throw new Error(`Element not found: "${selector}" at index ${elementIndex}`);
+        }
+        const [computedStyles, layoutMetrics, screenshot] = await Promise.all([
+            StyleExtractor.extractStyles(locator, styleCategories),
+            StyleExtractor.extractLayoutMetrics(locator),
+            ScreenshotCapturer.captureElement(locator),
+        ]);
+        return {
+            element: info,
+            computedStyles,
+            layoutMetrics,
+            screenshot,
+        };
+    }
+    /**
+     * Compare extracted sections from source and target for a single breakpoint.
+     */
+    static async compareBreakpoint(sourcePage, targetPage, breakpoint, options) {
+        const start = Date.now();
+        try {
+            // Extract both sections in parallel (may use different selectors)
+            const tgtSelector = options.targetSelector ?? options.selector;
+            const [source, target] = await Promise.all([
+                DiffAggregator.extractSection(sourcePage, options.selector, options.elementIndex, options.styleCategories),
+                DiffAggregator.extractSection(targetPage, tgtSelector, options.elementIndex, options.styleCategories),
+            ]);
+            const result = {
+                breakpoint: {
+                    name: breakpoint.name,
+                    width: breakpoint.width,
+                    height: breakpoint.height,
+                },
+                sourceElement: source.element,
+                targetElement: target.element,
+                duration: 0,
+            };
+            // Style comparison
+            if (options.includeStyles !== false) {
+                result.styles = StyleComparator.compare(source.computedStyles, target.computedStyles);
+            }
+            // Pixel comparison
+            if (options.includeVisual !== false) {
+                result.visual = PixelComparator.compare(source.screenshot, target.screenshot, options.pixelThreshold ?? 0.1);
+            }
+            // Layout comparison
+            if (options.includeLayout !== false) {
+                result.layout = LayoutComparator.compare(source.layoutMetrics, target.layoutMetrics);
+            }
+            result.duration = Date.now() - start;
+            return result;
+        }
+        catch (err) {
+            return {
+                breakpoint: {
+                    name: breakpoint.name,
+                    width: breakpoint.width,
+                    height: breakpoint.height,
+                },
+                sourceElement: {
+                    selector: options.selector,
+                    index: options.elementIndex,
+                    tagName: "unknown",
+                    textPreview: "",
+                    boundingBox: { x: 0, y: 0, width: 0, height: 0 },
+                    exists: false,
+                },
+                targetElement: {
+                    selector: options.selector,
+                    index: options.elementIndex,
+                    tagName: "unknown",
+                    textPreview: "",
+                    boundingBox: { x: 0, y: 0, width: 0, height: 0 },
+                    exists: false,
+                },
+                error: err.message,
+                duration: Date.now() - start,
+            };
+        }
+    }
+}
+//# sourceMappingURL=DiffAggregator.js.map

package/dist/comparator/DiffAggregator.js.map

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

package/dist/comparator/LayoutComparator.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutMetrics, LayoutComparisonResult } from "../types/comparison.js";
+export declare class LayoutComparator {
+    /**
+     * Compare layout metrics between source and target elements.
+     */
+    static compare(source: LayoutMetrics, target: LayoutMetrics): LayoutComparisonResult;
+}
+//# sourceMappingURL=LayoutComparator.d.ts.map

package/dist/comparator/LayoutComparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutComparator.d.ts","sourceRoot":"","sources":["../../src/comparator/LayoutComparator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EAEb,sBAAsB,EAEvB,MAAM,wBAAwB,CAAC;AAMhC,qBAAa,gBAAgB;IAC3B;;OAEG;IACH,MAAM,CAAC,OAAO,CACZ,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,GACpB,sBAAsB;CAsC1B"}

package/dist/comparator/LayoutComparator.js

@@ -0,0 +1,68 @@
+// Threshold in pixels for severity classification
+const CRITICAL_THRESHOLD_PX = 10;
+const WARNING_THRESHOLD_PX = 3;
+export class LayoutComparator {
+    /**
+     * Compare layout metrics between source and target elements.
+     */
+    static compare(source, target) {
+        const differences = [];
+        // Compare bounding box dimensions
+        comparePair(differences, "width", source.boundingBox.width, target.boundingBox.width);
+        comparePair(differences, "height", source.boundingBox.height, target.boundingBox.height);
+        // Compare margin
+        compareSpacing(differences, "margin", source.margin, target.margin);
+        // Compare padding
+        compareSpacing(differences, "padding", source.padding, target.padding);
+        // Compare border widths
+        compareSpacing(differences, "border", source.border, target.border);
+        // Compare scroll dimensions
+        comparePair(differences, "scrollWidth", source.scrollWidth, target.scrollWidth);
+        comparePair(differences, "scrollHeight", source.scrollHeight, target.scrollHeight);
+        // Sort by severity
+        const severityOrder = { critical: 0, warning: 1, info: 2 };
+        differences.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity] ||
+            Math.abs(b.absoluteDiff) - Math.abs(a.absoluteDiff));
+        return {
+            differences,
+            summary: {
+                total: differences.length,
+                critical: differences.filter((d) => d.severity === "critical").length,
+                warning: differences.filter((d) => d.severity === "warning").length,
+                info: differences.filter((d) => d.severity === "info").length,
+            },
+        };
+    }
+}
+function comparePair(diffs, property, sourceVal, targetVal) {
+    const absoluteDiff = Math.round((targetVal - sourceVal) * 100) / 100;
+    if (absoluteDiff === 0)
+        return;
+    const percentageDiff = sourceVal !== 0
+        ? Math.round((absoluteDiff / sourceVal) * 10000) / 100
+        : targetVal !== 0
+            ? 100
+            : 0;
+    diffs.push({
+        property,
+        sourceValue: sourceVal,
+        targetValue: targetVal,
+        absoluteDiff,
+        percentageDiff,
+        severity: classifyLayoutSeverity(Math.abs(absoluteDiff)),
+    });
+}
+function compareSpacing(diffs, prefix, source, target) {
+    comparePair(diffs, `${prefix}-top`, source.top, target.top);
+    comparePair(diffs, `${prefix}-right`, source.right, target.right);
+    comparePair(diffs, `${prefix}-bottom`, source.bottom, target.bottom);
+    comparePair(diffs, `${prefix}-left`, source.left, target.left);
+}
+function classifyLayoutSeverity(absDiff) {
+    if (absDiff >= CRITICAL_THRESHOLD_PX)
+        return "critical";
+    if (absDiff >= WARNING_THRESHOLD_PX)
+        return "warning";
+    return "info";
+}
+//# sourceMappingURL=LayoutComparator.js.map

package/dist/comparator/LayoutComparator.js.map

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

package/dist/comparator/PixelComparator.d.ts

@@ -0,0 +1,9 @@
+import type { PixelComparisonResult } from "../types/comparison.js";
+export declare class PixelComparator {
+    /**
+     * Compare two screenshots pixel-by-pixel.
+     * Handles size mismatches by padding the smaller image.
+     */
+    static compare(sourceBuffer: Buffer, targetBuffer: Buffer, threshold?: number): PixelComparisonResult;
+}
+//# sourceMappingURL=PixelComparator.d.ts.map

package/dist/comparator/PixelComparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelComparator.d.ts","sourceRoot":"","sources":["../../src/comparator/PixelComparator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,qBAAa,eAAe;IAC1B;;;OAGG;IACH,MAAM,CAAC,OAAO,CACZ,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,SAAS,GAAE,MAAY,GACtB,qBAAqB;CAoDzB"}

package/dist/comparator/PixelComparator.js

@@ -0,0 +1,72 @@
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+export class PixelComparator {
+    /**
+     * Compare two screenshots pixel-by-pixel.
+     * Handles size mismatches by padding the smaller image.
+     */
+    static compare(sourceBuffer, targetBuffer, threshold = 0.1) {
+        const sourcePng = PNG.sync.read(sourceBuffer);
+        const targetPng = PNG.sync.read(targetBuffer);
+        const sizeMismatch = sourcePng.width !== targetPng.width ||
+            sourcePng.height !== targetPng.height;
+        // Use the larger dimensions for comparison canvas
+        const width = Math.max(sourcePng.width, targetPng.width);
+        const height = Math.max(sourcePng.height, targetPng.height);
+        // Pad images to same size if needed
+        const sourceData = sizeMismatch
+            ? padImage(sourcePng, width, height)
+            : sourcePng.data;
+        const targetData = sizeMismatch
+            ? padImage(targetPng, width, height)
+            : targetPng.data;
+        // Create diff image buffer
+        const diffPng = new PNG({ width, height });
+        const diffPixelCount = pixelmatch(sourceData, targetData, diffPng.data, width, height, {
+            threshold,
+            includeAA: false, // ignore anti-aliasing differences
+            alpha: 0.3,
+            diffColor: [255, 0, 0], // red for differences
+            diffColorAlt: [0, 255, 0], // green for anti-aliased diffs
+        });
+        const totalPixels = width * height;
+        return {
+            diffPixelCount,
+            totalPixels,
+            diffPercentage: Math.round((diffPixelCount / totalPixels) * 10000) / 100,
+            diffImage: PNG.sync.write(diffPng),
+            sourceWidth: sourcePng.width,
+            sourceHeight: sourcePng.height,
+            targetWidth: targetPng.width,
+            targetHeight: targetPng.height,
+            sizeMismatch,
+        };
+    }
+}
+/**
+ * Pad an image to a target size, filling extra space with transparent magenta
+ * so size differences are visually obvious in the diff.
+ */
+function padImage(png, targetWidth, targetHeight) {
+    const data = new Uint8Array(targetWidth * targetHeight * 4);
+    // Fill with magenta (indicates missing area)
+    for (let i = 0; i < data.length; i += 4) {
+        data[i] = 255; // R
+        data[i + 1] = 0; // G
+        data[i + 2] = 255; // B
+        data[i + 3] = 255; // A
+    }
+    // Copy original image data
+    for (let y = 0; y < png.height; y++) {
+        for (let x = 0; x < png.width; x++) {
+            const srcIdx = (y * png.width + x) * 4;
+            const dstIdx = (y * targetWidth + x) * 4;
+            data[dstIdx] = png.data[srcIdx];
+            data[dstIdx + 1] = png.data[srcIdx + 1];
+            data[dstIdx + 2] = png.data[srcIdx + 2];
+            data[dstIdx + 3] = png.data[srcIdx + 3];
+        }
+    }
+    return data;
+}
+//# sourceMappingURL=PixelComparator.js.map

package/dist/comparator/PixelComparator.js.map

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

package/dist/comparator/StyleComparator.d.ts

@@ -0,0 +1,8 @@
+import type { StyleComparisonResult } from "../types/comparison.js";
+export declare class StyleComparator {
+    /**
+     * Compare computed styles from source and target elements.
+     */
+    static compare(sourceStyles: Record<string, string>, targetStyles: Record<string, string>): StyleComparisonResult;
+}
+//# sourceMappingURL=StyleComparator.d.ts.map

package/dist/comparator/StyleComparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleComparator.d.ts","sourceRoot":"","sources":["../../src/comparator/StyleComparator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,qBAAqB,EAEtB,MAAM,wBAAwB,CAAC;AA8ChC,qBAAa,eAAe;IAC1B;;OAEG;IACH,MAAM,CAAC,OAAO,CACZ,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACpC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACnC,qBAAqB;CAwDzB"}