@logicsync/pixelprobe 0.1.0

package/dist/reporter/JSONReporter.js

@@ -0,0 +1,77 @@
+import { writeFile, mkdir } from "node:fs/promises";
+import { join } from "node:path";
+export class JSONReporter {
+    /**
+     * Generate a JSON report file.
+     * Strips binary data (screenshots, diff images) and replaces with file paths.
+     */
+    static async generate(result, outputDir) {
+        await mkdir(outputDir, { recursive: true });
+        // Save diff images as separate files
+        const artifacts = { ...result.artifacts };
+        for (const [bpName, bpResult] of Object.entries(result.breakpoints)) {
+            if (bpResult.visual?.diffImage) {
+                const diffPath = join(outputDir, `diff-${bpName}.png`);
+                await writeFile(diffPath, bpResult.visual.diffImage);
+                artifacts.diffImages[bpName] = diffPath;
+            }
+        }
+        // Create a serializable version (strip Buffers)
+        const serializable = JSONReporter.toSerializable(result);
+        serializable.artifacts = artifacts;
+        const jsonPath = join(outputDir, `comparison-${result.id}.json`);
+        await writeFile(jsonPath, JSON.stringify(serializable, null, 2));
+        return jsonPath;
+    }
+    /**
+     * Convert result to a JSON-safe object (no Buffers).
+     */
+    static toSerializable(result) {
+        const clone = structuredClone({
+            ...result,
+            breakpoints: Object.fromEntries(Object.entries(result.breakpoints).map(([name, bp]) => [
+                name,
+                {
+                    ...bp,
+                    visual: bp.visual
+                        ? {
+                            ...bp.visual,
+                            diffImage: undefined, // strip Buffer
+                            diffImageBase64: undefined,
+                        }
+                        : undefined,
+                },
+            ])),
+        });
+        return clone;
+    }
+    /**
+     * Generate a compact JSON summary (no per-property details).
+     */
+    static toCompactSummary(result) {
+        return {
+            id: result.id,
+            timestamp: result.timestamp,
+            config: result.config,
+            summary: result.summary,
+            breakpoints: Object.fromEntries(Object.entries(result.breakpoints).map(([name, bp]) => [
+                name,
+                {
+                    breakpoint: bp.breakpoint,
+                    error: bp.error,
+                    styleDiffs: bp.styles?.summary,
+                    layoutDiffs: bp.layout?.summary,
+                    pixelDiff: bp.visual
+                        ? {
+                            percentage: bp.visual.diffPercentage,
+                            sizeMismatch: bp.visual.sizeMismatch,
+                        }
+                        : undefined,
+                    duration: bp.duration,
+                },
+            ])),
+            duration: result.duration,
+        };
+    }
+}
+//# sourceMappingURL=JSONReporter.js.map

package/dist/reporter/JSONReporter.js.map

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

package/dist/types/comparison.d.ts

