design-clone 1.2.0 → 2.1.0

package/src/core/content-counter.js

@@ -0,0 +1,342 @@
+/**
+ * Content Counter
+ *
+ * Parse page DOM to extract exact content counts for:
+ * - Grid items, list items, cards
+ * - Navigation links
+ * - Sections/containers
+ * - Images, buttons, forms
+ *
+ * Outputs content-counts.json for use in structure analysis.
+ */
+
+/**
+ * Count content items in page DOM
+ * @param {Page} page - Playwright page
+ * @returns {Promise<object>} Content counts
+ */
+export async function extractContentCounts(page) {
+  return await page.evaluate(() => {
+    const counts = {
+      extractedAt: new Date().toISOString(),
+
+      // Section counts
+      sections: {
+        total: 0,
+        withBackground: 0,
+        details: []
+      },
+
+      // Grid/List containers
+      grids: {
+        total: 0,
+        details: []
+      },
+
+      // Repeated items (cards, list items)
+      repeatedItems: {
+        total: 0,
+        byType: {}
+      },
+
+      // Navigation
+      navigation: {
+        headerLinks: 0,
+        footerLinks: 0,
+        allLinks: 0
+      },
+
+      // Media
+      media: {
+        images: 0,
+        videos: 0,
+        svgIcons: 0
+      },
+
+      // Interactive
+      interactive: {
+        buttons: 0,
+        inputs: 0,
+        forms: 0
+      }
+    };
+
+    // Helper: check if element is visible (not hidden)
+    const isVisible = (el) => {
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.display !== 'none' &&
+             style.visibility !== 'hidden' &&
+             !el.hasAttribute('hidden');
+    };
+
+    // Helper: get meaningful class name for element
+    const getSelector = (el) => {
+      if (el.id) return `#${el.id}`;
+      const classes = [...el.classList].filter(c =>
+        !c.match(/^(js-|is-|has-|data-)/) &&
+        c.length > 2
+      ).slice(0, 3).join('.');
+      return classes ? `.${classes}` : el.tagName.toLowerCase();
+    };
+
+    // 1. Count sections (major containers with padding/background)
+    const sectionSelectors = [
+      'section',
+      '[class*="section"]',
+      '[class*="py-lg"]', '[class*="py-xl"]', '[class*="py-2xl"]',
+      '[class*="py-md"]',
+      '[class*="bg-background"]',
+      '[class*="bg-white"]',
+      '[class*="bg-gray"]'
+    ];
+
+    const sectionElements = new Set();
+    const MAX_SECTION_DETAILS = 30;
+
+    sectionSelectors.forEach(sel => {
+      try {
+        document.querySelectorAll(sel).forEach(el => {
+          if (sectionElements.size >= MAX_SECTION_DETAILS) return;
+
+          // Check if element has significant height and width (major section)
+          const rect = el.getBoundingClientRect();
+          const isSignificant = rect.height > 100 && rect.width > 200;
+
+          // Count elements that are either:
+          // 1. Direct children of body/main/root
+          // 2. Have section-like characteristics (padding, bg, significant size)
+          const parent = el.parentElement;
+          const isTopLevel = parent?.tagName === 'BODY' ||
+                            parent?.tagName === 'MAIN' ||
+                            parent?.id === 'root' ||
+                            parent?.id === '__next' ||
+                            parent?.classList.contains('container');
+
+          if (isTopLevel || (isSignificant && isVisible(el))) {
+            sectionElements.add(el);
+          }
+        });
+      } catch (e) { /* invalid selector */ }
+    });
+
+    sectionElements.forEach(el => {
+      const style = getComputedStyle(el);
+      const hasBg = style.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
+                    style.backgroundColor !== 'transparent';
+      counts.sections.total++;
+      if (hasBg) counts.sections.withBackground++;
+
+      counts.sections.details.push({
+        selector: getSelector(el),
+        visible: isVisible(el),
+        hasBackground: hasBg,
+        childCount: el.children.length
+      });
+    });
+
+    // 2. Count grid/flex containers and their items
+    // Only target meaningful containers (not trivial wrappers)
+    const gridSelectors = [
+      '[class*="grid"]',
+      '[style*="display: grid"]'
+    ];
+
+    // Separate flex selectors - more selective
+    const flexSelectors = [
+      '[class*="flex"][class*="gap"]',
+      '[class*="flex"][class*="wrap"]',
+      '[class*="flex"][class*="col"]'
+    ];
+
+    const processedGrids = new Set();
+    const MIN_ITEMS_FOR_GRID = 2;  // Only count containers with 2+ items
+    const MAX_GRID_DETAILS = 50;   // Limit output size
+
+    [...gridSelectors, ...flexSelectors].forEach(sel => {
+      try {
+        document.querySelectorAll(sel).forEach(el => {
+          if (processedGrids.has(el)) return;
+          if (counts.grids.details.length >= MAX_GRID_DETAILS) return;
+
+          const style = getComputedStyle(el);
+          if (style.display === 'grid' || style.display === 'flex' ||
+              style.display === 'inline-grid' || style.display === 'inline-flex') {
+            processedGrids.add(el);
+
+            // Count direct children (grid items)
+            const items = [...el.children].filter(child =>
+              child.tagName !== 'SCRIPT' &&
+              child.tagName !== 'STYLE'
+            );
+
+            // Skip containers with fewer than MIN_ITEMS
+            if (items.length < MIN_ITEMS_FOR_GRID) return;
+
+            // Count visible vs hidden
+            const visibleItems = items.filter(isVisible);
+            const hiddenItems = items.filter(i => !isVisible(i));
+
+            // Only count if has meaningful visible items
+            if (visibleItems.length >= MIN_ITEMS_FOR_GRID) {
+              counts.grids.total++;
+              counts.grids.details.push({
+                selector: getSelector(el),
+                display: style.display,
+                totalItems: items.length,
+                visibleItems: visibleItems.length,
+                hiddenItems: hiddenItems.length,
+                gridCols: style.gridTemplateColumns || null,
+                visible: isVisible(el)
+              });
+            }
+          }
+        });
+      } catch (e) { /* invalid selector */ }
+    });
+
+    // 3. Count repeated items (cards, list items, etc.)
+    const repeatPatterns = [
+      { name: 'cards', selectors: ['[class*="card"]', '[class*="Card"]'] },
+      { name: 'listItems', selectors: ['li', '[class*="item"]', '[class*="Item"]'] },
+      { name: 'services', selectors: ['[class*="service"]', '[class*="Service"]'] },
+      { name: 'features', selectors: ['[class*="feature"]', '[class*="Feature"]'] },
+      { name: 'testimonials', selectors: ['[class*="testimonial"]', '[class*="review"]'] },
+      { name: 'teamMembers', selectors: ['[class*="team"]', '[class*="member"]', '[class*="person"]'] },
+      { name: 'faqItems', selectors: ['[class*="faq"]', '[class*="accordion"]', 'details'] },
+      { name: 'pricingCards', selectors: ['[class*="pricing"]', '[class*="plan"]'] },
+      { name: 'blogPosts', selectors: ['[class*="post"]', '[class*="article"]', 'article'] },
+      { name: 'products', selectors: ['[class*="product"]', '[class*="Product"]'] },
+      { name: 'categories', selectors: ['[class*="category"]', '[class*="Category"]'] }
+    ];
+
+    repeatPatterns.forEach(({ name, selectors }) => {
+      let totalCount = 0;
+      let visibleCount = 0;
+
+      selectors.forEach(sel => {
+        try {
+          const elements = document.querySelectorAll(sel);
+          elements.forEach(el => {
+            totalCount++;
+            if (isVisible(el)) visibleCount++;
+          });
+        } catch (e) { /* invalid selector */ }
+      });
+
+      if (totalCount > 0) {
+        counts.repeatedItems.byType[name] = {
+          total: totalCount,
+          visible: visibleCount,
+          hidden: totalCount - visibleCount
+        };
+        counts.repeatedItems.total += totalCount;
+      }
+    });
+
+    // 4. Count navigation links
+    const header = document.querySelector('header, [class*="header"], nav');
+    const footer = document.querySelector('footer, [class*="footer"]');
+
+    if (header) {
+      counts.navigation.headerLinks = header.querySelectorAll('a').length;
+    }
+    if (footer) {
+      counts.navigation.footerLinks = footer.querySelectorAll('a').length;
+    }
+    counts.navigation.allLinks = document.querySelectorAll('a').length;
+
+    // 5. Count media elements
+    counts.media.images = document.querySelectorAll('img, picture').length;
+    counts.media.videos = document.querySelectorAll('video, iframe[src*="youtube"], iframe[src*="vimeo"]').length;
+    counts.media.svgIcons = document.querySelectorAll('svg').length;
+
+    // 6. Count interactive elements
+    counts.interactive.buttons = document.querySelectorAll('button, [role="button"], input[type="submit"], input[type="button"]').length;
+    counts.interactive.inputs = document.querySelectorAll('input, textarea, select').length;
+    counts.interactive.forms = document.querySelectorAll('form').length;
+
+    // 7. Calculate summary
+    counts.summary = {
+      majorSections: counts.sections.total,
+      gridContainers: counts.grids.total,
+      totalRepeatedItems: counts.repeatedItems.total,
+      totalLinks: counts.navigation.allLinks,
+      totalImages: counts.media.images,
+      totalButtons: counts.interactive.buttons,
+
+      // Provide estimates for generation
+      recommendedItemCounts: {}
+    };
+
+    // Calculate recommended item counts per grid
+    counts.grids.details.forEach((grid, idx) => {
+      if (grid.visibleItems >= 3) {
+        counts.summary.recommendedItemCounts[grid.selector] = grid.visibleItems;
+      }
+    });
+
+    // Add repeated items recommendations
+    Object.entries(counts.repeatedItems.byType).forEach(([type, data]) => {
+      if (data.visible >= 2) {
+        counts.summary.recommendedItemCounts[type] = data.visible;
+      }
+    });
+
+    return counts;
+  });
+}
+
+/**
+ * Generate concise content summary for prompt injection
+ * @param {object} counts - Content counts from extractContentCounts
+ * @returns {string} Summary text
+ */
+export function generateContentSummary(counts) {
+  const lines = [
+    '## EXACT CONTENT COUNTS (from DOM parsing)',
+    ''
+  ];
+
+  // Sections
+  lines.push(`### Sections: ${counts.sections.total} total`);
+  counts.sections.details.slice(0, 10).forEach(s => {
+    lines.push(`- ${s.selector}: ${s.childCount} children${s.visible ? '' : ' (hidden)'}`);
+  });
+  lines.push('');
+
+  // Grids with item counts
+  lines.push(`### Grid/Flex Containers: ${counts.grids.total} total`);
+  counts.grids.details.slice(0, 15).forEach(g => {
+    const visibilityNote = g.hiddenItems > 0 ? ` (+${g.hiddenItems} hidden)` : '';
+    lines.push(`- ${g.selector}: ${g.visibleItems} visible items${visibilityNote}`);
+  });
+  lines.push('');
+
+  // Repeated items
+  if (Object.keys(counts.repeatedItems.byType).length > 0) {
+    lines.push('### Repeated Items:');
+    Object.entries(counts.repeatedItems.byType).forEach(([type, data]) => {
+      const hiddenNote = data.hidden > 0 ? ` (+${data.hidden} hidden)` : '';
+      lines.push(`- ${type}: ${data.visible} visible${hiddenNote}`);
+    });
+    lines.push('');
+  }
+
+  // Links and media
+  lines.push('### Navigation & Media:');
+  lines.push(`- Header links: ${counts.navigation.headerLinks}`);
+  lines.push(`- Footer links: ${counts.navigation.footerLinks}`);
+  lines.push(`- Images: ${counts.media.images}`);
+  lines.push(`- SVG icons: ${counts.media.svgIcons}`);
+  lines.push('');
+
+  // Critical instruction
+  lines.push('### GENERATION INSTRUCTION:');
+  lines.push('When generating HTML, use EXACTLY these item counts:');
+  Object.entries(counts.summary.recommendedItemCounts).forEach(([selector, count]) => {
+    lines.push(`- ${selector}: ${count} items`);
+  });
+
+  return lines.join('\n');
+}

