dembrandt 0.12.1 → 0.12.2

package/README.md

@@ -71,6 +71,7 @@ dembrandt example.com --sitemap        # Discover pages from sitemap.xml instead
 dembrandt example.com --pages 10 --sitemap # Combine: up to 10 pages discovered via sitemap
 dembrandt example.com --no-sandbox     # Disable Chromium sandbox (required for Docker/CI)
 dembrandt example.com --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
+dembrandt example.com --wcag           # WCAG 2.1 contrast analysis — real DOM pairs, AA/AAA grades
 ```
 
 Default: formatted terminal display only. Use `--save-output` to persist results as JSON files. Browser automatically retries in visible mode if headless extraction fails.
@@ -140,6 +141,16 @@ dembrandt example.com --design-md
 # Saves to: output/example.com/DESIGN.md
 ```
 
+### WCAG Contrast Analysis
+
+Use `--wcag` to check accessibility contrast ratios across the page. Unlike palette-based checkers, dembrandt walks the actual DOM and finds what color is rendered on top of what background — per element.
+
+```bash
+dembrandt stripe.com --wcag
+```
+
+Returns every text/background pair with contrast ratio and WCAG 2.1 grade (AA, AA-Large, AAA, or fail), sorted by how often each pair appears. Results are shown in terminal and included in JSON output as `wcag`.
+
 ### Brand Guide PDF
 
 Use `--brand-guide` to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.
@@ -222,6 +233,11 @@ dembrandt stripe.com --design-md
 # Point your agent at the output DESIGN.md
 ```
 
+**Accessibility audit** — check contrast on any live URL
+```bash
+dembrandt stripe.com --wcag
+```
+
 **Regression baseline** — snapshot now, catch drift later
 ```bash
 dembrandt myapp.com --save-output --dtcg

package/lib/extractors/components.js

