npm - design-clone - Versions diffs - 2.1.0 → 2.3.0 - Mend

design-clone 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/README.md +13 -34
package/SKILL.md +69 -45
package/bin/cli.js +22 -4
package/bin/commands/clone-site.js +31 -171
package/bin/commands/help.js +19 -6
package/bin/commands/init.js +9 -86
package/bin/commands/uninstall.js +105 -0
package/bin/commands/update.js +70 -0
package/bin/commands/verify.js +7 -14
package/bin/utils/paths.js +28 -0
package/bin/utils/validate.js +2 -22
package/bin/utils/version.js +23 -0
package/docs/code-standards.md +789 -0
package/docs/codebase-summary.md +533 -286
package/docs/index.md +74 -0
package/docs/project-overview-pdr.md +797 -0
package/docs/system-architecture.md +718 -0
package/package.json +14 -17
package/src/ai/prompts/design-tokens/basic.md +80 -0
package/src/ai/prompts/design-tokens/section-with-css.md +41 -0
package/src/ai/prompts/design-tokens/section.md +48 -0
package/src/ai/prompts/design-tokens/with-css.md +87 -0
package/src/ai/prompts/structure-analysis/basic.md +55 -0
package/src/ai/prompts/structure-analysis/with-context.md +59 -0
package/src/ai/prompts/structure-analysis/with-dimensions.md +63 -0
package/src/ai/prompts/structure-analysis/with-hierarchy.md +73 -0
package/src/ai/prompts/ux-audit/aggregation.md +42 -0
package/src/ai/prompts/ux-audit/desktop.md +92 -0
package/src/ai/prompts/ux-audit/mobile.md +93 -0
package/src/ai/prompts/ux-audit/tablet.md +92 -0
package/src/core/animation/animation-extractor-ast.js +183 -0
package/src/core/animation/animation-extractor-output.js +152 -0
package/src/core/animation/animation-extractor.js +178 -0
package/src/core/animation/state-capture-detection.js +200 -0
package/src/core/animation/state-capture.js +193 -0
package/src/core/capture/browser-context-pool.js +96 -0
package/src/core/capture/multi-page-screenshot-page.js +110 -0
package/src/core/capture/multi-page-screenshot.js +208 -0
package/src/core/capture/screenshot-extraction.js +186 -0
package/src/core/capture/screenshot-helpers.js +175 -0
package/src/core/capture/screenshot-orchestrator.js +174 -0
package/src/core/capture/screenshot-viewport.js +93 -0
package/src/core/capture/screenshot.js +192 -0
package/src/core/content/content-counter-dom.js +191 -0
package/src/core/content/content-counter.js +76 -0
package/src/core/css/breakpoint-detector.js +66 -0
package/src/core/css/chromium-defaults.json +23 -0
package/src/core/css/computed-style-extractor.js +102 -0
package/src/core/css/css-chunker.js +103 -0
package/src/core/css/filter-css-dead-code.js +120 -0
package/src/core/css/filter-css-html-analyzer.js +110 -0
package/src/core/css/filter-css-selector-matcher.js +172 -0
package/src/core/css/filter-css.js +206 -0
package/src/core/css/merge-css-atrule-processor.js +158 -0
package/src/core/css/merge-css-file-io.js +68 -0
package/src/core/css/merge-css.js +148 -0
package/src/core/detection/framework-detector-routing.js +68 -0
package/src/core/detection/framework-detector-signals.js +65 -0
package/src/core/detection/framework-detector.js +198 -0
package/src/core/dimension/dimension-extractor-card-detector.js +82 -0
package/src/core/dimension/dimension-extractor.js +317 -0
package/src/core/dimension/dimension-output-ai-summary.js +111 -0
package/src/core/dimension/dimension-output.js +173 -0
package/src/core/dimension/dom-tree-analyzer-tree-builders.js +95 -0
package/src/core/dimension/dom-tree-analyzer.js +191 -0
package/src/core/discovery/app-state-snapshot-capture.js +195 -0
package/src/core/discovery/app-state-snapshot-utils.js +178 -0
package/src/core/discovery/app-state-snapshot.js +131 -0
package/src/core/discovery/discover-pages-routes.js +84 -0
package/src/core/discovery/discover-pages-utils.js +177 -0
package/src/core/discovery/discover-pages.js +191 -0
package/src/core/html/html-extractor-inline-styler.js +70 -0
package/src/core/html/html-extractor.js +147 -0
package/src/core/html/semantic-enhancer-mappings.js +200 -0
package/src/core/html/semantic-enhancer-page.js +148 -0
package/src/core/html/semantic-enhancer.js +135 -0
package/src/core/links/rewrite-links-css-rewriter.js +53 -0
package/src/core/links/rewrite-links.js +173 -0
package/src/core/media/asset-validator.js +118 -0
package/src/core/media/extract-assets-downloader.js +187 -0
package/src/core/media/extract-assets-page-scraper.js +115 -0
package/src/core/media/extract-assets.js +159 -0
package/src/core/media/video-capture-convert.js +200 -0
package/src/core/media/video-capture.js +201 -0
package/src/core/{lazy-loader.js → page-prep/lazy-loader.js} +37 -39
package/src/core/section/section-cropper-helpers.js +43 -0
package/src/core/{section-cropper.js → section/section-cropper.js} +11 -88
package/src/core/section/section-detector-strategies.js +139 -0
package/src/core/section/section-detector-utils.js +100 -0
package/src/core/section/section-detector.js +88 -0
package/src/core/tests/test-section-cropper.js +2 -2
package/src/core/tests/test-section-detector.js +2 -2
package/src/post-process/enhance-assets.js +29 -4
package/src/post-process/fetch-images-unsplash-client.js +123 -0
package/src/post-process/fetch-images.js +60 -263
package/src/post-process/inject-gosnap.js +88 -0
package/src/post-process/inject-icons-svg-replacer.js +76 -0
package/src/post-process/inject-icons.js +47 -200
package/src/route-discoverers/base-discoverer-utils.js +137 -0
package/src/route-discoverers/base-discoverer.js +29 -118
package/src/route-discoverers/index.js +1 -1
package/src/shared/config.js +38 -0
package/src/shared/error-codes.js +31 -0
package/src/shared/viewports.js +46 -0
package/src/utils/browser.js +0 -7
package/src/utils/helpers.js +4 -0
package/src/utils/log.js +12 -0
package/src/utils/playwright-loader.js +76 -0
package/src/utils/playwright.js +3 -69
package/src/utils/progress.js +32 -0
package/src/verification/generate-audit-report-css-fixes.js +52 -0
package/src/verification/generate-audit-report-sections.js +158 -0
package/src/verification/generate-audit-report.js +5 -281
package/src/verification/quality-scorer.js +92 -0
package/src/verification/verify-footer-checks.js +103 -0
package/src/verification/verify-footer-helpers.js +178 -0
package/src/verification/verify-footer.js +23 -381
package/src/verification/verify-header-checks.js +104 -0
package/src/verification/verify-header-helpers.js +156 -0
package/src/verification/verify-header.js +23 -365
package/src/verification/verify-layout-report.js +101 -0
package/src/verification/verify-layout.js +13 -259
package/src/verification/verify-menu-checks.js +104 -0
package/src/verification/verify-menu-helpers.js +112 -0
package/src/verification/verify-menu.js +17 -285
package/src/verification/verify-slider-checks.js +115 -0
package/src/verification/verify-slider-constants.js +65 -0
package/src/verification/verify-slider-helpers.js +164 -0
package/src/verification/verify-slider.js +23 -414
package/.env.example +0 -14
package/docs/basic-clone.md +0 -63
package/docs/cli-reference.md +0 -316
package/docs/design-clone-architecture.md +0 -492
package/docs/pixel-perfect.md +0 -117
package/docs/project-roadmap.md +0 -382
package/docs/troubleshooting.md +0 -170
package/requirements.txt +0 -5
package/src/ai/__pycache__/analyze-structure.cpython-313.pyc +0 -0
package/src/ai/__pycache__/extract-design-tokens.cpython-313.pyc +0 -0
package/src/ai/analyze-structure.py +0 -375
package/src/ai/extract-design-tokens.py +0 -782
package/src/ai/prompts/__init__.py +0 -2
package/src/ai/prompts/__pycache__/__init__.cpython-313.pyc +0 -0
package/src/ai/prompts/__pycache__/design_tokens.cpython-313.pyc +0 -0
package/src/ai/prompts/__pycache__/structure_analysis.cpython-313.pyc +0 -0
package/src/ai/prompts/__pycache__/ux_audit.cpython-313.pyc +0 -0
package/src/ai/prompts/design_tokens.py +0 -316
package/src/ai/prompts/structure_analysis.py +0 -592
package/src/ai/prompts/ux_audit.py +0 -198
package/src/ai/ux-audit.js +0 -596
package/src/core/animation-extractor.js +0 -526
package/src/core/app-state-snapshot.js +0 -511
package/src/core/content-counter.js +0 -342
package/src/core/design-tokens.js +0 -103
package/src/core/dimension-extractor.js +0 -438
package/src/core/dimension-output.js +0 -305
package/src/core/discover-pages.js +0 -542
package/src/core/dom-tree-analyzer.js +0 -298
package/src/core/extract-assets.js +0 -468
package/src/core/filter-css.js +0 -499
package/src/core/framework-detector.js +0 -538
package/src/core/html-extractor.js +0 -212
package/src/core/merge-css.js +0 -407
package/src/core/multi-page-screenshot.js +0 -380
package/src/core/rewrite-links.js +0 -226
package/src/core/screenshot.js +0 -701
package/src/core/section-detector.js +0 -386
package/src/core/semantic-enhancer.js +0 -492
package/src/core/state-capture.js +0 -598
package/src/core/video-capture.js +0 -546
package/src/utils/__init__.py +0 -16
package/src/utils/__pycache__/__init__.cpython-313.pyc +0 -0
package/src/utils/__pycache__/env.cpython-313.pyc +0 -0
package/src/utils/env.py +0 -134
/package/src/core/{css-extractor.js → css/css-extractor.js} +0 -0
/package/src/core/{cookie-handler.js → page-prep/cookie-handler.js} +0 -0
/package/src/core/{page-readiness.js → page-prep/page-readiness.js} +0 -0

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

