designlang 5.0.0 → 7.0.0

package/src/crawler.js

@@ -4,107 +4,143 @@ import { join } from 'path';
 
 const MAX_ELEMENTS = 5000;
 
+async function gotoWithRetry(page, url, opts, retries = 3) {
+  for (let i = 0; i < retries; i++) {
+    try {
+      await page.goto(url, opts);
+      return;
+    } catch (err) {
+      if (i === retries - 1) throw err;
+      await page.waitForTimeout(2000 * (i + 1));
+    }
+  }
+}
+
 export async function crawlPage(url, options = {}) {
-  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '', executablePath, browserArgs, cookies, headers } = options;
+  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '', executablePath, browserArgs, cookies, headers, ignore } = options;
 
   const browser = await chromium.launch({
     headless: true,
     ...(executablePath && { executablePath }),
     ...(browserArgs && { args: browserArgs }),
   });
-  const context = await browser.newContext({
-    viewport: { width, height },
-    colorScheme: 'light',
-    ...(headers && { extraHTTPHeaders: headers }),
-  });
-
-  // Set cookies if provided
-  if (cookies && cookies.length > 0) {
-    await context.addCookies(cookies.map(c => {
-      if (typeof c === 'string') {
-        const [name, ...rest] = c.split('=');
-        return { name, value: rest.join('='), url };
-      }
-      return c;
-    }));
-  }
-  const page = await context.newPage();
+  try {
+    const context = await browser.newContext({
+      viewport: { width, height },
+      colorScheme: 'light',
+      ...(headers && { extraHTTPHeaders: headers }),
+    });
 
-  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
-  // Wait for network to settle — but don't hang on sites with persistent connections
-  await page.waitForLoadState('networkidle').catch(() => {});
-  if (wait > 0) await page.waitForTimeout(wait);
-  await page.evaluate(() => document.fonts.ready).catch(() => {});
+    // Set cookies if provided
+    if (cookies && cookies.length > 0) {
+      await context.addCookies(cookies.map(c => {
+        if (typeof c === 'string') {
+          const [name, ...rest] = c.split('=');
+          return { name, value: rest.join('='), url };
+        }
+        return c;
+      }));
+    }
+    const page = await context.newPage();
 
-  const title = await page.title();
-  const lightData = await extractPageData(page);
+    // Start CSS coverage for css-health audit. Not supported on all targets —
+    // fail gracefully and set empty coverage if the API is unavailable.
+    let cssCoverageAvailable = true;
+    try {
+      await page.coverage.startCSSCoverage();
+    } catch { cssCoverageAvailable = false; }
+
+    await gotoWithRetry(page, url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    // Wait for network to settle — but don't hang on sites with persistent connections
+    await page.waitForLoadState('networkidle').catch(() => {});
+    if (wait > 0) await page.waitForTimeout(wait);
+    await page.evaluate(() => document.fonts.ready).catch(() => {});
+
+    // Capture CSS coverage after the page has settled.
+    let cssCoverage = [];
+    if (cssCoverageAvailable) {
+      try {
+        const raw = await page.coverage.stopCSSCoverage();
+        cssCoverage = raw.map(c => ({
+          url: c.url,
+          text: c.text,
+          totalBytes: (c.text || '').length,
+          ranges: c.ranges || [],
+        }));
+      } catch { cssCoverage = []; }
+    }
 
-  // Component screenshots
-  let componentScreenshots = {};
-  if (screenshots && outDir) {
-    componentScreenshots = await captureComponentScreenshots(page, outDir);
-  }
+    const title = await page.title();
+    const lightData = await extractPageData(page, ignore);
+    lightData.cssCoverage = cssCoverage;
 
-  // Multi-page crawl: discover internal links and extract from them
-  let additionalPages = [];
-  if (depth > 0) {
-    const internalLinks = await discoverInternalLinks(page, url, depth);
-    for (const link of internalLinks) {
-      try {
-        await page.goto(link, { waitUntil: 'domcontentloaded', timeout: 20000 });
-        await page.waitForLoadState('networkidle').catch(() => {});
-        await page.evaluate(() => document.fonts.ready).catch(() => {});
-        const pageData = await extractPageData(page);
-        additionalPages.push({ url: link, data: pageData });
-      } catch { /* skip failed pages */ }
+    // Component screenshots
+    let componentScreenshots = {};
+    if (screenshots && outDir) {
+      componentScreenshots = await captureComponentScreenshots(page, outDir);
     }
-  }
 
-  // Dark mode extraction
-  let darkData = null;
-  if (dark) {
-    await context.close();
-    const darkContext = await browser.newContext({
-      viewport: { width, height },
-      colorScheme: 'dark',
-    });
-    const darkPage = await darkContext.newPage();
-    await darkPage.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
-    await darkPage.waitForLoadState('networkidle').catch(() => {});
-    await darkPage.evaluate(() => document.fonts.ready).catch(() => {});
-    darkData = await extractPageData(darkPage);
-    await darkContext.close();
-  } else {
-    await context.close();
-  }
+    // Multi-page crawl: discover internal links and extract from them
+    let additionalPages = [];
+    if (depth > 0) {
+      const internalLinks = await discoverInternalLinks(page, url, depth);
+      for (const link of internalLinks) {
+        try {
+          await gotoWithRetry(page, link, { waitUntil: 'domcontentloaded', timeout: 20000 });
+          await page.waitForLoadState('networkidle').catch(() => {});
+          await page.evaluate(() => document.fonts.ready).catch(() => {});
+          const pageData = await extractPageData(page);
+          additionalPages.push({ url: link, data: pageData });
+        } catch { /* skip failed pages */ }
+      }
+    }
 
-  await browser.close();
+    // Dark mode extraction
+    let darkData = null;
+    if (dark) {
+      await context.close();
+      const darkContext = await browser.newContext({
+        viewport: { width, height },
+        colorScheme: 'dark',
+      });
+      const darkPage = await darkContext.newPage();
+      await gotoWithRetry(darkPage, url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      await darkPage.waitForLoadState('networkidle').catch(() => {});
+      await darkPage.evaluate(() => document.fonts.ready).catch(() => {});
+      darkData = await extractPageData(darkPage);
+      await darkContext.close();
+    } else {
+      await context.close();
+    }
 
-  // Merge additional page data into light data
-  if (additionalPages.length > 0) {
-    lightData.computedStyles = mergeStyles(lightData.computedStyles, additionalPages);
-    for (const ap of additionalPages) {
-      Object.assign(lightData.cssVariables, ap.data.cssVariables);
-      lightData.mediaQueries.push(...ap.data.mediaQueries);
-      lightData.keyframes.push(...ap.data.keyframes);
+    // Merge additional page data into light data
+    if (additionalPages.length > 0) {
+      lightData.computedStyles = mergeStyles(lightData.computedStyles, additionalPages);
+      for (const ap of additionalPages) {
+        Object.assign(lightData.cssVariables, ap.data.cssVariables);
+        lightData.mediaQueries.push(...ap.data.mediaQueries);
+        lightData.keyframes.push(...ap.data.keyframes);
+      }
+      // Deduplicate media queries and keyframes
+      lightData.mediaQueries = [...new Set(lightData.mediaQueries)];
+      const seenKf = new Set();
+      lightData.keyframes = lightData.keyframes.filter(kf => {
+        if (seenKf.has(kf.name)) return false;
+        seenKf.add(kf.name);
+        return true;
+      });
     }
-    // Deduplicate media queries and keyframes
-    lightData.mediaQueries = [...new Set(lightData.mediaQueries)];
-    const seenKf = new Set();
-    lightData.keyframes = lightData.keyframes.filter(kf => {
-      if (seenKf.has(kf.name)) return false;
-      seenKf.add(kf.name);
-      return true;
-    });
-  }
 
-  return {
-    url, title,
-    light: lightData,
-    dark: darkData,
-    pagesAnalyzed: 1 + additionalPages.length,
-    componentScreenshots,
-  };
+    return {
+      url, title,
+      light: lightData,
+      dark: darkData,
+      pagesAnalyzed: 1 + additionalPages.length,
+      componentScreenshots,
+    };
+  } finally {
+    await browser.close();
+  }
 }
 
 function mergeStyles(primary, additionalPages) {
@@ -174,19 +210,39 @@ export async function captureComponentScreenshots(page, outDir) {
   return result;
 }
 
-async function extractPageData(page) {
-  return page.evaluate((maxElements) => {
+async function extractPageData(page, ignoreSelectors) {
+  const data = await page.evaluate(({ maxElements, ignoreSelectors }) => {
+    // Remove ignored elements before extraction
+    if (ignoreSelectors && ignoreSelectors.length > 0) {
+      for (const sel of ignoreSelectors) {
+        try {
+          for (const el of document.querySelectorAll(sel)) {
+            el.remove();
+          }
+        } catch { /* invalid selector */ }
+      }
+    }
+
     const results = {
       computedStyles: [],
       cssVariables: {},
       mediaQueries: [],
       keyframes: [],
+      crossOriginSheets: [],
     };
 
-    const allElements = document.querySelectorAll('*');
-    const elements = allElements.length > maxElements
-      ? Array.from(allElements).slice(0, maxElements)
-      : Array.from(allElements);
+    // Collect elements including shadow DOM contents
+    function collectElements(root, collected) {
+      for (const el of root.querySelectorAll('*')) {
+        if (collected.length >= maxElements) break;
+        collected.push(el);
+        if (el.shadowRoot) {
+          collectElements(el.shadowRoot, collected);
+        }
+      }
+      return collected;
+    }
+    const elements = collectElements(document, []);
 
     for (const el of elements) {
       const cs = getComputedStyle(el);
@@ -217,7 +273,10 @@ async function extractPageData(page) {
         marginLeft: cs.marginLeft,
         gap: cs.gap,
         borderRadius: cs.borderRadius,
+        borderWidth: cs.borderWidth,
+        borderStyle: cs.borderStyle,
         boxShadow: cs.boxShadow,
+        textShadow: cs.textShadow,
         zIndex: cs.zIndex,
         transition: cs.transition,
         animation: cs.animation,
@@ -248,7 +307,7 @@ async function extractPageData(page) {
               }
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { if (sheet.href) results.crossOriginSheets.push(sheet.href); }
       }
     } catch { /* no access */ }
 
@@ -268,7 +327,7 @@ async function extractPageData(page) {
               results.mediaQueries.push(rule.conditionText || rule.media.mediaText);
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { /* cross-origin — already tracked */ }
       }
     } catch { /* no access */ }
 
@@ -285,10 +344,104 @@ async function extractPageData(page) {
               results.keyframes.push({ name: rule.name, steps });
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { /* cross-origin — already tracked */ }
       }
     } catch { /* no access */ }
 
+    // Component clusters (v7): per-element features for similarity-based grouping.
+    function colorToChannels(str) {
+      if (!str) return [0, 0, 0, 0];
+      const m = String(str).match(/rgba?\(([^)]+)\)/i);
+      if (!m) return [0, 0, 0, 0];
+      const parts = m[1].split(',').map(s => parseFloat(s));
+      return [parts[0] || 0, parts[1] || 0, parts[2] || 0, parts[3] === undefined ? 1 : parts[3]];
+    }
+    function structuralHashOf(el) {
+      const parts = [el.tagName.toLowerCase()];
+      for (const c of el.children) {
+        parts.push(c.tagName.toLowerCase());
+      }
+      return parts.slice(0, 6).join('>');
+    }
+    const candidateSelector = 'button, a[role="button"], .btn, [class*="button"], input[type="text"], input[type="email"], input[type="search"], textarea, [class*="card"]';
+    results.componentCandidates = [];
+    const seenCandidates = new Set();
+    for (const el of document.querySelectorAll(candidateSelector)) {
+      if (results.componentCandidates.length >= 300) break;
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 4 || rect.height < 4) continue;
+      if (seenCandidates.has(el)) continue;
+      seenCandidates.add(el);
+      const cs = getComputedStyle(el);
+      const tag = el.tagName.toLowerCase();
+      let kind = 'other';
+      const cls = typeof el.className === 'string' ? el.className.toLowerCase() : '';
+      if (tag === 'button' || el.getAttribute('role') === 'button' || /\bbtn\b|button/.test(cls)) kind = 'button';
+      else if (tag === 'input' || tag === 'textarea') kind = 'input';
+      else if (tag === 'a') kind = 'link';
+      else if (/card/.test(cls)) kind = 'card';
+      const bg = colorToChannels(cs.backgroundColor);
+      const fg = colorToChannels(cs.color);
+      const styleVector = [
+        parseFloat(cs.paddingTop) || 0,
+        parseFloat(cs.paddingRight) || 0,
+        parseFloat(cs.paddingBottom) || 0,
+        parseFloat(cs.paddingLeft) || 0,
+        bg[0], bg[1], bg[2], bg[3] * 255,
+        fg[0], fg[1], fg[2], fg[3] * 255,
+        parseFloat(cs.borderTopLeftRadius) || 0,
+        parseFloat(cs.borderWidth) || 0,
+        parseFloat(cs.fontSize) || 0,
+        parseFloat(cs.fontWeight) || 0,
+      ];
+      results.componentCandidates.push({
+        kind,
+        structuralHash: structuralHashOf(el),
+        styleVector,
+        css: {
+          background: cs.backgroundColor,
+          color: cs.color,
+          padding: `${cs.paddingTop} ${cs.paddingRight} ${cs.paddingBottom} ${cs.paddingLeft}`,
+          borderRadius: cs.borderTopLeftRadius,
+          border: `${cs.borderWidth} ${cs.borderStyle} ${cs.borderColor}`,
+          fontSize: cs.fontSize,
+          fontWeight: cs.fontWeight,
+        },
+      });
+    }
+
+    // Semantic regions (v7): landmark + heading + bounds data for classifier.
+    results.sections = Array.from(document.querySelectorAll(
+      'header, nav, main, section, footer, aside, [role="banner"], [role="contentinfo"], [role="complementary"], [role="navigation"]'
+    )).slice(0, 100).map(el => {
+      const r = el.getBoundingClientRect();
+      return {
+        tag: el.tagName.toLowerCase(),
+        role: el.getAttribute('role') || '',
+        className: typeof el.className === 'string' ? el.className : '',
+        id: el.id || '',
+        text: (el.innerText || '').slice(0, 2000),
+        headings: Array.from(el.querySelectorAll('h1,h2,h3')).slice(0, 5).map(h => h.innerText || ''),
+        buttonCount: el.querySelectorAll('button, a[role="button"], .btn, [class*="button"]').length,
+        cardCount: el.querySelectorAll('article, li, [class*="card"], [class*="item"]').length,
+        bounds: { x: r.x, y: r.y, w: r.width, h: r.height },
+      };
+    });
+
+    // Stack fingerprint signals (v7)
+    results.stack = {
+      scripts: Array.from(document.scripts).map(s => s.src).filter(Boolean).slice(0, 50),
+      metas: Array.from(document.querySelectorAll('meta[name],meta[property]'))
+        .map(m => ({ name: m.name || m.getAttribute('property'), content: m.content }))
+        .slice(0, 50),
+      classNameSample: Array.from(document.querySelectorAll('[class]'))
+        .slice(0, 500)
+        .map(e => typeof e.className === 'string' ? e.className : '')
+        .filter(Boolean),
+      windowGlobals: ['React', 'Vue', '__NEXT_DATA__', '__NUXT__', '___gatsby', '_remixContext', 'Shopify', 'wp']
+        .filter(k => typeof window[k] !== 'undefined'),
+    };
+
     // SVG icons
     results.icons = [];
     for (const svg of document.querySelectorAll('svg')) {
@@ -321,7 +474,7 @@ async function extractPageData(page) {
               });
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { /* cross-origin — already tracked */ }
       }
     } catch {}
     for (const link of document.querySelectorAll('link[href*="fonts.googleapis.com"]')) {
@@ -353,5 +506,54 @@ async function extractPageData(page) {
     }
 
     return results;
-  }, MAX_ELEMENTS);
+  }, { maxElements: MAX_ELEMENTS, ignoreSelectors: ignoreSelectors || [] });
+
+  // Fetch and parse cross-origin stylesheets
+  if (data.crossOriginSheets && data.crossOriginSheets.length > 0) {
+    const seen = new Set();
+    for (const href of data.crossOriginSheets) {
+      if (seen.has(href)) continue;
+      seen.add(href);
+      try {
+        const cssText = await page.evaluate(async (url) => {
+          const res = await fetch(url, { mode: 'cors' });
+          return res.text();
+        }, href);
+        parseCrossOriginCSS(cssText, data);
+      } catch { /* fetch failed too */ }
+    }
+  }
+  delete data.crossOriginSheets;
+
+  return data;
+}
+
+function parseCrossOriginCSS(cssText, data) {
+  // Media queries
+  for (const m of cssText.matchAll(/@media\s*([^{]+)\{/g)) {
+    data.mediaQueries.push(m[1].trim());
+  }
+  // Keyframes
+  for (const m of cssText.matchAll(/@keyframes\s+([\w-]+)\s*\{([\s\S]*?)\n\}/g)) {
+    const steps = [];
+    for (const s of m[2].matchAll(/([\d%,\s]+|from|to)\s*\{([^}]*)\}/g)) {
+      steps.push({ offset: s[1].trim(), style: s[2].trim() });
+    }
+    if (steps.length > 0) data.keyframes.push({ name: m[1], steps });
+  }
+  // :root variables
+  for (const rootBlock of cssText.matchAll(/:root\s*\{([^}]+)\}/g)) {
+    for (const v of rootBlock[1].matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+      if (!data.cssVariables[v[1]]) data.cssVariables[v[1]] = v[2].trim();
+    }
+  }
+  // @font-face
+  for (const m of cssText.matchAll(/@font-face\s*\{([^}]+)\}/g)) {
+    const block = m[1];
+    const family = block.match(/font-family\s*:\s*['"]?([^'";]+)/)?.[1]?.trim();
+    const style = block.match(/font-style\s*:\s*([^;]+)/)?.[1]?.trim() || 'normal';
+    const weight = block.match(/font-weight\s*:\s*([^;]+)/)?.[1]?.trim() || '400';
+    const src = block.match(/src\s*:\s*([^;]+)/)?.[1]?.trim() || '';
+    if (family) data.fontData.fontFaces.push({ family, style, weight, src });
+  }
 }

package/src/extractors/a11y-remediation.js

@@ -0,0 +1,47 @@
+// A11y remediation: for each failing fg/bg pair, propose the nearest palette
+// color that passes the requested WCAG rule.
+
+function toRgb(hex) {
+  const h = String(hex || '').replace('#', '');
+  const n = h.length === 3 ? h.split('').map(x => x + x).join('') : h;
+  const i = parseInt(n, 16);
+  if (Number.isNaN(i)) return [0, 0, 0];
+  return [(i >> 16) & 255, (i >> 8) & 255, i & 255];
+}
+
+function relLum([r, g, b]) {
+  const f = c => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+
+function contrast(a, b) {
+  const la = relLum(toRgb(a));
+  const lb = relLum(toRgb(b));
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+
+const THRESHOLDS = { 'AA-normal': 4.5, 'AA-large': 3, 'AAA-normal': 7, 'AAA-large': 4.5 };
+
+export function remediateFailingPairs(failing = [], palette = []) {
+  return failing.map(p => {
+    const target = THRESHOLDS[p.rule] || 4.5;
+    let best = null;
+    for (const candidate of palette) {
+      if (!candidate) continue;
+      const newRatio = contrast(candidate, p.bg);
+      if (newRatio >= target && (!best || newRatio > best.newRatio)) {
+        best = {
+          replace: 'fg',
+          color: candidate,
+          newRatio: Math.round(newRatio * 100) / 100,
+        };
+      }
+    }
+    return { ...p, suggestion: best };
+  });
+}
+
+export { contrast as _contrast };

package/src/extractors/animations.js

@@ -9,11 +9,11 @@ export function extractAnimations(computedStyles, keyframes) {
     if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
       transitionSet.add(el.transition);
 
-      // Extract easing and duration
-      const dMatch = el.transition.match(/([\d.]+m?s)/g);
+      // Extract duration — only match standalone duration values, not inside functions
+      const dMatch = el.transition.match(/(?<![(\d])(\d+\.?\d*m?s)(?![)\w])/g);
       if (dMatch) dMatch.forEach(d => durationSet.add(d));
 
-      const eMatch = el.transition.match(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\))/g);
+      const eMatch = el.transition.match(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*\))/g);
       if (eMatch) eMatch.forEach(e => easingSet.add(e));
 
       // Extract which properties are animated