@@ -1,137 +1,99 @@
 export async function extractButtonStyles(page) {
   return await page.evaluate(() => {
-    const buttons = Array.from(
-      document.querySelectorAll(`
-        button,
-        a[type="button"],
-        [role="button"],
-        [role="tab"],
-        [role="menuitem"],
-        [role="switch"],
-        [aria-pressed],
-        [aria-expanded],
-        .btn,
-        [class*="btn"],
-        [class*="button"],
-        [class*="cta"],
-        [data-cta]
-      `)
-    );
-
-    const extractState = (btn) => {
-      const computed = getComputedStyle(btn);
-      return {
-        backgroundColor: computed.backgroundColor,
-        color: computed.color,
-        padding: computed.padding,
-        borderRadius: computed.borderRadius,
-        border: computed.border || `${computed.borderWidth} ${computed.borderStyle} ${computed.borderColor}`,
-        boxShadow: computed.boxShadow,
-        outline: computed.outline,
-        transform: computed.transform,
-        opacity: computed.opacity,
-      };
-    };
-
-    const buttonStyles = [];
-
-    buttons.forEach((btn) => {
-      const computed = getComputedStyle(btn);
-      const rect = btn.getBoundingClientRect();
-      if (rect.width === 0 || rect.height === 0 || computed.display === 'none' || computed.visibility === 'hidden') return;
-
-      const bg = computed.backgroundColor;
-      const border = computed.border;
-      const borderWidth = computed.borderWidth;
-      const borderColor = computed.borderColor;
-      const boxShadow = computed.boxShadow;
-
-      const hasBorder = borderWidth && parseFloat(borderWidth) > 0 && border !== 'none' && borderColor !== 'rgba(0, 0, 0, 0)' && borderColor !== 'transparent';
-      const hasBackground = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent';
-      const hasShadow = boxShadow && boxShadow !== 'none' && boxShadow !== 'rgba(0, 0, 0, 0)';
+    // Only real interactive buttons — not tabs, menus, dropdowns
+    const candidates = Array.from(document.querySelectorAll(
+      'button, a[href], [role="button"]'
+    ));
 
-      if (!hasBackground && !hasBorder && !hasShadow) return;
+    const isTransparent = (color) =>
+      !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
 
-      const role = btn.getAttribute('role');
-      const isNativeButton = btn.tagName === "BUTTON";
-      const isButtonRole = ['button', 'tab', 'menuitem', 'switch'].includes(role);
-      const hasAriaPressed = btn.hasAttribute('aria-pressed');
-      const hasAriaExpanded = btn.hasAttribute('aria-expanded');
-      const isHighConfidence = isNativeButton || isButtonRole || hasAriaPressed || hasAriaExpanded;
-
-      const className = typeof btn.className === 'string' ? btn.className : btn.className.baseVal || '';
-
-      const defaultState = extractState(btn);
-      const states = { default: defaultState, hover: null, active: null, focus: null };
+    const results = [];
 
+    for (const el of candidates) {
       try {
-        const sheets = Array.from(document.styleSheets);
-        for (const sheet of sheets) {
-          try {
-            const rules = Array.from(sheet.cssRules || []);
-            for (const rule of rules) {
-              if (rule.selectorText) {
-                const btnClasses = className.split(' ').filter(c => c);
-                const matchesButton = btnClasses.some(cls => rule.selectorText.includes(`.${cls}`));
-                if (matchesButton || rule.selectorText.includes(btn.tagName.toLowerCase())) {
-                  if (rule.selectorText.includes(':hover')) {
-                    if (!states.hover) states.hover = {};
-                    if (rule.style.backgroundColor) states.hover.backgroundColor = rule.style.backgroundColor;
-                    if (rule.style.color) states.hover.color = rule.style.color;
-                    if (rule.style.boxShadow) states.hover.boxShadow = rule.style.boxShadow;
-                    if (rule.style.outline) states.hover.outline = rule.style.outline;
-                    if (rule.style.border) states.hover.border = rule.style.border;
-                    if (rule.style.transform) states.hover.transform = rule.style.transform;
-                    if (rule.style.opacity) states.hover.opacity = rule.style.opacity;
-                  }
-                  if (rule.selectorText.includes(':active')) {
-                    if (!states.active) states.active = {};
-                    if (rule.style.backgroundColor) states.active.backgroundColor = rule.style.backgroundColor;
-                    if (rule.style.color) states.active.color = rule.style.color;
-                    if (rule.style.boxShadow) states.active.boxShadow = rule.style.boxShadow;
-                    if (rule.style.outline) states.active.outline = rule.style.outline;
-                    if (rule.style.border) states.active.border = rule.style.border;
-                    if (rule.style.transform) states.active.transform = rule.style.transform;
-                    if (rule.style.opacity) states.active.opacity = rule.style.opacity;
-                  }
-                  if (rule.selectorText.includes(':focus')) {
-                    if (!states.focus) states.focus = {};
-                    if (rule.style.backgroundColor) states.focus.backgroundColor = rule.style.backgroundColor;
-                    if (rule.style.color) states.focus.color = rule.style.color;
-                    if (rule.style.boxShadow) states.focus.boxShadow = rule.style.boxShadow;
-                    if (rule.style.outline) states.focus.outline = rule.style.outline;
-                    if (rule.style.border) states.focus.border = rule.style.border;
-                    if (rule.style.transform) states.focus.transform = rule.style.transform;
-                    if (rule.style.opacity) states.focus.opacity = rule.style.opacity;
-                  }
-                }
-              }
-            }
-          } catch (e) {}
-        }
-      } catch (e) {}
+        const computed = getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+
+        if (rect.width === 0 || rect.height === 0) continue;
+        if (computed.display === 'none' || computed.visibility === 'hidden') continue;
+
+        // Skip nav/menu context elements
+        const role = el.getAttribute('role');
+        if (['tab', 'menuitem', 'option', 'switch', 'treeitem'].includes(role)) continue;
+        if (el.closest('[role="tablist"], [role="menu"], [role="menubar"], nav, footer')) continue;
+
+        // Must have a visible background or border — not just inherited
+        const bg = computed.backgroundColor;
+        const borderWidth = parseFloat(computed.borderWidth);
+        const hasBackground = !isTransparent(bg);
+        const hasBorder = borderWidth > 0 && !isTransparent(computed.borderColor);
+
+        if (!hasBackground && !hasBorder) continue;
+
+        // Size sanity: real buttons aren't huge or tiny
+        if (rect.height < 24 || rect.height > 100) continue;
+        if (rect.width < 40 || rect.width > 600) continue;
+
+        // Prefer above-the-fold
+        const aboveFold = rect.top < window.innerHeight;
+
+        // Score by prominence
+        let score = 0;
+        if (el.tagName === 'BUTTON') score += 30;
+        if (role === 'button') score += 20;
+        if (hasBackground) score += 20;
+        if (hasBorder && !hasBackground) score += 10;
+        if (aboveFold) score += 15;
+        if (rect.top < 300) score += 10;
+
+        // Skip buttons with no visible text
+        const text = el.textContent?.trim().replace(/\s+/g, ' ') || '';
+        if (text.length === 0) continue;
+
+        // Skip fully transparent backgrounds with no border (ghost-only inherited bg)
+        if (isTransparent(bg) && !hasBorder) continue;
+
+        results.push({
+          el,
+          score,
+          state: {
+            backgroundColor: bg,
+            color: computed.color,
+            padding: computed.padding,
+            borderRadius: computed.borderRadius,
+            border: `${computed.borderWidth} ${computed.borderStyle} ${computed.borderColor}`,
+            boxShadow: computed.boxShadow !== 'none' ? computed.boxShadow : undefined,
+            fontSize: computed.fontSize,
+            fontWeight: computed.fontWeight,
+          },
+          text: text.slice(0, 40),
+        });
+      } catch {}
+    }
 
-      buttonStyles.push({
-        states,
-        fontWeight: computed.fontWeight,
-        fontSize: computed.fontSize,
-        classes: className.substring(0, 50),
-        confidence: isHighConfidence ? "high" : "medium",
-      });
-    });
+    // Sort by score, deduplicate by visual fingerprint
+    results.sort((a, b) => b.score - a.score);
 
-    const uniqueButtons = [];
     const seen = new Set();
-    for (const btn of buttonStyles) {
-      const s = btn.states.default;
-      const key = `${s.backgroundColor}|${s.border}|${s.boxShadow}`;
+    const unique = [];
+    for (const r of results) {
+      const s = r.state;
+      const key = `${s.backgroundColor}|${s.color}|${s.borderRadius}|${s.border}`;
       if (!seen.has(key)) {
         seen.add(key);
-        uniqueButtons.push(btn);
+        unique.push({
+          states: { default: s },
+          fontWeight: s.fontWeight,
+          fontSize: s.fontSize,
+          text: r.text,
+          confidence: r.score >= 40 ? 'high' : 'medium',
+        });
       }
+      if (unique.length >= 8) break;
     }
 
-    return uniqueButtons.slice(0, 15);
+    return unique;
   });
 }
 

