design-clone 2.1.0 → 3.0.0

package/src/core/css/merge-css.js

@@ -0,0 +1,148 @@
+/**
+ * CSS Merge & Deduplication
+ *
+ * Combines multiple CSS strings into a single stylesheet with deduplication.
+ * Preserves cascade order (first occurrence wins).
+ * File I/O (reading/writing CSS files) lives in merge-css-file-io.js.
+ *
+ * Usage:
+ *   import { mergeCssFiles } from './merge-css-file-io.js';
+ *   const result = await mergeCssFiles(['a.css', 'b.css'], 'merged.css');
+ */
+
+import { sanitizeCss } from './filter-css.js';
+import { getRuleHash, processAtrule } from './merge-css-atrule-processor.js';
+
+// Import css-tree (already in package.json)
+let csstree;
+try {
+  csstree = await import('css-tree');
+} catch {
+  console.error('css-tree not installed. Run: npm install css-tree');
+  process.exit(1);
+}
+
+const DEFAULT_OPTIONS = {
+  combineMediaQueries: true,
+  deduplicateFontFaces: true,
+  deduplicateKeyframes: true,
+  removeEmptyRules: true
+};
+
+/**
+ * Merge multiple CSS strings with deduplication.
+ * @param {string[]} cssContents - Array of CSS strings
+ * @param {Object} options - Merge options
+ * @returns {{ css: string, stats: Object }}
+ */
+export function mergeStylesheets(cssContents, options = {}) {
+  const opts  = { ...DEFAULT_OPTIONS, ...options };
+  const stats = {
+    inputRules: 0,
+    outputRules: 0,
+    duplicateRulesRemoved: 0,
+    fontFacesDeduped: 0,
+    keyframesDeduped: 0,
+    mediaQueriesCombined: 0
+  };
+
+  const seenRules    = new Map();
+  const seenFontFaces  = new Map();
+  const seenKeyframes  = new Map();
+  const seenCharset  = { found: false, node: null };
+  const imports      = [];
+  const mediaGroups  = new Map();
+  const outputNodes  = [];
+  const collections  = { seenFontFaces, seenKeyframes, seenCharset, imports, mediaGroups, outputNodes, stats };
+
+  for (const css of cssContents) {
+    if (!css || typeof css !== 'string') continue;
+
+    let ast;
+    try {
+      ast = csstree.parse(css, { parseRulePrelude: true, parseValue: false });
+    } catch {
+      continue;
+    }
+
+    csstree.walk(ast, {
+      visit: 'Atrule',
+      enter(node) { processAtrule(node, csstree, opts, collections); }
+    });
+
+    csstree.walk(ast, {
+      visit: 'Rule',
+      enter(node, item, list) {
+        // Skip rules nested inside @media (handled by processAtrule)
+        let parent = list;
+        while (parent && parent.data) {
+          if (parent.data.type === 'Atrule') return;
+          parent = parent.parent;
+        }
+
+        stats.inputRules++;
+        const hash = getRuleHash(node, csstree);
+        if (!seenRules.has(hash)) {
+          seenRules.set(hash, node);
+          outputNodes.push({ type: 'rule', node });
+        } else {
+          stats.duplicateRulesRemoved++;
+        }
+      }
+    });
+  }
+
+  // Build output AST
+  const outputAst = { type: 'StyleSheet', children: new csstree.List() };
+  if (seenCharset.node) outputAst.children.push(seenCharset.node);
+  for (const imp of imports) outputAst.children.push(imp);
+
+  for (const item of outputNodes) {
+    outputAst.children.push(item.node);
+    if (item.type === 'rule' || item.type === 'fontface' || item.type === 'keyframes') {
+      stats.outputRules++;
+    }
+  }
+
+  if (opts.combineMediaQueries) {
+    for (const [condition, rules] of mediaGroups) {
+      if (rules.length === 0) continue;
+      stats.mediaQueriesCombined++;
+
+      const mediaBlock = { type: 'Block', children: new csstree.List() };
+      for (const r of rules) { mediaBlock.children.push(r.node); stats.outputRules++; }
+
+      outputAst.children.push({
+        type: 'Atrule',
+        name: 'media',
+        prelude: csstree.parse(condition, { context: 'mediaQueryList' }),
+        block: mediaBlock
+      });
+    }
+  }
+
+  let outputCss = csstree.generate(outputAst);
+  outputCss = sanitizeCss(outputCss);
+  return { css: outputCss, stats };
+}
+
+// CLI support
+const isMainModule = process.argv[1] && (
+  process.argv[1].endsWith('merge-css.js') ||
+  process.argv[1].includes('merge-css')
+);
+
+if (isMainModule) {
+  const { mergeCssFiles } = await import('./merge-css-file-io.js');
+  const args = process.argv.slice(2);
+
+  if (args.length < 2) {
+    console.error('Usage: node merge-css.js <output.css> <input1.css> [input2.css] ...');
+    process.exit(1);
+  }
+
+  const [outputPath, ...inputFiles] = args;
+  mergeCssFiles(inputFiles, outputPath)
+    .then(result => { console.log(JSON.stringify(result, null, 2)); process.exit(result.success ? 0 : 1); })
+    .catch(err  => { console.error(JSON.stringify({ success: false, error: err.message })); process.exit(1); });
+}

