@vizzly-testing/cli 0.11.2 → 0.13.0

package/dist/types/services/server-manager.d.ts

@@ -14,6 +14,65 @@ export class ServerManager extends BaseService {
                 error: string;
                 details: any;
                 tddMode: boolean;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                comparison?: undefined;
+                status?: undefined;
+                message?: undefined;
+                success?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                originalPath: any;
+                tddMode: boolean;
+                details?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                comparison?: undefined;
+                status?: undefined;
+                message?: undefined;
+                success?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                filePath: any;
+                tddMode: boolean;
+                details?: undefined;
+                originalPath?: undefined;
+                receivedType?: undefined;
+                comparison?: undefined;
+                status?: undefined;
+                message?: undefined;
+                success?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                tddMode: boolean;
+                details?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                comparison?: undefined;
+                status?: undefined;
+                message?: undefined;
+                success?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                receivedType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+                tddMode: boolean;
+                details?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
                 comparison?: undefined;
                 status?: undefined;
                 message?: undefined;
@@ -34,6 +93,9 @@ export class ServerManager extends BaseService {
                     threshold: any;
                 };
                 tddMode: boolean;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
                 status?: undefined;
                 message?: undefined;
                 success?: undefined;
@@ -55,17 +117,9 @@ export class ServerManager extends BaseService {
                 tddMode: boolean;
                 error?: undefined;
                 details?: undefined;
-                success?: undefined;
-            };
-        } | {
-            statusCode: number;
-            body: {
-                error: string;
-                tddMode: boolean;
-                details?: undefined;
-                comparison?: undefined;
-                status?: undefined;
-                message?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
                 success?: undefined;
             };
         } | {
@@ -84,6 +138,9 @@ export class ServerManager extends BaseService {
                 tddMode: boolean;
                 error?: undefined;
                 details?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
                 status?: undefined;
                 message?: undefined;
             };
@@ -97,7 +154,7 @@ export class ServerManager extends BaseService {
             comparisons: any[];
             baseline: any;
         }>;
-        acceptBaseline: (screenshotName: any) => Promise<any>;
+        acceptBaseline: (comparisonId: any) => Promise<any>;
         acceptAllBaselines: () => Promise<{
             count: number;
         }>;
@@ -117,16 +174,61 @@ export class ServerManager extends BaseService {
                 count: number;
                 message: string;
                 error?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                name?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                success?: undefined;
+                disabled?: undefined;
+                count?: undefined;
+                message?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                name?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                originalPath: any;
+                success?: undefined;
+                disabled?: undefined;
+                count?: undefined;
+                message?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
+                name?: undefined;
+            };
+        } | {
+            statusCode: number;
+            body: {
+                error: string;
+                filePath: any;
+                success?: undefined;
+                disabled?: undefined;
+                count?: undefined;
+                message?: undefined;
+                originalPath?: undefined;
+                receivedType?: undefined;
                 name?: undefined;
             };
         } | {
             statusCode: number;
             body: {
                 error: string;
+                receivedType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
                 success?: undefined;
                 disabled?: undefined;
                 count?: undefined;
                 message?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
                 name?: undefined;
             };
         } | {
@@ -138,6 +240,9 @@ export class ServerManager extends BaseService {
                 disabled?: undefined;
                 message?: undefined;
                 error?: undefined;
+                originalPath?: undefined;
+                filePath?: undefined;
+                receivedType?: undefined;
             };
         }>;
         getScreenshotCount: () => number;

package/dist/types/services/tdd-service.d.ts