@@ -1,386 +0,0 @@
-/**
- * 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 { extractDOMHierarchy } from './dom-tree-analyzer.js';
-// Section class patterns to match
-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
-const DEFAULT_OPTIONS = {
-  minSections: 3,
-  maxSections: 20,
-  padding: 40,
-  fallbackToViewport: true,
-  viewportHeight: 900,
-  minSectionHeight: 150,
-  overlapRatio: 0.1  // 10% overlap for viewport fallback
-};
-/**
- * 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 };
-  // Get page dimensions
-  const pageDimensions = await page.evaluate(() => ({
-    width: document.documentElement.clientWidth,
-    height: Math.max(
-      document.body.scrollHeight,
-      document.documentElement.scrollHeight
-    )
-  }));
-  // Strategy 1: Find semantic sections directly from page
-  let sections = await findSemanticSections(page, pageDimensions, config);
-  // Strategy 2: If not enough sections, try class pattern matching
-  if (sections.length < config.minSections) {
-    const classSections = await findClassPatternSections(page, pageDimensions, config);
-    sections = mergeSections(sections, classSections);
-  }
-  // Strategy 3: If still not enough, find large direct children
-  if (sections.length < config.minSections) {
-    const largeSections = await findLargeChildSections(page, pageDimensions, config);
-    sections = mergeSections(sections, largeSections);
-  }
-  // Strategy 4: Fallback to viewport chunking
-  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 }));
-}
-/**
- * Find semantic HTML sections (header, main, section, footer)
- */
-async function findSemanticSections(page, pageDimensions, config) {
-  return await page.evaluate(({ minHeight }) => {
-    const sections = [];
-    const processed = new Set();
-    // Selectors for semantic sections
-    const selectors = [
-      'header:not(header header)',  // Top-level header only
-      'main > section',
-      'main > article',
-      'body > section',
-      'body > article',
-      '[data-section]',
-      'footer:not(footer footer)'   // Top-level footer only
-    ];
-    for (const selector of selectors) {
-      const elements = document.querySelectorAll(selector);
-      for (const el of elements) {
-        // Skip if already processed (nested elements)
-        if (processed.has(el)) continue;
-        const rect = el.getBoundingClientRect();
-        const absoluteY = rect.y + window.scrollY;
-        // Skip tiny sections
-        if (rect.height < minHeight) continue;
-        // Determine section name
-        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) {
-          // Try to extract meaningful class name
-          const cls = el.className.toString().toLowerCase();
-          const match = cls.match(/\b(hero|about|services|features|contact|footer|header|nav|cta|testimonials|pricing|faq|team|blog|news)\b/);
-          if (match) name = match[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(absoluteY),
-            width: Math.round(rect.width),
-            height: Math.round(rect.height)
-          }
-        });
-        processed.add(el);
-      }
-    }
-    return sections;
-  }, { minHeight: config.minSectionHeight });
-}
-/**
- * Find sections by class pattern matching
- */
-async function findClassPatternSections(page, pageDimensions, config) {
-  return await page.evaluate(({ patterns, minHeight }) => {
-    const sections = [];
-    const processed = new Set();
-    // Build selector from patterns
-    const classSelectors = patterns.map(p => `[class*="${p}"]`).join(', ');
-    const elements = document.querySelectorAll(classSelectors);
-    for (const el of elements) {
-      // Only consider direct children of body or main
-      const parent = el.parentElement;
-      if (!parent || (parent.tagName !== 'BODY' && parent.tagName !== 'MAIN')) {
-        continue;
-      }
-      // Skip if inside another matched element
-      if (processed.has(el)) continue;
-      const rect = el.getBoundingClientRect();
-      const absoluteY = rect.y + window.scrollY;
-      if (rect.height < minHeight) continue;
-      // Extract pattern name from class
-      const cls = el.className.toString().toLowerCase();
-      let name = 'section';
-      for (const pattern of patterns) {
-        if (cls.includes(pattern)) {
-          name = pattern;
-          break;
-        }
-      }
-      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(absoluteY),
-          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
- */
-async function findLargeChildSections(page, pageDimensions, config) {
-  return await page.evaluate(({ minHeight }) => {
-    const sections = [];
-    // Check direct children of main, then body
-    const containers = [
-      document.querySelector('main'),
-      document.body
-    ].filter(Boolean);
-    for (const container of containers) {
-      const children = Array.from(container.children);
-      for (const child of children) {
-        // Skip script, style, noscript
-        if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'LINK', 'META'].includes(child.tagName)) {
-          continue;
-        }
-        const rect = child.getBoundingClientRect();
-        const absoluteY = rect.y + window.scrollY;
-        // Only large sections (>300px or >20% viewport height)
-        const threshold = Math.max(300, window.innerHeight * 0.2);
-        if (rect.height < threshold) continue;
-        // Skip if already covered by semantic detection
-        if (child.tagName === 'HEADER' || child.tagName === 'FOOTER' ||
-            child.tagName === 'SECTION' || child.tagName === 'ARTICLE') {
-          continue;
-        }
-        // Generate descriptive name based on position
-        let name = child.id || '';
-        if (!name && child.className) {
-          const cls = child.className.toString();
-          const firstClass = cls.split(' ')[0].toLowerCase();
-          // Skip generic framework classes
-          const genericPatterns = ['sd', 'container', 'wrapper', 'div', 'block', 'row', 'col', 'section'];
-          if (!genericPatterns.includes(firstClass)) {
-            name = firstClass;
-          }
-        }
-        if (!name) {
-          // Name based on Y position relative to page
-          const yRatio = absoluteY / (document.body.scrollHeight || 1);
-          if (yRatio < 0.15) name = 'top-section';
-          else if (yRatio < 0.35) name = 'upper-content';
-          else if (yRatio < 0.55) name = 'middle-content';
-          else if (yRatio < 0.75) name = 'lower-content';
-          else name = '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 we found sections in main, don't check body
-      if (sections.length > 0 && container.tagName === 'MAIN') break;
-    }
-    return sections;
-  }, { minHeight: config.minSectionHeight });
-}
-/**
- * Generate viewport chunks as fallback
- */
-function generateViewportChunks(pageDimensions, config) {
-  const { width, height } = pageDimensions;
-  const { viewportHeight, overlapRatio } = config;
-  const sections = [];
-  const overlap = Math.round(viewportHeight * overlapRatio);
-  const step = viewportHeight - overlap;
-  let y = 0;
-  let index = 0;
-  while (y < height) {
-    const chunkHeight = Math.min(viewportHeight, height - y);
-    sections.push({
-      name: `viewport-${index}`,
-      role: 'viewport-chunk',
-      selector: null,
-      bounds: {
-        x: 0,
-        y: y,
-        width: width,
-        height: chunkHeight
-      }
-    });
-    y += step;
-    index++;
-    // Safety limit
-    if (index > 50) break;
-  }
-  return sections;
-}
-/**
- * Merge sections, removing duplicates based on Y overlap
- */
-function mergeSections(existing, newSections) {
-  const result = [...existing];
-  for (const section of newSections) {
-    // Check if this section overlaps significantly with existing
-    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
- */
-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
- */
-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')
-  };
-}
-export { DEFAULT_OPTIONS, SECTION_CLASS_PATTERNS };