dembrandt 0.12.3 → 0.12.5

package/lib/extractors/breakpoints.js

@@ -249,3 +249,184 @@ export async function extractGradients(page) {
       .slice(0, 20);
   });
 }
+
+export async function extractMotion(page) {
+  // Phase 1: static pass — collect durations, easings, animations per semantic context
+  const staticMotion = await page.evaluate(() => {
+    function getContext(el) {
+      const tag = el.tagName.toLowerCase();
+      const role = el.getAttribute('role') || '';
+      const cls = (typeof el.className === 'string' ? el.className : '').toLowerCase();
+      const id = (el.id || '').toLowerCase();
+      const hint = cls + ' ' + id + ' ' + role;
+      if (tag === 'button' || role === 'button' || hint.includes('btn')) return 'button';
+      if (tag === 'a' || role === 'link') return 'link';
+      if (tag === 'nav' || role === 'navigation' || hint.includes('nav') || hint.includes('menu')) return 'nav';
+      if (hint.includes('modal') || hint.includes('dialog') || hint.includes('overlay') || hint.includes('drawer')) return 'modal';
+      if (hint.includes('card') || hint.includes('tile') || hint.includes('item')) return 'card';
+      if (hint.includes('hero') || hint.includes('banner') || hint.includes('header')) return 'hero';
+      if (hint.includes('tooltip') || hint.includes('popover') || hint.includes('dropdown')) return 'overlay';
+      if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'input';
+      if (hint.includes('image') || hint.includes('img') || hint.includes('media') || hint.includes('video')) return 'media';
+      return 'other';
+    }
+
+    function parseDurationMs(val) {
+      if (!val || val === '0s') return 0;
+      return val.endsWith('ms') ? parseFloat(val) : parseFloat(val) * 1000;
+    }
+
+    function classifyEasing(val) {
+      if (!val) return null;
+      if (val === 'linear') return 'linear';
+      if (val === 'ease') return 'ease';
+      if (val === 'ease-in') return 'ease-in';
+      if (val === 'ease-out') return 'ease-out';
+      if (val === 'ease-in-out') return 'ease-in-out';
+      // detect spring-like: high y1/y2 overshoot
+      const m = val.match(/cubic-bezier\(([\d.]+),\s*([\d.-]+),\s*([\d.]+),\s*([\d.-]+)\)/);
+      if (m) {
+        const y1 = parseFloat(m[2]), y2 = parseFloat(m[4]);
+        if (y1 < 0 || y1 > 1 || y2 < 0 || y2 > 1) return 'spring';
+        const x1 = parseFloat(m[1]);
+        if (x1 < 0.2) return 'ease-out'; // fast start
+        if (x1 > 0.6) return 'ease-in';  // slow start
+        return 'custom';
+      }
+      return 'custom';
+    }
+
+    // per-context motion profiles
+    const contexts = {};
+    const globalDurations = new Map();
+    const globalEasings = new Map();
+    const globalAnimations = new Map();
+
+    const els = document.querySelectorAll('*');
+    let checked = 0;
+    for (const el of els) {
+      if (checked++ > 3000) break;
+      if (el.offsetWidth === 0 && el.offsetHeight === 0) continue;
+      const s = getComputedStyle(el);
+
+      const rawDurations = (s.transitionDuration || '').split(',').map(v => v.trim()).filter(v => v && v !== '0s');
+      const rawEasings = (s.transitionTimingFunction || '').split(/,(?![^(]*\))/).map(v => v.trim()).filter(Boolean);
+      const rawProps = (s.transitionProperty || '').split(',').map(v => v.trim());
+      const animName = s.animationName;
+
+      if (rawDurations.length === 0 && (!animName || animName === 'none')) continue;
+
+      const ctx = getContext(el);
+
+      // global tallies
+      rawDurations.forEach(d => {
+        const ms = parseDurationMs(d);
+        if (ms <= 0) return;
+        const e = globalDurations.get(d) || { value: d, ms, count: 0 };
+        e.count++; globalDurations.set(d, e);
+      });
+      rawEasings.forEach(e => {
+        const entry = globalEasings.get(e) || { value: e, type: classifyEasing(e), count: 0 };
+        entry.count++; globalEasings.set(e, entry);
+      });
+
+      // per-context profile
+      if (ctx !== 'other' && rawDurations.length > 0) {
+        if (!contexts[ctx]) contexts[ctx] = { durations: new Map(), easings: new Map(), props: new Map(), count: 0 };
+        const cx = contexts[ctx];
+        cx.count++;
+        rawDurations.forEach(d => { const e = cx.durations.get(d) || { value: d, ms: parseDurationMs(d), count: 0 }; e.count++; cx.durations.set(d, e); });
+        rawEasings.forEach(e => { const entry = cx.easings.get(e) || { value: e, type: classifyEasing(e), count: 0 }; entry.count++; cx.easings.set(e, entry); });
+        rawProps.forEach(p => { if (p && p !== 'all' && p !== 'none') { const e = cx.props.get(p) || { value: p, count: 0 }; e.count++; cx.props.set(p, e); } });
+      }
+
+      // animations
+      if (animName && animName !== 'none') {
+        for (const name of animName.split(',').map(v => v.trim())) {
+          if (name === 'none') continue;
+          const e = globalAnimations.get(name) || { name, duration: s.animationDuration?.split(',')[0]?.trim(), easing: s.animationTimingFunction?.split(',')[0]?.trim(), count: 0, contexts: new Set() };
+          e.count++; e.contexts.add(ctx);
+          globalAnimations.set(name, e);
+        }
+      }
+    }
+
+    // serialize
+    const serializeCtx = (cx) => ({
+      count: cx.count,
+      durations: Array.from(cx.durations.values()).sort((a, b) => b.count - a.count).slice(0, 3).map(d => d.value),
+      easing: Array.from(cx.easings.values()).sort((a, b) => b.count - a.count)[0]?.value || null,
+      easingType: Array.from(cx.easings.values()).sort((a, b) => b.count - a.count)[0]?.type || null,
+      props: Array.from(cx.props.values()).sort((a, b) => b.count - a.count).slice(0, 4).map(p => p.value),
+    });
+
+    const ctxOut = {};
+    for (const [k, v] of Object.entries(contexts)) ctxOut[k] = serializeCtx(v);
+
+    return {
+      durations: Array.from(globalDurations.values()).sort((a, b) => a.ms - b.ms),
+      easings: Array.from(globalEasings.values()).sort((a, b) => b.count - a.count).slice(0, 8),
+      animations: Array.from(globalAnimations.values()).sort((a, b) => b.count - a.count).slice(0, 8).map(a => ({ ...a, contexts: Array.from(a.contexts) })),
+      contexts: ctxOut,
+    };
+  });
+
+  // Phase 2: hover interaction deltas on a sample of interactive elements
+  const interactiveDeltas = [];
+  try {
+    const els = await page.$$('button, a, [role="button"]');
+    const sampled = els.slice(0, 12);
+    for (const el of sampled) {
+      try {
+        const visible = await el.evaluate(e => {
+          const r = e.getBoundingClientRect();
+          const s = getComputedStyle(e);
+          return r.width > 0 && r.height > 0 && s.display !== 'none' && s.visibility !== 'hidden';
+        });
+        if (!visible) continue;
+
+        const before = await el.evaluate(e => {
+          const s = getComputedStyle(e);
+          return { transform: s.transform, opacity: s.opacity, bg: s.backgroundColor, color: s.color, tag: e.tagName.toLowerCase(), text: (e.textContent || '').trim().slice(0, 30) };
+        });
+
+        await el.hover({ timeout: 800 }).catch(() => {});
+        await page.waitForTimeout(120);
+
+        const after = await el.evaluate(e => {
+          const s = getComputedStyle(e);
+          return { transform: s.transform, opacity: s.opacity, bg: s.backgroundColor, color: s.color };
+        }).catch(() => null);
+
+        if (!after) continue;
+
+        const delta = {};
+        if (after.transform !== before.transform && after.transform !== 'none') delta.transform = after.transform;
+        if (after.opacity !== before.opacity) delta.opacity = { from: before.opacity, to: after.opacity };
+        if (after.bg !== before.bg) delta.background = { from: before.bg, to: after.bg };
+        if (after.color !== before.color) delta.color = { from: before.color, to: after.color };
+
+        if (Object.keys(delta).length > 0) {
+          // classify pattern
+          let pattern = 'color-shift';
+          if (delta.transform) {
+            const t = delta.transform;
+            if (/scale\(([\d.]+)/.test(t)) {
+              const s = parseFloat(t.match(/scale\(([\d.]+)/)[1]);
+              pattern = s > 1 ? 'scale-up' : 'scale-down';
+            } else if (/translateY/.test(t)) pattern = 'slide-y';
+            else if (/translateX/.test(t)) pattern = 'slide-x';
+            else pattern = 'transform';
+          } else if (delta.opacity) {
+            pattern = parseFloat(delta.opacity.to) > parseFloat(delta.opacity.from) ? 'fade-in' : 'fade-out';
+          }
+
+          interactiveDeltas.push({ tag: before.tag, text: before.text, pattern, delta });
+        }
+      } catch { /* stale element */ }
+    }
+    await page.mouse.move(0, 0).catch(() => {});
+  } catch { /* skip */ }
+
+  return { ...staticMotion, interactiveDeltas };
+}

package/lib/extractors/colors.js

@@ -9,8 +9,10 @@ export async function extractColors(page) {
     function normalizeColor(color) {
       if (_colorMemo.has(color)) return _colorMemo.get(color);
       let result;
-      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
       if (rgbaMatch) {
+        const alpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
+        if (alpha < 0.05) { result = color.toLowerCase(); _colorMemo.set(color, result); return result; }
         const r = parseInt(rgbaMatch[1]).toString(16).padStart(2, "0");
         const g = parseInt(rgbaMatch[2]).toString(16).padStart(2, "0");
         const b = parseInt(rgbaMatch[3]).toString(16).padStart(2, "0");

package/lib/extractors/index.js

@@ -5,7 +5,7 @@ import { extractColors } from './colors.js';
 import { extractTypography } from './typography.js';
 import { extractSpacing, extractBorderRadius, extractBorders, extractShadows } from './spacing.js';
 import { extractButtonStyles, extractInputStyles, extractLinkStyles, extractBadgeStyles } from './components.js';
-import { extractBreakpoints, detectIconSystem, detectFrameworks, extractGradients } from './breakpoints.js';
+import { extractBreakpoints, detectIconSystem, detectFrameworks, extractGradients, extractMotion } from './breakpoints.js';
 import { extractWcagPairs } from './colors.js';
 
 /** @typedef {import('../types.js').BrandingResult} BrandingResult */
@@ -185,6 +185,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       frameworks,
       siteName,
       gradients,
+      motion,
     ] = await Promise.all([
       extractLogo(page, url),
       extractColors(page),
@@ -202,6 +203,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       detectFrameworks(page),
       extractSiteName(page),
       extractGradients(page),
+      extractMotion(page),
     ]);
 
     spinner.stop();
@@ -220,6 +222,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     console.log(iconSystem.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Icon systems: ${iconSystem.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Icon systems: 0 detected`));
     console.log(frameworks.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Frameworks: ${frameworks.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Frameworks: 0 detected`));
     console.log(gradients.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Gradients: ${gradients.length} found`) : chalk.hex('#8BE9FD')(`  · Gradients: 0 found`));
+    console.log(motion.durations.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Motion: ${motion.durations.length} durations, ${motion.easings.length} easings`) : chalk.hex('#8BE9FD')(`  · Motion: none detected`));
     console.log();
 
     // Hover/focus state extraction
@@ -244,6 +247,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     `);
 
     const sampled = interactiveElements.slice(0, 20);
+    const interactiveStatePairs = []; // { fg, bg, state, tag } — raw rgb strings, normalized later
 
     for (const element of sampled) {
       try {
@@ -256,17 +260,35 @@ export async function extractBranding(url, spinner, browser, options = {}) {
         if (!isVisible) continue;
 
         const beforeState = await element.evaluate(el => {
+          function findBg(node) {
+            while (node && node.tagName !== 'HTML') {
+              const bg = getComputedStyle(node).backgroundColor;
+              if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+              node = node.parentElement;
+            }
+            return null;
+          }
           const computed = getComputedStyle(el);
-          return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor, tag: el.tagName.toLowerCase() };
+          return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor, tag: el.tagName.toLowerCase() };
         });
 
-        await element.hover({ timeout: 1000 * timeoutMultiplier }).catch(() => {});
+        const hovered = await element.hover({ timeout: 1000 * timeoutMultiplier }).then(() => true).catch(() => false);
         await page.waitForTimeout(100 * timeoutMultiplier);
 
         const afterHover = await element.evaluate(el => {
+          function findBg(node) {
+            while (node && node.tagName !== 'HTML') {
+              const bg = getComputedStyle(node).backgroundColor;
+              if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+              node = node.parentElement;
+            }
+            return null;
+          }
           const computed = getComputedStyle(el);
-          return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor };
-        });
+          return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor };
+        }).catch(() => null);
+
+        if (!afterHover) continue;
 
         if (afterHover.color !== beforeState.color && afterHover.color !== 'rgba(0, 0, 0, 0)' && afterHover.color !== 'transparent') {
           hoverFocusColors.push({ color: afterHover.color, property: 'color', state: 'hover', element: beforeState.tag });
@@ -284,13 +306,28 @@ export async function extractBranding(url, spinner, browser, options = {}) {
           });
         }
 
-        if (['input', 'textarea', 'select', 'button'].includes(beforeState.tag)) {
+        // Collect hover contrast pair only if hover actually changed styles
+        const hoverFg = afterHover.color;
+        const hoverBg = afterHover.resolvedBg;
+        if (hovered && hoverFg && hoverBg && (hoverFg !== beforeState.color || hoverBg !== beforeState.resolvedBg)) {
+          interactiveStatePairs.push({ fg: hoverFg, bg: hoverBg, state: 'hover', tag: beforeState.tag });
+        }
+
+        if (['input', 'textarea', 'select', 'button', 'a'].includes(beforeState.tag)) {
           try {
             await element.focus({ timeout: 500 * timeoutMultiplier });
             await page.waitForTimeout(100 * timeoutMultiplier);
             const afterFocus = await element.evaluate(el => {
+              function findBg(node) {
+                while (node && node.tagName !== 'HTML') {
+                  const bg = getComputedStyle(node).backgroundColor;
+                  if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+                  node = node.parentElement;
+                }
+                return null;
+              }
               const computed = getComputedStyle(el);
-              return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor, outlineColor: computed.outlineColor };
+              return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor, outlineColor: computed.outlineColor };
             });
             if (afterFocus.outlineColor && afterFocus.outlineColor !== 'rgba(0, 0, 0, 0)' && afterFocus.outlineColor !== 'transparent' && afterFocus.outlineColor !== beforeState.color) {
               hoverFocusColors.push({ color: afterFocus.outlineColor, property: 'outline-color', state: 'focus', element: beforeState.tag });
@@ -304,11 +341,44 @@ export async function extractBranding(url, spinner, browser, options = {}) {
                 }
               });
             }
+
+            // Collect focus contrast pair
+            const focusFg = afterFocus.color;
+            const focusBg = afterFocus.resolvedBg;
+            if (focusFg && focusBg && (focusFg !== beforeState.color || focusBg !== beforeState.resolvedBg)) {
+              interactiveStatePairs.push({ fg: focusFg, bg: focusBg, state: 'focus', tag: beforeState.tag });
+            }
           } catch (e) {}
         }
       } catch (e) {}
     }
 
+    // Collect disabled element pairs
+    try {
+      const disabledPairs = await page.evaluate(() => {
+        function findBg(node) {
+          while (node && node.tagName !== 'HTML') {
+            const bg = getComputedStyle(node).backgroundColor;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+            node = node.parentElement;
+          }
+          return null;
+        }
+        const els = document.querySelectorAll('button[disabled], input[disabled], [aria-disabled="true"], [disabled]');
+        const pairs = [];
+        for (const el of Array.from(els).slice(0, 10)) {
+          const rect = el.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) continue;
+          const s = getComputedStyle(el);
+          const fg = s.color;
+          const bg = findBg(el);
+          if (fg && bg) pairs.push({ fg, bg, state: 'disabled', tag: el.tagName.toLowerCase() });
+        }
+        return pairs;
+      });
+      interactiveStatePairs.push(...disabledPairs);
+    } catch (e) {}
+
     await page.mouse.move(0, 0).catch(() => {});
 
     // Batch-normalize hover/focus colors via browser canvas to handle oklab/oklch/lab
@@ -425,9 +495,44 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     if (options.wcag) {
       spinner.start("Analyzing WCAG contrast pairs...");
       try {
+        const { relativeLuminance } = await import('../colors.js');
+
+        function calcPair(fgRaw, bgRaw, extra = {}) {
+          const toHex = (c) => {
+            const m = c && c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            if (!m) return null;
+            return `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}`;
+          };
+          const fg = toHex(fgRaw) || fgRaw;
+          const bg = toHex(bgRaw) || bgRaw;
+          if (!fg || !bg || fg === bg) return null;
+          const l1 = relativeLuminance(fg);
+          const l2 = relativeLuminance(bg);
+          if (l1 === null || l2 === null) return null;
+          const lighter = Math.max(l1, l2);
+          const darker = Math.min(l1, l2);
+          const ratio = Math.round((lighter + 0.05) / (darker + 0.05) * 100) / 100;
+          return { fg, bg, ratio, aa: ratio >= 4.5, aaLarge: ratio >= 3, aaa: ratio >= 7, ...extra };
+        }
+
         wcag = await extractWcagPairs(page);
+
+        // Deduplicate and score interactive state pairs
+        const seenState = new Set();
+        for (const { fg, bg, state, tag } of interactiveStatePairs) {
+          const key = `${state}/${fg}/${bg}`;
+          if (seenState.has(key)) continue;
+          seenState.add(key);
+          const pair = calcPair(fg, bg, { state, tag, source: 'state' });
+          if (pair) wcag.push(pair);
+        }
+
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ WCAG: ${wcag.filter(p => p.aa).length}/${wcag.length} pairs pass AA`));
+        const staticPassing = wcag.filter(p => !p.source && p.aa).length;
+        const staticTotal = wcag.filter(p => !p.source).length;
+        const statesFailing = wcag.filter(p => p.source === 'state' && !p.aa).length;
+        console.log(chalk.hex('#50FA7B')(`  ✓ WCAG: ${staticPassing}/${staticTotal} pairs pass AA`) +
+          (statesFailing ? chalk.hex('#FFB86C')(` · ${statesFailing} state pair(s) fail`) : ''));
       } catch {
         spinner.stop();
       }
