@testivai/witness 1.0.0 → 1.0.2

package/dist/report/generator.js

@@ -0,0 +1,123 @@
+"use strict";
+/**
+ * TestivAI Report — Generator
+ *
+ * Orchestrator: compareAll → build ReportData → write results.json
+ * → render HTML → optionally auto-open browser.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateReport = generateReport;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const child_process_1 = require("child_process");
+const compare_1 = require("./compare");
+const template_1 = require("./template");
+/**
+ * Generate a complete visual regression report.
+ *
+ * 1. Compare all temp screenshots against baselines
+ * 2. Build ReportData with summary
+ * 3. Write results.json (machine-readable)
+ * 4. Render and write index.html
+ * 5. Optionally open in browser
+ *
+ * @returns The report data
+ */
+function generateReport(options) {
+    const { projectRoot, reportDir: reportDirRelative = 'visual-report', threshold = 0.1, autoOpen = true, version = '2.0.0', } = options;
+    const reportDir = path.isAbsolute(reportDirRelative)
+        ? reportDirRelative
+        : path.join(projectRoot, reportDirRelative);
+    // Ensure report directory exists
+    fs.mkdirSync(reportDir, { recursive: true });
+    // 1. Compare all snapshots
+    const compareOptions = {
+        projectRoot,
+        reportDir,
+        threshold,
+    };
+    const snapshots = (0, compare_1.compareAll)(compareOptions);
+    // 2. Build summary
+    const summary = {
+        total: snapshots.length,
+        passed: snapshots.filter((s) => s.status === 'passed').length,
+        changed: snapshots.filter((s) => s.status === 'changed').length,
+        newSnapshots: snapshots.filter((s) => s.status === 'new').length,
+    };
+    // 3. Build report data
+    const reportData = {
+        version,
+        timestamp: new Date().toISOString(),
+        summary,
+        snapshots,
+    };
+    // 4. Write results.json
+    const resultsPath = path.join(reportDir, 'results.json');
+    fs.writeFileSync(resultsPath, JSON.stringify(reportData, null, 2));
+    // 5. Render and write HTML
+    const html = (0, template_1.renderHtml)(reportData);
+    const htmlPath = path.join(reportDir, 'index.html');
+    fs.writeFileSync(htmlPath, html);
+    // 6. Auto-open browser
+    if (autoOpen) {
+        openInBrowser(htmlPath);
+    }
+    return reportData;
+}
+/**
+ * Open a file in the default browser.
+ * Best-effort — does not throw on failure.
+ */
+function openInBrowser(filePath) {
+    const url = `file://${filePath}`;
+    const platform = process.platform;
+    let cmd;
+    if (platform === 'darwin') {
+        cmd = `open "${url}"`;
+    }
+    else if (platform === 'win32') {
+        cmd = `start "" "${url}"`;
+    }
+    else {
+        cmd = `xdg-open "${url}"`;
+    }
+    (0, child_process_1.exec)(cmd, (err) => {
+        if (err) {
+            // Silently ignore — CI environments won't have a browser
+        }
+    });
+}
+//# sourceMappingURL=generator.js.map

package/dist/report/generator.js.map

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

package/dist/report/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TestivAI Report Generator
+ */
+export { generateReport } from './generator';
+export type { GenerateReportOptions } from './generator';
+export { compareAll } from './compare';
+export type { CompareOptions } from './compare';
+export { renderHtml } from './template';
+export type { ReportData, ReportSummary, SnapshotResult, SnapshotStatus, } from './results';
+//# sourceMappingURL=index.d.ts.map

package/dist/report/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,YAAY,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAC"}

package/dist/report/index.js

