design-clone 1.0.0

package/src/core/dimension-extractor.js

@@ -0,0 +1,366 @@
+/**
+ * Component Dimension Extractor
+ *
+ * Extract exact pixel dimensions from page elements using
+ * getBoundingClientRect and getComputedStyle.
+ */
+
+/**
+ * Extract component dimensions from page
+ * @param {Page} page - Puppeteer page
+ * @param {string} viewportName - 'desktop', 'tablet', or 'mobile'
+ * @returns {Promise<Object>} Dimension data for this viewport
+ */
+export async function extractComponentDimensions(page, viewportName) {
+  return await page.evaluate((vpName) => {
+    const results = {
+      viewport: vpName,
+      extractedAt: new Date().toISOString(),
+      containers: [],
+      cards: [],
+      typography: [],
+      buttons: [],
+      images: []
+    };
+
+    // Helper: extract dimensions from element
+    function extractDimensions(el) {
+      const rect = el.getBoundingClientRect();
+      const computed = window.getComputedStyle(el);
+
+      return {
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        absoluteX: Math.round(rect.x + window.scrollX),
+        absoluteY: Math.round(rect.y + window.scrollY),
+        paddingTop: parseFloat(computed.paddingTop) || 0,
+        paddingRight: parseFloat(computed.paddingRight) || 0,
+        paddingBottom: parseFloat(computed.paddingBottom) || 0,
+        paddingLeft: parseFloat(computed.paddingLeft) || 0,
+        marginTop: parseFloat(computed.marginTop) || 0,
+        marginRight: parseFloat(computed.marginRight) || 0,
+        marginBottom: parseFloat(computed.marginBottom) || 0,
+        marginLeft: parseFloat(computed.marginLeft) || 0,
+        display: computed.display,
+        position: computed.position,
+        flexDirection: computed.flexDirection !== 'row' ? computed.flexDirection : undefined,
+        justifyContent: computed.justifyContent !== 'normal' ? computed.justifyContent : undefined,
+        alignItems: computed.alignItems !== 'normal' ? computed.alignItems : undefined,
+        gap: parseFloat(computed.gap) || 0,
+        gridTemplateColumns: computed.gridTemplateColumns !== 'none' ? computed.gridTemplateColumns : undefined,
+        gridTemplateRows: computed.gridTemplateRows !== 'none' ? computed.gridTemplateRows : undefined,
+        backgroundColor: computed.backgroundColor !== 'rgba(0, 0, 0, 0)' ? computed.backgroundColor : undefined,
+        borderRadius: computed.borderRadius !== '0px' ? computed.borderRadius : undefined,
+        boxShadow: computed.boxShadow !== 'none' ? computed.boxShadow : undefined,
+        fontSize: parseFloat(computed.fontSize) || 0,
+        fontWeight: computed.fontWeight,
+        lineHeight: computed.lineHeight,
+        letterSpacing: computed.letterSpacing !== 'normal' ? computed.letterSpacing : undefined,
+        color: computed.color
+      };
+    }
+
+    // Helper: clean object by removing undefined/null values
+    function cleanObject(obj) {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([_, v]) => v !== undefined && v !== null && v !== 0 && v !== '')
+      );
+    }
+
+    // 1. Extract containers
+    const containerSelectors = [
+      'section', 'main', 'article', 'header', 'footer',
+      '[role="main"]', '[role="region"]',
+      'div[class*="container"]', 'div[class*="wrapper"]',
+      'div[class*="section"]', 'div[class*="content"]',
+      'div[class*="grid"]', 'div[class*="card"]'
+    ];
+
+    const seenContainers = new Set();
+    containerSelectors.forEach(selector => {
+      try {
+        document.querySelectorAll(selector).forEach((el) => {
+          if (seenContainers.has(el)) return;
+          const rect = el.getBoundingClientRect();
+          if (rect.width < 100 || rect.height < 50) return;
+
+          const children = Array.from(el.children).filter(c => {
+            const cr = c.getBoundingClientRect();
+            return cr.width > 50 && cr.height > 30;
+          });
+
+          if (children.length >= 2) {
+            seenContainers.add(el);
+            const dims = extractDimensions(el);
+            dims.selector = el.className
+              ? `.${el.className.split(' ').filter(c => c && !c.includes(':')).slice(0, 2).join('.')}`
+              : el.tagName.toLowerCase();
+            dims.childCount = children.length;
+
+            if (children.length >= 2 && (dims.display === 'flex' || dims.display === 'grid')) {
+              const firstRect = children[0].getBoundingClientRect();
+              const secondRect = children[1].getBoundingClientRect();
+              const calculatedGap = Math.round(
+                dims.flexDirection === 'column'
+                  ? secondRect.top - firstRect.bottom
+                  : secondRect.left - firstRect.right
+              );
+              if (calculatedGap > 0 && calculatedGap < 200) {
+                dims.calculatedGap = calculatedGap;
+              }
+            }
+
+            results.containers.push(cleanObject(dims));
+          }
+        });
+      } catch (e) { /* ignore */ }
+    });
+
+    // 2. Extract typography
+    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;
+            }
+          }
+        }
+      } catch (e) { /* ignore */ }
+    });
+
+    // 3. Extract buttons
+    const buttonSelectors = [
+      'button', 'a[class*="btn"]', 'a[class*="button"]',
+      '[role="button"]', 'input[type="submit"]'
+    ];
+    const seenButtons = new Set();
+    buttonSelectors.forEach(selector => {
+      try {
+        document.querySelectorAll(selector).forEach((el) => {
+          if (seenButtons.has(el)) return;
+          const rect = el.getBoundingClientRect();
+          if (rect.width < 40 || rect.height < 20) return;
+          if (results.buttons.length >= 10) return;
+
+          seenButtons.add(el);
+          const dims = extractDimensions(el);
+          results.buttons.push({
+            width: dims.width,
+            height: dims.height,
+            paddingTop: dims.paddingTop,
+            paddingRight: dims.paddingRight,
+            paddingBottom: dims.paddingBottom,
+            paddingLeft: dims.paddingLeft,
+            fontSize: dims.fontSize,
+            fontWeight: dims.fontWeight,
+            borderRadius: dims.borderRadius,
+            backgroundColor: dims.backgroundColor,
+            color: dims.color,
+            text: el.textContent?.trim().slice(0, 30)
+          });
+        });
+      } catch (e) { /* ignore */ }
+    });
+
+    // 4. Extract images
+    try {
+      document.querySelectorAll('img').forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 80 || rect.height < 80) return;
+        if (results.images.length >= 15) return;
+
+        results.images.push({
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+          aspectRatio: (rect.width / rect.height).toFixed(2),
+          x: Math.round(rect.x),
+          y: Math.round(rect.y + window.scrollY)
+        });
+      });
+    } catch (e) { /* ignore */ }
+
+    // 5. Card pattern detection
+    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);
+    }
+
+    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';
+    }
+
+    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;
+    }
+
+    let cardGroupId = 0;
+    results.containers.forEach(container => {
+      if (container.childCount >= 2) {
+        try {
+          const parent = document.querySelector(container.selector);
+          if (!parent) return;
+
+          const children = Array.from(parent.children).filter(c => {
+            const cr = c.getBoundingClientRect();
+            return cr.width > 80 && cr.height > 60;
+          });
+
+          if (children.length >= 2) {
+            const childDims = children.map(c => {
+              const cr = c.getBoundingClientRect();
+              const cs = window.getComputedStyle(c);
+              return {
+                width: Math.round(cr.width),
+                height: Math.round(cr.height),
+                x: Math.round(cr.x),
+                y: Math.round(cr.y),
+                paddingTop: parseFloat(cs.paddingTop) || 0,
+                paddingRight: parseFloat(cs.paddingRight) || 0,
+                paddingBottom: parseFloat(cs.paddingBottom) || 0,
+                paddingLeft: parseFloat(cs.paddingLeft) || 0,
+                marginTop: parseFloat(cs.marginTop) || 0,
+                marginBottom: parseFloat(cs.marginBottom) || 0,
+                borderRadius: cs.borderRadius,
+                boxShadow: cs.boxShadow !== 'none' ? cs.boxShadow : undefined,
+                backgroundColor: cs.backgroundColor !== 'rgba(0, 0, 0, 0)' ? cs.backgroundColor : undefined
+              };
+            });
+
+            const used = new Set();
+            const groups = [];
+
+            for (let i = 0; i < childDims.length; i++) {
+              if (used.has(i)) continue;
+              const group = [childDims[i]];
+              used.add(i);
+
+              for (let j = i + 1; j < childDims.length; j++) {
+                if (used.has(j)) continue;
+                if (calculateSimilarity(childDims[i], childDims[j]) >= 0.70) {
+                  group.push(childDims[j]);
+                  used.add(j);
+                }
+              }
+
+              if (group.length >= 2) groups.push(group);
+            }
+
+            groups.forEach(group => {
+              const avg = (arr, key) => Math.round(arr.reduce((s, el) => s + (el[key] || 0), 0) / arr.length);
+              const layout = detectLayoutType(group);
+              const gap = calculateGap(group, layout);
+
+              results.cards.push({
+                id: `card-group-${++cardGroupId}`,
+                parentSelector: container.selector,
+                count: group.length,
+                layout,
+                gap,
+                avgDimensions: {
+                  width: avg(group, 'width'),
+                  height: avg(group, 'height'),
+                  paddingTop: avg(group, 'paddingTop'),
+                  paddingRight: avg(group, 'paddingRight'),
+                  paddingBottom: avg(group, 'paddingBottom'),
+                  paddingLeft: avg(group, 'paddingLeft')
+                },
+                borderRadius: group[0].borderRadius !== '0px' ? group[0].borderRadius : undefined,
+                boxShadow: group[0].boxShadow,
+                backgroundColor: group[0].backgroundColor
+              });
+            });
+          }
+        } catch (e) { /* ignore */ }
+      }
+    });
+
+    // 6. Grid layouts
+    results.gridLayouts = [];
+    results.containers.forEach(container => {
+      if (container.display === 'grid' || container.display === 'flex') {
+        try {
+          const parent = document.querySelector(container.selector);
+          if (!parent) return;
+          const computed = window.getComputedStyle(parent);
+          const children = parent.children;
+
+          if (children.length >= 2) {
+            if (computed.display === 'grid') {
+              const columns = computed.gridTemplateColumns;
+              const colCount = columns && columns !== 'none'
+                ? columns.split(' ').filter(c => c && c !== 'none').length
+                : Math.ceil(children.length / 2);
+
+              results.gridLayouts.push({
+                selector: container.selector,
+                display: 'grid',
+                columns: colCount,
+                rows: Math.ceil(children.length / colCount),
+                columnGap: parseFloat(computed.columnGap) || parseFloat(computed.gap) || 0,
+                rowGap: parseFloat(computed.rowGap) || parseFloat(computed.gap) || 0,
+                childCount: children.length
+              });
+            } else if (computed.display === 'flex') {
+              results.gridLayouts.push({
+                selector: container.selector,
+                display: 'flex',
+                flexDirection: computed.flexDirection,
+                flexWrap: computed.flexWrap,
+                gap: parseFloat(computed.gap) || container.calculatedGap || 0,
+                childCount: children.length
+              });
+            }
+          }
+        } catch (e) { /* ignore */ }
+      }
+    });
+
+    return results;
+  }, viewportName);
+}

