designlang 4.0.1 → 6.0.0

package/src/apply.js

@@ -0,0 +1,65 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { extractDesignLanguage } from './index.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { formatShadcnTheme } from './formatters/theme.js';
+
+export async function applyDesign(url, options = {}) {
+  const { dir = '.', framework } = options;
+  const design = await extractDesignLanguage(url, options);
+  const detected = framework || detectFramework(dir);
+  const applied = [];
+
+  if (detected === 'tailwind' || detected === 'auto') {
+    const twPath = findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs']);
+    if (twPath) {
+      writeFileSync(twPath, formatTailwind(design), 'utf-8');
+      applied.push({ file: twPath, type: 'tailwind' });
+    }
+  }
+
+  if (detected === 'shadcn' || detected === 'auto') {
+    const globalsPath = findFile(dir, [
+      'app/globals.css', 'src/app/globals.css', 'styles/globals.css',
+      'src/styles/globals.css', 'src/index.css', 'app/global.css',
+    ]);
+    if (globalsPath) {
+      const existing = readFileSync(globalsPath, 'utf-8');
+      const shadcnVars = formatShadcnTheme(design);
+      // Replace existing @layer base block or append
+      const layerRegex = /@layer\s+base\s*\{[\s\S]*?\n\}/;
+      const updated = layerRegex.test(existing)
+        ? existing.replace(layerRegex, shadcnVars)
+        : existing + '\n\n' + shadcnVars;
+      writeFileSync(globalsPath, updated, 'utf-8');
+      applied.push({ file: globalsPath, type: 'shadcn' });
+    }
+  }
+
+  if (detected === 'css' || detected === 'auto') {
+    const cssVarsContent = formatCssVars(design);
+    const cssPath = join(dir, 'design-variables.css');
+    writeFileSync(cssPath, cssVarsContent, 'utf-8');
+    applied.push({ file: cssPath, type: 'css-variables' });
+  }
+
+  return { design, applied, framework: detected };
+}
+
+function detectFramework(dir) {
+  if (findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs'])) {
+    // Check for shadcn
+    if (findFile(dir, ['components.json'])) return 'shadcn';
+    return 'tailwind';
+  }
+  return 'auto';
+}
+
+function findFile(dir, candidates) {
+  for (const c of candidates) {
+    const p = join(dir, c);
+    if (existsSync(p)) return p;
+  }
+  return null;
+}

package/src/config.js

@@ -0,0 +1,36 @@
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+const CONFIG_FILES = ['.designlangrc', 'designlang.config.json', '.designlangrc.json'];
+
+export function loadConfig(dir = process.cwd()) {
+  for (const name of CONFIG_FILES) {
+    const path = join(dir, name);
+    if (existsSync(path)) {
+      try {
+        return JSON.parse(readFileSync(path, 'utf-8'));
+      } catch { return {}; }
+    }
+  }
+  return {};
+}
+
+export function mergeConfig(cliOpts, config) {
+  // CLI flags take precedence over config file
+  return {
+    ignore: cliOpts.ignore || config.ignore || [],
+    width: cliOpts.width || config.width || 1280,
+    height: cliOpts.height || config.height || 800,
+    wait: cliOpts.wait || config.wait || 0,
+    dark: cliOpts.dark || config.dark || false,
+    depth: cliOpts.depth || config.depth || 0,
+    screenshots: cliOpts.screenshots || config.screenshots || false,
+    framework: cliOpts.framework || config.framework,
+    responsive: cliOpts.responsive || config.responsive || false,
+    interactions: cliOpts.interactions || config.interactions || false,
+    full: cliOpts.full || config.full || false,
+    cookie: cliOpts.cookie || config.cookies,
+    header: cliOpts.header || config.headers,
+    out: cliOpts.out || config.out || './design-extract-output',
+  };
+}

package/src/crawler.js

@@ -4,91 +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 = '' } = 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 });
-  const context = await browser.newContext({
-    viewport: { width, height },
-    colorScheme: 'light',
+  const browser = await chromium.launch({
+    headless: true,
+    ...(executablePath && { executablePath }),
+    ...(browserArgs && { args: browserArgs }),
   });
-  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) {
@@ -158,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);
@@ -201,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,
@@ -232,7 +285,7 @@ async function extractPageData(page) {
               }
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { if (sheet.href) results.crossOriginSheets.push(sheet.href); }
       }
     } catch { /* no access */ }
 
@@ -252,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 */ }
 
@@ -269,10 +322,122 @@ async function extractPageData(page) {
               results.keyframes.push({ name: rule.name, steps });
             }
           }
-        } catch { /* cross-origin */ }
+        } catch { /* cross-origin — already tracked */ }
       }
     } catch { /* no access */ }
 
