design-clone 2.1.0 → 3.0.0

package/src/core/content/content-counter.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+import { domCountingFn } from './content-counter-dom.js';
+
+/**
+ * Count content items in page DOM
+ * @param {import('playwright').Page} page - Playwright page
+ * @returns {Promise<object>} Content counts
+ */
+export async function extractContentCounts(page) {
+  return await page.evaluate(domCountingFn);
+}
+
+/**
+ * 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/css/breakpoint-detector.js

@@ -0,0 +1,66 @@
+/**
+ * CSS Breakpoint Detector
+ *
+ * Extracts responsive breakpoint widths from @media queries in CSS.
+ * Used by --detect-breakpoints flag to capture at actual design breakpoints
+ * instead of fixed viewport widths.
+ */
+
+import { VIEWPORTS } from '../../shared/viewports.js';
+
+const MEDIA_WIDTH_RE = /\(\s*(?:min|max)-width\s*:\s*(\d+(?:\.\d+)?)\s*(px|em|rem)\s*\)/g;
+const EM_TO_PX = 16;
+const MAX_BREAKPOINTS = 6;
+const DESKTOP_BASELINE = 1440;
+
+/**
+ * Extract breakpoint widths from CSS @media queries
+ * @param {string} cssContent - Raw CSS string
+ * @returns {{ breakpoints: number[], mediaQueries: Array<{query: string, width: number}> }}
+ */
+export function detectBreakpoints(cssContent) {
+  const widths = new Set();
+  const queries = [];
+  let match;
+
+  // Find all @media blocks and extract width values
+  const mediaRe = /@media\s*([^{]+)\{/g;
+  while ((match = mediaRe.exec(cssContent)) !== null) {
+    const query = match[1].trim();
+    let widthMatch;
+    MEDIA_WIDTH_RE.lastIndex = 0;
+
+    while ((widthMatch = MEDIA_WIDTH_RE.exec(query)) !== null) {
+      let px = parseFloat(widthMatch[1]);
+      const unit = widthMatch[2];
+
+      if (unit === 'em' || unit === 'rem') px = Math.round(px * EM_TO_PX);
+      if (px >= 320 && px <= 2560) {
+        widths.add(px);
+        queries.push({ query, width: px });
+      }
+    }
+  }
+
+  const sorted = [...widths].sort((a, b) => a - b).slice(0, MAX_BREAKPOINTS);
+  return { breakpoints: sorted, mediaQueries: queries };
+}
+
+/**
+ * Replace fixed viewports with detected breakpoints, keep desktop baseline.
+ * @param {number[]} detected - Detected widths
+ * @returns {Object} Viewport configs keyed by name
+ */
+export function mergeWithFixed(detected) {
+  const all = [...new Set([DESKTOP_BASELINE, ...detected])].sort((a, b) => b - a);
+  const capped = all.slice(0, MAX_BREAKPOINTS);
+  const result = {};
+
+  for (const w of capped) {
+    const existing = Object.entries(VIEWPORTS).find(([, v]) => v.width === w);
+    const name = existing ? existing[0] : `bp-${w}`;
+    result[name] = { width: w, height: Math.round(w * 0.625), deviceScaleFactor: 1 };
+  }
+
+  return result;
+}

package/src/core/css/chromium-defaults.json

@@ -0,0 +1,23 @@
+{
+  "div": { "display": "block", "position": "static", "margin": "0px", "padding": "0px", "font-size": "16px", "font-weight": "400", "color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)", "border": "0px none rgb(0, 0, 0)", "text-align": "start", "line-height": "normal", "opacity": "1" },
+  "span": { "display": "inline", "position": "static", "margin": "0px", "padding": "0px", "font-size": "16px", "font-weight": "400", "color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)" },
+  "p": { "display": "block", "position": "static", "margin": "16px 0px", "padding": "0px", "font-size": "16px", "font-weight": "400" },
+  "h1": { "display": "block", "font-size": "32px", "font-weight": "700", "margin": "21.44px 0px" },
+  "h2": { "display": "block", "font-size": "24px", "font-weight": "700", "margin": "19.92px 0px" },
+  "h3": { "display": "block", "font-size": "18.72px", "font-weight": "700", "margin": "18.72px 0px" },
+  "h4": { "display": "block", "font-size": "16px", "font-weight": "700", "margin": "21.28px 0px" },
+  "h5": { "display": "block", "font-size": "13.28px", "font-weight": "700", "margin": "22.18px 0px" },
+  "h6": { "display": "block", "font-size": "10.72px", "font-weight": "700", "margin": "24.98px 0px" },
+  "a": { "display": "inline", "color": "rgb(0, 0, 238)", "text-decoration": "underline" },
+  "ul": { "display": "block", "margin": "16px 0px", "padding": "0px 0px 0px 40px" },
+  "li": { "display": "list-item" },
+  "img": { "display": "inline" },
+  "section": { "display": "block" },
+  "article": { "display": "block" },
+  "nav": { "display": "block" },
+  "header": { "display": "block" },
+  "footer": { "display": "block" },
+  "main": { "display": "block" },
+  "button": { "display": "inline-block", "padding": "1px 6px", "font-size": "13.333px" },
+  "input": { "display": "inline-block", "padding": "1px 2px", "font-size": "13.333px" }
+}

package/src/core/css/computed-style-extractor.js

@@ -0,0 +1,102 @@
+/**
+ * Computed Style Gap-Fill Extractor
+ *
+ * Extracts computed styles for visible elements that aren't covered by
+ * stylesheet CSS. Diffs against Chromium defaults to produce minimal
+ * gap-fill rules for styles set via JS or inline attributes.
+ */
+
+import fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+let defaults = null;
+
+async function loadDefaults() {
+  if (!defaults) {
+    const raw = await fs.readFile(path.join(__dirname, 'chromium-defaults.json'), 'utf-8');
+    defaults = JSON.parse(raw);
+  }
+  return defaults;
+}
+
+const KEY_PROPERTIES = [
+  'display', 'position', 'margin', 'padding', 'width', 'height',
+  'font-size', 'font-weight', 'font-family', 'color', 'background-color',
+  'border', 'border-radius', 'flex-direction', 'justify-content',
+  'align-items', 'gap', 'grid-template-columns', 'overflow',
+  'text-align', 'line-height', 'text-decoration', 'opacity', 'z-index',
+  'box-shadow', 'transform'
+];
+
+const MAX_ELEMENTS = 1000;
+
+/**
+ * Extract computed styles that fill gaps in stylesheet CSS
+ * @param {import('playwright').Page} page - Playwright page
+ * @param {string} existingCssContent - Already-extracted CSS content
+ * @returns {Promise<{css: string, rules: number, stats: Object}>}
+ */
+export async function extractComputedGapFill(page, existingCssContent) {
+  const baseline = await loadDefaults();
+
+  const elementStyles = await page.evaluate(({ maxEls, props }) => {
+    const visible = [...document.querySelectorAll('*')]
+      .filter(el => {
+        const rect = el.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight * 2;
+      })
+      .slice(0, maxEls);
+
+    return visible.map(el => {
+      const cs = window.getComputedStyle(el);
+      const tag = el.tagName.toLowerCase();
+      const cls = el.className && typeof el.className === 'string'
+        ? `.${[...el.classList].join('.')}` : '';
+      const id = el.id ? `#${el.id}` : '';
+      const selector = id || (tag + cls) || tag;
+      const styles = {};
+      for (const prop of props) {
+        const val = cs.getPropertyValue(prop);
+        if (val) styles[prop] = val;
+      }
+      return { tag, selector, styles };
+    });
+  }, { maxEls: MAX_ELEMENTS, props: KEY_PROPERTIES });
+
+  // Diff against baseline
+  const gapRules = [];
+  for (const el of elementStyles) {
+    const baseStyles = baseline[el.tag] || {};
+    const gaps = {};
+    let hasGap = false;
+    for (const [prop, val] of Object.entries(el.styles)) {
+      if (val !== baseStyles[prop] && !existingCssContent.includes(val)) {
+        gaps[prop] = val;
+        hasGap = true;
+      }
+    }
+    if (hasGap) gapRules.push({ selector: el.selector, properties: gaps });
+  }
+
+  // Deduplicate by selector
+  const merged = new Map();
+  for (const rule of gapRules) {
+    const existing = merged.get(rule.selector);
+    if (existing) Object.assign(existing.properties, rule.properties);
+    else merged.set(rule.selector, rule);
+  }
+
+  const rules = [...merged.values()];
+  const css = rules.map(r => {
+    const props = Object.entries(r.properties).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+    return `${r.selector} {\n${props}\n}`;
+  }).join('\n\n');
+
+  return {
+    css,
+    rules: rules.length,
+    stats: { elementsAnalyzed: elementStyles.length, gapRulesGenerated: rules.length }
+  };
+}

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

@@ -0,0 +1,103 @@
+/**
+ * CSS Chunker for Streaming Processing
+ *
+ * Splits large CSS files at top-level block boundaries for independent
+ * processing. Never splits inside nested {} blocks to preserve rule integrity.
+ */
+
+const DEFAULT_CHUNK_SIZE = 1024 * 1024; // 1MB
+
+/**
+ * Split CSS at top-level closing braces into chunks.
+ * Preserves complete rule blocks - never splits inside {} nesting.
+ * @param {string} cssString - Raw CSS content
+ * @param {number} targetSize - Target chunk size in bytes
+ * @returns {string[]} CSS chunks
+ */
+export function splitCssAtTopLevel(cssString, targetSize = DEFAULT_CHUNK_SIZE) {
+  const chunks = [];
+  let depth = 0;
+  let chunkStart = 0;
+  let lastTopLevelClose = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inComment = false;
+
+  for (let i = 0; i < cssString.length; i++) {
+    const ch = cssString[i];
+    const prev = i > 0 ? cssString[i - 1] : '';
+
+    // Track comment state
+    if (!inSingleQuote && !inDoubleQuote) {
+      if (!inComment && ch === '/' && cssString[i + 1] === '*') {
+        inComment = true;
+        i++; // skip '*'
+        continue;
+      }
+      if (inComment && ch === '*' && cssString[i + 1] === '/') {
+        inComment = false;
+        i++; // skip '/'
+        continue;
+      }
+    }
+    if (inComment) continue;
+
+    // Track string state (skip escaped quotes)
+    if (!inDoubleQuote && ch === "'" && prev !== '\\') {
+      inSingleQuote = !inSingleQuote;
+      continue;
+    }
+    if (!inSingleQuote && ch === '"' && prev !== '\\') {
+      inDoubleQuote = !inDoubleQuote;
+      continue;
+    }
+    if (inSingleQuote || inDoubleQuote) continue;
+
+    // Count braces only at top level (outside strings and comments)
+    if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth === 0) {
+        lastTopLevelClose = i + 1;
+        if (lastTopLevelClose - chunkStart >= targetSize) {
+          chunks.push(cssString.slice(chunkStart, lastTopLevelClose));
+          chunkStart = lastTopLevelClose;
+        }
+      }
+    }
+  }
+
+  // Remainder
+  if (chunkStart < cssString.length) {
+    chunks.push(cssString.slice(chunkStart));
+  }
+
+  return chunks;
+}
+
+/**
+ * Process CSS chunks independently, merge results.
+ * On per-chunk failure, keeps original chunk content (conservative).
+ * @param {string[]} chunks - CSS chunks
+ * @param {function} parseAndFilter - Function that parses and filters a CSS string
+ * @returns {{ css: string, stats: { totalRules: number, keptRules: number, removedRules: number } }}
+ */
+export async function processChunks(chunks, parseAndFilter) {
+  const results = [];
+  const mergedStats = { totalRules: 0, keptRules: 0, removedRules: 0 };
+
+  for (const chunk of chunks) {
+    try {
+      const result = await parseAndFilter(chunk);
+      results.push(result.css);
+      mergedStats.totalRules += result.stats.totalRules || 0;
+      mergedStats.keptRules += result.stats.keptRules || 0;
+      mergedStats.removedRules += result.stats.removedRules || 0;
+    } catch {
+      // On chunk failure, keep original chunk (conservative)
+      results.push(chunk);
+    }
+  }
+
+  return { css: results.join('\n'), stats: mergedStats };
+}