package/src/core/dimension-output.js

@@ -0,0 +1,208 @@
+/**
+ * Dimension Output Builder
+ *
+ * Build and format component dimension output for JSON files.
+ * Includes sanitization, cross-viewport summary, and AI-friendly format.
+ */
+
+// Default viewport configurations
+const VIEWPORTS = {
+  desktop: { width: 1440, height: 900, deviceScaleFactor: 1 },
+  tablet: { width: 768, height: 1024, deviceScaleFactor: 1 },
+  mobile: { width: 375, height: 812, deviceScaleFactor: 2 }
+};
+
+/**
+ * Build final component-dimensions.json output with proper schema
+ * @param {Object} allViewportDimensions - Dimensions from all viewports
+ * @param {string} url - Source URL
+ * @returns {Object} Final JSON structure
+ */
+export function buildDimensionsOutput(allViewportDimensions, url) {
+  const output = {
+    meta: {
+      version: "1.0",
+      extractedAt: new Date().toISOString(),
+      url: url,
+      tool: "design-clone/screenshot.js"
+    },
+    viewports: {},
+    summary: {}
+  };
+
+  for (const [vpName, vpData] of Object.entries(allViewportDimensions)) {
+    output.viewports[vpName] = sanitizeViewportData(vpData, vpName);
+  }
+
+  output.summary = buildCrossViewportSummary(output.viewports);
+  return output;
+}
+
+/**
+ * Sanitize viewport data for JSON output
+ */
+export function sanitizeViewportData(data, vpName) {
+  if (!data) return {};
+
+  const clean = JSON.parse(JSON.stringify(data));
+  clean.width = VIEWPORTS[vpName]?.width || 0;
+  clean.height = VIEWPORTS[vpName]?.height || 0;
+
+  function roundNumbers(obj) {
+    for (const key in obj) {
+      if (typeof obj[key] === 'number') {
+        obj[key] = Math.round(obj[key]);
+      } else if (Array.isArray(obj[key])) {
+        obj[key].forEach(item => roundNumbers(item));
+      } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+        roundNumbers(obj[key]);
+      }
+    }
+    return obj;
+  }
+
+  function truncateStrings(obj, maxLen = 80) {
+    for (const key in obj) {
+      if (typeof obj[key] === 'string' && obj[key].length > maxLen) {
+        obj[key] = obj[key].slice(0, maxLen) + '...';
+      } else if (Array.isArray(obj[key])) {
+        obj[key].forEach(item => truncateStrings(item, maxLen));
+      } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+        truncateStrings(obj[key], maxLen);
+      }
+    }
+    return obj;
+  }
+
+  // Limit array sizes for token efficiency
+  if (clean.containers && clean.containers.length > 15) {
+    clean.containers = clean.containers.slice(0, 15);
+  }
+  if (clean.images && clean.images.length > 10) {
+    clean.images = clean.images.slice(0, 10);
+  }
+  if (clean.buttons && clean.buttons.length > 10) {
+    clean.buttons = clean.buttons.slice(0, 10);
+  }
+
+  return truncateStrings(roundNumbers(clean));
+}
+
+/**
+ * Build cross-viewport summary for AI consumption
+ */
+export function buildCrossViewportSummary(viewports) {
+  const summary = {
+    maxContainerWidth: 0,
+    commonGap: 0,
+    breakpoints: {
+      desktop: VIEWPORTS.desktop.width,
+      tablet: VIEWPORTS.tablet.width,
+      mobile: VIEWPORTS.mobile.width
+    },
+    typography: { h1: {}, h2: {}, h3: {}, body: {} },
+    cardPatterns: { totalGroups: 0, avgCardSize: null }
+  };
+
+  for (const [vpName, vpData] of Object.entries(viewports)) {
+    if (!vpData) continue;
+
+    if (vpData.containers) {
+      for (const container of vpData.containers) {
+        if (container.width > summary.maxContainerWidth) {
+          summary.maxContainerWidth = container.width;
+        }
+      }
+    }
+
+    if (vpData.typography) {
+      for (const typo of vpData.typography) {
+        const tag = typo.selector?.toLowerCase();
+        if (tag === 'h1') summary.typography.h1[vpName] = typo.fontSize;
+        if (tag === 'h2') summary.typography.h2[vpName] = typo.fontSize;
+        if (tag === 'h3') summary.typography.h3[vpName] = typo.fontSize;
+        if (tag === 'p') summary.typography.body[vpName] = typo.fontSize;
+      }
+    }
+
+    if (vpData.cards && vpData.cards.length > 0) {
+      summary.cardPatterns.totalGroups += vpData.cards.length;
+      if (vpName === 'desktop' && vpData.cards[0]?.avgDimensions) {
+        summary.cardPatterns.avgCardSize = vpData.cards[0].avgDimensions;
+      }
+
+      const gaps = vpData.cards.map(g => g.gap).filter(g => g > 0);
+      if (gaps.length > 0) {
+        summary.commonGap = Math.round(gaps.reduce((a, b) => a + b, 0) / gaps.length);
+      }
+    }
+  }
+
+  return summary;
+}
+
+/**
+ * Generate AI-friendly summary (compact, <5KB)
+ * @param {Object} fullOutput - Full component-dimensions.json
+ * @returns {Object} Compact summary for AI prompts
+ */
+export function generateAISummary(fullOutput) {
+  const { viewports, summary } = fullOutput;
+  const desktop = viewports.desktop || {};
+
+  function inferSectionPadding(containers) {
+    if (!containers || containers.length === 0) return "64px 0";
+    const paddings = containers.slice(0, 5).map(c => ({
+      v: c.paddingTop || c.paddingBottom || 64,
+      h: c.paddingLeft || c.paddingRight || 0
+    }));
+    const avgV = Math.round(paddings.reduce((s, p) => s + p.v, 0) / paddings.length);
+    const avgH = Math.round(paddings.reduce((s, p) => s + p.h, 0) / paddings.length);
+    return `${avgV}px ${avgH}px`;
+  }
+
+  function inferCardDimensions(cards) {
+    if (!cards || cards.length === 0) {
+      return { width: "auto", height: "auto", padding: "24px" };
+    }
+    const first = cards[0].avgDimensions || cards[0];
+    return {
+      width: first.width ? first.width + "px" : "auto",
+      height: first.height > 0 ? first.height + "px" : "auto",
+      padding: (first.paddingTop || first.padding || 24) + "px"
+    };
+  }
+
+  return {
+    _comment: "USE THESE EXACT VALUES - DO NOT ESTIMATE",
+    EXACT_DIMENSIONS: {
+      container_max_width: summary.maxContainerWidth + "px",
+      section_padding: inferSectionPadding(desktop.containers),
+      card_dimensions: inferCardDimensions(desktop.cards),
+      gap: summary.commonGap + "px"
+    },
+    EXACT_TYPOGRAPHY: {
+      h1: (summary.typography.h1.desktop || 48) + "px",
+      h2: (summary.typography.h2.desktop || 36) + "px",
+      h3: (summary.typography.h3.desktop || 24) + "px",
+      body: (summary.typography.body.desktop || 16) + "px"
+    },
+    RESPONSIVE: {
+      desktop_breakpoint: summary.breakpoints.desktop + "px",
+      tablet_breakpoint: summary.breakpoints.tablet + "px",
+      mobile_breakpoint: summary.breakpoints.mobile + "px",
+      typography_scaling: {
+        h1: {
+          desktop: (summary.typography.h1.desktop || 48) + "px",
+          tablet: (summary.typography.h1.tablet || 36) + "px",
+          mobile: (summary.typography.h1.mobile || 28) + "px"
+        },
+        h2: {
+          desktop: (summary.typography.h2.desktop || 36) + "px",
+          tablet: (summary.typography.h2.tablet || 28) + "px",
+          mobile: (summary.typography.h2.mobile || 24) + "px"
+        }
+      }
+    }
+  };
+}