@@ -0,0 +1,13 @@
+"use strict";
+/**
+ * TestivAI Report Generator
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHtml = exports.compareAll = exports.generateReport = void 0;
+var generator_1 = require("./generator");
+Object.defineProperty(exports, "generateReport", { enumerable: true, get: function () { return generator_1.generateReport; } });
+var compare_1 = require("./compare");
+Object.defineProperty(exports, "compareAll", { enumerable: true, get: function () { return compare_1.compareAll; } });
+var template_1 = require("./template");
+Object.defineProperty(exports, "renderHtml", { enumerable: true, get: function () { return template_1.renderHtml; } });
+//# sourceMappingURL=index.js.map

package/dist/report/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAEH,yCAA6C;AAApC,2GAAA,cAAc,OAAA;AAEvB,qCAAuC;AAA9B,qGAAA,UAAU,OAAA;AAEnB,uCAAwC;AAA/B,sGAAA,UAAU,OAAA"}

package/dist/report/results.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TestivAI Report — Result types
+ *
+ * Machine-readable output for the GitHub Action and other consumers.
+ */
+export type SnapshotStatus = 'passed' | 'changed' | 'new';
+export interface SnapshotResult {
+    name: string;
+    status: SnapshotStatus;
+    /** Diff percentage (0-100). 0 for passed/new. */
+    diffPercent: number;
+    /** Number of changed pixels */
+    diffCount: number;
+    /** Total pixels compared */
+    totalPixels: number;
+    /** Relative path to baseline image (if any) */
+    baselinePath?: string;
+    /** Relative path to current (candidate) image */
+    currentPath?: string;
+    /** Relative path to diff image (if any) */
+    diffPath?: string;
+}
+export interface ReportSummary {
+    total: number;
+    passed: number;
+    changed: number;
+    newSnapshots: number;
+}
+export interface ReportData {
+    version: string;
+    timestamp: string;
+    summary: ReportSummary;
+    snapshots: SnapshotResult[];
+}
+//# sourceMappingURL=results.d.ts.map

package/dist/report/results.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"results.d.ts","sourceRoot":"","sources":["../../src/report/results.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC;IACvB,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B"}

package/dist/report/results.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * TestivAI Report — Result types
+ *
+ * Machine-readable output for the GitHub Action and other consumers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=results.js.map