package/src/core/css/filter-css-dead-code.js

@@ -0,0 +1,120 @@
+/**
+ * CSS Dead Code Removal (Pass 2)
+ *
+ * After selector-based filtering (pass 1), removes:
+ * - Empty @media blocks with no remaining rules
+ * - Orphan @keyframes not referenced by any animation property
+ * - Unused custom properties (CSS variables) not referenced by var()
+ *
+ * Only runs when --aggressive-filter is enabled.
+ */
+
+/**
+ * Remove @media blocks that contain no rules after pass 1 filtering
+ * @param {Object} ast - css-tree AST
+ * @param {Object} csstree - css-tree module
+ * @returns {number} Count of removed blocks
+ */
+export function removeEmptyMediaQueries(ast, csstree) {
+  const empty = [];
+  csstree.walk(ast, {
+    visit: 'Atrule',
+    enter(node, item, list) {
+      if (node.name === 'media' && node.block) {
+        let hasChildren = false;
+        csstree.walk(node.block, { visit: 'Rule', enter() { hasChildren = true; } });
+        if (!hasChildren) empty.push({ item, list });
+      }
+    }
+  });
+  for (const { item, list } of empty) {
+    if (list) list.remove(item);
+  }
+  return empty.length;
+}
+
+/**
+ * Remove @keyframes not referenced by any animation-name or animation property
+ * @param {Object} ast - css-tree AST
+ * @param {Object} csstree - css-tree module
+ * @returns {number} Count of removed keyframes
+ */
+export function removeOrphanKeyframes(ast, csstree) {
+  const usedNames = new Set();
+  csstree.walk(ast, {
+    visit: 'Declaration',
+    enter(node) {
+      if (node.property === 'animation-name' || node.property === 'animation') {
+        const value = csstree.generate(node.value);
+        // Extract first token (animation-name) from shorthand or direct value
+        for (const name of value.split(/[\s,]+/)) {
+          if (name && name !== 'none' && name !== 'initial' && name !== 'inherit') {
+            usedNames.add(name);
+          }
+        }
+      }
+    }
+  });
+
+  const orphans = [];
+  csstree.walk(ast, {
+    visit: 'Atrule',
+    enter(node, item, list) {
+      if (node.name === 'keyframes' && node.prelude) {
+        const kfName = csstree.generate(node.prelude).trim();
+        if (!usedNames.has(kfName)) orphans.push({ item, list });
+      }
+    }
+  });
+  for (const { item, list } of orphans) {
+    if (list) list.remove(item);
+  }
+  return orphans.length;
+}
+
+/**
+ * Remove custom property declarations not referenced by var()
+ * @param {Object} ast - css-tree AST
+ * @param {Object} csstree - css-tree module
+ * @returns {number} Count of removed declarations
+ */
+export function removeUnusedCustomProps(ast, csstree) {
+  const usedVars = new Set();
+  csstree.walk(ast, {
+    visit: 'Function',
+    enter(node) {
+      if (node.name === 'var' && node.children && node.children.first) {
+        const name = csstree.generate(node.children.first);
+        if (name.startsWith('--')) usedVars.add(name);
+      }
+    }
+  });
+
+  const unused = [];
+  csstree.walk(ast, {
+    visit: 'Declaration',
+    enter(node, item, list) {
+      if (node.property.startsWith('--') && !usedVars.has(node.property)) {
+        unused.push({ item, list });
+      }
+    }
+  });
+  for (const { item, list } of unused) {
+    if (list) list.remove(item);
+  }
+  return unused.length;
+}
+
+/**
+ * Run all dead code removal passes
+ * @param {Object} ast - css-tree AST
+ * @param {Object} csstree - css-tree module
+ * @returns {{ emptyMediaRemoved: number, orphanKeyframesRemoved: number, unusedCustomPropsRemoved: number }}
+ */
+export function runDeadCodePass(ast, csstree) {
+  return {
+    emptyMediaRemoved: removeEmptyMediaQueries(ast, csstree),
+    orphanKeyframesRemoved: removeOrphanKeyframes(ast, csstree),
+    unusedCustomPropsRemoved: removeUnusedCustomProps(ast, csstree)
+  };
+}

