design-clone 1.1.1 → 1.2.0

package/src/core/screenshot.js

@@ -17,6 +17,10 @@
  *   --extract-html  Extract cleaned HTML (default: false)
  *   --extract-css   Extract all CSS from page (default: false)
  *   --filter-unused Filter CSS to remove unused selectors (default: true)
+ *   --capture-hover Capture hover state screenshots and CSS (default: false)
+ *   --video         Record scroll preview video (default: false)
+ *   --video-format  Video format: webm, mp4, gif (default: webm)
+ *   --video-duration Video duration in ms (default: 12000)
  */
 
 import path from 'path';
@@ -34,6 +38,9 @@ import { extractCleanHtml, JS_FRAMEWORK_PATTERNS, MAX_HTML_SIZE } from './html-e
 import { extractAllCss, MAX_CSS_SIZE } from './css-extractor.js';
 import { extractComponentDimensions } from './dimension-extractor.js';
 import { buildDimensionsOutput, generateAISummary } from './dimension-output.js';
+import { extractAnimations, generateAnimationsCss, generateAnimationTokens } from './animation-extractor.js';
+import { captureAllHoverStates, generateHoverCss } from './state-capture.js';
+import { captureVideo, hasFfmpeg, FFMPEG_REQUIRED_FORMATS } from './video-capture.js';
 
 // Try to import Sharp for compression
 let sharp = null;
