dembrandt 0.6.0 → 0.6.1

package/index.js

@@ -20,7 +20,7 @@ import { join } from "path";
 program
   .name("dembrandt")
   .description("Extract design tokens from any website")
-  .version("0.6.0")
+  .version("0.6.1")
   .argument("<url>")
   .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
   .option("--json-only", "Output raw JSON")

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}`
+            );
+          });
         });
       }
     }

package/lib/extractors.js

@@ -6,6 +6,7 @@
  */
 
 import chalk from "chalk";
+import { convertColor } from "./colors.js";
 
 /**
  * Main extraction function - orchestrates the entire brand analysis process
@@ -793,7 +794,7 @@ async function extractLogo(page, url) {
  * Analyzes semantic colors, CSS variables, and visual frequency
  */
 async function extractColors(page) {
-  return await page.evaluate(() => {
+  const result = await page.evaluate(() => {
     // Helper: Convert any color to normalized hex for deduplication
     function normalizeColor(color) {
       const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
@@ -1214,6 +1215,41 @@ async function extractColors(page) {
       cssVariables: filteredCssVariables,
     };
   });
+
+  // Post-process: add LCH and OKLCH color formats to palette
+  if (result && result.palette) {
+    result.palette = result.palette.map((colorItem) => {
+      const converted = convertColor(colorItem.normalized || colorItem.color);
+      if (converted) {
+        return {
+          ...colorItem,
+          lch: converted.lch,
+          oklch: converted.oklch,
+        };
+      }
+      return colorItem;
+    });
+  }
+
+  // Post-process: add LCH and OKLCH to CSS variables
+  if (result && result.cssVariables) {
+    const enhancedCssVariables = {};
+    for (const [name, value] of Object.entries(result.cssVariables)) {
+      const converted = convertColor(value);
+      if (converted) {
+        enhancedCssVariables[name] = {
+          value,
+          lch: converted.lch,
+          oklch: converted.oklch,
+        };
+      } else {
+        enhancedCssVariables[name] = { value };
+      }
+    }
+    result.cssVariables = enhancedCssVariables;
+  }
+
+  return result;
 }
 
 async function extractTypography(page) {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dembrandt",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Extract design tokens and brand assets from any website",
   "main": "index.js",
   "type": "module",
   "bin": {
-    "dembrandt": "./index.js"
+    "dembrandt": "index.js"
   },
   "files": [
     "index.js",
@@ -28,7 +28,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/dembrandt/dembrandt.git"
+    "url": "git+https://github.com/dembrandt/dembrandt.git"
   },
   "bugs": {
     "url": "https://github.com/dembrandt/dembrandt/issues"