@@ -447,6 +552,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       borders,
       shadows,
       gradients,
+      motion,
       components: { buttons, inputs, links, badges },
       breakpoints,
       iconSystem,

package/lib/extractors/logo.js

@@ -161,14 +161,16 @@ export async function extractLogo(page, url) {
 
       if (rect.top < 200) score += 10;
       if (rect.left < 400) score += 10;
+      if (rect.top > 800) score -= 30;   // deeply buried elements are unlikely primary logos
 
       // Penalize images hosted on a different domain (CDN paths on same domain are fine)
       if (el.tagName === 'IMG') {
         try {
           const srcHost = new URL(el.src).hostname.replace('www.', '')
           const pageHost = new URL(baseUrl).hostname.replace('www.', '')
-          // If neither is a subdomain/CDN of the other, it's third-party
-          if (!srcHost.endsWith(pageHost) && !pageHost.endsWith(srcHost)) score -= 60
+          const apexOf = h => h.split('.').slice(-2).join('.')
+          // Allow same apex domain (e.g. digitalhub.fifa.com and fifa.com share apex "fifa.com")
+          if (!srcHost.endsWith(pageHost) && !pageHost.endsWith(srcHost) && apexOf(srcHost) !== apexOf(pageHost)) score -= 60
         } catch {}
       }
 
@@ -205,7 +207,23 @@ export async function extractLogo(page, url) {
       if (el.tagName === 'IMG') {
         // Handle picture element -- prefer highest-res source
         const picture = el.closest('picture');
-        let src = el.src;
+        // Prefer currentSrc (browser-resolved after srcset/lazy), fallback to src attr, then parse srcset manually
+        let src = el.currentSrc || el.src;
+        const srcAttr = el.getAttribute('src') || '';
+        const srcsetAttr = el.getAttribute('srcset') || '';
+
+        // If src looks broken (just params, or resolves to baseUrl), parse srcset manually
+        if (!src || src === baseUrl || src === window.location.href || srcAttr.startsWith('width:') || srcAttr.startsWith('height:')) {
+          if (srcsetAttr) {
+            const entries = srcsetAttr.split(',').map(s => {
+              const parts = s.trim().split(/\s+/);
+              return { url: parts[0], w: parseFloat(parts[1]) || 0 };
+            }).filter(e => e.url && !e.url.startsWith('width:'));
+            entries.sort((a, b) => b.w - a.w);
+            if (entries[0]) src = new URL(entries[0].url, baseUrl).href;
+          }
+        }
+
         if (picture) {
           const sources = picture.querySelectorAll('source');
           for (const source of sources) {

package/lib/formatters/terminal.js

@@ -47,6 +47,7 @@ export function displayResults(data) {
   displayBorderRadius(data.borderRadius);
   displayBorders(data.borders);
   displayShadows(data.shadows);
+  displayGradients(data.gradients);
   displayButtons(data.components?.buttons);
   displayBadges(data.components?.badges);
   displayInputs(data.components?.inputs);
@@ -54,6 +55,7 @@ export function displayResults(data) {
   displayBreakpoints(data.breakpoints);
   displayIconSystem(data.iconSystem);
   displayFrameworks(data.frameworks);
+  displayMotion(data.motion);
   displayWcag(data.wcag);
 
   console.log(chalk.dim('│'));
@@ -125,7 +127,7 @@ function displayColors(colors) {
   // Add semantic colors
   if (colors.semantic) {
     Object.entries(colors.semantic)
-      .filter(([_, color]) => color)
+      .filter(([_, color]) => color && color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent')
       .forEach(([role, color]) => {
         const formats = normalizeColorFormat(color);
         allColors.push({
@@ -477,6 +479,25 @@ function displayShadows(shadows) {
   console.log(chalk.dim('│'));
 }
 
+function displayGradients(gradients) {
+  if (!gradients || gradients.length === 0) return;
+
+  console.log(chalk.dim('├─') + ' ' + chalk.bold('Gradients'));
+  gradients.slice(0, 5).forEach((g, i) => {
+    const isLast = i === Math.min(gradients.length, 5) - 1;
+    const branch = isLast ? '└─' : '├─';
+    const typeLabel = g.type ? chalk.dim(`${g.type} · `) : '';
+    const uniqueStops = [...new Set((g.stopColors || []).map(c => {
+      const m = c && c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      return m ? `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}` : null;
+    }).filter(Boolean))];
+    const stops = uniqueStops.slice(0, 5).map(hex => chalk.bgHex(hex)('  ')).join(' ');
+    const countLabel = g.count > 1 ? chalk.dim(` ×${g.count}`) : '';
+    console.log(chalk.dim(`│  ${branch}`) + ' ' + typeLabel + (stops || chalk.dim(g.gradient.slice(0, 50) + '…')) + countLabel);
+  });
+  console.log(chalk.dim('│'));
+}
+
 function displayButtons(buttons) {
   if (!buttons || buttons.length === 0) return;
 
@@ -983,18 +1004,84 @@ function displayFrameworks(frameworks) {
   console.log(chalk.dim('│'));
 }
 
+function displayMotion(motion) {
+  if (!motion || (motion.durations.length === 0 && motion.animations.length === 0)) return;
+
+  console.log(chalk.dim('├─') + ' ' + chalk.bold('Motion'));
+
+  // Duration scale
+  if (motion.durations.length > 0) {
+    const vals = motion.durations.map(d => chalk.bold(d.value)).join('  ');
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.dim('Scale  ') + vals);
+  }
+
+  // Dominant easing
+  if (motion.easings.length > 0) {
+    const top = motion.easings[0];
+    const typeLabel = top.type && top.type !== 'custom' ? chalk.dim(` (${top.type})`) : '';
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.dim('Easing ') + top.value + typeLabel);
+  }
+
+  // Per-context profiles
+  const ctxEntries = Object.entries(motion.contexts || {}).filter(([, v]) => v.count > 0);
+  if (ctxEntries.length > 0) {
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.dim('By context'));
+    ctxEntries.forEach(([ctx, v], i) => {
+      const isLast = i === ctxEntries.length - 1 && (motion.interactiveDeltas || []).length === 0 && motion.animations.length === 0;
+      const branch = isLast ? '└─' : '├─';
+      const dur = v.durations.join(' / ');
+      const easingLabel = v.easingType && v.easingType !== 'custom' ? ` · ${v.easingType}` : '';
+      const props = v.props.length > 0 ? chalk.dim(` [${v.props.slice(0, 3).join(', ')}]`) : '';
+      console.log(chalk.dim(`│  │  ${branch}`) + ' ' + chalk.bold(ctx) + chalk.dim(`  ${dur}${easingLabel}`) + props);
+    });
+  }
+
+  // Interaction deltas (hover patterns)
+  const deltas = (motion.interactiveDeltas || []);
+  if (deltas.length > 0) {
+    const seen = new Map();
+    deltas.forEach(d => {
+      const key = `${d.tag}:${d.pattern}`;
+      if (!seen.has(key)) seen.set(key, d);
+    });
+    const unique = Array.from(seen.values());
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.dim('Hover patterns'));
+    unique.slice(0, 6).forEach((d, i) => {
+      const isLast = i === Math.min(unique.length, 6) - 1 && motion.animations.length === 0;
+      const branch = isLast ? '└─' : '├─';
+      const label = d.text ? chalk.dim(` "${d.text}"`) : '';
+      console.log(chalk.dim(`│  │  ${branch}`) + ' ' + chalk.bold(d.pattern) + chalk.dim(` ${d.tag}`) + label);
+    });
+  }
+
+  // Keyframe animations
+  if (motion.animations.length > 0) {
+    console.log(chalk.dim('│  └─') + ' ' + chalk.dim('Keyframes'));
+    motion.animations.slice(0, 6).forEach((a, i) => {
+      const isLast = i === Math.min(motion.animations.length, 6) - 1;
+      const branch = isLast ? '└─' : '├─';
+      const dur = a.duration ? chalk.dim(` ${a.duration}`) : '';
+      const ctx = a.contexts?.length ? chalk.dim(` [${a.contexts.join(', ')}]`) : '';
+      console.log(chalk.dim(`│     ${branch}`) + ' ' + a.name + dur + ctx);
+    });
+  }
+
+  console.log(chalk.dim('│'));
+}
+
 function displayWcag(wcag) {
   if (!wcag || wcag.length === 0) return;
 
   console.log(chalk.dim('├─') + ' ' + chalk.bold('WCAG Contrast'));
 
-  const passing = wcag.filter(p => p.aa);
-  const failing = wcag.filter(p => !p.aa);
+  const staticPairs = wcag.filter(p => !p.source);
+  const statePairs = wcag.filter(p => p.source === 'state');
+
+  const passing = staticPairs.filter(p => p.aa);
+  const failing = staticPairs.filter(p => !p.aa);
   const all = [...passing.slice(0, 5), ...failing.slice(0, 3)];
 
-  all.forEach((pair, i) => {
-    const isLast = i === all.length - 1;
-    const branch = isLast ? '└─' : '├─';
+  function renderPair(pair, branch) {
     const fgSwatch = chalk.bgHex(pair.fg)('  ');
     const bgSwatch = chalk.bgHex(pair.bg)('  ');
     const grade = pair.aaa
@@ -1005,7 +1092,23 @@ function displayWcag(wcag) {
           ? chalk.hex('#FFB86C')('AA-Large')
           : chalk.hex('#FF5555')('fail');
     const ratio = chalk.bold(`${pair.ratio}:1`);
-    console.log(chalk.dim(`│  ${branch}`) + ' ' + `${fgSwatch} ${bgSwatch}  ${ratio}  ${grade}  ${chalk.dim(pair.fg + ' / ' + pair.bg)}`);
+    const stateTag = pair.state ? chalk.dim(` [${pair.state}]`) : '';
+    console.log(chalk.dim(`│  ${branch}`) + ' ' + `${fgSwatch} ${bgSwatch}  ${ratio}  ${grade}${stateTag}  ${chalk.dim(pair.fg + ' / ' + pair.bg)}`);
+  }
+
+  all.forEach((pair, i) => {
+    const isLast = i === all.length - 1 && statePairs.length === 0;
+    renderPair(pair, isLast ? '└─' : '├─');
   });
+
+  if (statePairs.length > 0) {
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.bold('Interactive states'));
+    const stateFailingFirst = [...statePairs.filter(p => !p.aa), ...statePairs.filter(p => p.aa)].slice(0, 8);
+    stateFailingFirst.forEach((pair, i) => {
+      const isLast = i === stateFailingFirst.length - 1;
+      renderPair(pair, isLast ? '└─' : '├─');
+    });
+  }
+
   console.log(chalk.dim('│'));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",