@calibrate-ds/core 0.1.7 → 0.1.9

package/dist/verify/pixel-diff.js

@@ -0,0 +1,58 @@
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+/**
+ * Compares two PNG files pixel-by-pixel using pixelmatch.
+ * Saves an annotated diff image to diffOutputPath.
+ * Returns the match score (0–1, 1 = identical), or null if comparison fails.
+ *
+ * If the images have different dimensions the implementation image is cropped
+ * or padded with transparency to match the Figma reference size — this is
+ * intentional: the Figma frame size is the authoritative target viewport.
+ */
+export async function runPixelDiff(figmaPath, implPath, diffOutputPath) {
+    try {
+        const { PNG } = await import("pngjs");
+        const pixelmatch = (await import("pixelmatch")).default;
+        const figmaPng = PNG.sync.read(await fs.readFile(figmaPath));
+        let implPng = PNG.sync.read(await fs.readFile(implPath));
+        const { width, height } = figmaPng;
+        // Align impl to Figma dimensions so pixelmatch can compare.
+        if (implPng.width !== width || implPng.height !== height) {
+            const aligned = new PNG({ width, height });
+            // Fill with white background (matches typical browser default)
+            for (let i = 0; i < aligned.data.length; i += 4) {
+                aligned.data[i] = 255;
+                aligned.data[i + 1] = 255;
+                aligned.data[i + 2] = 255;
+                aligned.data[i + 3] = 255;
+            }
+            const copyW = Math.min(width, implPng.width);
+            const copyH = Math.min(height, implPng.height);
+            for (let y = 0; y < copyH; y++) {
+                for (let x = 0; x < copyW; x++) {
+                    const s = (y * implPng.width + x) * 4;
+                    const d = (y * width + x) * 4;
+                    aligned.data[d] = implPng.data[s];
+                    aligned.data[d + 1] = implPng.data[s + 1];
+                    aligned.data[d + 2] = implPng.data[s + 2];
+                    aligned.data[d + 3] = implPng.data[s + 3];
+                }
+            }
+            implPng = aligned;
+        }
+        const diffPng = new PNG({ width, height });
+        const totalPixels = width * height;
+        const diffPixels = pixelmatch(figmaPng.data, implPng.data, diffPng.data, width, height, { threshold: 0.1, includeAA: false });
+        await fs.mkdir(path.dirname(diffOutputPath), { recursive: true });
+        await fs.writeFile(diffOutputPath, PNG.sync.write(diffPng));
+        return {
+            score: parseFloat((1 - diffPixels / totalPixels).toFixed(4)),
+            diffPixels,
+            totalPixels,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+//# sourceMappingURL=pixel-diff.js.map

package/dist/verify/pixel-diff.js.map

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

package/dist/verify/types.d.ts

@@ -0,0 +1,31 @@
+export type VerifyScreenshots = {
+    figma: string | null;
+    impl: string | null;
+    diff: string | null;
+};
+export type PixelMatchResult = {
+    score: number;
+    diffPixels: number;
+    totalPixels: number;
+};
+export type AIDifference = {
+    property: string;
+    expected: string;
+    observed: string;
+};
+export type AIFeedback = {
+    summary: string;
+    differences: AIDifference[];
+    overallAssessment: "matches" | "minor-differences" | "significant-differences";
+};
+export type VerifyReport = {
+    componentName: string;
+    slug: string;
+    checkedAt: string;
+    figmaNodeId: string | null;
+    screenshots: VerifyScreenshots;
+    pixelMatch: PixelMatchResult | null;
+    aiFeedback: AIFeedback | null;
+    error?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/verify/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,iBAAiB,EAAE,SAAS,GAAG,mBAAmB,GAAG,yBAAyB,CAAC;CAClF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/verify/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/verify/types.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calibrate-ds/core",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -19,12 +19,16 @@
     }
   },
   "devDependencies": {
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
     "vitest": "^2.0.0"
   },
   "dependencies": {
+    "pixelmatch": "^6.0.0",
+    "pngjs": "^7.0.0",
     "zod": "^4.3.6",
-    "@calibrate-ds/shared-types": "^0.1.7",
-    "@calibrate-ds/figma-client": "^0.1.7"
+    "@calibrate-ds/shared-types": "^0.1.9",
+    "@calibrate-ds/figma-client": "^0.1.9"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",