design-clone 2.1.0 → 3.0.0

package/src/core/{section-cropper.js → section/section-cropper.js}

@@ -11,6 +11,7 @@
 
 import path from 'path';
 import fs from 'fs/promises';
+import { validateBounds, sanitizeName } from './section-cropper-helpers.js';
 
 // Try to import Sharp
 let sharp = null;
@@ -21,7 +22,7 @@ try {
 }
 
 // Default configuration
-const DEFAULT_OPTIONS = {
+export const DEFAULT_OPTIONS = {
   minHeight: 100,        // Skip sections smaller than this
   quality: 90,           // PNG quality
   compressionLevel: 6,   // PNG compression (0-9)
@@ -34,21 +35,18 @@ const DEFAULT_OPTIONS = {
  * @param {Array} sections - Array of section objects with bounds
  * @param {string} outputDir - Base output directory
  * @param {Object} options - Configuration options
- * @returns {Promise<Array>} Array of cropped section info
+ * @returns {Promise<{sections: Array, skipped: Array, summary: string, directory: string}>}
  */
 export async function cropSections(screenshotPath, sections, outputDir, options = {}) {
   const config = { ...DEFAULT_OPTIONS, ...options };
 
-  // Check Sharp availability
   if (!sharp) {
     throw new Error('Sharp is not installed. Run: npm install sharp');
   }
 
-  // Create sections directory
   const sectionsDir = path.join(outputDir, 'sections');
   await fs.mkdir(sectionsDir, { recursive: true });
 
-  // Get source image metadata
   const metadata = await sharp(screenshotPath).metadata();
   const imageWidth = metadata.width;
   const imageHeight = metadata.height;
@@ -57,47 +55,26 @@ export async function cropSections(screenshotPath, sections, outputDir, options
   const skipped = [];
 
   for (const section of sections) {
-    // Validate and clamp bounds
     const bounds = validateBounds(section.bounds, imageWidth, imageHeight);
 
-    // Skip tiny sections
     if (bounds.height < config.minHeight) {
-      skipped.push({
-        index: section.index,
-        name: section.name,
-        reason: `Height ${bounds.height}px < ${config.minHeight}px minimum`
-      });
+      skipped.push({ index: section.index, name: section.name, reason: `Height ${bounds.height}px < ${config.minHeight}px minimum` });
       continue;
     }
 
-    // Skip zero-dimension sections
     if (bounds.width <= 0 || bounds.height <= 0) {
-      skipped.push({
-        index: section.index,
-        name: section.name,
-        reason: 'Zero or negative dimensions'
-      });
+      skipped.push({ index: section.index, name: section.name, reason: 'Zero or negative dimensions' });
       continue;
     }
 
-    // Generate output filename
     const safeName = sanitizeName(section.name);
     const filename = `section-${section.index}-${safeName}.png`;
     const outputPath = path.join(sectionsDir, filename);
 
     try {
-      // Crop and save
       await sharp(screenshotPath)
-        .extract({
-          left: bounds.left,
-          top: bounds.top,
-          width: bounds.width,
-          height: bounds.height
-        })
-        .png({
-          quality: config.quality,
-          compressionLevel: config.compressionLevel
-        })
+        .extract({ left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height })
+        .png({ quality: config.quality, compressionLevel: config.compressionLevel })
         .toFile(outputPath);
 
       results.push({
@@ -106,25 +83,15 @@ export async function cropSections(screenshotPath, sections, outputDir, options
         filename,
         path: outputPath,
         relativePath: path.join('sections', filename),
-        bounds: {
-          x: bounds.left,
-          y: bounds.top,
-          width: bounds.width,
-          height: bounds.height
-        },
+        bounds: { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height },
         role: section.role || 'unknown',
         selector: section.selector || null
       });
     } catch (err) {
-      skipped.push({
-        index: section.index,
-        name: section.name,
-        reason: `Crop error: ${err.message}`
-      });
+      skipped.push({ index: section.index, name: section.name, reason: `Crop error: ${err.message}` });
     }
   }
 
-  // Write summary JSON
   const summary = {
     source: path.basename(screenshotPath),
     sourceWidth: imageWidth,
@@ -139,49 +106,7 @@ export async function cropSections(screenshotPath, sections, outputDir, options
   const summaryPath = path.join(sectionsDir, 'sections.json');
   await fs.writeFile(summaryPath, JSON.stringify(summary, null, 2));
 
-  return {
-    sections: results,
-    skipped,
-    summary: summaryPath,
-    directory: sectionsDir
-  };
-}
-
-/**
- * Validate and clamp bounds to image dimensions
- * @param {Object} bounds - Section bounds {x, y, width, height}
- * @param {number} imageWidth - Source image width
- * @param {number} imageHeight - Source image height
- * @returns {Object} Validated bounds {left, top, width, height}
- */
-function validateBounds(bounds, imageWidth, imageHeight) {
-  // Clamp starting position
-  const left = Math.max(0, Math.round(bounds.x));
-  const top = Math.max(0, Math.round(bounds.y));
-
-  // Calculate max possible dimensions
-  const maxWidth = imageWidth - left;
-  const maxHeight = imageHeight - top;
-
-  // Clamp dimensions
-  const width = Math.min(Math.round(bounds.width), maxWidth);
-  const height = Math.min(Math.round(bounds.height), maxHeight);
-
-  return { left, top, width, height };
-}
-
-/**
- * Sanitize section name for filename
- * @param {string} name - Section name
- * @returns {string} Safe filename
- */
-function sanitizeName(name) {
-  return name
-    .toLowerCase()
-    .replace(/[^a-z0-9-]/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-|-$/g, '')
-    .substring(0, 50) || 'unnamed';
+  return { sections: results, skipped, summary: summaryPath, directory: sectionsDir };
 }
 
 /**
@@ -195,7 +120,7 @@ export function isSharpAvailable() {
 /**
  * Get cropper summary for logging
  * @param {Object} result - Result from cropSections
- * @returns {Object} Summary object
+ * @returns {Object}
  */
 export function getCropperSummary(result) {
   return {
@@ -205,5 +130,3 @@ export function getCropperSummary(result) {
     totalSize: result.sections.reduce((sum, s) => sum + (s.bounds.width * s.bounds.height), 0)
   };
 }
-
-export { DEFAULT_OPTIONS };

package/src/core/section/section-detector-strategies.js

@@ -0,0 +1,139 @@
+/**
+ * Section detection strategies for page analysis.
+ *
+ * Four progressive strategies: semantic HTML, class patterns,
+ * large direct children, viewport chunking fallback.
+ * Used by section-detector.js (main orchestrator).
+ */
+
+import { SECTION_CLASS_PATTERNS } from './section-detector-utils.js';
+
+/** @param {Object} rect @param {number} scrollY @returns {Object} */
+function toBounds(rect, scrollY) {
+  return { x: Math.round(rect.x), y: Math.round(rect.y + scrollY), width: Math.round(rect.width), height: Math.round(rect.height) };
+}
+
+/**
+ * Find semantic HTML sections (header, main, section, footer)
+ * @param {import('playwright').Page} page
+ * @param {Object} pageDimensions
+ * @param {Object} config
+ * @returns {Promise<Array>}
+ */
+export async function findSemanticSections(page, pageDimensions, config) {
+  return await page.evaluate(({ minHeight }) => {
+    const sections = [];
+    const processed = new Set();
+    const selectors = [
+      'header:not(header header)', 'main > section', 'main > article',
+      'body > section', 'body > article', '[data-section]', 'footer:not(footer footer)'
+    ];
+    for (const selector of selectors) {
+      for (const el of document.querySelectorAll(selector)) {
+        if (processed.has(el)) continue;
+        const rect = el.getBoundingClientRect();
+        if (rect.height < minHeight) continue;
+        let name = el.tagName.toLowerCase();
+        if (el.hasAttribute('data-section')) name = el.getAttribute('data-section');
+        else if (el.id) name = el.id;
+        else if (el.className) {
+          const m = el.className.toString().toLowerCase()
+            .match(/\b(hero|about|services|features|contact|footer|header|nav|cta|testimonials|pricing|faq|team|blog|news)\b/);
+          if (m) name = m[1];
+        }
+        sections.push({ name, role: el.tagName.toLowerCase(),
+          selector: el.id ? `#${el.id}` : el.tagName.toLowerCase(),
+          bounds: { x: Math.round(rect.x), y: Math.round(rect.y + window.scrollY), width: Math.round(rect.width), height: Math.round(rect.height) } });
+        processed.add(el);
+      }
+    }
+    return sections;
+  }, { minHeight: config.minSectionHeight });
+}
+
+/**
+ * Find sections by class pattern matching
+ * @param {import('playwright').Page} page
+ * @param {Object} pageDimensions
+ * @param {Object} config
+ * @returns {Promise<Array>}
+ */
+export async function findClassPatternSections(page, pageDimensions, config) {
+  return await page.evaluate(({ patterns, minHeight }) => {
+    const sections = [];
+    const processed = new Set();
+    const elements = document.querySelectorAll(patterns.map(p => `[class*="${p}"]`).join(', '));
+    for (const el of elements) {
+      const parent = el.parentElement;
+      if (!parent || (parent.tagName !== 'BODY' && parent.tagName !== 'MAIN')) continue;
+      if (processed.has(el)) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.height < minHeight) continue;
+      const cls = el.className.toString().toLowerCase();
+      let name = patterns.find(p => cls.includes(p)) || 'section';
+      sections.push({ name, role: 'class-pattern',
+        selector: el.id ? `#${el.id}` : `.${el.className.toString().split(' ')[0]}`,
+        bounds: { x: Math.round(rect.x), y: Math.round(rect.y + window.scrollY), width: Math.round(rect.width), height: Math.round(rect.height) } });
+      processed.add(el);
+    }
+    return sections;
+  }, { patterns: SECTION_CLASS_PATTERNS, minHeight: config.minSectionHeight });
+}
+
+/**
+ * Find large direct children of main/body as sections
+ * @param {import('playwright').Page} page
+ * @param {Object} pageDimensions
+ * @param {Object} config
+ * @returns {Promise<Array>}
+ */
+export async function findLargeChildSections(page, pageDimensions, config) {
+  return await page.evaluate(({ minHeight }) => {
+    const sections = [];
+    const skip = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'LINK', 'META'];
+    const skipSemantic = ['HEADER', 'FOOTER', 'SECTION', 'ARTICLE'];
+    const generic = ['sd', 'container', 'wrapper', 'div', 'block', 'row', 'col', 'section'];
+    for (const container of [document.querySelector('main'), document.body].filter(Boolean)) {
+      for (const child of container.children) {
+        if (skip.includes(child.tagName) || skipSemantic.includes(child.tagName)) continue;
+        const rect = child.getBoundingClientRect();
+        const absoluteY = rect.y + window.scrollY;
+        if (rect.height < Math.max(300, window.innerHeight * 0.2)) continue;
+        let name = child.id || '';
+        if (!name && child.className) {
+          const first = child.className.toString().split(' ')[0].toLowerCase();
+          if (!generic.includes(first)) name = first;
+        }
+        if (!name) {
+          const r = absoluteY / (document.body.scrollHeight || 1);
+          name = r < 0.15 ? 'top-section' : r < 0.35 ? 'upper-content' : r < 0.55 ? 'middle-content' : r < 0.75 ? 'lower-content' : 'bottom-section';
+          name = `${name}-${sections.length}`;
+        }
+        sections.push({ name: name.toLowerCase().replace(/[^a-z0-9-]/g, '-'), role: 'large-block',
+          selector: child.id ? `#${child.id}` : child.tagName.toLowerCase(),
+          bounds: { x: Math.round(rect.x), y: Math.round(absoluteY), width: Math.round(rect.width), height: Math.round(rect.height) } });
+      }
+      if (sections.length > 0 && container.tagName === 'MAIN') break;
+    }
+    return sections;
+  }, { minHeight: config.minSectionHeight });
+}
+
+/**
+ * Generate viewport chunks as fallback when no sections found.
+ * @param {Object} pageDimensions - { width, height }
+ * @param {Object} config - { viewportHeight, overlapRatio }
+ * @returns {Array}
+ */
+export function generateViewportChunks(pageDimensions, config) {
+  const { width, height } = pageDimensions;
+  const step = config.viewportHeight - Math.round(config.viewportHeight * config.overlapRatio);
+  const sections = [];
+  let y = 0;
+  for (let i = 0; y < height && i < 50; i++) {
+    sections.push({ name: `viewport-${i}`, role: 'viewport-chunk', selector: null,
+      bounds: { x: 0, y, width, height: Math.min(config.viewportHeight, height - y) } });
+    y += step;
+  }
+  return sections;
+}

package/src/core/section/section-detector-utils.js

@@ -0,0 +1,100 @@
+/**
+ * Utility helpers and configuration for section detection.
+ *
+ * Contains SECTION_CLASS_PATTERNS, DEFAULT_OPTIONS, mergeSections (dedup
+ * by Y-overlap), applyPadding (clamp bounds to page), and getSectionSummary.
+ * Used by section-detector.js and section-detector-strategies.js.
+ */
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/** Section class patterns to match against element class names */
+export const SECTION_CLASS_PATTERNS = [
+  'hero', 'banner', 'header', 'navigation', 'nav',
+  'services', 'features', 'about', 'team', 'portfolio',
+  'testimonials', 'reviews', 'pricing', 'plans',
+  'faq', 'questions', 'blog', 'news', 'articles',
+  'contact', 'cta', 'call-to-action', 'newsletter',
+  'footer', 'partners', 'clients', 'gallery', 'showcase'
+];
+
+/** Default configuration for section detection */
+export const DEFAULT_OPTIONS = {
+  minSections: 3,
+  maxSections: 20,
+  padding: 40,
+  fallbackToViewport: true,
+  viewportHeight: 900,
+  minSectionHeight: 150,
+  overlapRatio: 0.1  // 10% overlap for viewport fallback
+};
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Merge sections, removing duplicates based on Y overlap.
+ * A new section is skipped if it overlaps >50% with any existing section.
+ *
+ * @param {Array} existing - Already-accepted sections
+ * @param {Array} newSections - Candidates to merge in
+ * @returns {Array} Merged deduplicated sections
+ */
+export function mergeSections(existing, newSections) {
+  const result = [...existing];
+
+  for (const section of newSections) {
+    const overlaps = result.some(s => {
+      const yOverlap = Math.max(0,
+        Math.min(s.bounds.y + s.bounds.height, section.bounds.y + section.bounds.height) -
+        Math.max(s.bounds.y, section.bounds.y)
+      );
+      const minHeight = Math.min(s.bounds.height, section.bounds.height);
+      return yOverlap > minHeight * 0.5;  // >50% overlap
+    });
+
+    if (!overlaps) {
+      result.push(section);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Apply padding to bounds, clamping to page dimensions.
+ *
+ * @param {Object} bounds - { x, y, width, height }
+ * @param {number} padding - Pixels to expand on each side
+ * @param {Object} pageDimensions - { width, height }
+ * @returns {Object} Padded and clamped bounds
+ */
+export function applyPadding(bounds, padding, pageDimensions) {
+  return {
+    x: Math.max(0, bounds.x - padding),
+    y: Math.max(0, bounds.y - padding),
+    width: Math.min(pageDimensions.width, bounds.width + padding * 2),
+    height: Math.min(
+      pageDimensions.height - Math.max(0, bounds.y - padding),
+      bounds.height + padding * 2
+    )
+  };
+}
+
+/**
+ * Get section summary for logging / reporting.
+ *
+ * @param {Array} sections - Detected sections
+ * @returns {Object} Summary with count, names, totalHeight, hasViewportFallback
+ */
+export function getSectionSummary(sections) {
+  return {
+    count: sections.length,
+    names: sections.map(s => s.name),
+    totalHeight: sections.reduce((sum, s) => sum + s.bounds.height, 0),
+    hasViewportFallback: sections.some(s => s.role === 'viewport-chunk')
+  };
+}

package/src/core/section/section-detector.js

@@ -0,0 +1,88 @@
+/**
+ * Section Detector
+ *
+ * Detect semantic page sections from DOM hierarchy for section-based
+ * screenshot analysis. Returns bounding boxes for cropping.
+ *
+ * Usage:
+ *   import { detectSections } from './section-detector.js';
+ *   const sections = await detectSections(page, { padding: 40 });
+ *
+ * Strategies (in order):
+ * 1. Semantic HTML: <header>, <main>, <section>, <footer>
+ * 2. data-section attributes
+ * 3. Class patterns: hero, services, features, about, contact
+ * 4. Large direct children of <main> or <body> (>200px height)
+ * 5. Fallback: viewport chunking if <minSections detected
+ */
+
+import {
+  DEFAULT_OPTIONS,
+  SECTION_CLASS_PATTERNS,
+  mergeSections,
+  applyPadding,
+  getSectionSummary
+} from './section-detector-utils.js';
+
+import {
+  findSemanticSections,
+  findClassPatternSections,
+  findLargeChildSections,
+  generateViewportChunks
+} from './section-detector-strategies.js';
+
+// Re-export for backward compatibility
+export { DEFAULT_OPTIONS, SECTION_CLASS_PATTERNS, getSectionSummary };
+
+/**
+ * Detect page sections from DOM hierarchy
+ * @param {import('playwright').Page} page - Playwright page instance
+ * @param {Object} options - Configuration options
+ * @returns {Promise<Array>} Array of section objects with bounds
+ */
+export async function detectSections(page, options = {}) {
+  const config = { ...DEFAULT_OPTIONS, ...options };
+
+  const pageDimensions = await page.evaluate(() => ({
+    width: document.documentElement.clientWidth,
+    height: Math.max(
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight
+    )
+  }));
+
+  // Strategy 1: Semantic HTML sections
+  let sections = await findSemanticSections(page, pageDimensions, config);
+
+  // Strategy 2: Class pattern matching
+  if (sections.length < config.minSections) {
+    const classSections = await findClassPatternSections(page, pageDimensions, config);
+    sections = mergeSections(sections, classSections);
+  }
+
+  // Strategy 3: Large direct children
+  if (sections.length < config.minSections) {
+    const largeSections = await findLargeChildSections(page, pageDimensions, config);
+    sections = mergeSections(sections, largeSections);
+  }
+
+  // Strategy 4: Viewport chunking fallback
+  if (sections.length < config.minSections && config.fallbackToViewport) {
+    sections = generateViewportChunks(pageDimensions, config);
+  }
+
+  // Apply padding and validate bounds
+  sections = sections.map((section, idx) => ({
+    ...section,
+    index: idx,
+    bounds: applyPadding(section.bounds, config.padding, pageDimensions)
+  }));
+
+  // Sort by Y position and limit
+  sections = sections
+    .sort((a, b) => a.bounds.y - b.bounds.y)
+    .slice(0, config.maxSections);
+
+  // Re-index after sort
+  return sections.map((section, idx) => ({ ...section, index: idx }));
+}

package/src/core/tests/test-section-cropper.js

@@ -11,8 +11,8 @@ import { chromium } from 'playwright';
 import path from 'path';
 import fs from 'fs/promises';
 import { fileURLToPath } from 'url';
-import { detectSections, getSectionSummary } from '../section-detector.js';
-import { cropSections, isSharpAvailable, getCropperSummary } from '../section-cropper.js';
+import { detectSections, getSectionSummary } from '../section/section-detector.js';
+import { cropSections, isSharpAvailable, getCropperSummary } from '../section/section-cropper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const projectRoot = path.join(__dirname, '../../..');

package/src/core/tests/test-section-detector.js

@@ -4,8 +4,8 @@
  * Usage: node src/core/test-section-detector.js [url]
  */
 
-import { detectSections, getSectionSummary } from './section-detector.js';
-import { getBrowser, getPage, closeBrowser } from '../utils/browser.js';
+import { detectSections, getSectionSummary } from '../section/section-detector.js';
+import { getBrowser, getPage, closeBrowser } from '../../utils/browser.js';
 
 const url = process.argv[2] || 'https://www.techno-concier.co.jp/';
 

package/src/post-process/enhance-assets.js

@@ -19,6 +19,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import { fetchImages } from './fetch-images.js';
 import { injectIcons } from './inject-icons.js';
+import { injectGosnap } from './inject-gosnap.js';
 
 /**
  * Parse command line arguments
@@ -29,7 +30,8 @@ function parseArgs() {
     outputDir: null,
     verbose: false,
     skipImages: false,
-    skipIcons: false
+    skipIcons: false,
+    skipGosnap: false
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -40,6 +42,8 @@ function parseArgs() {
       options.skipImages = true;
     } else if (arg === '--skip-icons') {
       options.skipIcons = true;
+    } else if (arg === '--skip-gosnap') {
+      options.skipGosnap = true;
     } else if (!arg.startsWith('-')) {
       options.outputDir = arg;
     }
@@ -67,7 +71,8 @@ async function enhanceAssets(outputDir, options = {}) {
   const {
     verbose = false,
     skipImages = false,
-    skipIcons = false
+    skipIcons = false,
+    skipGosnap = false
   } = options;
 
   const htmlPath = path.join(outputDir, 'index.html');
@@ -87,7 +92,8 @@ async function enhanceAssets(outputDir, options = {}) {
   const results = {
     success: true,
     images: null,
-    icons: null
+    icons: null,
+    gosnap: null
   };
 
   // Step 1: Fetch and replace images
@@ -117,6 +123,23 @@ async function enhanceAssets(outputDir, options = {}) {
     }
   }
 
+  // Step 3: Inject gosnap-widget
+  if (!skipGosnap) {
+    const pagesDir = path.join(outputDir, 'pages');
+    if (await fileExists(pagesDir)) {
+      console.log('Injecting gosnap-widget...');
+      try {
+        results.gosnap = await injectGosnap(pagesDir, verbose);
+      } catch (error) {
+        console.warn(`  Warning: gosnap injection failed: ${error.message}`);
+        results.gosnap = { success: false, error: error.message };
+      }
+    } else {
+      console.log('  -> Skipping gosnap (no pages/ directory)');
+      results.gosnap = { skipped: true };
+    }
+  }
+
   console.log('✅ Asset enhancement complete');
 
   return results;
@@ -132,6 +155,7 @@ if (!args.outputDir) {
   console.error('  --verbose, -v    Show detailed progress');
   console.error('  --skip-images    Skip Unsplash image fetching');
   console.error('  --skip-icons     Skip icon injection');
+  console.error('  --skip-gosnap    Skip gosnap-widget injection');
   console.error('');
   console.error('Environment:');
   console.error('  UNSPLASH_ACCESS_KEY    Your Unsplash API key (optional)');
@@ -141,7 +165,8 @@ if (!args.outputDir) {
 enhanceAssets(args.outputDir, {
   verbose: args.verbose,
   skipImages: args.skipImages,
-  skipIcons: args.skipIcons
+  skipIcons: args.skipIcons,
+  skipGosnap: args.skipGosnap
 })
   .then(result => {
     if (args.verbose) {