dembrandt 0.15.0 → 0.16.0

package/lib/extractors/index.js

@@ -241,6 +241,7 @@ async function simulateHumanMouse(page) {
 export async function extractBranding(url, spinner, browser, options = {}) {
   const timeoutMultiplier = options.slow ? 3 : 1;
   const timeouts = [];
+  const degraded = []; // post-extraction stages that failed but did not abort the run
 
   spinner.text = "Creating browser context...";
 
@@ -556,6 +557,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     spinner.stop();
 
     // Inject manifest theme_color / background_color as high-confidence palette entries
+    try {
     if (manifest) {
       const manifestColorEntries = [
         manifest.themeColor && { color: manifest.themeColor, label: 'manifest:theme_color' },
@@ -615,6 +617,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       ].filter(Boolean);
       console.log(color.success(`  ✓ Manifest: ${parts.join(', ')}`));
     }
+    } catch (e) { degraded.push('manifest'); console.log(color.warning('  ! Manifest injection: failed (continuing)')); }
     console.log(colors.palette.length > 0 ? color.success(`  ✓ Colors: ${colors.palette.length} found`) : color.warning(`  ! Colors: 0 found`));
     console.log(typography.styles.length > 0 ? color.success(`  ✓ Typography: ${typography.styles.length} styles`) : color.warning(`  ! Typography: 0 styles`));
     console.log(spacing.commonValues.length > 0 ? color.success(`  ✓ Spacing: ${spacing.commonValues.length} values`) : color.warning(`  ! Spacing: 0 values`));
@@ -634,8 +637,10 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     console.log();
 
     // Hover/focus state extraction
-    spinner.start("Extracting hover/focus state colors...");
     const hoverFocusColors = [];
+    const interactiveStatePairs = []; // { fg, bg, state, tag } — raw rgb strings, normalized later (consumed by WCAG stage)
+    try {
+    spinner.start("Extracting hover/focus state colors...");
 
     function splitMultiValueColors(colorValue) {
       if (!colorValue) return [];
@@ -655,7 +660,6 @@ 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 {
@@ -837,9 +841,11 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     console.log(hoverFocusColors.length > 0 ?
       color.success(`  ✓ Hover/focus: ${hoverFocusColors.length} state colors found`) :
       color.warning(`  ! Hover/focus: 0 state colors found`));
+    } catch (e) { spinner.stop(); degraded.push('hover-focus'); console.log(color.warning('  ! Hover/focus: failed (continuing)')); }
 
     // Dark mode
     if (options.darkMode) {
+      try {
       spinner.start("Extracting dark mode colors...");
       await page.evaluate(() => {
         document.documentElement.setAttribute("data-theme", "dark");
@@ -867,10 +873,12 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
       spinner.stop();
       console.log(color.success(`  ✓ Dark mode: +${darkModeColors.palette.length} colors`));
+      } catch (e) { spinner.stop(); degraded.push('dark-mode'); console.log(color.warning('  ! Dark mode: failed (continuing)')); }
     }
 
     // Mobile viewport
     if (options.mobile) {
+      try {
       spinner.start("Extracting mobile viewport colors...");
       await page.setViewportSize({ width: 390, height: 844 });
       await page.waitForTimeout(500 * timeoutMultiplier);
@@ -885,6 +893,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
       spinner.stop();
       console.log(color.success(`  ✓ Mobile: +${mobileColors.palette.length} colors`));
+      } catch (e) { spinner.stop(); degraded.push('mobile'); console.log(color.warning('  ! Mobile: failed (continuing)')); }
     }
 
     spinner.stop();
@@ -992,16 +1001,19 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       ...(options.wcag ? { wcag } : {}),
     };
 
-    const isCanvasOnly = await page.evaluate(() => {
-      const canvases = document.querySelectorAll("canvas");
-      const hasRealContent = document.body.textContent.trim().length > 200;
-      const hasManyCanvases = canvases.length > 3;
-      const hasWebGL = Array.from(canvases).some((c) => {
-        const ctx = c.getContext("webgl") || c.getContext("webgl2");
-        return !!ctx;
+    let isCanvasOnly = false;
+    try {
+      isCanvasOnly = await page.evaluate(() => {
+        const canvases = document.querySelectorAll("canvas");
+        const hasRealContent = document.body.textContent.trim().length > 200;
+        const hasManyCanvases = canvases.length > 3;
+        const hasWebGL = Array.from(canvases).some((c) => {
+          const ctx = c.getContext("webgl") || c.getContext("webgl2");
+          return !!ctx;
+        });
+        return hasManyCanvases && hasWebGL && !hasRealContent;
       });
-      return hasManyCanvases && hasWebGL && !hasRealContent;
-    });
+    } catch { isCanvasOnly = false; }
 
     if (isCanvasOnly) {
       result.note = "This website uses canvas/WebGL rendering. Design system cannot be extracted from DOM.";
@@ -1009,7 +1021,9 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     }
 
     if (options.screenshotPath) {
-      await page.screenshot({ path: options.screenshotPath, fullPage: false });
+      try {
+        await page.screenshot({ path: options.screenshotPath, fullPage: false });
+      } catch (e) { degraded.push('screenshot'); }
     }
 
     if (options.includeRawColors) {
@@ -1024,6 +1038,8 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       }
     }
 
+    if (degraded.length) result.meta.degraded = degraded;
+
     return result;
   } catch (error) {
     spinner.fail("Extraction failed");

package/lib/extractors/logo.js

@@ -262,10 +262,37 @@ export async function extractLogo(page, url) {
           position: { top: rect.top, left: rect.left },
         };
       } else if (el.tagName === 'SVG' || el.tagName === 'svg') {
+        // Inline SVG: the logo lives in the DOM, not at a URL. Capture the
+        // resolved color (currentColor → the element's `color`), serialize the
+        // markup, and emit a self-contained data URI so the logo is usable.
+        const color = toHex(computed.color);
+        const ariaLabel = el.getAttribute('aria-label') || null;
+
+        let markup = null;
+        let dataUri = null;
+        try {
+          const clone = el.cloneNode(true);
+          // Bake the resolved color in so `currentColor` fills render standalone.
+          if (color) clone.style.color = color;
+          if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+          const serialized = clone.outerHTML;
+          // Skip pathological inline SVGs (sprite sheets, embedded rasters).
+          if (serialized && serialized.length <= 50000) {
+            markup = serialized;
+            dataUri = 'data:image/svg+xml;utf8,' + encodeURIComponent(serialized);
+          }
+        } catch {}
+
         return {
           source: 'svg',
           context,
+          inline: true,
+          // Link target the logo points at; the logo itself is `markup`/`dataUri`.
           url: parentLink ? parentLink.href : baseUrl,
+          color,
+          ariaLabel,
+          markup,
+          dataUri,
           width: el.width?.baseVal?.value || rect.width,
           height: el.height?.baseVal?.value || rect.height,
           type: logoType,
@@ -557,7 +584,10 @@ export async function extractLogo(page, url) {
       try { favicons.push({ type: 'twitter:image', url: new URL(twitterImage.getAttribute('content'), baseUrl).href, sizes: null }); } catch {}
     }
 
-    if (!favicons.some(f => f.url.endsWith('/favicon.ico'))) {
+    // Only synthesize the /favicon.ico fallback when the page declares no icon at
+    // all. Sites that ship their icon under another name (e.g. favicon-purple.ico)
+    // often 404 on the bare /favicon.ico, which would surface as a broken entry.
+    if (!favicons.some(f => /icon/i.test(f.type || ''))) {
       favicons.push({ type: 'favicon.ico', url: new URL('/favicon.ico', baseUrl).href, sizes: null });
     }
 

package/lib/formatters/pdf.js

@@ -846,6 +846,11 @@ ${(() => {
 function getLogoImageUrl(data) {
   const isImageUrl = (url) => /\.(svg|png|jpg|jpeg|webp|gif)(\?.*)?$/i.test(url);
 
+  // Inline SVG logos carry their own self-contained data URI.
+  if (data.logo?.inline && data.logo.dataUri) {
+    return data.logo.dataUri;
+  }
+
   if (data.logo?.url && isImageUrl(data.logo.url)) {
     return data.logo.url;
   }

package/lib/formatters/terminal.js

@@ -69,7 +69,13 @@ function displayLogo(logo) {
 
   console.log(chalk.dim('├─') + ' ' + chalk.bold('Logo'));
 
-  if (logo.url) {
+  if (logo.inline) {
+    const colorInfo = logo.color ? ` · ${logo.color}` : '';
+    console.log(chalk.dim('│  ├─') + ' ' + chalk.dim(`inline ${logo.source || 'svg'}${colorInfo}`));
+    if (logo.url && logo.url !== '/') {
+      console.log(chalk.dim('│  ├─') + ' ' + chalk.blue(terminalLink(logo.url)));
+    }
+  } else if (logo.url) {
     console.log(chalk.dim('│  ├─') + ' ' + chalk.blue(terminalLink(logo.url)));
   }
 

package/package.json

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