package/src/core/detection/framework-detector-routing.js

@@ -0,0 +1,68 @@
+/**
+ * Routing type inference for detected JavaScript frameworks.
+ *
+ * Runs page.evaluate to determine whether a framework is using
+ * SPA, SSR, or SSG rendering by inspecting framework-specific
+ * global objects and DOM attributes. Used by framework-detector.js.
+ */
+
+/**
+ * Infer routing type based on framework and detected signals.
+ * @param {import('playwright').Page} page - Playwright page object
+ * @param {string|null} framework - Detected framework name
+ * @returns {Promise<'spa'|'ssr'|'ssg'|'unknown'>}
+ */
+export async function inferRoutingType(page, framework) {
+  if (!framework) return 'unknown';
+
+  return await page.evaluate((fw) => {
+    function safeGet(obj, path) {
+      let current = obj;
+      for (const key of path) {
+        if (current === null || current === undefined) return undefined;
+        current = current[key];
+      }
+      return current;
+    }
+
+    try {
+      switch (fw) {
+        case 'next': {
+          const nextData = safeGet(window, ['__NEXT_DATA__']);
+          if (nextData) {
+            if (nextData.nextExport) return 'ssg';
+            if (nextData.isFallback === false) return 'ssr';
+            if (document.querySelector('[data-nscript]')) return 'ssr';
+          }
+          return 'ssr';
+        }
+        case 'nuxt': {
+          const nuxtData = safeGet(window, ['__NUXT__']);
+          if (nuxtData?.serverRendered === true) return 'ssr';
+          if (nuxtData?.serverRendered === false) return 'spa';
+          return 'ssr';
+        }
+        case 'vue':
+          if (window.$nuxt) return 'ssr';
+          if (document.querySelector('[data-server-rendered="true"]')) return 'ssr';
+          return 'spa';
+        case 'react':
+          if (safeGet(window, ['__NEXT_DATA__'])) return 'ssr';
+          if (window.___gatsby) return 'ssg';
+          return 'spa';
+        case 'angular':
+          if (document.querySelector('[ng-server-context]')) return 'ssr';
+          return 'spa';
+        case 'svelte':
+          if (safeGet(window, ['__sveltekit'])) return 'ssr';
+          return 'spa';
+        case 'astro':
+          return 'ssg';
+        default:
+          return 'unknown';
+      }
+    } catch (e) {
+      return 'unknown';
+    }
+  }, framework);
+}

package/src/core/detection/framework-detector-signals.js

