design-clone 2.1.0 → 3.0.0

package/src/verification/verify-header.js

@@ -21,365 +21,39 @@
  *   --verbose   Show detailed progress
  */
 
-import fs from 'fs/promises';
 import path from 'path';
 
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from '../utils/browser.js';
-
-// Viewport configurations
-const VIEWPORTS = {
-  mobile: { width: 375, height: 812, deviceScaleFactor: 2 },
-  tablet: { width: 768, height: 1024, deviceScaleFactor: 1 },
-  desktop: { width: 1920, height: 1080, deviceScaleFactor: 1 }
-};
-
-// Header element selectors
-const HEADER_SELECTORS = {
-  container: [
-    'header',
-    '[role="banner"]',
-    '.header',
-    '#header',
-    '.site-header',
-    '.page-header',
-    '.masthead'
-  ],
-  logo: [
-    'header img[alt*="logo" i]',
-    '[role="banner"] img',
-    '.logo img',
-    '.site-logo img',
-    '.logo',
-    '.site-logo',
-    'header a[href="/"] img',
-    '.brand img',
-    '.navbar-brand img'
-  ],
-  nav: [
-    'header nav',
-    'header [role="navigation"]',
-    '.header-nav',
-    '.main-navigation',
-    '.primary-nav',
-    '.site-nav',
-    '.navbar-nav'
-  ],
-  cta: [
-    'header button.cta',
-    'header a[class*="button"]',
-    'header a[class*="btn"]',
-    '.header-action',
-    '.nav-cta',
-    'header .btn-primary',
-    'header a[href*="contact"]',
-    'header a[href*="signup"]',
-    'header a[href*="login"]'
-  ],
-  navLinks: [
-    'header nav a',
-    'header [role="navigation"] a',
-    '.main-navigation a',
-    '.nav-item a',
-    '.menu-item a'
-  ]
-};
-
-/**
- * Find first matching element from selectors
- */
-async function findElement(page, selectors) {
-  for (const selector of selectors) {
-    try {
-      const element = await page.$(selector);
-      if (element) {
-        return { element, selector };
-      }
-    } catch (err) { /* continue - selector not found */ }
-  }
-  return null;
-}
-
-/**
- * Count visible elements
- */
-async function countVisibleElements(page, selectors) {
-  for (const selector of selectors) {
-    try {
-      const count = await page.evaluate((sel) => {
-        const items = document.querySelectorAll(sel);
-        let visible = 0;
-        items.forEach(item => {
-          const style = window.getComputedStyle(item);
-          const rect = item.getBoundingClientRect();
-          if (
-            style.display !== 'none' &&
-            style.visibility !== 'hidden' &&
-            style.opacity !== '0' &&
-            rect.width > 0 &&
-            rect.height > 0
-          ) {
-            visible++;
-          }
-        });
-        return visible;
-      }, selector);
-
-      if (count > 0) {
-        return { count, selector };
-      }
-    } catch (err) { /* continue - selector not found */ }
-  }
-  return { count: 0, selector: null };
-}
-
-/**
- * Check header position properties
- */
-async function checkHeaderPosition(page, headerSelector) {
-  return await page.evaluate((sel) => {
-    const header = document.querySelector(sel);
-    if (!header) return null;
-
-    const style = window.getComputedStyle(header);
-    const rect = header.getBoundingClientRect();
-
-    return {
-      position: style.position,
-      isSticky: style.position === 'sticky',
-      isFixed: style.position === 'fixed',
-      zIndex: parseInt(style.zIndex) || 'auto',
-      top: rect.top,
-      height: rect.height,
-      width: rect.width
-    };
-  }, headerSelector);
-}
-
-/**
- * Check logo position (typically left or center)
- */
-async function checkLogoPosition(page, logoSelector, headerWidth) {
-  return await page.evaluate((sel, width) => {
-    const logo = document.querySelector(sel);
-    if (!logo) return null;
-
-    const rect = logo.getBoundingClientRect();
-    const centerThreshold = width * 0.35;
-
-    let position = 'unknown';
-    if (rect.left < centerThreshold) {
-      position = 'left';
-    } else if (rect.left > width - centerThreshold) {
-      position = 'right';
-    } else {
-      position = 'center';
-    }
-
-    return {
-      position,
-      x: rect.left,
-      y: rect.top,
-      width: rect.width,
-      height: rect.height
-    };
-  }, logoSelector, headerWidth);
-}
-
-/**
- * Test header at specific viewport
- */
-async function testViewport(page, viewportName, verbose = false) {
-  const viewport = VIEWPORTS[viewportName];
-  await page.setViewportSize(viewport);
-  await new Promise(r => setTimeout(r, 500));
-
-  const result = {
-    viewport: viewportName,
-    dimensions: viewport,
-    tests: [],
-    passed: 0,
-    failed: 0,
-    warnings: []
-  };
-
-  if (verbose) console.error(`\n📱 Testing ${viewportName} (${viewport.width}x${viewport.height})...`);
-
-  // Test 1: Header container exists
-  const headerResult = await findElement(page, HEADER_SELECTORS.container);
-  if (headerResult) {
-    result.tests.push({
-      name: 'Header container exists',
-      passed: true,
-      selector: headerResult.selector
-    });
-    result.passed++;
-    if (verbose) console.error(`  ✓ Header found: ${headerResult.selector}`);
-
-    // Get header position info
-    const positionInfo = await checkHeaderPosition(page, headerResult.selector);
-
-    // Test 2: Logo presence
-    const logoResult = await findElement(page, HEADER_SELECTORS.logo);
-    if (logoResult) {
-      const logoPosition = await checkLogoPosition(page, logoResult.selector, viewport.width);
-      result.tests.push({
-        name: 'Logo present',
-        passed: true,
-        selector: logoResult.selector,
-        position: logoPosition?.position || 'unknown'
-      });
-      result.passed++;
-      if (verbose) console.error(`  ✓ Logo found: ${logoResult.selector} (${logoPosition?.position})`);
-    } else {
-      result.tests.push({
-        name: 'Logo present',
-        passed: false,
-        error: 'No logo found'
-      });
-      result.failed++;
-      if (verbose) console.error(`  ✗ Logo not found`);
-    }
-
-    // Test 3: Navigation links
-    const navLinks = await countVisibleElements(page, HEADER_SELECTORS.navLinks);
-    const expectedLinks = viewportName === 'desktop' ? 2 : 0;
-
-    if (navLinks.count >= expectedLinks) {
-      result.tests.push({
-        name: 'Navigation links visible',
-        passed: true,
-        count: navLinks.count,
-        selector: navLinks.selector
-      });
-      result.passed++;
-      if (verbose) console.error(`  ✓ ${navLinks.count} nav links visible`);
-    } else if (viewportName !== 'desktop' && navLinks.count === 0) {
-      // Mobile/tablet may hide links behind hamburger
-      result.tests.push({
-        name: 'Navigation links (may be in hamburger)',
-        passed: true,
-        count: navLinks.count,
-        note: 'Links may be hidden in mobile menu'
-      });
-      result.passed++;
-      if (verbose) console.error(`  ✓ Nav links hidden (expected on ${viewportName})`);
-    } else {
-      result.tests.push({
-        name: 'Navigation links visible',
-        passed: false,
-        count: navLinks.count,
-        error: `Expected at least ${expectedLinks} links on ${viewportName}`
-      });
-      result.failed++;
-      if (verbose) console.error(`  ✗ Only ${navLinks.count} nav links (expected >= ${expectedLinks})`);
-    }
-
-    // Test 4: CTA buttons (desktop only)
-    if (viewportName === 'desktop') {
-      const ctaResult = await findElement(page, HEADER_SELECTORS.cta);
-      if (ctaResult) {
-        result.tests.push({
-          name: 'CTA button present',
-          passed: true,
-          selector: ctaResult.selector
-        });
-        result.passed++;
-        if (verbose) console.error(`  ✓ CTA found: ${ctaResult.selector}`);
-      } else {
-        result.warnings.push('No CTA button found in header');
-        if (verbose) console.error(`  ⚠ No CTA button found`);
-      }
-    }
-
-    // Test 5: Sticky/fixed behavior
-    if (positionInfo) {
-      if (positionInfo.isSticky || positionInfo.isFixed) {
-        result.tests.push({
-          name: 'Header sticky/fixed behavior',
-          passed: true,
-          position: positionInfo.position
-        });
-        result.passed++;
-        if (verbose) console.error(`  ✓ Header is ${positionInfo.position}`);
-      } else {
-        result.tests.push({
-          name: 'Header sticky/fixed behavior',
-          passed: true,
-          position: positionInfo.position,
-          note: 'Header uses static/relative positioning'
-        });
-        result.passed++;
-        if (verbose) console.error(`  ✓ Header position: ${positionInfo.position}`);
-      }
-
-      // Test 6: Z-index check (should be high for sticky/fixed)
-      if ((positionInfo.isSticky || positionInfo.isFixed) && positionInfo.zIndex !== 'auto') {
-        const zIndexOk = positionInfo.zIndex >= 100;
-        result.tests.push({
-          name: 'Z-index layering',
-          passed: zIndexOk,
-          zIndex: positionInfo.zIndex,
-          note: zIndexOk ? 'Header on top layer' : 'Z-index may be too low'
-        });
-        if (zIndexOk) result.passed++;
-        else result.warnings.push(`Header z-index (${positionInfo.zIndex}) may be too low`);
-        if (verbose) console.error(`  ${zIndexOk ? '✓' : '⚠'} Z-index: ${positionInfo.zIndex}`);
-      }
-
-      // Store height for consistency check
-      result.headerHeight = positionInfo.height;
-    }
-
-  } else {
-    result.tests.push({
-      name: 'Header container exists',
-      passed: false,
-      error: 'No header container found'
-    });
-    result.failed++;
-    if (verbose) console.error(`  ✗ Header not found`);
-  }
-
-  return result;
-}
-
-/**
- * Capture component screenshot
- */
-async function captureHeaderScreenshot(page, outputDir, viewportName) {
-  if (!outputDir) return null;
-
-  const screenshotPath = path.join(outputDir, `header-test-${viewportName}.png`);
-  await page.screenshot({
-    path: screenshotPath,
-    fullPage: false
-  });
-  return screenshotPath;
-}
+import { getBrowser, getPage, closeBrowser, disconnectBrowser } from '../utils/browser.js';
+import { parseArgs, outputJSON, outputError } from '../utils/helpers.js';
+import { VIEWPORTS_HD as VIEWPORTS } from '../shared/viewports.js';
+import { testHeaderViewport } from './verify-header-checks.js';
 
 /**
  * Validate HTML file path (security: prevent path traversal)
  */
 function validateHtmlPath(htmlPath) {
   const absolutePath = path.resolve(htmlPath);
-  const cwd = process.cwd();
-
-  // Allow paths within CWD or common output directories
   const allowedPrefixes = [
-    cwd,
+    process.cwd(),
     path.join(process.env.HOME || '', '.claude'),
     '/tmp',
     path.join(process.env.HOME || '', 'cloned-designs')
   ];
-
   const isAllowed = allowedPrefixes.some(prefix => absolutePath.startsWith(prefix));
-  if (!isAllowed) {
-    throw new Error(`Path "${htmlPath}" is outside allowed directories`);
-  }
-
+  if (!isAllowed) throw new Error(`Path "${htmlPath}" is outside allowed directories`);
   return absolutePath;
 }
 