package/lib/extractors/index.js

@@ -169,7 +169,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
     spinner.start("Analyzing design system (16 parallel tasks)...");
     const [
-      { logo, favicons },
+      { logo, instances: logoInstances, favicons },
       colors,
       typography,
       spacing,
@@ -438,6 +438,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       extractedAt: new Date().toISOString(),
       siteName,
       logo,
+      logoInstances,
       favicons,
       colors,
       typography,

package/lib/extractors/logo.js

@@ -32,216 +32,371 @@ export async function extractSiteName(page) {
 }
 
 export async function extractLogo(page, url) {
-  return await page.evaluate((baseUrl) => {
-    const candidates = Array.from(document.querySelectorAll("img, svg")).filter(
-      (el) => {
-        const className =
-          typeof el.className === "string"
-            ? el.className
-            : el.className.baseVal || "";
-        const attrs = (
-          className +
-          " " +
-          (el.id || "") +
-          " " +
-          (el.getAttribute("alt") || "")
-        ).toLowerCase();
-
-        if (attrs.includes("logo") || attrs.includes("brand")) return true;
-
-        if (el.tagName === "svg" || el.tagName === "SVG") {
-          const useElements = el.querySelectorAll("use");
-          for (const use of useElements) {
-            const href =
-              use.getAttribute("href") || use.getAttribute("xlink:href") || "";
-            if (
-              href.toLowerCase().includes("logo") ||
-              href.toLowerCase().includes("brand")
-            ) {
-              return true;
-            }
-          }
-        }
-
-        const inHeader = el.closest('header, nav, [role="banner"], [class*="header"], [class*="Header"], [id*="header"]');
-        if (inHeader) {
-          const parentLink = el.closest('a');
-          if (parentLink) {
-            const href = parentLink.getAttribute('href') || '';
-            const ariaLabel = (parentLink.getAttribute('aria-label') || '').toLowerCase();
-            if (href === '/' || href === baseUrl || href === baseUrl + '/' ||
-                href.match(/^https?:\/\/[^/]+\/?$/) ||
-                href.match(/^https?:\/\/[^/]+\/[a-z]{2}(-[a-z]{2})?\/?$/) ||
-                ariaLabel.includes('homepage') || ariaLabel.includes('home page')) {
-              return true;
-            }
-          }
-        }
+  // Extract manifest.json for PWA icons
+  const manifestIcons = await page.evaluate((baseUrl) => {
+    try {
+      const manifestLink = document.querySelector('link[rel="manifest"]');
+      if (!manifestLink) return [];
+      return [{ manifestUrl: new URL(manifestLink.getAttribute('href'), baseUrl).href }];
+    } catch {
+      return [];
+    }
+  }, url);
 
-        return false;
+  let pwaIcons = [];
+  if (manifestIcons.length > 0) {
+    try {
+      const manifestUrl = manifestIcons[0].manifestUrl;
+      const response = await page.evaluate(async (mUrl) => {
+        try {
+          const r = await fetch(mUrl);
+          if (!r.ok) return null;
+          return await r.json();
+        } catch { return null; }
+      }, manifestUrl);
+
+      if (response?.icons) {
+        pwaIcons = response.icons.map(icon => ({
+          type: 'pwa',
+          url: new URL(icon.src, url).href,
+          sizes: icon.sizes || null,
+          purpose: icon.purpose || 'any',
+        }));
       }
-    );
-
-    let logoData = null;
-    if (candidates.length > 0) {
-      const siteDomain = new URL(baseUrl).hostname.replace('www.', '').split('.')[0].toLowerCase();
-
-      const scored = candidates.map(el => {
-        let score = 0;
-        const rect = el.getBoundingClientRect();
-        const parentLink = el.closest('a');
-        const linkHref = parentLink?.getAttribute('href') || '';
-        const imgSrc = el.tagName === 'IMG' ? (el.src || '') : '';
-        const altText = (el.getAttribute('alt') || '').toLowerCase();
-        const className = (typeof el.className === 'string' ? el.className : el.className.baseVal || '').toLowerCase();
-
-        const inHeader = el.closest('header, nav, [role="banner"], [class*="header"], [class*="nav"], [id*="header"], [id*="nav"]');
-        if (inHeader) score += 50;
-
-        if (imgSrc.toLowerCase().includes(siteDomain) || altText.includes(siteDomain) || className.includes(siteDomain)) {
-          score += 40;
-        }
+    } catch {}
+  }
 
-        if (parentLink) {
-          const href = linkHref.toLowerCase();
-          if (href === '/' || href === baseUrl || href === baseUrl + '/' || href.endsWith('://' + new URL(baseUrl).hostname + '/') || href.endsWith('://' + new URL(baseUrl).hostname)) {
-            score += 30;
-          }
-        }
+  const result = await page.evaluate((baseUrl) => {
+    const siteDomain = new URL(baseUrl).hostname.replace('www.', '').split('.')[0].toLowerCase();
 
-        if (rect.top < 200) score += 10;
-        if (rect.left < 400) score += 10;
-        if (rect.top > 600) score -= 20;
+    // Canvas for background color detection
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 1;
+    const ctx = canvas.getContext('2d');
+
+    function toHex(color) {
+      if (!color || color === 'transparent') return null;
+      try {
+        const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (m) {
+          if (m[4] !== undefined && parseFloat(m[4]) < 0.1) 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')}`;
+        }
+        if (/^#[0-9a-f]{6}$/i.test(color)) return color.toLowerCase();
+        if (!ctx) return null;
+        ctx.clearRect(0, 0, 1, 1);
+        ctx.fillStyle = 'rgba(0,0,0,0)';
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+        if (a < 25) return null;
+        return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;
+      } catch { return null; }
+    }
 
-        const width = el.naturalWidth || el.width?.baseVal?.value || rect.width;
-        const height = el.naturalHeight || el.height?.baseVal?.value || rect.height;
-        if (width < 20 || height < 20) score -= 30;
-        if (width > 500 || height > 300) score -= 40;
+    function findBgColor(el) {
+      let node = el;
+      while (node && node.tagName !== 'HTML') {
+        try {
+          const bg = toHex(getComputedStyle(node).backgroundColor);
+          if (bg) return bg;
+        } catch {}
+        node = node.parentElement;
+      }
+      return null;
+    }
 
-        if (altText.length > 50) score -= 30;
-        if (altText.includes(' the ') || altText.includes(' a ') || altText.includes(' of ')) score -= 20;
+    function isLight(hex) {
+      if (!hex) return true;
+      const r = parseInt(hex.slice(1,3), 16);
+      const g = parseInt(hex.slice(3,5), 16);
+      const b = parseInt(hex.slice(5,7), 16);
+      return (0.299*r + 0.587*g + 0.114*b) / 255 > 0.5;
+    }
 
-        if (width > height && width < 300 && width > 40 && height > 15 && height < 100) score += 15;
+    function detectLogoType(el, altText) {
+      const text = (altText || '').toLowerCase().trim();
+      const hasText = text.length > 0 && !/^logo$|^brand$|^icon$/i.test(text);
+      const rect = el.getBoundingClientRect();
+      const ratio = rect.width / (rect.height || 1);
+
+      // Wide element with text in alt = wordmark
+      if (hasText && ratio > 3) return 'wordmark';
+      // Squarish = logomark/icon
+      if (ratio < 1.5 && ratio > 0.5) return 'logomark';
+      // Wide with no meaningful alt = likely combination or wordmark
+      if (ratio > 2) return 'wordmark';
+      return 'combination';
+    }
 
-        if (!inHeader && !imgSrc.toLowerCase().includes(siteDomain) && !altText.includes(siteDomain)) {
-          score -= 30;
+    function scoreLogo(el, context) {
+      let score = 0;
+      const rect = el.getBoundingClientRect();
+      const s = getComputedStyle(el);
+      const parentLink = el.closest('a');
+      const linkHref = parentLink?.getAttribute('href') || '';
+      const imgSrc = el.tagName === 'IMG' ? (el.getAttribute('src') || '') : '';
+      const altText = (el.getAttribute('alt') || '').toLowerCase();
+      const className = (typeof el.className === 'string' ? el.className : el.className.baseVal || '').toLowerCase();
+
+      if (context === 'header') score += 50;
+      if (context === 'footer') score += 20;
+      if (context === 'hero') score += 15;
+
+      if (imgSrc.toLowerCase().includes(siteDomain) || altText.includes(siteDomain) || className.includes(siteDomain)) score += 40;
+      if (className.includes('logo') || el.id?.toLowerCase().includes('logo')) score += 30;
+
+      if (parentLink) {
+        const href = linkHref.toLowerCase();
+        if (href === '/' || href === baseUrl || href.endsWith('://' + new URL(baseUrl).hostname + '/') || href.endsWith('://' + new URL(baseUrl).hostname)) {
+          score += 30;
         }
+      }
 
-        return { el, score };
-      });
+      if (rect.top < 200) score += 10;
+      if (rect.left < 400) score += 10;
 
-      scored.sort((a, b) => b.score - a.score);
-      const logo = scored[0].el;
-      const computed = window.getComputedStyle(logo);
-      const parent = logo.parentElement;
-      const parentComputed = parent ? window.getComputedStyle(parent) : null;
+      const width = el.naturalWidth || el.width?.baseVal?.value || rect.width;
+      const height = el.naturalHeight || el.height?.baseVal?.value || rect.height;
+      if (width < 20 || height < 20) score -= 30;
+      if (width > 600 || height > 400) score -= 40;
+      if (altText.length > 50) score -= 30;
+      if (width > height && width < 400 && width > 40 && height > 10 && height < 120) score += 15;
+
+      return score;
+    }
+
+    function extractLogoFromEl(el, context, baseUrl) {
+      const rect = el.getBoundingClientRect();
+      const computed = getComputedStyle(el);
+      const parent = el.parentElement;
+      const parentComputed = parent ? getComputedStyle(parent) : null;
+      const parentLink = el.closest('a');
+      const bg = findBgColor(el);
+      const altText = el.getAttribute('alt') || '';
 
       const safeZone = {
-        top:
-          parseFloat(computed.marginTop) +
-          (parentComputed ? parseFloat(parentComputed.paddingTop) : 0),
-        right:
-          parseFloat(computed.marginRight) +
-          (parentComputed ? parseFloat(parentComputed.paddingRight) : 0),
-        bottom:
-          parseFloat(computed.marginBottom) +
-          (parentComputed ? parseFloat(parentComputed.paddingBottom) : 0),
-        left:
-          parseFloat(computed.marginLeft) +
-          (parentComputed ? parseFloat(parentComputed.paddingLeft) : 0),
+        top: parseFloat(computed.marginTop) + (parentComputed ? parseFloat(parentComputed.paddingTop) : 0),
+        right: parseFloat(computed.marginRight) + (parentComputed ? parseFloat(parentComputed.paddingRight) : 0),
+        bottom: parseFloat(computed.marginBottom) + (parentComputed ? parseFloat(parentComputed.paddingBottom) : 0),
+        left: parseFloat(computed.marginLeft) + (parentComputed ? parseFloat(parentComputed.paddingLeft) : 0),
       };
 
-      let logoBg = null;
-      let walker = logo;
-      while (walker) {
-        const bg = window.getComputedStyle(walker).backgroundColor;
-        if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
-          logoBg = bg;
-          break;
+      const logoType = detectLogoType(el, altText);
+      const reversed = bg ? !isLight(bg) : false;
+
+      if (el.tagName === 'IMG') {
+        // Handle picture element -- prefer highest-res source
+        const picture = el.closest('picture');
+        let src = el.src;
+        if (picture) {
+          const sources = picture.querySelectorAll('source');
+          for (const source of sources) {
+            const srcset = source.getAttribute('srcset');
+            if (srcset) {
+              const best = srcset.split(',').map(s => s.trim().split(/\s+/)).sort((a, b) => {
+                const wa = parseFloat(a[1]) || 0;
+                const wb = parseFloat(b[1]) || 0;
+                return wb - wa;
+              })[0];
+              if (best?.[0]) { src = new URL(best[0], baseUrl).href; break; }
+            }
+          }
         }
-        walker = walker.parentElement;
-      }
 
-      if (logo.tagName === "IMG") {
-        logoData = {
-          source: "img",
-          url: new URL(logo.src, baseUrl).href,
-          width: logo.naturalWidth || logo.width,
-          height: logo.naturalHeight || logo.height,
-          alt: logo.alt,
+        return {
+          source: 'img',
+          context,
+          url: new URL(src, baseUrl).href,
+          width: el.naturalWidth || rect.width,
+          height: el.naturalHeight || rect.height,
+          alt: altText,
+          type: logoType,
+          reversed,
+          background: bg,
           safeZone,
-          background: logoBg,
+          position: { top: rect.top, left: rect.left },
         };
-      } else {
-        const parentLink = logo.closest("a");
-        logoData = {
-          source: "svg",
-          url: parentLink ? parentLink.href : window.location.href,
-          width: logo.width?.baseVal?.value,
-          height: logo.height?.baseVal?.value,
+      } else if (el.tagName === 'SVG' || el.tagName === 'svg') {
+        return {
+          source: 'svg',
+          context,
+          url: parentLink ? parentLink.href : baseUrl,
+          width: el.width?.baseVal?.value || rect.width,
+          height: el.height?.baseVal?.value || rect.height,
+          type: logoType,
+          reversed,
+          background: bg,
           safeZone,
-          background: logoBg,
+          position: { top: rect.top, left: rect.left },
         };
       }
+      return null;
     }
 
-    const favicons = [];
+    function findLogosInZone(container, context) {
+      if (!container) return [];
+      const candidates = [];
 
-    document.querySelectorAll('link[rel*="icon"]').forEach((link) => {
-      const href = link.getAttribute("href");
-      if (href) {
-        favicons.push({
-          type: link.getAttribute("rel"),
-          url: new URL(href, baseUrl).href,
-          sizes: link.getAttribute("sizes") || null,
-        });
+      // img and svg
+      container.querySelectorAll('img, svg').forEach(el => {
+        try {
+          const s = getComputedStyle(el);
+          if (s.display === 'none' || s.visibility === 'hidden') return;
+          const rect = el.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) return;
+
+          const className = (typeof el.className === 'string' ? el.className : el.className.baseVal || '').toLowerCase();
+          const attrs = (className + ' ' + (el.id || '') + ' ' + (el.getAttribute('alt') || '')).toLowerCase();
+
+          let qualifies = attrs.includes('logo') || attrs.includes('brand');
+
+          if (!qualifies && el.tagName === 'svg') {
+            const useEls = el.querySelectorAll('use');
+            for (const use of useEls) {
+              const href = use.getAttribute('href') || use.getAttribute('xlink:href') || '';
+              if (href.toLowerCase().includes('logo') || href.toLowerCase().includes('brand')) { qualifies = true; break; }
+            }
+          }
+
+          if (!qualifies) {
+            const parentLink = el.closest('a');
+            if (parentLink) {
+              const href = (parentLink.getAttribute('href') || '').toLowerCase();
+              const ariaLabel = (parentLink.getAttribute('aria-label') || '').toLowerCase();
+              if (href === '/' || href.match(/^https?:\/\/[^/]+\/?$/) || ariaLabel.includes('home')) qualifies = true;
+            }
+          }
+
+          if (qualifies) {
+            const score = scoreLogo(el, context);
+            candidates.push({ el, score, context });
+          }
+        } catch {}
+      });
+
+      // CSS background-image logos
+      container.querySelectorAll('a, [class*="logo"], [id*="logo"], header > *, nav > *').forEach(el => {
+        try {
+          const s = getComputedStyle(el);
+          const bg = s.backgroundImage;
+          if (!bg || bg === 'none') return;
+          const urlMatch = bg.match(/url\(["']?([^"')]+)["']?\)/);
+          if (!urlMatch) return;
+          const imgUrl = urlMatch[1];
+          if (!/\.(svg|png|webp|gif)(\?|$)/i.test(imgUrl) && !imgUrl.includes('logo') && !imgUrl.includes('brand')) return;
+          const rect = el.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) return;
+
+          candidates.push({
+            el: null,
+            score: scoreLogo(el, context) + 10,
+            context,
+            cssBackground: {
+              source: 'css-background',
+              context,
+              url: new URL(imgUrl, window.location.href).href,
+              width: rect.width,
+              height: rect.height,
+              type: rect.width / rect.height > 2 ? 'wordmark' : 'logomark',
+              reversed: !isLight(toHex(s.backgroundColor)),
+              background: toHex(s.backgroundColor),
+              safeZone: { top: parseFloat(s.paddingTop), right: parseFloat(s.paddingRight), bottom: parseFloat(s.paddingBottom), left: parseFloat(s.paddingLeft) },
+              position: { top: rect.top, left: rect.left },
+            }
+          });
+        } catch {}
+      });
+
+      return candidates;
+    }
+
+    const headerEl = document.querySelector('header, [role="banner"], [class*="header"], [id*="header"]');
+    const navEl = document.querySelector('nav, [role="navigation"]');
+    const footerEl = document.querySelector('footer, [role="contentinfo"], [class*="footer"], [id*="footer"]');
+
+    // Hero: first large section that's not header/footer
+    const heroEl = (() => {
+      const sections = document.querySelectorAll('main > *:first-child, [class*="hero"], [class*="Hero"], [class*="banner"]:not([role="banner"])');
+      for (const s of sections) {
+        const rect = s.getBoundingClientRect();
+        if (rect.height > 200) return s;
       }
-    });
+      return null;
+    })();
+
+    // Deduplicate zones — nav might be inside header, avoid double-scanning
+    const headerCandidates = findLogosInZone(headerEl, 'header');
+    const navCandidates = (navEl && !headerEl?.contains(navEl))
+      ? findLogosInZone(navEl, 'header')  // same score weight as header
+      : [];
+
+    const allCandidates = [
+      ...headerCandidates,
+      ...navCandidates,
+      ...findLogosInZone(footerEl, 'footer'),
+      ...findLogosInZone(heroEl, 'hero'),
+    ];
+
+    allCandidates.sort((a, b) => b.score - a.score);
+
+    // Primary logo = highest scoring
+    const primary = allCandidates[0];
+    let primaryLogo = null;
+    if (primary) {
+      if (primary.cssBackground) {
+        primaryLogo = primary.cssBackground;
+      } else if (primary.el) {
+        primaryLogo = extractLogoFromEl(primary.el, primary.context, baseUrl);
+      }
+    }
+
+    // Collect all unique instances (header, footer, hero)
+    const instances = [];
+    const seenContexts = new Set();
+    for (const c of allCandidates) {
+      if (seenContexts.has(c.context)) continue;
+      seenContexts.add(c.context);
+      let inst = null;
+      if (c.cssBackground) inst = c.cssBackground;
+      else if (c.el) inst = extractLogoFromEl(c.el, c.context, baseUrl);
+      if (inst) instances.push(inst);
+    }
 
-    document.querySelectorAll('link[rel="apple-touch-icon"]').forEach((link) => {
-      const href = link.getAttribute("href");
+    // Favicons
+    const favicons = [];
+    document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"]').forEach(link => {
+      const href = link.getAttribute('href');
       if (href) {
-        favicons.push({
-          type: "apple-touch-icon",
-          url: new URL(href, baseUrl).href,
-          sizes: link.getAttribute("sizes") || null,
-        });
+        try {
+          favicons.push({
+            type: link.getAttribute('rel'),
+            url: new URL(href, baseUrl).href,
+            sizes: link.getAttribute('sizes') || null,
+          });
+        } catch {}
       }
     });
 
     const ogImage = document.querySelector('meta[property="og:image"]');
-    if (ogImage) {
-      const content = ogImage.getAttribute("content");
-      if (content) {
-        favicons.push({
-          type: "og:image",
-          url: new URL(content, baseUrl).href,
-          sizes: null,
-        });
-      }
+    if (ogImage?.getAttribute('content')) {
+      try { favicons.push({ type: 'og:image', url: new URL(ogImage.getAttribute('content'), baseUrl).href, sizes: null }); } catch {}
     }
 
     const twitterImage = document.querySelector('meta[name="twitter:image"]');
-    if (twitterImage) {
-      const content = twitterImage.getAttribute("content");
-      if (content) {
-        favicons.push({
-          type: "twitter:image",
-          url: new URL(content, baseUrl).href,
-          sizes: null,
-        });
-      }
+    if (twitterImage?.getAttribute('content')) {
+      try { favicons.push({ type: 'twitter:image', url: new URL(twitterImage.getAttribute('content'), baseUrl).href, sizes: null }); } catch {}
     }
 
-    const hasFaviconIco = favicons.some((f) => f.url.endsWith("/favicon.ico"));
-    if (!hasFaviconIco) {
-      favicons.push({
-        type: "favicon.ico",
-        url: new URL("/favicon.ico", baseUrl).href,
-        sizes: null,
-      });
+    if (!favicons.some(f => f.url.endsWith('/favicon.ico'))) {
+      favicons.push({ type: 'favicon.ico', url: new URL('/favicon.ico', baseUrl).href, sizes: null });
     }
 
-    return { logo: logoData, favicons };
+    return { logo: primaryLogo, instances, favicons };
   }, url);
+
+  // Merge PWA icons into favicons
+  result.favicons = [...result.favicons, ...pwaIcons];
+
+  return result;
 }

package/package.json

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