@@ -0,0 +1,65 @@
+/**
+ * Framework detection signals configuration.
+ *
+ * Contains the DETECTION_SIGNALS object that maps each supported framework
+ * to its detection rules (global objects, DOM selectors, script patterns, meta tags).
+ * Each signal has a weight (1-3) used for confidence scoring.
+ * Used exclusively by framework-detector.js.
+ */
+
+/**
+ * Detection signals for each framework.
+ * Each signal: { type, path|selector|pattern|name, weight (1-3), signal (label) }
+ */
+export const DETECTION_SIGNALS = {
+  next: [
+    { type: 'global', path: ['__NEXT_DATA__'], weight: 3, signal: '__NEXT_DATA__' },
+    { type: 'global', path: ['__NEXT_LOADED_PAGES__'], weight: 2, signal: '__NEXT_LOADED_PAGES__' },
+    { type: 'global', path: ['__BUILD_MANIFEST'], weight: 2, signal: '__BUILD_MANIFEST' },
+    { type: 'dom', selector: '#__next', weight: 2, signal: '#__next' },
+    { type: 'script', pattern: '/_next/', weight: 1, signal: 'script:/_next/' }
+  ],
+  nuxt: [
+    { type: 'global', path: ['__NUXT__'], weight: 3, signal: '__NUXT__' },
+    { type: 'global', path: ['$nuxt'], weight: 2, signal: '$nuxt' },
+    { type: 'global', path: ['__NUXT_PATHS__'], weight: 2, signal: '__NUXT_PATHS__' },
+    { type: 'dom', selector: '#__nuxt', weight: 2, signal: '#__nuxt' },
+    { type: 'dom', selector: '#__layout', weight: 1, signal: '#__layout' },
+    { type: 'script', pattern: '/_nuxt/', weight: 1, signal: 'script:/_nuxt/' }
+  ],
+  vue: [
+    { type: 'global', path: ['__VUE__'], weight: 3, signal: '__VUE__' },
+    { type: 'global', path: ['Vue'], weight: 2, signal: 'Vue' },
+    { type: 'global', path: ['__VUE_DEVTOOLS_GLOBAL_HOOK__'], weight: 1, signal: '__VUE_DEVTOOLS_GLOBAL_HOOK__' },
+    { type: 'dom', selector: '[data-v-]', weight: 2, signal: 'data-v-*' },
+    { type: 'dom', selector: '[data-server-rendered]', weight: 2, signal: 'data-server-rendered' }
+  ],
+  react: [
+    { type: 'global', path: ['__REACT_DEVTOOLS_GLOBAL_HOOK__'], weight: 1, signal: '__REACT_DEVTOOLS_GLOBAL_HOOK__' },
+    { type: 'dom', selector: '[data-reactroot]', weight: 3, signal: 'data-reactroot' },
+    { type: 'dom', selector: '[data-reactid]', weight: 2, signal: 'data-reactid' },
+    { type: 'dom', selector: '#root[data-reactroot], #root > div', weight: 1, signal: '#root' }
+  ],
+  angular: [
+    { type: 'global', path: ['ng'], weight: 2, signal: 'ng' },
+    { type: 'global', path: ['getAllAngularRootElements'], weight: 3, signal: 'getAllAngularRootElements' },
+    { type: 'dom', selector: '[ng-version]', weight: 3, signal: 'ng-version' },
+    { type: 'dom', selector: 'app-root', weight: 2, signal: 'app-root' },
+    { type: 'dom', selector: '[_nghost-]', weight: 2, signal: '_nghost-*' },
+    { type: 'dom', selector: '[ng-app]', weight: 2, signal: 'ng-app' }
+  ],
+  svelte: [
+    { type: 'global', path: ['__svelte__'], weight: 2, signal: '__svelte__' },
+    { type: 'global', path: ['__sveltekit'], weight: 3, signal: '__sveltekit' },
+    { type: 'dom', selector: '[data-sveltekit-preload-data]', weight: 3, signal: 'data-sveltekit-preload-data' },
+    { type: 'dom', selector: '[data-sveltekit-reload]', weight: 2, signal: 'data-sveltekit-reload' },
+    { type: 'script', pattern: '/@svelte/', weight: 1, signal: 'script:/@svelte/' }
+  ],
+  astro: [
+    { type: 'dom', selector: 'astro-island', weight: 3, signal: 'astro-island' },
+    { type: 'dom', selector: '[data-astro-cid-]', weight: 2, signal: 'data-astro-cid-*' },
+    { type: 'dom', selector: '[data-astro-source-file]', weight: 2, signal: 'data-astro-source-file' },
+    { type: 'meta', name: 'generator', pattern: 'Astro', weight: 3, signal: 'meta:generator:Astro' },
+    { type: 'script', pattern: '/@astrojs/', weight: 1, signal: 'script:/@astrojs/' }
+  ]
+};

