dembrandt 0.11.0 → 0.12.0

package/README.md

@@ -6,7 +6,7 @@
 
 Extract a website's design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.
 
-![Dembrandt — Any website to design tokens](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/banner.png)
+![Dembrandt: Any website to design tokens](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/banner.png)
 
 ## Install
 
@@ -77,7 +77,7 @@ Default: formatted terminal display only. Use `--save-output` to persist results
 
 ### Multi-Page Extraction
 
-Analyze multiple pages to get a more complete picture of a site's design system. Results are merged into a single unified output with cross-page confidence boosting — tokens appearing on multiple pages get higher confidence scores.
+Analyze multiple pages to get a more complete picture of a site's design system. Results are merged into a single unified output with cross-page confidence boosting: tokens appearing on multiple pages get higher confidence scores.
 
 ```bash
 # Analyze homepage + 4 auto-discovered pages (default: 5 total)
@@ -133,7 +133,7 @@ The DTCG format is an industry-standard JSON schema that can be consumed by desi
 
 ### DESIGN.md
 
-Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file — a plain-text design system document readable by AI agents.
+Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents.
 
 ```bash
 dembrandt example.com --design-md
@@ -142,7 +142,7 @@ dembrandt example.com --design-md
 
 ### 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.
+Use `--brand-guide` to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.
 
 ```bash
 dembrandt example.com --brand-guide
@@ -176,7 +176,7 @@ Opens http://localhost:5173 with API on port 3002.
 - Spacing, shadows, border radius visualization
 - Button and link component previews
 - Dark/light theme toggle
-- Section nav links on extraction pages — jump directly to Colors, Typography, Shadows, etc. via a sticky sidebar
+- Section nav links on extraction pages, jump directly to Colors, Typography, Shadows, etc. via a sticky sidebar
 
 Extractions are performed via CLI (`dembrandt <url> --save-output`) and automatically appear in the UI.
 
@@ -204,9 +204,9 @@ Uses Playwright to render the page, reads computed styles from the DOM, analyzes
 
 ### Color Confidence
 
-- High — Logo, primary interactive elements
-- Medium — Secondary interactive elements, icons, navigation
-- Low — Generic UI components (filtered from display)
+- High: Logo, primary interactive elements
+- Medium: Secondary interactive elements, icons, navigation
+- Low: Generic UI components (filtered from display)
 - Only shows high and medium confidence colors in terminal. Full palette in JSON.
 
 ## Limitations
@@ -228,12 +228,10 @@ Dembrandt does not host, redistribute, or claim rights to any third-party brand
 
 ## Contributing
 
-Bugs, weird sites, pull requests — all welcome.
+Bugs, weird sites, pull requests. All welcome.
 
 Open an [Issue](https://github.com/dembrandt/dembrandt/issues) or PR.
 
 @thevangelist
 
----
-
-MIT — do whatever you want with it.
+MIT. Do whatever you want with it.

package/index.js

@@ -27,7 +27,7 @@ program
   .description("Extract design tokens from any website")
   .version("0.11.0")
   .argument("<url>")
-  .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
+  .option("--browser <type>", "Browser to use (chromium|firefox); set BROWSER_CDP_ENDPOINT env var to connect to an existing Chromium instance via CDP", "chromium")
   .option("--json-only", "Output raw JSON")
   .option("--save-output", "Save JSON file to output folder")
   .option("--dtcg", "Export in W3C Design Tokens (DTCG) format")
@@ -93,10 +93,18 @@ program
         if (opts.noSandbox && opts.browser === 'chromium') {
           launchArgs.push("--no-sandbox", "--disable-setuid-sandbox");
         }
-        browser = await browserType.launch({
-          headless: !useHeaded,
-          args: launchArgs,
-        });
+        if (process.env.BROWSER_CDP_ENDPOINT) {
+          if (opts.browser !== 'chromium') {
+            throw new Error("BROWSER_CDP_ENDPOINT is only supported with --browser chromium.");
+          }
+          spinner.text = "Connecting over CDP...";
+          browser = await browserType.connectOverCDP(process.env.BROWSER_CDP_ENDPOINT);
+        } else {
+          browser = await browserType.launch({
+            headless: !useHeaded,
+            args: launchArgs,
+          });
+        }
 
         try {
           const isMultiPage = opts.pages || opts.sitemap;
@@ -170,7 +178,7 @@ program
           await browser.close();
           browser = null;
 
-          if (useHeaded) throw err;
+          if (useHeaded || process.env.BROWSER_CDP_ENDPOINT) throw err;
 
           if (
             err.message.includes("Timeout") ||

package/lib/extractors.js

@@ -464,7 +464,7 @@ export async function extractBranding(
     // Merge hover/focus colors into palette
     hoverFocusColors.forEach(({ color, property }) => {
       const isDuplicate = colors.palette.some((c) => c.color === color);
-      if (!isDuplicate && color) {
+      if (!isDuplicate && color && /^(rgba?\(|hsla?\(|#)/i.test(color.trim())) {
         // Normalize and add to palette
         const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
         let normalized = color.toLowerCase();
@@ -1000,6 +1000,8 @@ async function extractColors(page) {
         // Only accept if it contains rgb/hsl/# inside
         return /#[0-9a-f]{3,6}|rgba?\(|hsla?\(/i.test(value);
       }
+      // Reject modern color functions not parseable to hex (oklab, oklch, lch, lab, color(), display-p3)
+      if (/^(oklab|oklch|lch|lab|color)\s*\(/i.test(value)) return false;
       // Accept hex, rgb, hsl, named colors
       return /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\(|[a-z]+)/i.test(value);
     }
@@ -1171,12 +1173,14 @@ async function extractColors(page) {
         const colorRegex = /(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|[a-z]+)/gi;
         const matches = colorValue.match(colorRegex) || [];
 
-        // Filter out invalid matches
+        // Filter out invalid matches and modern CSS function names that aren't parseable
+        const cssColorFunctions = new Set(['oklab','oklch','lch','lab','color','display','hsl','rgb','rgba','hsla','inherit','initial','unset','none','auto','normal']);
         return matches.filter(c =>
           c !== 'transparent' &&
           c !== 'rgba(0, 0, 0, 0)' &&
           c !== 'rgba(0,0,0,0)' &&
-          c.length > 2
+          c.length > 2 &&
+          !cssColorFunctions.has(c.toLowerCase())
         );
       }
 
@@ -1244,9 +1248,10 @@ async function extractColors(page) {
         return true;
       }
 
-      // Chromatic colors (saturated) that never appear as backgrounds are likely browser defaults
-      // or framework internals, not brand colors. Real brand colors appear on backgrounds somewhere.
-      if (data.bgCount === 0) {
+      // Chromatic colors with no background usage and no semantic context are likely browser
+      // defaults or framework internals. But link/text brand colors have semantic score > count
+      // (they appear on semantically-labeled elements), so exempt those.
+      if (data.bgCount === 0 && data.score < data.count * 1.5) {
         const hex = normalized.replace('#', '');
         const r = parseInt(hex.substring(0, 2), 16);
         const g = parseInt(hex.substring(2, 4), 16);
@@ -1254,7 +1259,6 @@ async function extractColors(page) {
         const max = Math.max(r, g, b);
         const min = Math.min(r, g, b);
         const saturation = max === 0 ? 0 : (max - min) / max;
-        // If saturation > 0.3, this is a chromatic color with no background usage
         if (saturation > 0.3) {
           return true;
         }
@@ -1347,8 +1351,10 @@ async function extractColors(page) {
 
     const palette = Array.from(colorMap.entries())
       .filter(([normalizedColor, data]) => {
-        // Filter out colors below threshold
-        if (data.count < threshold) return false;
+        // High-score colors (semantically significant: buttons, headers with brand colors) bypass
+        // the count threshold — a header that appears once can still be a primary brand color.
+        const highScore = data.score >= 10 || (data.count > 0 && data.score / data.count >= 3);
+        if (!highScore && data.count < threshold) return false;
 
         // Filter out structural colors (very high usage without semantic context)
         if (isStructuralColor(data, totalElements)) {

package/package.json

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