+    // SVG icons
+    results.icons = [];
+    for (const svg of document.querySelectorAll('svg')) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.width > 4 && rect.width < 200 && rect.height > 4 && rect.height < 200) {
+        results.icons.push({
+          svg: svg.outerHTML,
+          width: rect.width,
+          height: rect.height,
+          viewBox: svg.getAttribute('viewBox') || '',
+          classList: Array.from(svg.classList).join(' '),
+          fill: svg.getAttribute('fill') || getComputedStyle(svg).fill || '',
+          stroke: svg.getAttribute('stroke') || getComputedStyle(svg).stroke || '',
+        });
+      }
+    }
+
+    // Font data
+    results.fontData = { fontFaces: [], googleFontsLinks: [], documentFonts: [] };
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSFontFaceRule) {
+              results.fontData.fontFaces.push({
+                family: rule.style.getPropertyValue('font-family').replace(/['"]/g, ''),
+                style: rule.style.getPropertyValue('font-style') || 'normal',
+                weight: rule.style.getPropertyValue('font-weight') || '400',
+                src: rule.style.getPropertyValue('src') || '',
+              });
+            }
+          }
+        } catch { /* cross-origin — already tracked */ }
+      }
+    } catch {}
+    for (const link of document.querySelectorAll('link[href*="fonts.googleapis.com"]')) {
+      results.fontData.googleFontsLinks.push(link.href);
+    }
+    for (const font of document.fonts) {
+      results.fontData.documentFonts.push({ family: font.family.replace(/['"]/g, ''), style: font.style, weight: font.weight, status: font.status });
+    }
+
+    // Image data
+    results.images = [];
+    for (const img of document.querySelectorAll('img, picture img, [role="img"]')) {
+      const rect = img.getBoundingClientRect();
+      if (rect.width < 5 || rect.height < 5) continue;
+      const cs = getComputedStyle(img);
+      results.images.push({
+        tag: img.tagName.toLowerCase(),
+        src: img.src || '',
+        width: rect.width,
+        height: rect.height,
+        objectFit: cs.objectFit,
+        objectPosition: cs.objectPosition,
+        borderRadius: cs.borderRadius,
+        filter: cs.filter,
+        opacity: cs.opacity,
+        aspectRatio: cs.aspectRatio,
+        classList: Array.from(img.classList).join(' '),
+      });
+    }
+
     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/darkdiff.js

@@ -0,0 +1,65 @@
+export function diffDarkMode(lightDesign, darkDesign) {
+  const changes = [];
+
+  // Color changes
+  const lightColors = new Set(lightDesign.colors.all.map(c => c.hex));
+  const darkColors = new Set(darkDesign.colors.all.map(c => c.hex));
+
+  const addedInDark = darkDesign.colors.all.filter(c => !lightColors.has(c.hex));
+  const removedInDark = lightDesign.colors.all.filter(c => !darkColors.has(c.hex));
+
+  if (addedInDark.length > 0 || removedInDark.length > 0) {
+    changes.push({
+      category: 'colors',
+      light: lightDesign.colors.all.length,
+      dark: darkDesign.colors.all.length,
+      added: addedInDark.map(c => c.hex),
+      removed: removedInDark.map(c => c.hex),
+    });
+  }
+
+  // CSS variable changes
+  const lightVars = flattenVars(lightDesign.variables);
+  const darkVars = flattenVars(darkDesign.variables);
+  const varChanges = [];
+
+  for (const [key, lightVal] of Object.entries(lightVars)) {
+    const darkVal = darkVars[key];
+    if (darkVal && darkVal !== lightVal) {
+      varChanges.push({ name: key, light: lightVal, dark: darkVal });
+    }
+  }
+  const newDarkVars = Object.entries(darkVars)
+    .filter(([key]) => !lightVars[key])
+    .map(([name, dark]) => ({ name, light: null, dark }));
+
+  if (varChanges.length > 0 || newDarkVars.length > 0) {
+    changes.push({
+      category: 'cssVariables',
+      changed: varChanges,
+      newInDark: newDarkVars,
+    });
+  }
+
+  return {
+    hasChanges: changes.length > 0,
+    changes,
+    summary: {
+      colorsChanged: (addedInDark.length + removedInDark.length) || 0,
+      variablesChanged: varChanges.length,
+      newDarkVariables: newDarkVars.length,
+    },
+  };
+}
+
+function flattenVars(variables) {
+  const flat = {};
+  for (const [, group] of Object.entries(variables)) {
+    if (typeof group === 'object') {
+      for (const [key, val] of Object.entries(group)) {
+        flat[key] = val;
+      }
+    }
+  }
+  return flat;
+}

package/src/extractors/animations.js

@@ -2,27 +2,95 @@ export function extractAnimations(computedStyles, keyframes) {
   const transitionSet = new Set();
   const easingSet = new Set();
   const durationSet = new Set();
+  const animationNames = new Set();
+  const transitionProperties = {};
 
   for (const el of computedStyles) {
     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
+      const parts = el.transition.split(',').map(s => s.trim());
+      for (const part of parts) {
+        const prop = part.split(/\s+/)[0];
+        if (prop && prop !== 'all') {
+          transitionProperties[prop] = (transitionProperties[prop] || 0) + 1;
+        }
+      }
+    }
+
+    // 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
+    }
+  }
+
+  // Enhanced keyframes with timing and properties changed
+  const enhancedKeyframes = keyframes.map(kf => {
+    const propertiesAnimated = new Set();
+    for (const step of kf.steps) {
+      const props = step.style.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
+      props.forEach(p => propertiesAnimated.add(p));
     }
+    return {
+      name: kf.name,
+      steps: kf.steps,
+      propertiesAnimated: [...propertiesAnimated],
+      isUsed: animationNames.has(kf.name),
+    };
+  });
+
+  // Sort transition properties by usage
+  const sortedProps = Object.entries(transitionProperties)
+    .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: keyframes.map(kf => ({
-      name: kf.name,
-      steps: kf.steps,
-    })),
+    keyframes: enhancedKeyframes,
+    transitionProperties: sortedProps,
+    animationNames: [...animationNames],
   };
 }