dembrandt 0.6.0 → 0.7.0

package/README.md

@@ -6,7 +6,15 @@
 
 Extract any website’s design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.
 
-![Dembrandt Demo](showcase.png)
+![Dembrandt — Any website to design tokens](docs/screenshots/banner.png)
+
+**CLI output**
+
+![CLI extraction of netflix.com](docs/screenshots/cli-output.png)
+
+**Local UI**
+
+![Local UI showing extracted brand](docs/screenshots/local-ui.png)
 
 ## Install
 
@@ -82,6 +90,37 @@ dembrandt stripe.com --dtcg
 
 The DTCG format is an industry-standard JSON schema that can be consumed by design tools and token transformation libraries like [Style Dictionary](https://styledictionary.com).
 
+## Local UI
+
+Browse your extracted brands in a visual interface.
+
+### Setup
+
+```bash
+cd local-ui
+npm install
+```
+
+### Running
+
+```bash
+npm start
+```
+
+Opens http://localhost:5173 with API on port 3002.
+
+### Features
+
+- Visual grid of all extracted brands
+- Color palettes with click-to-copy
+- Typography specimens
+- 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
+
+Extractions are performed via CLI (`dembrandt <url> --save-output`) and automatically appear in the UI.
+
 ## Use Cases
 
 - Brand audits & competitive analysis

package/index.js

@@ -14,13 +14,14 @@ import { chromium, firefox } from "playwright-core";
 import { extractBranding } from "./lib/extractors.js";
 import { displayResults } from "./lib/display.js";
 import { toW3CFormat } from "./lib/w3c-exporter.js";
+import { generatePDF } from "./lib/pdf.js";
 import { writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
 
 program
   .name("dembrandt")
   .description("Extract design tokens from any website")
-  .version("0.6.0")
+  .version("0.7.0")
   .argument("<url>")
   .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
   .option("--json-only", "Output raw JSON")
@@ -29,6 +30,7 @@ program
   .option("--dark-mode", "Extract colors from dark mode")
   .option("--mobile", "Extract from mobile viewport")
   .option("--slow", "3x longer timeouts for slow-loading sites")
+  .option("--brand-guide", "Export a brand guide PDF")
   .option("--no-sandbox", "Disable browser sandbox (needed for Docker/CI)")
   .action(async (input, opts) => {
     let url = input;
@@ -99,7 +101,7 @@ program
       const outputData = opts.dtcg ? toW3CFormat(result) : result;
 
       // Save JSON output if --save-output or --dtcg is specified
-      if ((opts.saveOutput || opts.dtcg) && !opts.jsonOnly) {
+      if (opts.saveOutput || opts.dtcg) {
         try {
           const domain = new URL(url).hostname.replace("www.", "");
           const timestamp = new Date()
@@ -129,6 +131,35 @@ program
         }
       }
 
+      // Generate PDF brand guide
+      if (opts.brandGuide) {
+        try {
+          const pdfDomain = new URL(url).hostname.replace("www.", "");
+          const now = new Date();
+          const pdfDate = now.toISOString().slice(0, 10);
+          const pdfTime = `${String(now.getHours()).padStart(2, '0')}-${String(now.getMinutes()).padStart(2, '0')}`;
+          const pdfDir = join(process.cwd(), "output", pdfDomain);
+          mkdirSync(pdfDir, { recursive: true });
+          const pdfFilename = `${pdfDomain}-brand-guide-${pdfDate}-${pdfTime}.pdf`;
+          const pdfPath = join(pdfDir, pdfFilename);
+          spinner.start("Generating PDF brand guide...");
+          await generatePDF(result, pdfPath, browser);
+          spinner.stop();
+          console.log(
+            chalk.dim(
+              `PDF saved to: ${chalk.hex('#8BE9FD')(
+                `output/${pdfDomain}/${pdfFilename}`
+              )}`
+            )
+          );
+        } catch (err) {
+          spinner.stop();
+          console.log(
+            chalk.hex('#FFB86C')(`Could not generate PDF: ${err.message}`)
+          );
+        }
+      }
+
       // Output to terminal
       if (opts.jsonOnly) {
         console.log(JSON.stringify(outputData, null, 2));

package/lib/colors.js

@@ -0,0 +1,242 @@
+/**
+ * Color Conversion Utilities
+ *
+ * Converts colors between RGB, LCH, and OKLCH color spaces.
+ */
+
+/**
+ * Convert sRGB to linear RGB
+ */
+function srgbToLinear(c) {
+  c = c / 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+/**
+ * Convert linear RGB to XYZ (D65 illuminant)
+ */
+function linearRgbToXyz(r, g, b) {
+  return {
+    x: 0.4124564 * r + 0.3575761 * g + 0.1804375 * b,
+    y: 0.2126729 * r + 0.7151522 * g + 0.0721750 * b,
+    z: 0.0193339 * r + 0.1191920 * g + 0.9503041 * b
+  };
+}
+
+/**
+ * Convert XYZ to Lab (D65 reference white)
+ */
+function xyzToLab(x, y, z) {
+  // D65 reference white
+  const xn = 0.95047;
+  const yn = 1.00000;
+  const zn = 1.08883;
+
+  const f = (t) => t > 0.008856 ? Math.cbrt(t) : (903.3 * t + 16) / 116;
+
+  const fx = f(x / xn);
+  const fy = f(y / yn);
+  const fz = f(z / zn);
+
+  return {
+    l: 116 * fy - 16,
+    a: 500 * (fx - fy),
+    b: 200 * (fy - fz)
+  };
+}
+
+/**
+ * Convert Lab to LCH
+ */
+function labToLch(l, a, b) {
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) * (180 / Math.PI);
+  if (h < 0) h += 360;
+
+  return {
+    l: l,
+    c: c,
+    h: h
+  };
+}
+
+/**
+ * Convert RGB to LCH
+ * @param {number} r - Red (0-255)
+ * @param {number} g - Green (0-255)
+ * @param {number} b - Blue (0-255)
+ * @returns {{ l: number, c: number, h: number }}
+ */
+export function rgbToLch(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+
+  const xyz = linearRgbToXyz(lr, lg, lb);
+  const lab = xyzToLab(xyz.x, xyz.y, xyz.z);
+  return labToLch(lab.l, lab.a, lab.b);
+}
+
+/**
+ * Convert linear RGB to OKLab
+ * Uses the OKLab color space for perceptual uniformity
+ */
+function linearRgbToOklab(r, g, b) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+
+  return {
+    L: 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s
+  };
+}
+
+/**
+ * Convert OKLab to OKLCH
+ */
+function oklabToOklch(L, a, b) {
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) * (180 / Math.PI);
+  if (h < 0) h += 360;
+
+  return {
+    l: L,
+    c: c,
+    h: h
+  };
+}
+
+/**
+ * Convert RGB to OKLCH
+ * @param {number} r - Red (0-255)
+ * @param {number} g - Green (0-255)
+ * @param {number} b - Blue (0-255)
+ * @returns {{ l: number, c: number, h: number }}
+ */
+export function rgbToOklch(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+
+  const oklab = linearRgbToOklab(lr, lg, lb);
+  return oklabToOklch(oklab.L, oklab.a, oklab.b);
+}
+
+/**
+ * Format LCH values as CSS lch() string
+ * @param {{ l: number, c: number, h: number }} lch
+ * @param {number} [alpha] - Optional alpha value (0-1)
+ * @returns {string}
+ */
+export function formatLch(lch, alpha) {
+  const l = Math.round(lch.l * 100) / 100;
+  const c = Math.round(lch.c * 100) / 100;
+  const h = Math.round(lch.h * 100) / 100;
+
+  if (alpha !== undefined && alpha < 1) {
+    return `lch(${l}% ${c} ${h} / ${alpha})`;
+  }
+  return `lch(${l}% ${c} ${h})`;
+}
+
+/**
+ * Format OKLCH values as CSS oklch() string
+ * @param {{ l: number, c: number, h: number }} oklch
+ * @param {number} [alpha] - Optional alpha value (0-1)
+ * @returns {string}
+ */
+export function formatOklch(oklch, alpha) {
+  // OKLCH lightness is 0-1, displayed as percentage
+  const l = Math.round(oklch.l * 10000) / 100;
+  const c = Math.round(oklch.c * 1000) / 1000;
+  const h = Math.round(oklch.h * 100) / 100;
+
+  if (alpha !== undefined && alpha < 1) {
+    return `oklch(${l}% ${c} ${h} / ${alpha})`;
+  }
+  return `oklch(${l}% ${c} ${h})`;
+}
+
+/**
+ * Parse a hex color string and return RGB values
+ * @param {string} hex - Hex color (#fff, #ffffff, #ffffffaa)
+ * @returns {{ r: number, g: number, b: number, a?: number } | null}
+ */
+export function hexToRgb(hex) {
+  if (!hex || !hex.startsWith('#')) return null;
+
+  // Remove #
+  hex = hex.slice(1);
+
+  // Handle 3-digit hex
+  if (hex.length === 3) {
+    return {
+      r: parseInt(hex[0] + hex[0], 16),
+      g: parseInt(hex[1] + hex[1], 16),
+      b: parseInt(hex[2] + hex[2], 16)
+    };
+  }
+
+  // Handle 6-digit hex
+  if (hex.length === 6) {
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16)
+    };
+  }
+
+  // Handle 8-digit hex (with alpha)
+  if (hex.length === 8) {
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: parseInt(hex.slice(6, 8), 16) / 255
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Convert any supported color format to all formats
+ * @param {string} colorString - Color in hex, rgb(), or rgba() format
+ * @returns {{ hex: string, rgb: string, lch: string, oklch: string, hasAlpha: boolean } | null}
+ */
+export function convertColor(colorString) {
+  let r, g, b, a;
+
+  // Parse rgba/rgb
+  const rgbaMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbaMatch) {
+    r = parseInt(rgbaMatch[1]);
+    g = parseInt(rgbaMatch[2]);
+    b = parseInt(rgbaMatch[3]);
+    a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : undefined;
+  } else {
+    // Try hex
+    const rgb = hexToRgb(colorString);
+    if (!rgb) return null;
+    r = rgb.r;
+    g = rgb.g;
+    b = rgb.b;
+    a = rgb.a;
+  }
+
+  const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  const rgbStr = a !== undefined ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+
+  const lchValues = rgbToLch(r, g, b);
+  const oklchValues = rgbToOklch(r, g, b);
+
+  return {
+    hex: hex.toLowerCase(),
+    rgb: rgbStr,
+    lch: formatLch(lchValues, a),
+    oklch: formatOklch(oklchValues, a),
+    hasAlpha: a !== undefined && a < 1
+  };
+}

package/lib/display.js

@@ -6,6 +6,7 @@
  */
 
 import chalk from 'chalk';
+import { convertColor } from './colors.js';
 
 /**
  * Creates a clickable terminal link using ANSI escape codes
@@ -94,65 +95,20 @@ function displayFavicons(favicons) {
 }
 
 function normalizeColorFormat(colorString) {
-  // Return both hex and rgb formats
-  const rgbaMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-  if (rgbaMatch) {
-    const r = parseInt(rgbaMatch[1]);
-    const g = parseInt(rgbaMatch[2]);
-    const b = parseInt(rgbaMatch[3]);
-    const a = rgbaMatch[4];
-
-    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-    const rgb = a ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
-
-    return { hex, rgb, hasAlpha: !!a };
+  // Use the centralized color conversion utility
+  const converted = convertColor(colorString);
+  if (converted) {
+    return converted;
   }
 
-  // Match 3-digit hex (#fff, #f0a, etc.)
-  const hexMatch3 = colorString.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
-  if (hexMatch3) {
-    // Expand 3-digit to 6-digit (#fff → #ffffff)
-    const r = parseInt(hexMatch3[1] + hexMatch3[1], 16);
-    const g = parseInt(hexMatch3[2] + hexMatch3[2], 16);
-    const b = parseInt(hexMatch3[3] + hexMatch3[3], 16);
-
-    return {
-      hex: `#${hexMatch3[1]}${hexMatch3[1]}${hexMatch3[2]}${hexMatch3[2]}${hexMatch3[3]}${hexMatch3[3]}`.toLowerCase(),
-      rgb: `rgb(${r}, ${g}, ${b})`,
-      hasAlpha: false
-    };
-  }
-
-  // Match 8-digit hex with alpha (#ffffff80, #00ff00ff, etc.)
-  const hexMatch8 = colorString.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (hexMatch8) {
-    const r = parseInt(hexMatch8[1], 16);
-    const g = parseInt(hexMatch8[2], 16);
-    const b = parseInt(hexMatch8[3], 16);
-    const a = (parseInt(hexMatch8[4], 16) / 255).toFixed(2);
-
-    return {
-      hex: `#${hexMatch8[1]}${hexMatch8[2]}${hexMatch8[3]}`.toLowerCase(),
-      rgb: `rgba(${r}, ${g}, ${b}, ${a})`,
-      hasAlpha: true
-    };
-  }
-
-  // Match 6-digit hex (#ffffff, #f0a0b0, etc.)
-  const hexMatch6 = colorString.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (hexMatch6) {
-    const r = parseInt(hexMatch6[1], 16);
-    const g = parseInt(hexMatch6[2], 16);
-    const b = parseInt(hexMatch6[3], 16);
-
-    return {
-      hex: colorString.toLowerCase(),
-      rgb: `rgb(${r}, ${g}, ${b})`,
-      hasAlpha: false
-    };
-  }
-
-  return { hex: colorString, rgb: colorString, hasAlpha: false };
+  // Fallback for unparseable colors
+  return {
+    hex: colorString,
+    rgb: colorString,
+    lch: colorString,
+    oklch: colorString,
+    hasAlpha: false
+  };
 }
 
 function displayColors(colors) {
@@ -170,6 +126,8 @@ function displayColors(colors) {
         allColors.push({
           hex: formats.hex,
           rgb: formats.rgb,
+          lch: formats.lch,
+          oklch: formats.oklch,
           hasAlpha: formats.hasAlpha,
           label: role,
           type: 'semantic',
@@ -181,12 +139,18 @@ function displayColors(colors) {
   // Add CSS variables
   if (colors.cssVariables) {
     const limit = 15;
-    Object.entries(colors.cssVariables).slice(0, limit).forEach(([name, value]) => {
+    Object.entries(colors.cssVariables).slice(0, limit).forEach(([name, varData]) => {
       try {
-        const formats = normalizeColorFormat(value);
+        // Handle both old format (string) and new format (object with value, lch, oklch)
+        const colorValue = typeof varData === 'string' ? varData : varData.value;
+        const formats = normalizeColorFormat(colorValue);
+
+        // Use pre-computed LCH/OKLCH from extractor if available
         allColors.push({
           hex: formats.hex,
           rgb: formats.rgb,
+          lch: (typeof varData === 'object' && varData.lch) || formats.lch,
+          oklch: (typeof varData === 'object' && varData.oklch) || formats.oklch,
           hasAlpha: formats.hasAlpha,
           label: name,
           type: 'variable',
@@ -208,6 +172,8 @@ function displayColors(colors) {
       allColors.push({
         hex: formats.hex,
         rgb: formats.rgb,
+        lch: c.lch || formats.lch,
+        oklch: c.oklch || formats.oklch,
         hasAlpha: formats.hasAlpha,
         label: '',
         type: 'palette',
@@ -244,10 +210,11 @@ function displayColors(colors) {
 
   const uniqueColors = Array.from(colorMap.values());
 
-  // Display all colors with both hex and RGB in grid format
-  uniqueColors.forEach(({ hex, rgb, label, confidence }, index) => {
+  // Display all colors with hex, RGB, LCH, and OKLCH formats
+  uniqueColors.forEach(({ hex, rgb, lch, oklch, label, confidence }, index) => {
     const isLast = index === uniqueColors.length - 1;
     const branch = isLast ? '└─' : '├─';
+    const indent = isLast ? '   ' : '│  ';
 
     try {
       const colorBlock = chalk.bgHex(hex)('  ');
@@ -256,12 +223,19 @@ function displayColors(colors) {
       else if (confidence === 'medium') conf = chalk.hex('#FFB86C')('●');
       else conf = chalk.gray('●'); // low confidence
 
-      const labelText = label ? chalk.dim(label) : '';
+      const labelText = label ? chalk.dim(` ${label}`) : '';
 
-      // Show hex and RGB side by side for easy copying
-      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${conf} ${colorBlock} ${hex.padEnd(9)} ${rgb.padEnd(22)} ${labelText}`);
+      // First line: color swatch, hex, and label
+      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${conf} ${colorBlock} ${hex}${labelText}`);
+      // Second line: RGB and LCH
+      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('rgb:   ') + rgb);
+      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('lch:   ') + lch);
+      console.log(chalk.dim(`│  ${indent}└─`) + ' ' + chalk.dim('oklch: ') + oklch);
     } catch {
-      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${hex.padEnd(9)} ${rgb.padEnd(22)} ${label ? chalk.dim(label) : ''}`);
+      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${hex} ${label ? chalk.dim(label) : ''}`);
+      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('rgb:   ') + rgb);
+      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('lch:   ') + lch);
+      console.log(chalk.dim(`│  ${indent}└─`) + ' ' + chalk.dim('oklch: ') + oklch);
     }
   });
 
@@ -341,33 +315,49 @@ function displayTypography(typography) {
         console.log(chalk.dim(`│  ${indent}${contextBranch}`) + ' ' + chalk.hex('#8BE9FD')(context));
 
         styles.forEach((style, styleIndex) => {
-          const modifiers = [];
+          const isStyleLast = styleIndex === styles.length - 1;
+          const styleIndent = isFontLast ? '   ' : '│  ';
+          const contextIndent = isContextLast ? '   ' : '│  ';
+          const styleBranch = isStyleLast ? '└─' : '├─';
+          const propIndent = isStyleLast ? '   ' : '│  ';
+
+          // Main size line
+          console.log(chalk.dim(`│  ${styleIndent}${contextIndent}${styleBranch}`) + ' ' + `${style.size}`);
 
+          // Collect properties
+          const props = [];
           if (style.weight && style.weight !== 400) {
-            modifiers.push(`w${style.weight}`);
+            props.push({ key: 'weight', value: style.weight });
           }
-
           if (style.lineHeight) {
             const lh = parseFloat(style.lineHeight);
             let lhLabel = '';
-            if (lh <= 1.3) lhLabel = 'tight';
-            else if (lh >= 1.6) lhLabel = 'relaxed';
-            modifiers.push(lhLabel ? `lh${style.lineHeight}(${lhLabel})` : `lh${style.lineHeight}`);
+            if (lh <= 1.3) lhLabel = ' (tight)';
+            else if (lh >= 1.6) lhLabel = ' (relaxed)';
+            props.push({ key: 'line-height', value: `${style.lineHeight}${lhLabel}` });
+          }
+          if (style.transform) {
+            props.push({ key: 'transform', value: style.transform });
+          }
+          if (style.spacing) {
+            props.push({ key: 'letter-spacing', value: style.spacing });
+          }
+          if (style.isFluid) {
+            props.push({ key: 'fluid', value: 'yes' });
+          }
+          if (style.fontFeatures) {
+            props.push({ key: 'features', value: style.fontFeatures });
           }
 
-          if (style.transform) modifiers.push(style.transform);
-          if (style.spacing) modifiers.push(`ls${style.spacing}`);
-          if (style.isFluid) modifiers.push('fluid');
-          if (style.fontFeatures) modifiers.push('features');
-
-          const modifierStr = modifiers.length > 0 ? ` ${chalk.dim('[' + modifiers.join(' ') + ']')}` : '';
-
-          const isStyleLast = styleIndex === styles.length - 1;
-          const styleIndent = isFontLast ? '   ' : '│  ';
-          const contextIndent = isContextLast ? '   ' : '│  ';
-          const styleBranch = isStyleLast ? '└─' : '├─';
-
-          console.log(chalk.dim(`│  ${styleIndent}${contextIndent}${styleBranch}`) + ' ' + `${style.size}${modifierStr}`);
+          // Display properties
+          props.forEach((prop, propIndex) => {
+            const isLastProp = propIndex === props.length - 1;
+            const propBranch = isLastProp ? '└─' : '├─';
+            console.log(
+              chalk.dim(`│  ${styleIndent}${contextIndent}${propIndent}${propBranch}`) + ' ' +
+              chalk.dim(`${prop.key}: `) + `${prop.value}`
+            );
+          });
         });
       }
     }