package/src/core/cookie-handler.js

@@ -38,7 +38,7 @@ export const COOKIE_REMOVE_SELECTORS = [
 
 /**
  * Dismiss cookie banners by clicking accept or removing elements
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @returns {Promise<{method: string, selector?: string, count?: number}>}
  */
 export async function dismissCookieBanner(page) {

package/src/core/css-extractor.js

@@ -6,7 +6,7 @@
  */
 
 // Size limits
-export const MAX_CSS_SIZE = 5 * 1024 * 1024;   // 5MB limit
+export const MAX_CSS_SIZE = 10 * 1024 * 1024;  // 10MB limit
 export const MAX_CSS_RULES_WARN = 5000;        // Warn on large stylesheets
 
 // Layout-critical properties for accurate cloning
@@ -32,12 +32,12 @@ export const ALL_PROPERTIES = Object.values(LAYOUT_PROPERTIES).flat();
 
 /**
  * Extract all CSS from page
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {string} baseUrl - Base URL for resolving relative paths
  * @returns {Promise<{cssBlocks: Array, corsBlocked: Array, computedStyles: Object, totalRules: number, warnings: Array}>}
  */
 export async function extractAllCss(page, baseUrl) {
-  return await page.evaluate((url, allProps) => {
+  return await page.evaluate(({ url, allProps }) => {
     const cssBlocks = [];
     const corsBlocked = [];
     const warnings = [];
@@ -128,5 +128,5 @@ export async function extractAllCss(page, baseUrl) {
       totalRules,
       warnings
     };
-  }, baseUrl, ALL_PROPERTIES);
+  }, { url: baseUrl, allProps: ALL_PROPERTIES });
 }

package/src/core/dimension-extractor.js

@@ -7,7 +7,7 @@
 
 /**
  * Extract component dimensions from page
- * @param {Page} page - Puppeteer page
+ * @param {Page} page - Playwright page
  * @param {string} viewportName - 'desktop', 'tablet', or 'mobile'
  * @returns {Promise<Object>} Dimension data for this viewport
  */
@@ -69,6 +69,59 @@ export async function extractComponentDimensions(page, viewportName) {
       );
     }
 
+    /**
+     * Section Detection Configuration
+     * These thresholds determine how elements are classified into page sections.
+     * Semantic tags (<header>, <footer>, etc.) always take priority over position.
+     * Position-based detection is used as fallback for non-semantic elements.
+     */
+    const HERO_THRESHOLD = 0.25;    // Elements in top 25% with height >300px → hero
+    const FOOTER_THRESHOLD = 0.85;  // Elements below 85% of page height → footer
+    const SIDEBAR_MAX_WIDTH = 400;  // Max px width for fixed/sticky sidebar detection
+
+    // Page dimensions for section context
+    const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+    const pageWidth = document.documentElement.clientWidth;
+
+    /**
+     * Detect section context for an element.
+     *
+     * Priority order (per validation decision):
+     * 1. Semantic HTML tags: <header>, <footer>, <aside>, <nav> (highest priority)
+     * 2. Ancestor semantic tags: element inside <header>, <footer>, etc.
+     * 3. Position-based heuristics: hero (top 25%), footer (bottom 15%)
+     * 4. Layout-based: fixed/sticky narrow elements → sidebar
+     * 5. Default: 'content'
+     *
+     * @param {Element} el - DOM element to classify
+     * @returns {string} Section context: 'header' | 'hero' | 'content' | 'sidebar' | 'footer' | 'nav'
+     */
+    function detectSection(el) {
+      const rect = el.getBoundingClientRect();
+      const computed = window.getComputedStyle(el);
+      const yRatio = (rect.y + window.scrollY) / pageHeight;
+
+      // Semantic tags have priority (per validation decision)
+      const tag = el.tagName.toLowerCase();
+      if (tag === 'header' || el.closest('header')) return 'header';
+      if (tag === 'footer' || el.closest('footer')) return 'footer';
+      if (tag === 'aside' || el.closest('aside')) return 'sidebar';
+      if (tag === 'nav' || el.closest('nav')) return 'nav';
+
+      // Hero detection (large element in top 25%)
+      if (yRatio < HERO_THRESHOLD && rect.height > 300) return 'hero';
+
+      // Footer detection (bottom 15%)
+      if (yRatio > FOOTER_THRESHOLD) return 'footer';
+
+      // Sidebar detection (narrow fixed/sticky)
+      if ((computed.position === 'fixed' || computed.position === 'sticky') && rect.width < SIDEBAR_MAX_WIDTH) {
+        return 'sidebar';
+      }
+
+      return 'content';
+    }
+
     // 1. Extract containers
     const containerSelectors = [
       'section', 'main', 'article', 'header', 'footer',
@@ -98,6 +151,7 @@ export async function extractComponentDimensions(page, viewportName) {
               ? `.${el.className.split(' ').filter(c => c && !c.includes(':')).slice(0, 2).join('.')}`
               : el.tagName.toLowerCase();
             dims.childCount = children.length;
+            dims.section = detectSection(el);  // Add section context
 
             if (children.length >= 2 && (dims.display === 'flex' || dims.display === 'grid')) {
               const firstRect = children[0].getBoundingClientRect();
@@ -118,35 +172,53 @@ export async function extractComponentDimensions(page, viewportName) {
       } catch (e) { /* ignore */ }
     });
 
-    // 2. Extract typography
+    // 2. Extract typography (grouped by section context)
     const typographySelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
     typographySelectors.forEach(tag => {
       try {
         const elements = document.querySelectorAll(tag);
-        if (elements.length > 0) {
-          for (const el of elements) {
-            const rect = el.getBoundingClientRect();
-            if (rect.width > 50 && rect.height > 10) {
-              const dims = extractDimensions(el);
-              results.typography.push({
-                selector: tag,
-                fontSize: dims.fontSize,
-                fontWeight: dims.fontWeight,
-                lineHeight: dims.lineHeight,
-                letterSpacing: dims.letterSpacing,
-                color: dims.color,
-                marginTop: dims.marginTop,
-                marginBottom: dims.marginBottom,
-                textSample: el.textContent?.trim().slice(0, 40),
-                count: elements.length
-              });
-              break;
-            }
+        if (elements.length === 0) return;
+
+        const bySection = {};  // Group by section
+
+        for (const el of elements) {
+          const rect = el.getBoundingClientRect();
+          if (rect.width < 50 || rect.height < 10) continue;
+
+          const section = detectSection(el);
+          const dims = extractDimensions(el);
+
+          // Create section group if not exists
+          if (!bySection[section]) bySection[section] = [];
+
+          // Add to section group (limit 2 per section per tag for token efficiency)
+          if (bySection[section].length < 2) {
+            bySection[section].push({
+              selector: tag,
+              section,
+              fontSize: dims.fontSize,
+              fontWeight: dims.fontWeight,
+              lineHeight: dims.lineHeight,
+              letterSpacing: dims.letterSpacing,
+              color: dims.color,
+              marginTop: dims.marginTop,
+              marginBottom: dims.marginBottom,
+              textSample: el.textContent?.trim().slice(0, 40),
+              y: Math.round(rect.y + window.scrollY)
+            });
           }
         }
+
+        // Flatten section groups into typography array
+        for (const items of Object.values(bySection)) {
+          results.typography.push(...items);
+        }
       } catch (e) { /* ignore */ }
     });
 
+    // Sort typography by position for consistent output
+    results.typography.sort((a, b) => a.y - b.y);
+
     // 3. Extract buttons
     const buttonSelectors = [
       'button', 'a[class*="btn"]', 'a[class*="button"]',