package/src/core/detection/framework-detector.js

@@ -0,0 +1,198 @@
+/**
+ * Framework Detector Module
+ *
+ * Detects JS frameworks via global objects, DOM attributes, script patterns.
+ * Returns framework info with confidence scoring.
+ *
+ * Usage:
+ *   import { detectFramework } from './framework-detector.js';
+ *   const info = await detectFramework(page);
+ */
+
+import { DETECTION_SIGNALS } from './framework-detector-signals.js';
+import { inferRoutingType } from './framework-detector-routing.js';
+
+export { DETECTION_SIGNALS };
+
+/**
+ * @typedef {Object} FrameworkInfo
+ * @property {string|null} framework
+ * @property {string|null} version
+ * @property {'spa'|'ssr'|'ssg'|'unknown'} routingType
+ * @property {'high'|'medium'|'low'} confidence
+ * @property {string[]} signals
+ */
+
+function calculateConfidence(w) {
+  return w >= 5 ? 'high' : w >= 3 ? 'medium' : 'low';
+}
+
+/**
+ * Detect framework used on the current page.
+ * @param {import('playwright').Page} page
+ * @returns {Promise<FrameworkInfo>}
+ */
+export async function detectFramework(page) {
+  const results = await page.evaluate((signals) => {
+    function safeGet(obj, path) {
+      let current = obj;
+      for (const key of path) {
+        if (current === null || current === undefined) return undefined;
+        current = current[key];
+      }
+      return current;
+    }
+
+    function hasAttrPrefix(prefix) {
+      return Array.from(document.querySelectorAll('*')).some(el =>
+        Array.from(el.attributes).some(attr => attr.name.startsWith(prefix))
+      );
+    }
+
+    const results = {};
+
+    for (const [framework, checks] of Object.entries(signals)) {
+      let totalWeight = 0;
+      const matchedSignals = [];
+      let version = null;
+
+      for (const check of checks) {
+        let matched = false;
+        try {
+          switch (check.type) {
+            case 'global':
+              matched = safeGet(window, check.path) !== undefined;
+              break;
+            case 'dom':
+              if (check.selector.includes('[data-v-]')) {
+                matched = hasAttrPrefix('data-v-');
+              } else if (check.selector.includes('[data-astro-cid-]')) {
+                matched = hasAttrPrefix('data-astro-cid-');
+              } else if (check.selector.includes('[_nghost-]')) {
+                matched = hasAttrPrefix('_nghost-');
+              } else {
+                matched = !!document.querySelector(check.selector);
+              }
+              break;
+            case 'script': {
+              const scripts = Array.from(document.querySelectorAll('script[src]'));
+              matched = scripts.some(s => s.src.includes(check.pattern));
+              break;
+            }
+            case 'meta': {
+              const meta = document.querySelector(`meta[name="${check.name}"]`);
+              matched = !!(meta?.content?.includes(check.pattern));
+              break;
+            }
+          }
+        } catch (e) {
+          matched = false;
+        }
+
+        if (matched) {
+          totalWeight += check.weight;
+          matchedSignals.push(check.signal);
+        }
+      }
+
+      // Version extraction
+      if (totalWeight > 0) {
+        try {
+          switch (framework) {
+            case 'next': {
+              const d = safeGet(window, ['__NEXT_DATA__']);
+              if (d) {
+                version = d.nextExport ? 'export' : (d.buildId || null);
+                if (d.runtimeConfig?.version) version = d.runtimeConfig.version;
+              }
+              break;
+            }
+            case 'nuxt': {
+              const v = safeGet(window, ['__NUXT__', 'config', 'app', 'buildId']);
+              if (v) version = v;
+              break;
+            }
+            case 'vue':
+              version = safeGet(window, ['Vue', 'version']) ||
+                        safeGet(window, ['__VUE__', 'version']) || null;
+              break;
+            case 'react':
+              version = safeGet(window, ['React', 'version']) || null;
+              break;
+            case 'angular': {
+              const el = document.querySelector('[ng-version]');
+              if (el) version = el.getAttribute('ng-version');
+              break;
+            }
+            case 'astro': {
+              const m = document.querySelector('meta[name="generator"]');
+              if (m?.content?.includes('Astro')) {
+                const match = m.content.match(/Astro v?([\d.]+)/);
+                if (match) version = match[1];
+              }
+              break;
+            }
+          }
+        } catch (e) { /* ignore version errors */ }
+      }
+
+      results[framework] = { weight: totalWeight, signals: matchedSignals, version };
+    }
+
+    return results;
+  }, DETECTION_SIGNALS);
+
+  // SSR frameworks take priority over base frameworks
+  let bestFramework = null, bestWeight = 0, bestSignals = [], bestVersion = null;
+  for (const fw of ['next', 'nuxt', 'astro', 'svelte', 'angular', 'vue', 'react']) {
+    if (results[fw].weight > bestWeight) {
+      bestWeight = results[fw].weight; bestFramework = fw;
+      bestSignals = results[fw].signals; bestVersion = results[fw].version;
+    }
+  }
+  const confidence = bestWeight > 0 ? calculateConfidence(bestWeight) : 'low';
+  const routingType = await inferRoutingType(page, bestFramework);
+
+  return {
+    framework: bestFramework,
+    version: bestVersion,
+    routingType,
+    confidence,
+    signals: bestSignals
+  };
+}
+
+/**
+ * Format detection result for CLI output.
+ * @param {FrameworkInfo} info
+ * @returns {string}
+ */
+export function formatDetectionResult(info) {
+  if (!info.framework) return 'No framework detected (static HTML or unknown framework)';
+  return [`Framework: ${info.framework}`, info.version ? `Version: ${info.version}` : null,
+    `Routing: ${info.routingType}`, `Confidence: ${info.confidence}`,
+    `Signals: ${info.signals.join(', ')}`].filter(Boolean).join(' | ');
+}
+
+// CLI support
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+if (process.argv[1] === __filename) {
+  const { getBrowser, getPage, disconnectBrowser } = await import('../../utils/browser.js');
+  const url = process.argv[2];
+  if (!url) { console.error('Usage: node framework-detector.js <url>'); process.exit(1); }
+  try {
+    const browser = await getBrowser({ headless: true });
+    const page = await getPage(browser);
+    await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+    await new Promise(r => setTimeout(r, 2000));
+    const result = await detectFramework(page);
+    console.log(JSON.stringify(result, null, 2));
+    console.error('\n' + formatDetectionResult(result));
+    await disconnectBrowser();
+    process.exit(0);
+  } catch (error) {
+    console.error(JSON.stringify({ error: error.message }));
+    process.exit(1);
+  }
+}