@@ -22,12 +22,14 @@ export class TddService {
     handleLocalBaselines(): Promise<any | null>;
     loadBaseline(): Promise<any>;
     compareScreenshot(name: any, imageBuffer: any, properties?: {}): Promise<{
+        id: any;
         name: any;
         status: string;
         baseline: any;
         current: any;
         diff: any;
         properties: any;
+        signature: string;
     }>;
     getResults(): {
         total: number;
@@ -74,9 +76,9 @@ export class TddService {
     private updateSingleBaseline;
     /**
      * Accept a current screenshot as the new baseline
-     * @param {string} name - Screenshot name to accept
+     * @param {string} id - Comparison ID to accept (generated from signature)
      * @returns {Object} Result object
      */
-    acceptBaseline(name: string): any;
+    acceptBaseline(id: string): any;
 }
 import { ApiService } from '../services/api-service.js';

package/dist/types/utils/image-input-detector.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @module image-input-detector
+ * @description Utilities for detecting whether a string is a base64 image or a file path
+ */
+/**
+ * Check if a string is valid base64 encoded data
+ *
+ * Base64 strings consist only of:
+ * - A-Z, a-z, 0-9, +, /
+ * - Optional padding with = at the end
+ * - Must be in groups of 4 characters (with optional 2-3 char group at end with padding)
+ *
+ * @param {string} str - String to check
+ * @returns {boolean} True if the string appears to be valid base64
+ *
+ * @example
+ * isBase64('ZmFrZS1wbmctZGF0YQ==') // true
+ * isBase64('./screenshot.png') // false
+ * isBase64('/absolute/path.png') // false
+ */
+export function isBase64(str: string): boolean;
+/**
+ * Check if a string looks like a file path
+ *
+ * Detects common file path patterns across platforms:
+ * - Relative paths: ./file.png, ../file.png, subdirectory/file.png
+ * - Absolute Unix paths: /absolute/path/file.png
+ * - Absolute Windows paths: C:\path\file.png, C:/path/file.png
+ * - File URIs: file:///path/to/file.png
+ * - Paths with common image extensions
+ *
+ * Note: This is heuristic-based and doesn't check file existence
+ *
+ * @param {string} str - String to check
+ * @returns {boolean} True if the string looks like a file path
+ *
+ * @example
+ * looksLikeFilePath('./screenshot.png') // true
+ * looksLikeFilePath('/abs/path/file.png') // true
+ * looksLikeFilePath('C:\\Windows\\file.png') // true
+ * looksLikeFilePath('ZmFrZS1wbmctZGF0YQ==') // false
+ */
+export function looksLikeFilePath(str: string): boolean;
+/**
+ * Detect the type of image input
+ *
+ * Determines whether a string input is:
+ * - 'base64': Base64 encoded image data
+ * - 'file-path': A file path (relative or absolute)
+ * - 'unknown': Cannot determine (ambiguous or invalid)
+ *
+ * Strategy:
+ * 1. First check if it's valid base64 (can contain / which might look like paths)
+ * 2. Then check if it looks like a file path (more specific patterns)
+ * 3. Otherwise return 'unknown'
+ *
+ * This order prevents base64 strings (which can contain /) from being
+ * misidentified as file paths. Base64 validation is stricter and should
+ * be checked first.
+ *
+ * @param {string} str - String to detect
+ * @returns {'base64' | 'file-path' | 'unknown'} Detected input type
+ *
+ * @example
+ * detectImageInputType('./screenshot.png') // 'file-path'
+ * detectImageInputType('ZmFrZS1wbmctZGF0YQ==') // 'base64'
+ * detectImageInputType('data:image/png;base64,iVBOR...') // 'base64'
+ * detectImageInputType('C:\\path\\image.png') // 'file-path'
+ * detectImageInputType('invalid!!!') // 'unknown'
+ */
+export function detectImageInputType(str: string): "base64" | "file-path" | "unknown";

package/dist/utils/image-input-detector.js

@@ -0,0 +1,150 @@
+/**
+ * @module image-input-detector
+ * @description Utilities for detecting whether a string is a base64 image or a file path
+ */
+
+/**
+ * Check if a string is valid base64 encoded data
+ *
+ * Base64 strings consist only of:
+ * - A-Z, a-z, 0-9, +, /
+ * - Optional padding with = at the end
+ * - Must be in groups of 4 characters (with optional 2-3 char group at end with padding)
+ *
+ * @param {string} str - String to check
+ * @returns {boolean} True if the string appears to be valid base64
+ *
+ * @example
+ * isBase64('ZmFrZS1wbmctZGF0YQ==') // true
+ * isBase64('./screenshot.png') // false
+ * isBase64('/absolute/path.png') // false
+ */
+export function isBase64(str) {
+  if (typeof str !== 'string' || str.length === 0) {
+    return false;
+  }
+
+  // Strip data URI prefix if present (e.g., data:image/png;base64,...)
+  let base64Content = str;
+  if (str.startsWith('data:')) {
+    const match = str.match(/^data:[a-zA-Z0-9+/.-]+;base64,(.+)$/);
+    if (!match) {
+      return false; // Has data: prefix but invalid format
+    }
+    base64Content = match[1];
+  }
+
+  // Base64 regex: groups of 4 chars [A-Za-z0-9+/], with optional padding
+  // Valid endings: no padding, or 2/3 chars + padding (= or ==)
+  const base64Pattern = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
+  return base64Pattern.test(base64Content);
+}
+
+/**
+ * Check if a string looks like a file path
+ *
+ * Detects common file path patterns across platforms:
+ * - Relative paths: ./file.png, ../file.png, subdirectory/file.png
+ * - Absolute Unix paths: /absolute/path/file.png
+ * - Absolute Windows paths: C:\path\file.png, C:/path/file.png
+ * - File URIs: file:///path/to/file.png
+ * - Paths with common image extensions
+ *
+ * Note: This is heuristic-based and doesn't check file existence
+ *
+ * @param {string} str - String to check
+ * @returns {boolean} True if the string looks like a file path
+ *
+ * @example
+ * looksLikeFilePath('./screenshot.png') // true
+ * looksLikeFilePath('/abs/path/file.png') // true
+ * looksLikeFilePath('C:\\Windows\\file.png') // true
+ * looksLikeFilePath('ZmFrZS1wbmctZGF0YQ==') // false
+ */
+export function looksLikeFilePath(str) {
+  if (typeof str !== 'string' || str.length === 0) {
+    return false;
+  }
+
+  // 0. Explicitly reject data URIs first (they contain : and / which would match path patterns)
+  if (str.startsWith('data:')) {
+    return false;
+  }
+
+  // 1. Check for file:// URI scheme
+  if (str.startsWith('file://')) {
+    return true;
+  }
+
+  // 2. Check for absolute paths (Unix or Windows)
+  // Unix: starts with /
+  // Windows: starts with drive letter like C:\ or C:/
+  if (str.startsWith('/') || /^[A-Za-z]:[/\\]/.test(str)) {
+    return true;
+  }
+
+  // 3. Check for relative path indicators
+  // ./ or ../ or .\ or ..\
+  if (/^\.\.?[/\\]/.test(str)) {
+    return true;
+  }
+
+  // 4. Check for path separators (forward or back slash)
+  // This catches paths like: subdirectory/file.png or subdirectory\file.png
+  if (/[/\\]/.test(str)) {
+    return true;
+  }
+
+  // 5. Check for common image file extensions
+  // This catches simple filenames like: screenshot.png
+  // Common extensions: png, jpg, jpeg, gif, webp, bmp, svg, tiff, ico
+  if (/\.(png|jpe?g|gif|webp|bmp|svg|tiff?|ico)$/i.test(str)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Detect the type of image input
+ *
+ * Determines whether a string input is:
+ * - 'base64': Base64 encoded image data
+ * - 'file-path': A file path (relative or absolute)
+ * - 'unknown': Cannot determine (ambiguous or invalid)
+ *
+ * Strategy:
+ * 1. First check if it's valid base64 (can contain / which might look like paths)
+ * 2. Then check if it looks like a file path (more specific patterns)
+ * 3. Otherwise return 'unknown'
+ *
+ * This order prevents base64 strings (which can contain /) from being
+ * misidentified as file paths. Base64 validation is stricter and should
+ * be checked first.
+ *
+ * @param {string} str - String to detect
+ * @returns {'base64' | 'file-path' | 'unknown'} Detected input type
+ *
+ * @example
+ * detectImageInputType('./screenshot.png') // 'file-path'
+ * detectImageInputType('ZmFrZS1wbmctZGF0YQ==') // 'base64'
+ * detectImageInputType('data:image/png;base64,iVBOR...') // 'base64'
+ * detectImageInputType('C:\\path\\image.png') // 'file-path'
+ * detectImageInputType('invalid!!!') // 'unknown'
+ */
+export function detectImageInputType(str) {
+  if (typeof str !== 'string' || str.length === 0) {
+    return 'unknown';
+  }
+
+  // Check base64 FIRST - base64 strings can contain / which looks like paths
+  // Base64 validation is stricter and more deterministic
+  if (isBase64(str)) {
+    return 'base64';
+  }
+
+  // Then check file path - catch patterns that aren't valid base64
+  if (looksLikeFilePath(str)) {
+    return 'file-path';
+  }
+  return 'unknown';
+}

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.13.0",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -72,19 +72,19 @@
     "format:check": "prettier --check src tests"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "publishConfig": {
     "access": "public",
     "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": {