package/src/core/css/filter-css-html-analyzer.js

@@ -0,0 +1,110 @@
+/**
+ * HTML Analyzer for CSS Filtering
+ *
+ * Parses HTML content to extract tags, IDs, classes, and attributes
+ * used as input for CSS selector matching during CSS filtering.
+ * Also exports shared constants and sanitization utilities.
+ */
+
+import path from 'path';
+
+// Rules that should always be kept (critical for layout)
+export const ALWAYS_KEEP_PATTERNS = [
+  /^html$/i,
+  /^body$/i,
+  /^\*$/,
+  /^:root$/i
+];
+
+// At-rules that should always be kept
+export const KEEP_AT_RULES = ['font-face', 'keyframes', 'import', 'charset', 'namespace'];
+
+// CSS injection patterns to sanitize (XSS vectors)
+export const CSS_INJECTION_PATTERNS = [
+  /expression\s*\(/gi,
+  /-moz-binding\s*:/gi,
+  /url\s*\(\s*["']?javascript:/gi,
+  /url\s*\(\s*["']?data:text\/html/gi,
+  /behavior\s*:/gi,
+  /@import\s+["']?javascript:/gi
+];
+
+/**
+ * Parse HTML and build sets of all possible selector matches.
+ * Uses regex for speed (no DOM parser needed).
+ * @param {string} html - HTML content to analyze
+ * @returns {{ tags: Set<string>, ids: Set<string>, classes: Set<string>, attributes: Set<string> }}
+ */
+export function analyzeHtml(html) {
+  const tags = new Set();
+  const ids = new Set();
+  const classes = new Set();
+  const attributes = new Set();
+
+  const tagMatches = html.matchAll(/<([a-z][a-z0-9]*)/gi);
+  for (const match of tagMatches) {
+    tags.add(match[1].toLowerCase());
+  }
+
+  const idMatches = html.matchAll(/\bid=["']([^"']+)["']/gi);
+  for (const match of idMatches) {
+    ids.add(match[1]);
+  }
+
+  const classMatches = html.matchAll(/\bclass=["']([^"']+)["']/gi);
+  for (const match of classMatches) {
+    match[1].split(/\s+/).forEach(c => {
+      const trimmed = c.trim();
+      if (trimmed) classes.add(trimmed);
+    });
+  }
+
+  const attrMatches = html.matchAll(/\s(data-[a-z0-9-]+)/gi);
+  for (const match of attrMatches) {
+    attributes.add(match[1].toLowerCase());
+  }
+
+  const commonAttrs = [
+    'href', 'src', 'type', 'name', 'value', 'disabled', 'checked',
+    'selected', 'readonly', 'required', 'placeholder', 'role',
+    'aria-hidden', 'aria-label', 'aria-expanded', 'target', 'rel'
+  ];
+  commonAttrs.forEach(attr => {
+    if (html.includes(attr + '=') || html.includes(attr + ' ') || html.includes(attr + '>')) {
+      attributes.add(attr);
+    }
+  });
+
+  return { tags, ids, classes, attributes };
+}
+
+/**
+ * Validate file path is within allowed directory (prevents path traversal).
+ * @param {string} filePath - Path to validate
+ * @param {string} allowedDir - Directory paths must be within (defaults to cwd)
+ * @returns {string} Resolved absolute path
+ * @throws {Error} If path is outside allowed directory
+ */
+export function validatePath(filePath, allowedDir = process.cwd()) {
+  const resolved = path.resolve(filePath);
+  const allowed = path.resolve(allowedDir);
+
+  if (!resolved.startsWith(allowed + path.sep) && resolved !== allowed) {
+    throw new Error(`Path "${filePath}" is outside allowed directory "${allowedDir}"`);
+  }
+
+  return resolved;
+}
+
+/**
+ * Sanitize CSS output to remove potential XSS vectors.
+ * @param {string} css - CSS string to sanitize
+ * @returns {string} Sanitized CSS
+ */
+export function sanitizeCss(css) {
+  let sanitized = css;
+  for (const pattern of CSS_INJECTION_PATTERNS) {
+    sanitized = sanitized.replace(pattern, '/* [sanitized] */');
+  }
+  return sanitized;
+}