@@ -26,10 +26,18 @@ export function extractAnimations(computedStyles, keyframes) {
       }
     }
 
-    // Capture animation usage
+    // Capture animation usage with full shorthand parsing
     if (el.animation && el.animation !== 'none 0s ease 0s 1 normal none running' && el.animation !== 'none') {
       const nameMatch = el.animation.match(/^([\w-]+)/);
       if (nameMatch && nameMatch[1] !== 'none') animationNames.add(nameMatch[1]);
+
+      // Parse delay, iteration-count, fill-mode from shorthand
+      const delayMatch = el.animation.match(/(?<!\d)(\d+\.?\d*m?s)\s+(\d+\.?\d*m?s)/);
+      if (delayMatch) durationSet.add(delayMatch[1]); // duration is first, delay is second
+
+      const iterMatch = el.animation.match(/\b(infinite|\d+)\b(?=\s+(normal|reverse|alternate)|\s+none|\s+running|\s+paused|$)/);
+      const fillMatch = el.animation.match(/\b(none|forwards|backwards|both)\b/);
+      // These are collected but don't need separate sets — they enrich keyframe data below
     }
   }
 
@@ -53,9 +61,33 @@ export function extractAnimations(computedStyles, keyframes) {
     .sort((a, b) => b[1] - a[1])
     .map(([prop, count]) => ({ property: prop, count }));
 
+  // Classify timing patterns for each easing
+  const classifiedEasings = [...easingSet].map(e => {
+    let pattern = 'custom';
+    if (e === 'linear') pattern = 'linear';
+    else if (e === 'ease-in') pattern = 'ease-in';
+    else if (e === 'ease-out') pattern = 'ease-out';
+    else if (e === 'ease-in-out' || e === 'ease') pattern = 'ease-in-out';
+    else {
+      const cbMatch = e.match(/cubic-bezier\(\s*([\d.]+)\s*,\s*([-\d.]+)\s*,\s*([\d.]+)\s*,\s*([-\d.]+)\s*\)/);
+      if (cbMatch) {
+        const [, , y1, , y2] = cbMatch.map(Number);
+        if (y1 > 1 || y1 < 0 || y2 > 1 || y2 < 0) pattern = 'spring-like';
+      }
+    }
+    return { value: e, pattern };
+  });
+
+  // Detect bounce keyframes (return to start value)
+  for (const kf of enhancedKeyframes) {
+    const firstStep = kf.steps.find(s => s.offset === '0%' || s.offset === 'from');
+    const lastStep = kf.steps.find(s => s.offset === '100%' || s.offset === 'to');
+    kf.isBounce = !!(firstStep && lastStep && firstStep.style === lastStep.style && kf.steps.length > 2);
+  }
+
   return {
     transitions: [...transitionSet],
-    easings: [...easingSet],
+    easings: classifiedEasings,
     durations: [...durationSet],
     keyframes: enhancedKeyframes,
     transitionProperties: sortedProps,

package/src/extractors/borders.js

@@ -1,14 +1,46 @@
 import { parseCSSValue, clusterValues } from '../utils.js';
 
+function parseBorderRadius(raw) {
+  if (!raw || raw === '0px') return [];
+  // Handle slash-separated (x/y) syntax — take the x part
+  const parts = raw.split('/')[0].trim().split(/\s+/);
+  const values = [];
+  for (const p of parts) {
+    const v = parseCSSValue(p);
+    if (v && v.value > 0) values.push(Math.round(v.value));
+  }
+  return values;
+}
+
 export function extractBorders(computedStyles) {
   const radiiSet = new Map(); // value -> count
+  const widthSet = new Set();
+  const styleSet = new Set();
 
   for (const el of computedStyles) {
     if (el.borderRadius && el.borderRadius !== '0px') {
-      const val = parseCSSValue(el.borderRadius.split(' ')[0]);
-      if (val && val.value > 0) {
-        const px = Math.round(val.value);
-        radiiSet.set(px, (radiiSet.get(px) || 0) + 1);
+      const values = parseBorderRadius(el.borderRadius);
+      if (values.length > 0) {
+        // Use the max value from the shorthand as the representative
+        const representative = Math.max(...values);
+        radiiSet.set(representative, (radiiSet.get(representative) || 0) + 1);
+      }
+    }
+
+    // Collect border widths
+    if (el.borderWidth) {
+      const parts = el.borderWidth.split(/\s+/);
+      for (const p of parts) {
+        const v = parseCSSValue(p);
+        if (v && v.value > 0) widthSet.add(Math.round(v.value));
+      }
+    }
+
+    // Collect border styles
+    if (el.borderStyle) {
+      const parts = el.borderStyle.split(/\s+/);
+      for (const p of parts) {
+        if (p && p !== 'none' && p !== 'initial') styleSet.add(p);
       }
     }
   }
@@ -27,5 +59,8 @@ export function extractBorders(computedStyles) {
     return { value: v, label, count: radiiSet.get(v) || 0 };
   });
 
-  return { radii };
+  const widths = [...widthSet].sort((a, b) => a - b);
+  const styles = [...styleSet].sort();
+
+  return { radii, widths, styles };
 }