package/dist/report/results.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"results.js","sourceRoot":"","sources":["../../src/report/results.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}

package/dist/report/template.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TestivAI Report — HTML Template
+ *
+ * Single-file HTML with inlined CSS/JS.
+ * Dark navy sidebar, cyan accents, summary cards,
+ * Changed → New → Passed sections, 3-column diff view,
+ * approve command copy button, cloud upgrade CTA, image zoom overlay.
+ */
+import { ReportData } from './results';
+/**
+ * Render a standalone HTML report from report data.
+ */
+export declare function renderHtml(data: ReportData): string;
+//# sourceMappingURL=template.d.ts.map

package/dist/report/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/report/template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAEvD;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgLnD"}

package/dist/report/template.js

@@ -0,0 +1,229 @@
+"use strict";
+/**
+ * TestivAI Report — HTML Template
+ *
+ * Single-file HTML with inlined CSS/JS.
+ * Dark navy sidebar, cyan accents, summary cards,
+ * Changed → New → Passed sections, 3-column diff view,
+ * approve command copy button, cloud upgrade CTA, image zoom overlay.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHtml = renderHtml;
+/**
+ * Render a standalone HTML report from report data.
+ */
+function renderHtml(data) {
+    const { summary, snapshots, version, timestamp } = data;
+    const changed = snapshots.filter((s) => s.status === 'changed');
+    const newSnapshots = snapshots.filter((s) => s.status === 'new');
+    const passed = snapshots.filter((s) => s.status === 'passed');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TestivAI Visual Report</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0d1117; color: #e6edf3; display: flex; min-height: 100vh; }
+
+    /* Sidebar */
+    .sidebar { width: 260px; background: #08111f; padding: 24px 16px; flex-shrink: 0; border-right: 1px solid #21262d; position: fixed; height: 100vh; overflow-y: auto; }
+    .sidebar h1 { font-size: 18px; color: #00d4ff; margin-bottom: 4px; }
+    .sidebar .version { font-size: 12px; color: #8b949e; margin-bottom: 24px; }
+    .sidebar .timestamp { font-size: 11px; color: #8b949e; margin-bottom: 24px; }
+
+    /* Summary cards */
+    .summary-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
+    .card { padding: 12px; border-radius: 8px; background: #161b22; border: 1px solid #21262d; }
+    .card .label { font-size: 11px; text-transform: uppercase; color: #8b949e; letter-spacing: 0.5px; }
+    .card .value { font-size: 24px; font-weight: 700; margin-top: 4px; }
+    .card.total .value { color: #e6edf3; }
+    .card.changed .value { color: #f85149; }
+    .card.new .value { color: #f0883e; }
+    .card.passed .value { color: #3fb950; }
+
+    /* Nav */
+    .nav { list-style: none; margin-bottom: 24px; }
+    .nav li { margin-bottom: 2px; }
+    .nav a { display: block; padding: 8px 12px; border-radius: 6px; color: #8b949e; text-decoration: none; font-size: 13px; transition: all 0.15s; }
+    .nav a:hover { background: #161b22; color: #e6edf3; }
+    .nav a .count { float: right; background: #21262d; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
+
+    /* CTA */
+    .cta { background: linear-gradient(135deg, #0d419d 0%, #1158d9 100%); padding: 16px; border-radius: 8px; margin-top: auto; }
+    .cta h3 { font-size: 13px; color: #fff; margin-bottom: 6px; }
+    .cta p { font-size: 11px; color: #a5d6ff; line-height: 1.5; }
+    .cta a { display: inline-block; margin-top: 8px; padding: 6px 14px; background: #00d4ff; color: #08111f; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 600; }
+
+    /* Main content */
+    .main { margin-left: 260px; flex: 1; padding: 32px; }
+    .section { margin-bottom: 48px; }
+    .section-title { font-size: 20px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #21262d; }
+    .section-title.changed { color: #f85149; }
+    .section-title.new { color: #f0883e; }
+    .section-title.passed { color: #3fb950; }
+
+    /* Snapshot card */
+    .snapshot { background: #161b22; border: 1px solid #21262d; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+    .snapshot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+    .snapshot-name { font-size: 16px; font-weight: 600; }
+    .snapshot-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
+    .badge-changed { background: #f8514922; color: #f85149; }
+    .badge-new { background: #f0883e22; color: #f0883e; }
+    .badge-passed { background: #3fb95022; color: #3fb950; }
+    .snapshot-stats { font-size: 12px; color: #8b949e; margin-bottom: 16px; }
+
+    /* 3-column diff view */
+    .diff-view { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+    .diff-view.two-col { grid-template-columns: 1fr 1fr; }
+    .diff-view.one-col { grid-template-columns: 1fr; }
+    .diff-col { text-align: center; }
+    .diff-col label { display: block; font-size: 11px; color: #8b949e; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
+    .diff-col img { max-width: 100%; border-radius: 6px; border: 1px solid #21262d; cursor: zoom-in; transition: transform 0.2s; }
+    .diff-col img:hover { transform: scale(1.02); }
+
+    /* Approve command */
+    .approve-cmd { margin-top: 16px; background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
+    .approve-cmd code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: #00d4ff; }
+    .approve-cmd button { background: #21262d; border: 1px solid #30363d; color: #e6edf3; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
+    .approve-cmd button:hover { background: #30363d; }
+    .approve-cmd button.copied { background: #3fb950; color: #0d1117; }
+
+    /* Zoom overlay */
+    .zoom-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 100; justify-content: center; align-items: center; cursor: zoom-out; }
+    .zoom-overlay.active { display: flex; }
+    .zoom-overlay img { max-width: 95%; max-height: 95%; border-radius: 8px; }
+
+    /* Empty state */
+    .empty { text-align: center; padding: 48px; color: #8b949e; }
+    .empty .icon { font-size: 48px; margin-bottom: 16px; }
+  </style>
+</head>
+<body>
+  <aside class="sidebar">
+    <h1>TestivAI</h1>
+    <div class="version">Visual Report v${escapeHtml(version)}</div>
+    <div class="timestamp">${escapeHtml(new Date(timestamp).toLocaleString())}</div>
+
+    <div class="summary-cards">
+      <div class="card total"><div class="label">Total</div><div class="value">${summary.total}</div></div>
+      <div class="card changed"><div class="label">Changed</div><div class="value">${summary.changed}</div></div>
+      <div class="card new"><div class="label">New</div><div class="value">${summary.newSnapshots}</div></div>
+      <div class="card passed"><div class="label">Passed</div><div class="value">${summary.passed}</div></div>
+    </div>
+
+    <ul class="nav">
+      ${summary.changed > 0 ? `<li><a href="#changed">Changed <span class="count">${summary.changed}</span></a></li>` : ''}
+      ${summary.newSnapshots > 0 ? `<li><a href="#new">New <span class="count">${summary.newSnapshots}</span></a></li>` : ''}
+      ${summary.passed > 0 ? `<li><a href="#passed">Passed <span class="count">${summary.passed}</span></a></li>` : ''}
+    </ul>
+
+    <div class="cta">
+      <h3>Need AI-powered analysis?</h3>
+      <p>TestivAI Cloud adds smart matching, AI verdicts, and team collaboration.</p>
+      <a href="https://testiv.ai" target="_blank">Learn More</a>
+    </div>
+  </aside>
+
+  <main class="main">
+    ${summary.total === 0 ? `
+    <div class="empty">
+      <div class="icon">📸</div>
+      <h2>No snapshots found</h2>
+      <p>Run your tests to generate visual snapshots.</p>
+    </div>` : ''}
+
+    ${changed.length > 0 ? `
+    <section class="section" id="changed">
+      <h2 class="section-title changed">Changed (${changed.length})</h2>
+      ${changed.map((s) => renderSnapshot(s)).join('\n')}
+    </section>` : ''}
+
+    ${newSnapshots.length > 0 ? `
+    <section class="section" id="new">
+      <h2 class="section-title new">New (${newSnapshots.length})</h2>
+      ${newSnapshots.map((s) => renderSnapshot(s)).join('\n')}
+    </section>` : ''}
+
+    ${passed.length > 0 ? `
+    <section class="section" id="passed">
+      <h2 class="section-title passed">Passed (${passed.length})</h2>
+      ${passed.map((s) => renderSnapshot(s)).join('\n')}
+    </section>` : ''}
+  </main>
+
+  <div class="zoom-overlay" id="zoomOverlay">
+    <img id="zoomImage" src="" alt="Zoomed">
+  </div>
+
+  <script>
+    // Image zoom
+    document.querySelectorAll('.diff-col img').forEach(img => {
+      img.addEventListener('click', () => {
+        document.getElementById('zoomImage').src = img.src;
+        document.getElementById('zoomOverlay').classList.add('active');
+      });
+    });
+    document.getElementById('zoomOverlay').addEventListener('click', () => {
+      document.getElementById('zoomOverlay').classList.remove('active');
+    });
+
+    // Copy approve command
+    document.querySelectorAll('.copy-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const cmd = btn.dataset.cmd;
+        navigator.clipboard.writeText(cmd).then(() => {
+          btn.textContent = 'Copied!';
+          btn.classList.add('copied');
+          setTimeout(() => {
+            btn.textContent = 'Copy';
+            btn.classList.remove('copied');
+          }, 2000);
+        });
+      });
+    });
+  </script>
+</body>
+</html>`;
+}
+function renderSnapshot(snapshot) {
+    const badgeClass = snapshot.status === 'changed' ? 'badge-changed' : snapshot.status === 'new' ? 'badge-new' : 'badge-passed';
+    const hasBaseline = !!snapshot.baselinePath;
+    const hasDiff = !!snapshot.diffPath;
+    const hasCurrent = !!snapshot.currentPath;
+    let gridClass = 'diff-view';
+    if (hasBaseline && hasDiff && hasCurrent)
+        gridClass += '';
+    else if (hasCurrent && !hasBaseline)
+        gridClass += ' one-col';
+    else
+        gridClass += ' two-col';
+    return `
+    <div class="snapshot">
+      <div class="snapshot-header">
+        <span class="snapshot-name">${escapeHtml(snapshot.name)}</span>
+        <span class="snapshot-badge ${badgeClass}">${snapshot.status}</span>
+      </div>
+      ${snapshot.status === 'changed' ? `<div class="snapshot-stats">Diff: ${snapshot.diffPercent.toFixed(2)}% (${snapshot.diffCount} pixels)</div>` : ''}
+      <div class="${gridClass}">
+        ${hasBaseline ? `<div class="diff-col"><label>Baseline</label><img src="${snapshot.baselinePath}" alt="Baseline"></div>` : ''}
+        ${hasDiff ? `<div class="diff-col"><label>Diff</label><img src="${snapshot.diffPath}" alt="Diff"></div>` : ''}
+        ${hasCurrent ? `<div class="diff-col"><label>Current</label><img src="${snapshot.currentPath}" alt="Current"></div>` : ''}
+      </div>
+      ${snapshot.status === 'changed' || snapshot.status === 'new' ? `
+      <div class="approve-cmd">
+        <code>npx testivai approve ${escapeHtml(snapshot.name)}</code>
+        <button class="copy-btn" data-cmd="npx testivai approve ${escapeHtml(snapshot.name)}">Copy</button>
+      </div>` : ''}
+    </div>`;
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+//# sourceMappingURL=template.js.map

package/dist/report/template.js.map

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

package/package.json

@@ -1,11 +1,46 @@
 {
   "name": "@testivai/witness",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Framework-agnostic visual regression testing CLI for TestivAI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./diff": {
+      "types": "./dist/diff/index.d.ts",
+      "default": "./dist/diff/index.js"
+    },
+    "./baselines": {
+      "types": "./dist/baselines/index.d.ts",
+      "default": "./dist/baselines/index.js"
+    },
+    "./config": {
+      "types": "./dist/config/index.d.ts",
+      "default": "./dist/config/index.js"
+    },
+    "./report": {
+      "types": "./dist/report/index.d.ts",
+      "default": "./dist/report/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "diff": [
+        "dist/diff/index.d.ts"
+      ],
+      "baselines": [
+        "dist/baselines/index.d.ts"
+      ],
+      "config": [
+        "dist/config/index.d.ts"
+      ],
+      "report": [
+        "dist/report/index.d.ts"
+      ]
+    }
   },
   "bin": {
     "testivai": "./dist/bin/testivai.js"
@@ -15,16 +50,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsc",
-    "clean": "rm -rf dist",
-    "dev": "tsc --watch",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "test:unit": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
   "keywords": [
     "testivai",
     "visual-regression",
@@ -38,18 +63,27 @@
   ],
   "author": "TestivAI",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mcbuddy/testivai-oss.git",
+    "directory": "packages/witness"
+  },
+  "bugs": {
+    "url": "https://github.com/mcbuddy/testivai-oss/issues"
+  },
+  "homepage": "https://github.com/mcbuddy/testivai-oss/tree/main/packages/witness#readme",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@testivai/common": "^0.2.0",
     "chalk": "^4.1.2",
     "chrome-remote-interface": "^0.33.0",
     "commander": "^11.0.0",
     "inquirer": "^8.2.6",
     "ora": "^7.0.0",
     "simple-git": "^3.20.0",
-    "ws": "^8.0.0"
+    "ws": "^8.0.0",
+    "@testivai/common": "0.2.2"
   },
   "devDependencies": {
     "@types/inquirer": "^8.2.10",
@@ -62,5 +96,14 @@
   },
   "engines": {
     "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "dev": "tsc --watch",
+    "test": "jest",
+    "test:unit": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
-}
+}