@@ -166,6 +173,12 @@ async function captureMultiViewport() {
   const extractHtml = args['extract-html'] === 'true';
   const extractCss = args['extract-css'] === 'true';
   const filterUnused = args['filter-unused'] !== 'false';
+  const captureHover = args['capture-hover'] === 'true';
+  const captureVideoFlag = args['video'] === 'true';
+  const videoFormat = args['video-format'] || 'webm';
+  const videoDuration = args['video-duration']
+    ? parseInt(args['video-duration'], 10)
+    : 12000;
 
   for (const vp of requestedViewports) {
     if (!VIEWPORTS[vp]) {
@@ -294,12 +307,118 @@ async function captureMultiViewport() {
         }
       }
 
+      // Extract animations (enabled by default with CSS extraction)
+      const extractAnimationsFlag = args['extract-animations'] !== 'false';
+      if (extractCss && extractAnimationsFlag && extraction?.css?.path && !extraction.css.failed) {
+        try {
+          const rawCss = await fs.readFile(extraction.css.path, 'utf-8');
+          const animData = await extractAnimations(rawCss);
+
+          if (!animData.error) {
+            // Write animations.css
+            const animCss = generateAnimationsCss(animData);
+            const animPath = path.join(args.output, 'animations.css');
+            await fs.writeFile(animPath, animCss, 'utf-8');
+
+            // Generate animation tokens
+            const animTokens = generateAnimationTokens(animData);
+
+            // Write animation-tokens.json
+            const animTokensPath = path.join(args.output, 'animation-tokens.json');
+            await fs.writeFile(animTokensPath, JSON.stringify({
+              keyframes: animData.keyframes,
+              transitions: animData.transitions,
+              animatedElements: animData.animatedElements,
+              summary: animTokens
+            }, null, 2), 'utf-8');
+
+            extraction.animations = {
+              path: path.resolve(animPath),
+              tokensPath: path.resolve(animTokensPath),
+              keyframeCount: animTokens.keyframeCount,
+              transitionCount: animTokens.transitions,
+              animatedElementCount: animTokens.animatedElements,
+              tokens: animTokens
+            };
+
+            if (process.stderr.isTTY) {
+              console.error(`[INFO] Animations: ${animTokens.keyframeCount} keyframes, ${animTokens.transitions} transitions`);
+            }
+          } else {
+            extraction.animations = { error: animData.error, failed: true };
+            extractionWarnings.push(`Animation extraction failed: ${animData.error}`);
+          }
+        } catch (error) {
+          extraction.animations = { error: error.message, failed: true };
+          extractionWarnings.push(`Animation extraction failed: ${error.message}`);
+        }
+      }
+
       extraction.warnings = extractionWarnings;
       if (extractionWarnings.length > 0 && process.stderr.isTTY) {
         extractionWarnings.forEach(w => console.error(`[WARN] ${w}`));
       }
     }
 
+    // Capture hover states (requires headless mode per Puppeteer #5255)
+    let hoverResult = null;
+    if (captureHover) {
+      try {
+        // Try headed mode first, fallback to headless (per validation decision)
+        const wasHeadless = currentHeadless;
+        let hoverCaptureSuccess = false;
+
+        // Attempt headed mode first
+        if (!wasHeadless) {
+          try {
+            const cssContent = extraction?.css?.path
+              ? await fs.readFile(extraction.css.path, 'utf-8')
+              : null;
+            hoverResult = await captureAllHoverStates(page, cssContent, args.output);
+            hoverCaptureSuccess = hoverResult.captured > 0;
+          } catch (headedError) {
+            if (process.stderr.isTTY) {
+              console.error(`[WARN] Headed hover capture failed, switching to headless: ${headedError.message}`);
+            }
+          }
+        }
+
+        // Fallback to headless if headed failed or was already headless
+        if (!hoverCaptureSuccess) {
+          if (!currentHeadless) {
+            await initBrowser(true, args.url);
+          }
+
+          const cssContent = extraction?.css?.path
+            ? await fs.readFile(extraction.css.path, 'utf-8')
+            : null;
+          hoverResult = await captureAllHoverStates(page, cssContent, args.output);
+        }
+
+        // Generate hover.css from captured diffs
+        if (hoverResult && hoverResult.elements && hoverResult.captured > 0) {
+          const hoverCss = generateHoverCss(hoverResult.elements);
+          const hoverCssPath = path.join(args.output, 'hover.css');
+          await fs.writeFile(hoverCssPath, hoverCss, 'utf-8');
+          hoverResult.generatedCss = path.resolve(hoverCssPath);
+        }
+
+        if (process.stderr.isTTY && hoverResult) {
+          console.error(`[INFO] Hover states: ${hoverResult.captured}/${hoverResult.detected} captured`);
+        }
+
+        // Restore browser mode for viewport captures if needed
+        if (!wasHeadless && currentHeadless && requestedViewports.some(v => !getHeadlessForViewport(v))) {
+          await initBrowser(false, args.url);
+        }
+      } catch (error) {
+        if (process.stderr.isTTY) {
+          console.error(`[WARN] Hover capture failed: ${error.message}`);
+        }
+        hoverResult = { error: error.message, failed: true };
+      }
+    }
+
     // Capture viewports
     const screenshots = [];
     const browserRestarts = [];
@@ -316,6 +435,45 @@ async function captureMultiViewport() {
       screenshots.push(result);
     }
 
+    // Capture video (opt-in, after screenshots)
+    let videoResult = null;
+    if (captureVideoFlag) {
+      try {
+        // Check if ffmpeg is needed but not available
+        if (FFMPEG_REQUIRED_FORMATS.includes(videoFormat)) {
+          const hasFf = await hasFfmpeg();
+          if (!hasFf && process.stderr.isTTY) {
+            console.error(`[WARN] ffmpeg not found. Will output WebM instead of ${videoFormat}`);
+            console.error('[WARN] Install: npm install fluent-ffmpeg @ffmpeg-installer/ffmpeg');
+          }
+        }
+
+        // Use desktop viewport for video
+        await page.setViewport(VIEWPORTS.desktop);
+        await new Promise(r => setTimeout(r, 1000));
+
+        if (process.stderr.isTTY) {
+          console.error(`[INFO] Recording video (${videoDuration / 1000}s)...`);
+        }
+
+        videoResult = await captureVideo(page, args.output, {
+          format: videoFormat,
+          duration: videoDuration,
+          filename: 'preview'
+        });
+
+        if (process.stderr.isTTY) {
+          const outputFormat = videoResult.output.split('.').pop();
+          console.error(`[INFO] Video saved: ${outputFormat} (${(videoResult.duration / 1000).toFixed(1)}s)`);
+        }
+      } catch (error) {
+        if (process.stderr.isTTY) {
+          console.error(`[WARN] Video capture failed: ${error.message}`);
+        }
+        videoResult = { error: error.message, failed: true };
+      }
+    }
+
     // Build dimension output
     const allViewportDimensions = {};
     for (const screenshot of screenshots) {
@@ -346,6 +504,23 @@ async function captureMultiViewport() {
       outputDir: path.resolve(args.output),
       cookieHandling: cookieResult,
       extraction,
+      hoverStates: hoverResult && !hoverResult.failed ? {
+        directory: hoverResult.directory,
+        detected: hoverResult.detected,
+        captured: hoverResult.captured,
+        summaryPath: hoverResult.summaryPath,
+        generatedCss: hoverResult.generatedCss
+      } : (hoverResult?.error ? { error: hoverResult.error } : undefined),
+      video: videoResult && !videoResult.failed ? {
+        path: videoResult.output,
+        format: videoResult.output.split('.').pop(),
+        duration: videoResult.duration,
+        pageHeight: videoResult.pageHeight,
+        webm: videoResult.webm,
+        mp4: videoResult.mp4,
+        gif: videoResult.gif,
+        conversionError: videoResult.conversionError
+      } : (videoResult?.error ? { error: videoResult.error } : undefined),
       componentDimensions: {
         full: path.resolve(dimensionsPath),
         summary: path.resolve(summaryPath),