+/**
+ * Capture header screenshot
+ */
+async function captureHeaderScreenshot(page, outputDir, viewportName) {
+  if (!outputDir) return null;
+  const screenshotPath = path.join(outputDir, `header-test-${viewportName}.png`);
+  await page.screenshot({ path: screenshotPath, fullPage: false });
+  return screenshotPath;
+}
+
 /**
  * Main verification function
  */
@@ -400,37 +74,27 @@ async function verifyHeader() {
 
     let targetUrl;
     if (args.html) {
-      const absolutePath = validateHtmlPath(args.html);
-      targetUrl = `file://${absolutePath}`;
+      targetUrl = `file://${validateHtmlPath(args.html)}`;
     } else {
       targetUrl = args.url;
     }
 
     if (verbose) console.error(`\n🔍 Verifying header: ${targetUrl}\n`);
 
-    await page.goto(targetUrl, {
-      waitUntil: 'networkidle',
-      timeout: 30000
-    });
+    await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 30000 });
 
     const results = {
       success: true,
       component: 'header',
       url: targetUrl,
       viewports: {},
-      summary: {
-        totalTests: 0,
-        passed: 0,
-        failed: 0,
-        warnings: []
-      },
+      summary: { totalTests: 0, passed: 0, failed: 0, warnings: [] },
       screenshots: [],
       heightConsistency: {}
     };
 