@@ -0,0 +1,133 @@
+export type Severity = "critical" | "warning" | "info";
+export interface ElementInfo {
+    selector: string;
+    index: number;
+    tagName: string;
+    textPreview: string;
+    boundingBox: BoundingBox;
+    exists: boolean;
+}
+export interface BoundingBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ExtractedSection {
+    element: ElementInfo;
+    computedStyles: Record<string, string>;
+    layoutMetrics: LayoutMetrics;
+    screenshot: Buffer;
+}
+export interface LayoutMetrics {
+    boundingBox: BoundingBox;
+    margin: BoxSpacing;
+    padding: BoxSpacing;
+    border: BoxSpacing;
+    scrollWidth: number;
+    scrollHeight: number;
+}
+export interface BoxSpacing {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface StyleDifference {
+    property: string;
+    category: string;
+    sourceValue: string;
+    targetValue: string;
+    severity: Severity;
+}
+export interface StyleComparisonResult {
+    differences: StyleDifference[];
+    summary: {
+        total: number;
+        critical: number;
+        warning: number;
+        info: number;
+    };
+    sourceStyleCount: number;
+    targetStyleCount: number;
+}
+export interface PixelComparisonResult {
+    diffPixelCount: number;
+    totalPixels: number;
+    diffPercentage: number;
+    diffImage: Buffer;
+    sourceWidth: number;
+    sourceHeight: number;
+    targetWidth: number;
+    targetHeight: number;
+    sizeMismatch: boolean;
+}
+export interface LayoutDifference {
+    property: string;
+    sourceValue: number;
+    targetValue: number;
+    absoluteDiff: number;
+    percentageDiff: number;
+    severity: Severity;
+}
+export interface LayoutComparisonResult {
+    differences: LayoutDifference[];
+    summary: {
+        total: number;
+        critical: number;
+        warning: number;
+        info: number;
+    };
+}
+export interface BreakpointResult {
+    breakpoint: {
+        name: string;
+        width: number;
+        height: number;
+    };
+    sourceElement: ElementInfo;
+    targetElement: ElementInfo;
+    visual?: PixelComparisonResult;
+    styles?: StyleComparisonResult;
+    layout?: LayoutComparisonResult;
+    error?: string;
+    duration: number;
+}
+export interface ComparisonResult {
+    id: string;
+    timestamp: string;
+    config: {
+        sourceUrl: string;
+        targetUrl: string;
+        selector: string;
+        targetSelector?: string;
+        elementIndex?: number | "all";
+    };
+    breakpoints: Record<string, BreakpointResult>;
+    summary: ComparisonSummary;
+    artifacts: {
+        jsonPath?: string;
+        htmlReportPath?: string;
+        diffImages: Record<string, string>;
+        sourceScreenshots: Record<string, string>;
+        targetScreenshots: Record<string, string>;
+    };
+    duration: number;
+}
+export interface ComparisonSummary {
+    totalBreakpoints: number;
+    breakpointsWithDifferences: number;
+    totalStyleDifferences: number;
+    totalLayoutDifferences: number;
+    averagePixelDiff: number;
+    worstBreakpoint: string | null;
+    overallSeverity: Severity | "pass";
+}
+export interface ProgressEvent {
+    phase: "init" | "extracting" | "comparing" | "reporting" | "done";
+    breakpoint?: string;
+    message: string;
+    progress: number;
+}
+export type ProgressCallback = (event: ProgressEvent) => void;
+//# sourceMappingURL=comparison.d.ts.map

package/dist/types/comparison.d.ts.map

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

package/dist/types/comparison.js

@@ -0,0 +1,3 @@
+// ── Severity Levels ─────────────────────────────────────────────────
+export {};
+//# sourceMappingURL=comparison.js.map

package/dist/types/comparison.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison.js","sourceRoot":"","sources":["../../src/types/comparison.ts"],"names":[],"mappings":"AAAA,uEAAuE"}

package/dist/types/config.d.ts

@@ -0,0 +1,138 @@
+import { z } from "zod";
+export declare const PRESET_BREAKPOINTS: {
+    readonly "mobile-sm": {
+        readonly width: 320;
+        readonly height: 568;
+        readonly label: "Mobile Small";
+    };
+    readonly mobile: {
+        readonly width: 375;
+        readonly height: 812;
+        readonly label: "Mobile";
+    };
+    readonly "mobile-lg": {
+        readonly width: 428;
+        readonly height: 926;
+        readonly label: "Mobile Large";
+    };
+    readonly tablet: {
+        readonly width: 768;
+        readonly height: 1024;
+        readonly label: "Tablet";
+    };
+    readonly "tablet-lg": {
+        readonly width: 1024;
+        readonly height: 1366;
+        readonly label: "Tablet Large";
+    };
+    readonly desktop: {
+        readonly width: 1280;
+        readonly height: 800;
+        readonly label: "Desktop";
+    };
+    readonly "desktop-lg": {
+        readonly width: 1920;
+        readonly height: 1080;
+        readonly label: "Desktop Large";
+    };
+    readonly "desktop-xl": {
+        readonly width: 2560;
+        readonly height: 1440;
+        readonly label: "Desktop XL";
+    };
+};
+export type PresetBreakpointName = keyof typeof PRESET_BREAKPOINTS;
+export interface Breakpoint {
+    name: string;
+    width: number;
+    height: number;
+    label?: string;
+}
+export declare const STYLE_CATEGORIES: {
+    readonly layout: readonly ["display", "position", "float", "clear", "overflow", "overflow-x", "overflow-y", "visibility", "z-index", "box-sizing"];
+    readonly flexbox: readonly ["flex-direction", "flex-wrap", "justify-content", "align-items", "align-content", "align-self", "flex-grow", "flex-shrink", "flex-basis", "order", "gap", "row-gap", "column-gap"];
+    readonly grid: readonly ["grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-column", "grid-row", "grid-auto-flow", "grid-auto-columns", "grid-auto-rows", "place-items", "place-content"];
+    readonly spacing: readonly ["margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left"];
+    readonly sizing: readonly ["width", "height", "min-width", "min-height", "max-width", "max-height", "aspect-ratio"];
+    readonly typography: readonly ["font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing", "text-align", "text-decoration", "text-transform", "white-space", "word-break", "word-spacing"];
+    readonly colors: readonly ["color", "background-color", "background-image", "background-size", "background-position", "background-repeat", "opacity"];
+    readonly borders: readonly ["border", "border-top", "border-right", "border-bottom", "border-left", "border-width", "border-style", "border-color", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "outline"];
+    readonly effects: readonly ["box-shadow", "text-shadow", "filter", "backdrop-filter", "mix-blend-mode", "transform", "transition", "animation"];
+    readonly positioning: readonly ["top", "right", "bottom", "left", "inset"];
+};
+export type StyleCategory = keyof typeof STYLE_CATEGORIES;
+export declare const ComparisonConfigSchema: z.ZodObject<{
+    sourceUrl: z.ZodString;
+    targetUrl: z.ZodString;
+    selector: z.ZodString;
+    targetSelector: z.ZodOptional<z.ZodString>;
+    elementIndex: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodLiteral<"all">]>>;
+    breakpoints: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    customBreakpoints: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        width: number;
+        height: number;
+    }, {
+        width: number;
+        height: number;
+    }>>>;
+    styleCategories: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    pixelThreshold: z.ZodDefault<z.ZodNumber>;
+    includeVisual: z.ZodDefault<z.ZodBoolean>;
+    includeStyles: z.ZodDefault<z.ZodBoolean>;
+    includeLayout: z.ZodDefault<z.ZodBoolean>;
+    headless: z.ZodDefault<z.ZodBoolean>;
+    timeout: z.ZodDefault<z.ZodNumber>;
+    outputDir: z.ZodOptional<z.ZodString>;
+    waitForSelector: z.ZodOptional<z.ZodString>;
+    waitForTimeout: z.ZodDefault<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    sourceUrl: string;
+    targetUrl: string;
+    selector: string;
+    pixelThreshold: number;
+    includeVisual: boolean;
+    includeStyles: boolean;
+    includeLayout: boolean;
+    headless: boolean;
+    timeout: number;
+    waitForTimeout: number;
+    targetSelector?: string | undefined;
+    elementIndex?: number | "all" | undefined;
+    breakpoints?: string[] | undefined;
+    customBreakpoints?: Record<string, {
+        width: number;
+        height: number;
+    }> | undefined;
+    styleCategories?: string[] | undefined;
+    outputDir?: string | undefined;
+    waitForSelector?: string | undefined;
+}, {
+    sourceUrl: string;
+    targetUrl: string;
+    selector: string;
+    targetSelector?: string | undefined;
+    elementIndex?: number | "all" | undefined;
+    breakpoints?: string[] | undefined;
+    customBreakpoints?: Record<string, {
+        width: number;
+        height: number;
+    }> | undefined;
+    styleCategories?: string[] | undefined;
+    pixelThreshold?: number | undefined;
+    includeVisual?: boolean | undefined;
+    includeStyles?: boolean | undefined;
+    includeLayout?: boolean | undefined;
+    headless?: boolean | undefined;
+    timeout?: number | undefined;
+    outputDir?: string | undefined;
+    waitForSelector?: string | undefined;
+    waitForTimeout?: number | undefined;
+}>;
+export type ComparisonConfig = z.input<typeof ComparisonConfigSchema>;
+export interface ResolvedConfig extends ComparisonConfig {
+    resolvedBreakpoints: Breakpoint[];
+}
+//# sourceMappingURL=config.d.ts.map

