@vizzly-testing/cli 0.11.2 → 0.12.0

package/dist/services/tdd-service.js

@@ -1,5 +1,6 @@
 import { writeFileSync, readFileSync, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import { compare } from '@vizzly-testing/honeydiff';
 import { ApiService } from '../services/api-service.js';
 import { createServiceLogger } from '../utils/logger-factory.js';
 import { colors } from '../utils/colors.js';
@@ -549,23 +550,21 @@ export class TddService {
 
     // Baseline exists - compare with it
     try {
-      // Use odiff Node.js API to compare images
-      const {
-        compare
-      } = await import('odiff-bin');
-
       // Log file sizes for debugging
       const baselineSize = readFileSync(baselineImagePath).length;
       const currentSize = readFileSync(currentImagePath).length;
       logger.debug(`Comparing ${sanitizedName}`);
       logger.debug(`Baseline: ${baselineImagePath} (${baselineSize} bytes)`);
       logger.debug(`Current:  ${currentImagePath} (${currentSize} bytes)`);
-      const result = await compare(baselineImagePath, currentImagePath, diffImagePath, {
-        threshold: this.threshold,
-        outputDiffMask: true,
-        failOnLayoutDiff: true // Fail if image dimensions differ
+      const result = await compare(baselineImagePath, currentImagePath, {
+        colorThreshold: this.threshold,
+        // YIQ color threshold (0.0-1.0), default 0.1
+        antialiasing: true,
+        diffPath: diffImagePath,
+        overwrite: true,
+        includeClusters: true // Enable spatial clustering analysis
       });
-      if (result.match) {
+      if (!result.isDifferent) {
         // Images match
         const comparison = {
           name: sanitizedName,
@@ -574,18 +573,22 @@ export class TddService {
           current: currentImagePath,
           diff: null,
           properties: validatedProperties,
-          threshold: this.threshold
+          threshold: this.threshold,
+          // Include honeydiff metrics even for passing comparisons
+          totalPixels: result.totalPixels,
+          aaPixelsIgnored: result.aaPixelsIgnored,
+          aaPercentage: result.aaPercentage
         };
         logger.debug(`PASSED ${sanitizedName}`);
         this.comparisons.push(comparison);
         return comparison;
       } else {
         // Images differ
-        let diffInfo = '';
-        if (result.reason === 'pixel-diff') {
-          diffInfo = ` (${result.diffPercentage.toFixed(2)}% different, ${result.diffCount} pixels)`;
-        } else if (result.reason === 'layout-diff') {
-          diffInfo = ' (layout difference)';
+        let diffInfo = ` (${result.diffPercentage.toFixed(2)}% different, ${result.diffPixels} pixels)`;
+
+        // Add cluster info to log if available
+        if (result.diffClusters && result.diffClusters.length > 0) {
+          diffInfo += `, ${result.diffClusters.length} region${result.diffClusters.length > 1 ? 's' : ''}`;
         }
         const comparison = {
           name: sanitizedName,
@@ -595,9 +598,17 @@ export class TddService {
           diff: diffImagePath,
           properties: validatedProperties,
           threshold: this.threshold,
-          diffPercentage: result.reason === 'pixel-diff' ? result.diffPercentage : null,
-          diffCount: result.reason === 'pixel-diff' ? result.diffCount : null,
-          reason: result.reason
+          diffPercentage: result.diffPercentage,
+          diffCount: result.diffPixels,
+          reason: 'pixel-diff',
+          // Honeydiff metrics
+          totalPixels: result.totalPixels,
+          aaPixelsIgnored: result.aaPixelsIgnored,
+          aaPercentage: result.aaPercentage,
+          boundingBox: result.boundingBox,
+          heightDiff: result.heightDiff,
+          intensityStats: result.intensityStats,
+          diffClusters: result.diffClusters
         };
         logger.warn(`❌ ${colors.red('FAILED')} ${sanitizedName} - differences detected${diffInfo}`);
         logger.info(`    Diff saved to: ${diffImagePath}`);

package/docs/tdd-mode.md

@@ -7,7 +7,7 @@ TDD (Test-Driven Development) Mode enables fast local development with an intera
 TDD Mode transforms your visual testing workflow with:
 
 - **Interactive Dashboard** - Real-time visual feedback as tests run
-- **Local Comparison** - Compares screenshots on your machine using `odiff`
+- **Local Comparison** - Compares screenshots on your machine using `honeydiff`
 - **Live Updates** - See comparisons instantly in the browser
 - **Baseline Management** - Accept/reject changes directly from the UI
 - **Fast Feedback** - No network uploads during development
@@ -90,7 +90,7 @@ TDD Mode provides two workflows:
 ### Single-Shot Workflow
 
 1. **Run tests** - `vizzly tdd run "npm test"` executes once
-2. **Compares locally** - Uses `odiff` for pixel-perfect comparison
+2. **Compares locally** - Uses `honeydiff` for high-performance comparison
 3. **Generates report** - Creates HTML report with visual comparisons
 4. **Exit with status** - Fails if differences exceed threshold
 
@@ -452,14 +452,14 @@ rm -rf .vizzly/baselines/
 npx vizzly tdd run "npm test"
 ```
 
-### Odiff Not Found
+### Honeydiff Not Found
 ```
-Error: odiff binary not found
+Error: Cannot find module '@vizzly-testing/honeydiff'
 ```
 
-**Solution**: The `odiff-bin` package should be installed automatically. Try:
+**Solution**: The `@vizzly-testing/honeydiff` package should be installed automatically. Try:
 ```bash
-npm install odiff-bin
+npm install @vizzly-testing/honeydiff
 ```
 
 ## Best Practices

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -79,12 +79,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@vizzly-testing/honeydiff": "^0.1.0",
     "commander": "^14.0.0",
     "cosmiconfig": "^9.0.0",
     "dotenv": "^17.2.1",
     "form-data": "^4.0.0",
     "glob": "^11.0.3",
-    "odiff-bin": "^3.2.1",
     "zod": "^4.1.12"
   },
   "devDependencies": {