@vizzly-testing/cli 0.5.0 → 0.7.0

package/dist/services/report-generator/report.css

@@ -0,0 +1,355 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #e2e8f0;
+  background: #0f172a;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 32px;
+  margin-bottom: 24px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid #334155;
+}
+
+.header h1 {
+  font-size: 2rem;
+  margin-bottom: 24px;
+  color: #f1f5f9;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.summary {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 15px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #94a3b8;
+}
+
+.stat.passed .stat-number {
+  color: #22c55e;
+}
+.stat.failed .stat-number {
+  color: #f59e0b;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: 500;
+}
+
+.build-info {
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.no-failures {
+  text-align: center;
+  padding: 48px;
+  background: #1e293b;
+  border-radius: 12px;
+  border: 1px solid #334155;
+  font-size: 1.125rem;
+  color: #22c55e;
+}
+
+.comparison {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid #334155;
+}
+
+.comparison-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #334155;
+}
+
+.comparison-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #f1f5f9;
+  font-weight: 600;
+}
+
+.comparison-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 0.875rem;
+}
+
+.diff-status {
+  padding: 6px 12px;
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+  border-radius: 6px;
+  font-weight: 500;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  font-size: 0.875rem;
+}
+
+.comparison-controls {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.view-mode-btn {
+  padding: 8px 16px;
+  border: 1px solid #475569;
+  background: #334155;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  color: #cbd5e1;
+}
+
+.view-mode-btn:hover {
+  background: #475569;
+  border-color: #64748b;
+  color: #e2e8f0;
+}
+
+.view-mode-btn.active {
+  background: #f59e0b;
+  color: #1e293b;
+  border-color: #f59e0b;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+
+.comparison-viewer {
+  position: relative;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.mode-container {
+  position: relative;
+  min-height: 200px;
+  text-align: center;
+}
+
+.mode-container img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Overlay Mode */
+.overlay-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+  cursor: pointer;
+  max-width: 100%;
+}
+
+.overlay-container img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.overlay-container .current-image {
+  position: relative;
+  z-index: 1;
+}
+
+.overlay-container .baseline-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.5;
+  z-index: 2;
+}
+
+.overlay-container .diff-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 3;
+}
+
+/* Side by Side Mode */
+.side-by-side-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+  padding: 16px;
+}
+
+.side-by-side-image {
+  text-align: center;
+  flex: 1;
+  min-width: 200px;
+  max-width: 400px;
+}
+
+.side-by-side-image img {
+  width: 100%;
+  height: auto;
+  max-width: none;
+  border: 2px solid #475569;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: border-color 0.2s ease;
+}
+
+.side-by-side-image img:hover {
+  border-color: #f59e0b;
+}
+
+.side-by-side-image label {
+  display: block;
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: #94a3b8;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+/* Onion Skin Mode */
+.onion-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+  cursor: ew-resize;
+  user-select: none;
+  max-width: 100%;
+}
+
+.onion-baseline {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.onion-current {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: 100%;
+  height: auto;
+  clip-path: inset(0 50% 0 0);
+}
+
+.onion-divider {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background: #f59e0b;
+  transform: translateX(-50%);
+  z-index: 10;
+  pointer-events: none;
+}
+
+.onion-divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #f59e0b;
+  border: 2px solid #1e293b;
+}
+
+.onion-divider::after {
+  content: '⟷';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #1e293b;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+/* Toggle Mode */
+.toggle-container {
+  display: inline-block;
+}
+
+.toggle-container img {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+}
+
+.error {
+  color: #ef4444;
+  text-align: center;
+  padding: 40px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 10px;
+  }
+  .summary {
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  .comparison-controls {
+    flex-wrap: wrap;
+  }
+  .side-by-side-container {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+}

package/dist/services/report-generator/viewer.js

@@ -0,0 +1,100 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Handle view mode switching
+  document.querySelectorAll('.view-mode-btn').forEach(btn => {
+    btn.addEventListener('click', function () {
+      let comparison = this.closest('.comparison');
+      let mode = this.dataset.mode;
+
+      // Update active button
+      comparison.querySelectorAll('.view-mode-btn').forEach(b => b.classList.remove('active'));
+      this.classList.add('active');
+
+      // Update viewer mode
+      let viewer = comparison.querySelector('.comparison-viewer');
+      viewer.dataset.mode = mode;
+
+      // Hide all mode containers
+      viewer.querySelectorAll('.mode-container').forEach(container => {
+        container.style.display = 'none';
+      });
+
+      // Show appropriate mode container
+      let activeContainer = viewer.querySelector('.' + mode + '-mode');
+      if (activeContainer) {
+        activeContainer.style.display = 'block';
+      }
+    });
+  });
+
+  // Handle onion skin drag-to-reveal
+  document.querySelectorAll('.onion-container').forEach(container => {
+    let isDragging = false;
+    function updateOnionSkin(x) {
+      let rect = container.getBoundingClientRect();
+      let percentage = Math.max(0, Math.min(100, (x - rect.left) / rect.width * 100));
+      let currentImg = container.querySelector('.onion-current');
+      let divider = container.querySelector('.onion-divider');
+      if (currentImg && divider) {
+        currentImg.style.clipPath = 'inset(0 ' + (100 - percentage) + '% 0 0)';
+        divider.style.left = percentage + '%';
+      }
+    }
+    container.addEventListener('mousedown', function (e) {
+      isDragging = true;
+      updateOnionSkin(e.clientX);
+      e.preventDefault();
+    });
+    container.addEventListener('mousemove', function (e) {
+      if (isDragging) {
+        updateOnionSkin(e.clientX);
+      }
+    });
+    document.addEventListener('mouseup', function () {
+      isDragging = false;
+    });
+
+    // Touch events for mobile
+    container.addEventListener('touchstart', function (e) {
+      isDragging = true;
+      updateOnionSkin(e.touches[0].clientX);
+      e.preventDefault();
+    });
+    container.addEventListener('touchmove', function (e) {
+      if (isDragging) {
+        updateOnionSkin(e.touches[0].clientX);
+        e.preventDefault();
+      }
+    });
+    document.addEventListener('touchend', function () {
+      isDragging = false;
+    });
+  });
+
+  // Handle overlay mode clicking
+  document.querySelectorAll('.overlay-container').forEach(container => {
+    container.addEventListener('click', function () {
+      let diffImage = this.querySelector('.diff-image');
+      if (diffImage) {
+        // Toggle diff visibility
+        let isVisible = diffImage.style.opacity === '1';
+        diffImage.style.opacity = isVisible ? '0' : '1';
+      }
+    });
+  });
+
+  // Handle toggle mode clicking
+  document.querySelectorAll('.toggle-container img').forEach(img => {
+    let isBaseline = true;
+    let comparison = img.closest('.comparison');
+    let baselineSrc = comparison.querySelector('.baseline-image').src;
+    let currentSrc = comparison.querySelector('.current-image').src;
+    img.addEventListener('click', function () {
+      isBaseline = !isBaseline;
+      this.src = isBaseline ? baselineSrc : currentSrc;
+
+      // Update cursor style to indicate interactivity
+      this.style.cursor = 'pointer';
+    });
+  });
+  console.log('Vizzly TDD Report loaded successfully');
+});

package/dist/services/server-manager.js

@@ -17,16 +17,17 @@ export class ServerManager extends BaseService {
     this.handler = null;
     this.emitter = null;
   }
-  async start(buildId = null, tddMode = false) {
+  async start(buildId = null, tddMode = false, setBaseline = false) {
     this.buildId = buildId;
     this.tddMode = tddMode;
+    this.setBaseline = setBaseline;
     return super.start();
   }
   async onStart() {
     this.emitter = new EventEmitter();
     const port = this.config?.server?.port || 47392;
     if (this.tddMode) {
-      this.handler = createTddHandler(this.config, process.cwd(), this.config?.baselineBuildId, this.config?.baselineComparisonId);
+      this.handler = createTddHandler(this.config, process.cwd(), this.config?.baselineBuildId, this.config?.baselineComparisonId, this.setBaseline);
       await this.handler.initialize();
       if (this.buildId) {
         this.handler.registerBuild(this.buildId);