package/dist/types/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEnE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,eAAO,MAAM,gBAAgB;;;;;;;;;;;CA+GnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAI1D,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BjC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAItE,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,mBAAmB,EAAE,UAAU,EAAE,CAAC;CACnC"}

package/dist/types/config.js

@@ -0,0 +1,151 @@
+import { z } from "zod";
+// ── Breakpoint Definitions ──────────────────────────────────────────
+export const PRESET_BREAKPOINTS = {
+    "mobile-sm": { width: 320, height: 568, label: "Mobile Small" },
+    mobile: { width: 375, height: 812, label: "Mobile" },
+    "mobile-lg": { width: 428, height: 926, label: "Mobile Large" },
+    tablet: { width: 768, height: 1024, label: "Tablet" },
+    "tablet-lg": { width: 1024, height: 1366, label: "Tablet Large" },
+    desktop: { width: 1280, height: 800, label: "Desktop" },
+    "desktop-lg": { width: 1920, height: 1080, label: "Desktop Large" },
+    "desktop-xl": { width: 2560, height: 1440, label: "Desktop XL" },
+};
+// ── Style Categories ────────────────────────────────────────────────
+export const STYLE_CATEGORIES = {
+    layout: [
+        "display",
+        "position",
+        "float",
+        "clear",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "visibility",
+        "z-index",
+        "box-sizing",
+    ],
+    flexbox: [
+        "flex-direction",
+        "flex-wrap",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "align-self",
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis",
+        "order",
+        "gap",
+        "row-gap",
+        "column-gap",
+    ],
+    grid: [
+        "grid-template-columns",
+        "grid-template-rows",
+        "grid-template-areas",
+        "grid-column",
+        "grid-row",
+        "grid-auto-flow",
+        "grid-auto-columns",
+        "grid-auto-rows",
+        "place-items",
+        "place-content",
+    ],
+    spacing: [
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+    ],
+    sizing: [
+        "width",
+        "height",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "aspect-ratio",
+    ],
+    typography: [
+        "font-family",
+        "font-size",
+        "font-weight",
+        "font-style",
+        "line-height",
+        "letter-spacing",
+        "text-align",
+        "text-decoration",
+        "text-transform",
+        "white-space",
+        "word-break",
+        "word-spacing",
+    ],
+    colors: [
+        "color",
+        "background-color",
+        "background-image",
+        "background-size",
+        "background-position",
+        "background-repeat",
+        "opacity",
+    ],
+    borders: [
+        "border",
+        "border-top",
+        "border-right",
+        "border-bottom",
+        "border-left",
+        "border-width",
+        "border-style",
+        "border-color",
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "outline",
+    ],
+    effects: [
+        "box-shadow",
+        "text-shadow",
+        "filter",
+        "backdrop-filter",
+        "mix-blend-mode",
+        "transform",
+        "transition",
+        "animation",
+    ],
+    positioning: ["top", "right", "bottom", "left", "inset"],
+};
+// ── Comparison Config ───────────────────────────────────────────────
+export const ComparisonConfigSchema = z.object({
+    sourceUrl: z.string().url("Source must be a valid URL"),
+    targetUrl: z.string().url("Target must be a valid URL"),
+    selector: z.string().min(1, "CSS selector is required"),
+    targetSelector: z.string().optional().describe("CSS selector for the target page if different from source. Falls back to `selector`."),
+    elementIndex: z.union([z.number().int().min(0), z.literal("all")]).optional(),
+    breakpoints: z.array(z.string()).optional(),
+    customBreakpoints: z
+        .record(z.string(), z.object({
+        width: z.number().int().positive(),
+        height: z.number().int().positive(),
+    }))
+        .optional(),
+    styleCategories: z.array(z.string()).optional(),
+    pixelThreshold: z.number().min(0).max(1).default(0.1),
+    includeVisual: z.boolean().default(true),
+    includeStyles: z.boolean().default(true),
+    includeLayout: z.boolean().default(true),
+    headless: z.boolean().default(true),
+    timeout: z.number().int().positive().default(30000),
+    outputDir: z.string().optional(),
+    waitForSelector: z.string().optional(),
+    waitForTimeout: z.number().int().min(0).default(0),
+});
+//# sourceMappingURL=config.js.map