package/src/core/dimension/dimension-extractor-card-detector.js

@@ -0,0 +1,82 @@
+/**
+ * Card Pattern and Grid Layout Detector
+ *
+ * Browser-side functions (run inside page.evaluate) that detect repeating
+ * card groups and grid/flex layout patterns from extracted container data.
+ * These are injected into the page context via dimension-extractor.js.
+ */
+
+/**
+ * Calculate visual similarity score between two card elements.
+ * Weights: width 40%, height 30%, margin 15%, border-radius 15%.
+ * @param {{ width, height, marginTop, marginBottom, borderRadius }} a
+ * @param {{ width, height, marginTop, marginBottom, borderRadius }} b
+ * @returns {number} 0–1 similarity score
+ */
+export function calculateSimilarity(a, b) {
+  const widthSim  = 1 - Math.abs(a.width - b.width) / Math.max(a.width, b.width, 1);
+  const heightSim = 1 - Math.abs(a.height - b.height) / Math.max(a.height, b.height, 1);
+  const marginA   = a.marginTop + a.marginBottom;
+  const marginB   = b.marginTop + b.marginBottom;
+  const marginSim = 1 - Math.abs(marginA - marginB) / Math.max(marginA, marginB, 1);
+  const radiusSim = a.borderRadius === b.borderRadius ? 1 : 0.5;
+  return (widthSim * 0.4) + (heightSim * 0.3) + (marginSim * 0.15) + (radiusSim * 0.15);
+}
+
+/**
+ * Detect layout type from a group of elements.
+ * @param {Array<{ x, y, width, height }>} elements
+ * @returns {'row'|'column'|'grid'|'single'}
+ */
+export function detectLayoutType(elements) {
+  if (elements.length < 2) return 'single';
+  const yPositions = elements.map(el => el.y);
+  const xPositions = elements.map(el => el.x);
+  const yVariance  = Math.max(...yPositions) - Math.min(...yPositions);
+  const xVariance  = Math.max(...xPositions) - Math.min(...xPositions);
+  const avgHeight  = elements.reduce((s, el) => s + el.height, 0) / elements.length;
+  const avgWidth   = elements.reduce((s, el) => s + el.width, 0) / elements.length;
+
+  if (yVariance < avgHeight * 0.3 && xVariance > avgWidth) return 'row';
+  if (xVariance < avgWidth * 0.3 && yVariance > avgHeight) return 'column';
+  return 'grid';
+}
+
+/**
+ * Calculate average gap between elements based on layout direction.
+ * @param {Array<{ x, y, width, height }>} elements
+ * @param {'row'|'column'|'grid'} layout
+ * @returns {number} Average gap in px
+ */
+export function calculateGap(elements, layout) {
+  if (elements.length < 2) return 0;
+  const sorted = layout === 'column'
+    ? [...elements].sort((a, b) => a.y - b.y)
+    : [...elements].sort((a, b) => a.x - b.x);
+
+  let totalGap = 0, gapCount = 0;
+  for (let i = 1; i < sorted.length; i++) {
+    const gap = layout === 'column'
+      ? sorted[i].y - (sorted[i - 1].y + sorted[i - 1].height)
+      : sorted[i].x - (sorted[i - 1].x + sorted[i - 1].width);
+    if (gap > 0 && gap < 200) { totalGap += gap; gapCount++; }
+  }
+  return gapCount > 0 ? Math.round(totalGap / gapCount) : 0;
+}
+
+/**
+ * Return serializable card/grid detector functions as source strings.
+ * These are injected into page.evaluate so they run in browser context.
+ *
+ * Usage in page.evaluate:
+ *   const { calculateSimilarity, detectLayoutType, calculateGap } = injected;
+ *
+ * @returns {{ calculateSimilarity: string, detectLayoutType: string, calculateGap: string }}
+ */
+export function getCardDetectorSources() {
+  return {
+    calculateSimilarity: calculateSimilarity.toString(),
+    detectLayoutType: detectLayoutType.toString(),
+    calculateGap: calculateGap.toString()
+  };
+}