-    // Test all viewports
     for (const viewportName of ['mobile', 'tablet', 'desktop']) {
-      const viewportResult = await testViewport(page, viewportName, verbose);
+      const viewportResult = await testHeaderViewport(page, viewportName, VIEWPORTS, verbose);
       results.viewports[viewportName] = viewportResult;
 
       results.summary.totalTests += viewportResult.tests.length;
@@ -448,7 +112,7 @@ async function verifyHeader() {
       }
     }
 
-    // Check height consistency
+    // Height consistency check
     const heights = Object.values(results.heightConsistency);
     if (heights.length >= 2) {
       const maxDiff = Math.max(...heights) - Math.min(...heights);
@@ -459,18 +123,12 @@ async function verifyHeader() {
 
     results.success = results.summary.failed === 0;
 
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
+    if (args.close === 'true') { await closeBrowser(); } else { await disconnectBrowser(); }
 
     if (verbose) {
       console.error('\n📊 Summary:');
       console.error(`   Tests: ${results.summary.passed}/${results.summary.totalTests} passed`);
-      if (results.summary.warnings.length > 0) {
-        console.error(`   Warnings: ${results.summary.warnings.length}`);
-      }
+      if (results.summary.warnings.length > 0) console.error(`   Warnings: ${results.summary.warnings.length}`);
       console.error(`   Status: ${results.success ? '✓ PASS' : '✗ FAIL'}\n`);
     }
 

package/src/verification/verify-layout-report.js

@@ -0,0 +1,101 @@
+/**
+ * Layout Verification Report Generator
+ *
+ * Markdown report writing and CSS fix suggestion utilities
+ * extracted from verify-layout.js to keep each file under 200 lines.
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { VIEWPORTS_HD as VIEWPORTS } from '../shared/viewports.js';
+
+/**
+ * Generate CSS fix suggestions from discrepancy objects
+ * @param {Array} discrepancies
+ * @returns {Array<{section: string, severity: string, issue: string, fix: string}>}
+ */
+export function generateCSSFixes(discrepancies) {
+  const fixes = [];
+  for (const disc of discrepancies) {
+    if (disc.css_fix) {
+      fixes.push({
+        section: disc.section,
+        severity: disc.severity,
+        issue: disc.issue,
+        fix: disc.css_fix
+      });
+    }
+  }
+  return fixes;
+}
+
+/**
+ * Write a markdown comparison report to outputDir/layout-verification.md
+ * @param {string} outputDir
+ * @param {Object} results - Verification results object with viewports map
+ * @returns {Promise<string>} Path to written report
+ */
+export async function writeReport(outputDir, results) {
+  const reportPath = path.join(outputDir, 'layout-verification.md');
+
+  let report = `# Layout Verification Report\n\nGenerated: ${new Date().toISOString()}\n\n## Summary\n\n`;
+  report += `| Viewport | Similarity | Issues |\n|----------|------------|--------|\n`;
+
+  for (const [viewport, result] of Object.entries(results.viewports)) {
+    const score = result.similarity_score || 0;
+    const issues = result.discrepancies?.length || 0;
+    const status = score >= 90 ? '✅' : score >= 70 ? '⚠️' : '❌';
+    report += `| ${viewport} | ${status} ${score}% | ${issues} |\n`;
+  }
+
+  report += `\n## Overall Score: ${results.overall_score}%\n\n`;
+
+  for (const [viewport, result] of Object.entries(results.viewports)) {
+    const vp = VIEWPORTS[viewport];
+    report += `## ${viewport.charAt(0).toUpperCase() + viewport.slice(1)} (${vp.width}x${vp.height})\n\n`;
+
+    if (result.overall_assessment) {
+      report += `**Assessment:** ${result.overall_assessment}\n\n`;
+    }
+
+    if (result.discrepancies?.length > 0) {
+      report += `### Discrepancies\n\n`;
+      for (const disc of result.discrepancies) {
+        const icon = disc.severity === 'critical' ? '🔴' : disc.severity === 'major' ? '🟠' : '🟡';
+        report += `${icon} **${disc.section}** (${disc.severity})\n`;
+        report += `   - Issue: ${disc.issue}\n`;
+        if (disc.css_fix) report += `   - Fix: \`${disc.css_fix}\`\n`;
+        report += '\n';
+      }
+    } else {
+      report += `✅ No significant discrepancies found.\n\n`;
+    }
+
+    if (result.recommendations?.length > 0) {
+      report += `### Recommendations\n\n`;
+      for (const rec of result.recommendations) {
+        report += `- ${rec}\n`;
+      }
+      report += '\n';
+    }
+  }
+
+  // Consolidated CSS fixes
+  const allFixes = [];
+  for (const result of Object.values(results.viewports)) {
+    if (result.discrepancies) {
+      allFixes.push(...generateCSSFixes(result.discrepancies));
+    }
+  }
+
+  if (allFixes.length > 0) {
+    report += `## Suggested CSS Fixes\n\n\`\`\`css\n`;
+    for (const fix of allFixes) {
+      report += `/* ${fix.section}: ${fix.issue} */\n${fix.fix}\n\n`;
+    }
+    report += `\`\`\`\n`;
+  }
+
+  await fs.writeFile(reportPath, report);
+  return reportPath;
+}