dembrandt 0.1.0 → 0.2.0

package/README.md

@@ -6,7 +6,7 @@
 
 A CLI tool for extracting design tokens and brand assets from any website. Powered by Playwright with advanced bot detection avoidance.
 
-![Dembrandt Demo](showcase.gif)
+![Dembrandt Demo](showcase.png)
 
 ## Quick Start
 
@@ -21,13 +21,15 @@ No installation required! Extract design tokens from any website in seconds. Or
 Dembrandt analyzes live websites and extracts their complete design system:
 
 - **Logo** — Logo detection (img/svg) with dimensions and source URL
-- **Colors** — Semantic colors, color palette with confidence scoring, CSS variables
+- **Favicons** — All favicon variants with sizes and types
+- **Colors** — Semantic colors, color palette with confidence scoring, CSS variables (both hex and RGB formats)
 - **Typography** — Font families, sizes, weights, line heights, font sources (Google Fonts, Adobe Fonts, custom)
 - **Spacing** — Margin and padding scales with grid system detection (4px/8px/custom)
 - **Border Radius** — Corner radius patterns with usage frequency
 - **Shadows** — Box shadow values for elevation systems
 - **Buttons** — Component styles with variants and states
 - **Inputs** — Form field styles (input, textarea, select)
+- **Links** — Link styles with hover states and decorations
 - **Breakpoints** — Responsive design breakpoints from media queries
 - **Icons** — Icon system detection (Font Awesome, Material Icons, SVG)
 - **Frameworks** — CSS framework detection (Tailwind, Bootstrap, Material-UI, Chakra)
@@ -148,6 +150,30 @@ dembrandt stripe.com --debug
 
 Useful for troubleshooting bot detection, timeouts, or extraction issues.
 
+**`--verbose-colors`** - Show medium and low confidence colors in terminal output
+
+```bash
+dembrandt stripe.com --verbose-colors
+```
+
+By default, only high-confidence colors are shown. Use this flag to see all detected colors.
+
+**`--dark-mode`** - Extract colors from dark mode
+
+```bash
+dembrandt stripe.com --dark-mode
+```
+
+Enables dark mode preference detection for sites that support it.
+
+**`--mobile`** - Extract from mobile viewport
+
+```bash
+dembrandt stripe.com --mobile
+```
+
+Simulates a mobile device viewport for responsive design token extraction.
+
 ## Output
 
 ### Automatic JSON Saves
@@ -324,12 +350,12 @@ Use `--debug` to see:
 
 ## Limitations
 
-- Captures default/light theme only (dark mode not detected)
+- Dark mode requires `--dark-mode` flag (not automatically detected)
 - Hover/focus states extracted from CSS (not fully interactive)
 - Canvas/WebGL-rendered sites cannot be analyzed (e.g., Tesla, Apple Vision Pro demos)
 - JavaScript-heavy sites require hydration time (8s initial + 4s stabilization)
 - Some dynamically-loaded content may be missed
-- Requires viewport simulation at 1920x1080
+- Default viewport is 1920x1080 (use `--mobile` for responsive analysis)
 
 ## Architecture
 
@@ -371,7 +397,9 @@ MIT
 
 ## Roadmap
 
-- [ ] Dark mode detection and extraction
+- [x] Dark mode extraction (via `--dark-mode` flag)
+- [x] Mobile viewport support (via `--mobile` flag)
+- [x] Clickable terminal links for modern terminals
 - [ ] Animation/transition detection
 - [ ] Interactive state capture (hover, focus, active)
 - [ ] Multi-page analysis

package/index.js

@@ -14,10 +14,7 @@ import { chromium } from "playwright";
 import { extractBranding } from "./lib/extractors.js";
 import { displayResults } from "./lib/display.js";
 import { writeFileSync, mkdirSync } from "fs";
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
+import { join } from "path";
 
 program
   .name("dembrandt")
@@ -26,6 +23,9 @@ program
   .argument("<url>")
   .option("--json-only", "Output raw JSON")
   .option("-d, --debug", "Force visible browser")
+  .option("--verbose-colors", "Show medium and low confidence colors")
+  .option("--dark-mode", "Extract colors from dark mode")
+  .option("--mobile", "Extract from mobile viewport")
   .action(async (input, opts) => {
     let url = input;
     if (!url.match(/^https?:\/\//)) url = "https://" + url;
@@ -62,6 +62,8 @@ program
         try {
           result = await extractBranding(url, spinner, browser, {
             navigationTimeout: 90000,
+            darkMode: opts.darkMode,
+            mobile: opts.mobile,
           });
           break;
         } catch (err) {
@@ -97,7 +99,8 @@ program
             .toISOString()
             .replace(/[:.]/g, "-")
             .split(".")[0];
-          const outputDir = join(__dirname, "output", domain);
+          // Save to current working directory, not installation directory
+          const outputDir = join(process.cwd(), "output", domain);
           mkdirSync(outputDir, { recursive: true });
 
           const filename = `${timestamp}.json`;
@@ -122,7 +125,7 @@ program
       if (opts.jsonOnly) {
         console.log(JSON.stringify(result, null, 2));
       } else {
-        displayResults(result);
+        displayResults(result, { verboseColors: opts.verboseColors });
       }
     } catch (err) {
       spinner.fail("Failed");