designlang 5.0.0 → 6.0.0

package/src/crawler.js

@@ -4,107 +4,121 @@ 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);
+    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(() => {});
 
-  // Component screenshots
-  let componentScreenshots = {};
-  if (screenshots && outDir) {
-    componentScreenshots = await captureComponentScreenshots(page, outDir);
-  }
+    const title = await page.title();
+    const lightData = await extractPageData(page, ignore);
 
-  // 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 +188,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 +251,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 +285,7 @@ async function extractPageData(page) {
               }
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { if (sheet.href) results.crossOriginSheets.push(sheet.href); }
       }
     } catch { /* no access */ }
 
@@ -268,7 +305,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,7 +322,7 @@ async function extractPageData(page) {
               results.keyframes.push({ name: rule.name, steps });
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { /* cross-origin — already tracked */ }
       }
     } catch { /* no access */ }
 
@@ -321,7 +358,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 +390,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/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 };
 }

package/src/extractors/components.js

@@ -1,15 +1,33 @@
 export function extractComponents(computedStyles) {
   const components = {};
 
-  // Buttons
+  // Buttons — with variant detection
   const buttons = computedStyles.filter(el =>
     el.tag === 'button' || el.role === 'button' ||
     (el.tag === 'a' && /btn|button/i.test(el.classList))
   );
   if (buttons.length > 0) {
+    // Group by background color to detect variants
+    const bgGroups = new Map();
+    for (const btn of buttons) {
+      const bg = btn.backgroundColor || 'transparent';
+      if (!bgGroups.has(bg)) bgGroups.set(bg, []);
+      bgGroups.get(bg).push(btn);
+    }
+    const variants = [...bgGroups.entries()]
+      .sort((a, b) => b[1].length - a[1].length)
+      .map(([bg, group], i) => {
+        let variant = 'default';
+        if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') variant = 'ghost';
+        else if (i === 0) variant = 'primary';
+        else if (i === 1) variant = 'secondary';
+        else variant = `variant-${i + 1}`;
+        return { variant, backgroundColor: bg, count: group.length, style: mostCommonStyle(group, ['color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']) };
+      });
     components.buttons = {
       count: buttons.length,
       baseStyle: mostCommonStyle(buttons, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']),
+      variants,
     };
   }
 
@@ -131,6 +149,64 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // Tabs
+  const tabs = computedStyles.filter(el =>
+    el.role === 'tab' || /\btab\b/i.test(el.classList)
+  );
+  if (tabs.length > 0) {
+    components.tabs = {
+      count: tabs.length,
+      baseStyle: mostCommonStyle(tabs, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderColor', 'borderRadius']),
+    };
+  }
+
+  // Accordions
+  const accordions = computedStyles.filter(el =>
+    /accordion/i.test(el.classList) ||
+    (el.tag === 'summary') ||
+    (el.tag === 'details')
+  );
+  if (accordions.length > 0) {
+    components.accordions = {
+      count: accordions.length,
+      baseStyle: mostCommonStyle(accordions, ['backgroundColor', 'color', 'fontSize', 'paddingTop', 'paddingRight', 'borderColor']),
+    };
+  }
+
+  // Tooltips
+  const tooltips = computedStyles.filter(el =>
+    el.role === 'tooltip' || /tooltip/i.test(el.classList)
+  );
+  if (tooltips.length > 0) {
+    components.tooltips = {
+      count: tooltips.length,
+      baseStyle: mostCommonStyle(tooltips, ['backgroundColor', 'color', 'fontSize', 'borderRadius', 'paddingTop', 'paddingRight', 'boxShadow']),
+    };
+  }
+
+  // Progress bars
+  const progressBars = computedStyles.filter(el =>
+    el.tag === 'progress' || el.role === 'progressbar' || /progress/i.test(el.classList)
+  );
+  if (progressBars.length > 0) {
+    components.progressBars = {
+      count: progressBars.length,
+      baseStyle: mostCommonStyle(progressBars, ['backgroundColor', 'color', 'borderRadius', 'fontSize']),
+    };
+  }
+
+  // Switches / Toggles
+  const switches = computedStyles.filter(el =>
+    el.role === 'switch' ||
+    /switch|toggle/i.test(el.classList)
+  );
+  if (switches.length > 0) {
+    components.switches = {
+      count: switches.length,
+      baseStyle: mostCommonStyle(switches, ['backgroundColor', 'borderRadius', 'borderColor']),
+    };
+  }
+
   // Generate CSS snippets for each component
   for (const [type, data] of Object.entries(components)) {
     if (data.baseStyle) {

package/src/extractors/gradients.js

@@ -6,7 +6,9 @@ export function extractGradients(styles) {
     const bg = el.backgroundImage;
     if (!bg || !bg.includes('gradient')) continue;
     const rawGradients = splitGradients(bg);
-    for (const raw of rawGradients) {
+    for (let raw of rawGradients) {
+      // Normalize vendor prefixes
+      raw = raw.replace(/-(webkit|moz)-/g, '');
       if (seen.has(raw)) continue;
       seen.add(raw);
       gradients.push(parseGradient(raw));
@@ -58,15 +60,33 @@ function parseGradient(raw) {
   let direction = null;
   let stopArgs = args;
   const first = args[0] || '';
-  if (/^(to |from |\d+deg|at )/.test(first) || /^(circle|ellipse)/.test(first)) {
+  if (/^(to |from |\d+(\.\d+)?(deg|grad|rad|turn)|at )/.test(first) || /^(circle|ellipse)/.test(first)) {
     direction = first;
     stopArgs = args.slice(1);
   }
 
   const stops = stopArgs.map(s => {
-    const posMatch = s.match(/([\d.]+%?)$/);
-    const position = posMatch ? posMatch[1] : null;
-    const color = position ? s.slice(0, posMatch.index).trim() : s.trim();
+    // Match position only if it's outside parentheses (not inside rgb/hsl)
+    // Position is a percentage or length at the end, after the color value
+    const trimmed = s.trim();
+    // Check if trailing value is outside any parens
+    const lastParen = trimmed.lastIndexOf(')');
+    const trailing = lastParen >= 0 ? trimmed.slice(lastParen + 1).trim() : trimmed;
+    const posMatch = trailing.match(/([\d.]+(%|px|em|rem|vw|vh)?)$/);
+    let position = null;
+    let color = trimmed;
+    if (posMatch && posMatch[0] !== trimmed) {
+      // Position found after the color function closes
+      position = posMatch[0];
+      color = trimmed.slice(0, trimmed.length - trailing.length + trailing.indexOf(posMatch[0])).trim();
+    } else if (lastParen < 0) {
+      // No parens — simple color like "red 50%"
+      const simplePos = trimmed.match(/\s+([\d.]+(%|px|em|rem|vw|vh)?)$/);
+      if (simplePos) {
+        position = simplePos[1];
+        color = trimmed.slice(0, simplePos.index).trim();
+      }
+    }
     return { color, position };
   });