package/dist/types/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,uEAAuE;AAEvE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE;IAC/D,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpD,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE;IAC/D,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IACrD,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE;IACjE,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;IACvD,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE;IACnE,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE;CACxD,CAAC;AAWX,uEAAuE;AAEvE,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE;QACN,SAAS;QACT,UAAU;QACV,OAAO;QACP,OAAO;QACP,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,YAAY;KACb;IACD,OAAO,EAAE;QACP,gBAAgB;QAChB,WAAW;QACX,iBAAiB;QACjB,aAAa;QACb,eAAe;QACf,YAAY;QACZ,WAAW;QACX,aAAa;QACb,YAAY;QACZ,OAAO;QACP,KAAK;QACL,SAAS;QACT,YAAY;KACb;IACD,IAAI,EAAE;QACJ,uBAAuB;QACvB,oBAAoB;QACpB,qBAAqB;QACrB,aAAa;QACb,UAAU;QACV,gBAAgB;QAChB,mBAAmB;QACnB,gBAAgB;QAChB,aAAa;QACb,eAAe;KAChB;IACD,OAAO,EAAE;QACP,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,eAAe;QACf,aAAa;QACb,SAAS;QACT,aAAa;QACb,eAAe;QACf,gBAAgB;QAChB,cAAc;KACf;IACD,MAAM,EAAE;QACN,OAAO;QACP,QAAQ;QACR,WAAW;QACX,YAAY;QACZ,WAAW;QACX,YAAY;QACZ,cAAc;KACf;IACD,UAAU,EAAE;QACV,aAAa;QACb,WAAW;QACX,aAAa;QACb,YAAY;QACZ,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,YAAY;QACZ,cAAc;KACf;IACD,MAAM,EAAE;QACN,OAAO;QACP,kBAAkB;QAClB,kBAAkB;QAClB,iBAAiB;QACjB,qBAAqB;QACrB,mBAAmB;QACnB,SAAS;KACV;IACD,OAAO,EAAE;QACP,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,eAAe;QACf,aAAa;QACb,cAAc;QACd,cAAc;QACd,cAAc;QACd,eAAe;QACf,wBAAwB;QACxB,yBAAyB;QACzB,4BAA4B;QAC5B,2BAA2B;QAC3B,SAAS;KACV;IACD,OAAO,EAAE;QACP,YAAY;QACZ,aAAa;QACb,QAAQ;QACR,iBAAiB;QACjB,gBAAgB;QAChB,WAAW;QACX,YAAY;QACZ,WAAW;KACZ;IACD,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;CAChD,CAAC;AAIX,uEAAuE;AAEvE,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC7C,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC;IACvD,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC;IACvD,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,0BAA0B,CAAC;IACvD,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAC5C,sFAAsF,CACvF;IACD,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;IAC7E,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE;IAC3C,iBAAiB,EAAE,CAAC;SACjB,MAAM,CACL,CAAC,CAAC,MAAM,EAAE,EACV,CAAC,CAAC,MAAM,CAAC;QACP,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;QAClC,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;KACpC,CAAC,CACH;SACA,QAAQ,EAAE;IACb,eAAe,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE;IAC/C,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC;IACrD,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;IACnD,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAChC,eAAe,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACtC,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;CACnD,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@logicsync/pixelprobe",
+  "version": "0.1.0",
+  "description": "Responsive visual & style diff for web page sections — CLI + MCP",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "pixelprobe": "dist/bin/pixelprobe.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx watch src/index.ts",
+    "start:mcp": "tsx src/mcp/server.ts",
+    "start:cli": "tsx src/bin/pixelprobe.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "pixelprobe",
+    "css",
+    "style-diff",
+    "visual-regression",
+    "responsive",
+    "breakpoints",
+    "comparison",
+    "mcp",
+    "cli",
+    "web",
+    "pixel-diff"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/user/pixelprobe.git"
+  },
+  "homepage": "https://github.com/user/pixelprobe#readme",
+  "author": {
+    "name": "Hari",
+    "url": "https://github.com/hari-ls"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "chalk": "^5.3.0",
+    "cli-table3": "^0.6.5",
+    "ora": "^8.1.0",
+    "pixelmatch": "^6.0.0",
+    "playwright": "^1.49.0",
+    "pngjs": "^7.0.0",
+    "yargs": "^17.7.2",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
+    "@types/yargs": "^17.0.33",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  }
+}