extraktor 1.0.0

package/dist/cli/index.js

@@ -0,0 +1,3261 @@
+#!/usr/bin/env node
+import {
+  GenomeEngine,
+  SiteCloner
+} from "../chunk-VLLFGYUN.js";
+import {
+  Orchestrator,
+  PlaywrightDriver,
+  getDefaultConfig,
+  loadConfig
+} from "../chunk-PHMSK7VD.js";
+import {
+  createLogger
+} from "../chunk-5IH5TLAQ.js";
+
+// src/cli/index.ts
+import { Command } from "commander";
+import ora from "ora";
+import chalk from "chalk";
+import path3 from "path";
+import os from "os";
+
+// src/cloner/transformer.ts
+import fs from "fs-extra";
+import path from "path";
+
+// src/generators/ai-component.ts
+var SYSTEM_PROMPT = `You are an expert React/TypeScript developer specializing in converting raw HTML into clean, modern React components.
+
+Your task is to transform messy HTML (often from Framer, Webflow, or other site builders) into clean, maintainable React components.
+
+RULES:
+1. Use Tailwind CSS classes instead of inline styles
+2. Use semantic HTML elements (header, nav, main, section, footer, article, etc.)
+3. Use framer-motion for animations (fade-in, slide-up, stagger effects)
+4. Create TypeScript interfaces for props
+5. Make content editable via props (text, images, links)
+6. Remove all auto-generated class names (framer-*, w-*, etc.)
+7. Keep the visual structure but simplify the DOM
+8. Use CSS variables for colors from the provided design tokens
+9. NEVER use dangerouslySetInnerHTML
+10. Export the component as both named and default export
+
+OUTPUT FORMAT:
+Return ONLY the TypeScript/React code. No explanations, no markdown code blocks.
+Start directly with the imports.`;
+function buildUserPrompt(options) {
+  const { componentName, html, tokens, includeAnimations = true } = options;
+  const tokenSummary = `
+DESIGN TOKENS:
+Colors: ${tokens.colors.map((c) => `${c.name}: ${c.value}`).join(", ")}
+Fonts: ${tokens.fonts.map((f) => `${f.name}: ${f.value}`).join(", ")}
+Spacing: ${tokens.spacing.map((s) => `${s.name}: ${s.value}`).join(", ")}
+${tokens.shadows ? `Shadows: ${tokens.shadows.map((s) => `${s.name}: ${s.value}`).join(", ")}` : ""}
+${tokens.borderRadius ? `Border Radius: ${tokens.borderRadius.map((r) => `${r.name}: ${r.value}`).join(", ")}` : ""}
+`;
+  return `Convert this HTML into a clean React component named "${componentName}".
+
+${tokenSummary}
+
+${includeAnimations ? "Include framer-motion animations for entrance effects (fadeIn, slideUp)." : "No animations needed."}
+
+HTML TO CONVERT:
+\`\`\`html
+${html}
+\`\`\`
+
+Generate a clean TypeScript React component with:
+- Tailwind CSS classes
+- TypeScript props interface
+- Semantic HTML structure
+- ${includeAnimations ? "framer-motion animations" : "No animations"}
+- Props for all editable content (titles, descriptions, images, buttons)`;
+}
+var AIComponentGenerator = class {
+  apiKey;
+  model;
+  maxRetries;
+  constructor(options) {
+    this.apiKey = options?.apiKey || process.env.ANTHROPIC_API_KEY || "";
+    this.model = options?.model || "claude-sonnet-4-20250514";
+    this.maxRetries = options?.maxRetries || 2;
+    if (!this.apiKey) {
+      console.warn("Warning: ANTHROPIC_API_KEY not set. AI component generation will fail.");
+    }
+  }
+  /**
+   * Check if AI generation is available
+   */
+  isAvailable() {
+    return !!this.apiKey;
+  }
+  /**
+   * Generate a React component from HTML using Claude API
+   */
+  async generate(options) {
+    if (!this.apiKey) {
+      return {
+        code: this.fallbackComponent(options.componentName, options.html),
+        componentName: options.componentName,
+        imports: [],
+        props: [],
+        success: false,
+        error: "ANTHROPIC_API_KEY not set"
+      };
+    }
+    const userPrompt = buildUserPrompt(options);
+    for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
+      try {
+        const response = await fetch("https://api.anthropic.com/v1/messages", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": this.apiKey,
+            "anthropic-version": "2023-06-01"
+          },
+          body: JSON.stringify({
+            model: this.model,
+            max_tokens: 4096,
+            system: SYSTEM_PROMPT,
+            messages: [
+              {
+                role: "user",
+                content: userPrompt
+              }
+            ]
+          })
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`API error ${response.status}: ${errorText}`);
+        }
+        const data = await response.json();
+        const content = data.content?.[0]?.text || "";
+        let code = content.replace(/^```(?:tsx?|typescript|javascript)?\n?/gm, "").replace(/```$/gm, "").trim();
+        const imports = this.extractImports(code);
+        const props = this.extractProps(code);
+        return {
+          code,
+          componentName: options.componentName,
+          imports,
+          props,
+          success: true
+        };
+      } catch (error) {
+        console.error(`AI generation attempt ${attempt + 1} failed:`, error);
+        if (attempt === this.maxRetries) {
+          return {
+            code: this.fallbackComponent(options.componentName, options.html),
+            componentName: options.componentName,
+            imports: [],
+            props: [],
+            success: false,
+            error: error instanceof Error ? error.message : String(error)
+          };
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1e3 * (attempt + 1)));
+      }
+    }
+    return {
+      code: this.fallbackComponent(options.componentName, options.html),
+      componentName: options.componentName,
+      imports: [],
+      props: [],
+      success: false,
+      error: "Unknown error"
+    };
+  }
+  /**
+   * Generate multiple components in batch
+   */
+  async generateBatch(components, tokens, options) {
+    const results = [];
+    for (let i = 0; i < components.length; i++) {
+      const comp = components[i];
+      options?.onProgress?.(i + 1, components.length);
+      const result = await this.generate({
+        componentName: comp.name,
+        html: comp.html,
+        tokens,
+        includeAnimations: options?.includeAnimations ?? true
+      });
+      results.push(result);
+      if (i < components.length - 1) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+    }
+    return results;
+  }
+  /**
+   * Fallback component when AI is not available
+   */
+  fallbackComponent(name, html) {
+    const escapedHtml = html.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+    return `'use client';
+
+import React from 'react';
+
+interface ${name}Props {
+  className?: string;
+}
+
+// NOTE: This is a fallback component using dangerouslySetInnerHTML
+// Run with --ai flag and ANTHROPIC_API_KEY to generate clean components
+const htmlContent = \`${escapedHtml}\`;
+
+export function ${name}({ className }: ${name}Props) {
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: htmlContent }}
+    />
+  );
+}
+
+export default ${name};
+`;
+  }
+  /**
+   * Extract import statements from generated code
+   */
+  extractImports(code) {
+    const importRegex = /^import\s+.*?from\s+['"][^'"]+['"];?$/gm;
+    const matches = code.match(importRegex) || [];
+    return matches;
+  }
+  /**
+   * Extract prop names from generated code
+   */
+  extractProps(code) {
+    const interfaceMatch = code.match(/interface\s+\w+Props\s*\{([^}]+)\}/);
+    if (!interfaceMatch) return [];
+    const propsBlock = interfaceMatch[1];
+    const propRegex = /(\w+)\s*[?]?\s*:/g;
+    const props = [];
+    let match;
+    while ((match = propRegex.exec(propsBlock)) !== null) {
+      props.push(match[1]);
+    }
+    return props;
+  }
+};
+
+// src/cloner/transformer.ts
+var Transformer = class {
+  colors = /* @__PURE__ */ new Map();
+  fonts = /* @__PURE__ */ new Set();
+  spacings = /* @__PURE__ */ new Set();
+  shadows = /* @__PURE__ */ new Set();
+  borderRadii = /* @__PURE__ */ new Set();
+  async transform(options) {
+    const inputDir = path.resolve(options.inputDir);
+    const outputDir = options.outputDir ? path.resolve(options.outputDir) : inputDir;
+    const log = options.onProgress || console.log;
+    const htmlPath = path.join(inputDir, "public/page-content.html");
+    if (!await fs.pathExists(htmlPath)) {
+      throw new Error(`No page-content.html found in ${inputDir}. Run 'extraktor clone' first.`);
+    }
+    const html = await fs.readFile(htmlPath, "utf-8");
+    const result = {
+      components: [],
+      tokensFile: null,
+      tailwindConfig: null,
+      aiGenerated: false,
+      errors: []
+    };
+    if (options.tokens || options.tailwind || options.useAI) {
+      log("Extracting design tokens...");
+      await this.extractTokens(html, inputDir);
+    }
+    if (options.tokens) {
+      const tokensPath = path.join(outputDir, "src/styles/tokens.css");
+      await this.generateTokensFile(tokensPath);
+      result.tokensFile = tokensPath;
+      log(`Generated tokens: ${tokensPath}`);
+    }
+    if (options.tailwind) {
+      const tailwindPath = path.join(outputDir, "tailwind.config.js");
+      await this.generateTailwindConfig(tailwindPath);
+      result.tailwindConfig = tailwindPath;
+      log(`Generated Tailwind config: ${tailwindPath}`);
+    }
+    if (options.components) {
+      const componentsDir = path.join(outputDir, "src/components/extracted");
+      await fs.ensureDir(componentsDir);
+      const sections = this.splitIntoSections(html);
+      log(`Found ${sections.length} sections to convert`);
+      const useAI = options.useAI || process.env.AI_ENABLED === "true";
+      const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+      if (useAI && apiKey) {
+        log("Using AI-powered component generation...");
+        result.aiGenerated = true;
+        const aiGenerator = new AIComponentGenerator({ apiKey });
+        const tokens = this.getDesignTokens();
+        for (let i = 0; i < sections.length; i++) {
+          const section = sections[i];
+          log(`[${i + 1}/${sections.length}] Generating ${section.name} with AI...`);
+          try {
+            const aiResult = await aiGenerator.generate({
+              componentName: section.name,
+              html: section.html,
+              tokens,
+              includeAnimations: true
+            });
+            if (aiResult.success) {
+              const compPath = path.join(componentsDir, `${section.name}.tsx`);
+              await fs.writeFile(compPath, aiResult.code);
+              result.components.push(section.name);
+              log(`\u2713 ${section.name} generated successfully`);
+            } else {
+              log(`\u26A0 AI failed for ${section.name}, using fallback: ${aiResult.error}`);
+              result.errors.push(`${section.name}: ${aiResult.error}`);
+              const compPath = path.join(componentsDir, `${section.name}.tsx`);
+              await fs.writeFile(compPath, this.htmlToComponentFallback(section.name, section.html));
+              result.components.push(section.name);
+            }
+          } catch (error) {
+            log(`\u2717 Error generating ${section.name}: ${error}`);
+            result.errors.push(`${section.name}: ${error}`);
+            const compPath = path.join(componentsDir, `${section.name}.tsx`);
+            await fs.writeFile(compPath, this.htmlToComponentFallback(section.name, section.html));
+            result.components.push(section.name);
+          }
+          if (i < sections.length - 1) {
+            await new Promise((resolve) => setTimeout(resolve, 500));
+          }
+        }
+      } else {
+        if (useAI && !apiKey) {
+          log("\u26A0 AI mode requested but ANTHROPIC_API_KEY not set. Using fallback.");
+          result.errors.push("ANTHROPIC_API_KEY not set");
+        }
+        log("Generating components (fallback mode)...");
+        for (const section of sections) {
+          const compPath = path.join(componentsDir, `${section.name}.tsx`);
+          await fs.writeFile(compPath, this.htmlToComponentFallback(section.name, section.html));
+          result.components.push(section.name);
+        }
+      }
+      if (result.components.length > 0) {
+        try {
+          await this.generateComponentIndex(componentsDir, result.components);
+          log(`Generated component index with ${result.components.length} components`);
+        } catch (err) {
+          log(`\u26A0 Could not generate component index: ${err}`);
+          result.errors.push(`Component index: ${err}`);
+        }
+      }
+      if (result.aiGenerated && result.components.length > 0) {
+        try {
+          await this.generatePageFile(outputDir, result.components);
+          log("Generated page.tsx with component imports");
+        } catch (err) {
+          log(`\u26A0 Could not generate page file: ${err}`);
+          result.errors.push(`Page file: ${err}`);
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   * Get extracted tokens in format suitable for AI generator
+   */
+  getDesignTokens() {
+    const colors = [];
+    this.colors.forEach((name, value) => {
+      colors.push({ name, value });
+    });
+    const fonts = [];
+    let fontIndex = 0;
+    this.fonts.forEach((font) => {
+      const name = fontIndex === 0 ? "primary" : fontIndex === 1 ? "secondary" : `font-${fontIndex}`;
+      fonts.push({ name, value: font });
+      fontIndex++;
+    });
+    const spacing = [];
+    const spacingArray = Array.from(this.spacings).sort((a, b) => parseFloat(a) - parseFloat(b));
+    spacingArray.forEach((value, i) => {
+      spacing.push({ name: `spacing-${i + 1}`, value });
+    });
+    const shadows = [];
+    let shadowIndex = 0;
+    this.shadows.forEach((shadow) => {
+      shadows.push({ name: `shadow-${shadowIndex++}`, value: shadow });
+    });
+    const borderRadius = [];
+    let radiusIndex = 0;
+    this.borderRadii.forEach((radius) => {
+      borderRadius.push({ name: `radius-${radiusIndex++}`, value: radius });
+    });
+    return { colors, fonts, spacing, shadows, borderRadius };
+  }
+  /**
+   * Extract design tokens from HTML and stylesheets
+   */
+  async extractTokens(html, inputDir) {
+    const colorRegex = /(#[0-9A-Fa-f]{3,8}|rgb\([^)]+\)|rgba\([^)]+\)|hsl\([^)]+\)|hsla\([^)]+\))/g;
+    const colorMatches = html.match(colorRegex) || [];
+    colorMatches.forEach((color) => {
+      const normalized = this.normalizeColor(color);
+      if (!this.colors.has(normalized)) {
+        const name = this.generateColorName(normalized, this.colors.size);
+        this.colors.set(normalized, name);
+      }
+    });
+    const fontRegex = /font-family:\s*([^;}"]+)/g;
+    let fontMatch;
+    while ((fontMatch = fontRegex.exec(html)) !== null) {
+      const font = fontMatch[1].trim().replace(/['"]/g, "").split(",")[0].trim();
+      if (font && !font.includes("system") && !font.includes("sans-serif")) {
+        this.fonts.add(font);
+      }
+    }
+    const spacingRegex = /(?:padding|margin|gap):\s*(\d+(?:\.\d+)?(?:px|rem|em))/g;
+    let spacingMatch;
+    while ((spacingMatch = spacingRegex.exec(html)) !== null) {
+      this.spacings.add(spacingMatch[1]);
+    }
+    const shadowRegex = /box-shadow:\s*([^;}"]+)/g;
+    let shadowMatch;
+    while ((shadowMatch = shadowRegex.exec(html)) !== null) {
+      const shadow = shadowMatch[1].trim();
+      if (shadow && shadow !== "none") {
+        this.shadows.add(shadow);
+      }
+    }
+    const radiusRegex = /border-radius:\s*(\d+(?:\.\d+)?(?:px|rem|em|%))/g;
+    let radiusMatch;
+    while ((radiusMatch = radiusRegex.exec(html)) !== null) {
+      this.borderRadii.add(radiusMatch[1]);
+    }
+    const externalCssPath = path.join(inputDir, "src/styles/external.css");
+    if (await fs.pathExists(externalCssPath)) {
+      const css = await fs.readFile(externalCssPath, "utf-8");
+      const cssColors = css.match(colorRegex) || [];
+      cssColors.forEach((color) => {
+        const normalized = this.normalizeColor(color);
+        if (!this.colors.has(normalized)) {
+          const name = this.generateColorName(normalized, this.colors.size);
+          this.colors.set(normalized, name);
+        }
+      });
+    }
+  }
+  /**
+   * Generate tokens.css file with CSS variables
+   */
+  async generateTokensFile(outputPath) {
+    let css = `/* Design Tokens - Auto-generated by extraktor */
+/* Edit these values to customize the theme */
+
+:root {
+  /* Colors */
+`;
+    this.colors.forEach((name, value) => {
+      css += `  --color-${name}: ${value};
+`;
+    });
+    css += `
+  /* Fonts */
+`;
+    let fontIndex = 0;
+    this.fonts.forEach((font) => {
+      const varName = fontIndex === 0 ? "primary" : fontIndex === 1 ? "secondary" : `font-${fontIndex}`;
+      css += `  --font-${varName}: '${font}', system-ui, sans-serif;
+`;
+      fontIndex++;
+    });
+    css += `
+  /* Spacing */
+`;
+    const spacingArray = Array.from(this.spacings).sort((a, b) => parseFloat(a) - parseFloat(b));
+    spacingArray.forEach((spacing, i) => {
+      css += `  --spacing-${i + 1}: ${spacing};
+`;
+    });
+    if (this.shadows.size > 0) {
+      css += `
+  /* Shadows */
+`;
+      let shadowIndex = 0;
+      this.shadows.forEach((shadow) => {
+        css += `  --shadow-${shadowIndex++}: ${shadow};
+`;
+      });
+    }
+    if (this.borderRadii.size > 0) {
+      css += `
+  /* Border Radius */
+`;
+      let radiusIndex = 0;
+      this.borderRadii.forEach((radius) => {
+        css += `  --radius-${radiusIndex++}: ${radius};
+`;
+      });
+    }
+    css += `}
+`;
+    await fs.ensureDir(path.dirname(outputPath));
+    await fs.writeFile(outputPath, css);
+  }
+  /**
+   * Generate Tailwind config with extracted colors
+   */
+  async generateTailwindConfig(outputPath) {
+    const colorEntries = [];
+    this.colors.forEach((name, value) => {
+      colorEntries.push(`        '${name}': '${value}'`);
+    });
+    const fontEntries = [];
+    let fontIndex = 0;
+    this.fonts.forEach((font) => {
+      const varName = fontIndex === 0 ? "primary" : fontIndex === 1 ? "secondary" : `custom-${fontIndex}`;
+      fontEntries.push(`        '${varName}': ['${font}', 'system-ui', 'sans-serif']`);
+      fontIndex++;
+    });
+    const config = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+${colorEntries.join(",\n")}
+      },
+      fontFamily: {
+${fontEntries.join(",\n")}
+      },
+    },
+  },
+  plugins: [],
+};
+`;
+    await fs.writeFile(outputPath, config);
+  }
+  /**
+   * Split HTML into logical sections (for both AI and fallback mode)
+   */
+  splitIntoSections(html) {
+    const sections = [];
+    const foundNames = /* @__PURE__ */ new Set();
+    const patterns = [
+      { pattern: /<header[^>]*>[\s\S]*?<\/header>/gi, name: "Header" },
+      { pattern: /<nav[^>]*>[\s\S]*?<\/nav>/gi, name: "Navigation" },
+      { pattern: /<footer[^>]*>[\s\S]*?<\/footer>/gi, name: "Footer" },
+      { pattern: /<section[^>]*class="[^"]*hero[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "Hero" },
+      { pattern: /<section[^>]*class="[^"]*feature[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "Features" },
+      { pattern: /<section[^>]*class="[^"]*pricing[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "Pricing" },
+      { pattern: /<section[^>]*class="[^"]*testimonial[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "Testimonials" },
+      { pattern: /<section[^>]*class="[^"]*faq[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "FAQ" },
+      { pattern: /<section[^>]*class="[^"]*cta[^"]*"[^>]*>[\s\S]*?<\/section>/gi, name: "CTA" }
+    ];
+    const framerNameRegex = /<div[^>]*data-framer-name="([^"]+)"[^>]*>([\s\S]*?)<\/div>(?=\s*<div[^>]*data-framer-name|<\/body|$)/gi;
+    let framerMatch;
+    while ((framerMatch = framerNameRegex.exec(html)) !== null) {
+      const name = this.sanitizeComponentName(framerMatch[1]);
+      if (!foundNames.has(name) && framerMatch[0].length < 5e4) {
+        sections.push({ name, html: framerMatch[0] });
+        foundNames.add(name);
+      }
+    }
+    patterns.forEach(({ pattern, name }) => {
+      if (foundNames.has(name)) return;
+      const matches = html.match(pattern);
+      if (matches && matches.length > 0 && matches[0].length < 5e4) {
+        sections.push({ name, html: matches[0] });
+        foundNames.add(name);
+      }
+    });
+    if (sections.length < 3) {
+      const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+      if (bodyMatch) {
+        const bodyContent = bodyMatch[1];
+        const divPattern = /<div[^>]*class="[^"]*(?:section|container|wrapper|block|framer-)[^"]*"[^>]*>[\s\S]*?<\/div>(?=\s*<div|<\/body|$)/gi;
+        const divMatches = bodyContent.match(divPattern);
+        if (divMatches) {
+          divMatches.slice(0, 10).forEach((div, index) => {
+            const name = `Section${index + 1}`;
+            if (!foundNames.has(name) && div.length < 5e4) {
+              sections.push({ name, html: div });
+              foundNames.add(name);
+            }
+          });
+        }
+      }
+    }
+    if (sections.length === 0) {
+      const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+      const content = bodyMatch ? bodyMatch[1] : html;
+      sections.push({ name: "Main", html: content.slice(0, 5e4) });
+    }
+    return sections;
+  }
+  /**
+   * Legacy method for backward compatibility
+   */
+  splitIntoComponents(html) {
+    const sections = this.splitIntoSections(html);
+    return sections.map((section) => ({
+      name: section.name,
+      html: section.html,
+      code: this.htmlToComponentFallback(section.name, section.html)
+    }));
+  }
+  /**
+   * Sanitize a string to be a valid component name
+   */
+  sanitizeComponentName(name) {
+    return name.replace(/[^a-zA-Z0-9]/g, "").replace(/^\d+/, "") || "Component";
+  }
+  /**
+   * Fallback: Convert HTML to a React component using dangerouslySetInnerHTML
+   * Used when AI is not available
+   */
+  htmlToComponentFallback(name, html) {
+    const escapedHtml = html.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+    return `'use client';
+
+import React from 'react';
+
+interface ${name}Props {
+  className?: string;
+}
+
+// NOTE: This is a fallback component using dangerouslySetInnerHTML
+// Run 'extraktor transform --ai' with ANTHROPIC_API_KEY to generate clean components
+const htmlContent = \`${escapedHtml}\`;
+
+export function ${name}({ className }: ${name}Props) {
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: htmlContent }}
+    />
+  );
+}
+
+export default ${name};
+`;
+  }
+  /**
+   * Generate a page.tsx that properly imports and uses the components
+   */
+  async generatePageFile(outputDir, componentNames) {
+    const imports = componentNames.map((name) => `import { ${name} } from '@/components/extracted/${name}';`).join("\n");
+    const components = componentNames.map((name) => `      <${name} />`).join("\n");
+    const pageContent = `'use client';
+
+${imports}
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+${components}
+    </main>
+  );
+}
+`;
+    const pagePath = path.join(outputDir, "src/app/page-components.tsx");
+    await fs.writeFile(pagePath, pageContent);
+  }
+  /**
+   * Generate component index file
+   */
+  async generateComponentIndex(componentsDir, componentNames) {
+    const imports = componentNames.map((name) => `export { ${name} } from './${name}';`).join("\n");
+    const indexContent = `/**
+ * Extracted Components Index
+ * Generated by extraktor transform
+ *
+ * These components are extracted from the cloned HTML.
+ * ${componentNames.length > 0 ? "Import and use them in your pages." : ""}
+ */
+
+${imports}
+`;
+    await fs.writeFile(path.join(componentsDir, "index.ts"), indexContent);
+  }
+  /**
+   * Normalize color value
+   */
+  normalizeColor(color) {
+    return color.toLowerCase().replace(/\s+/g, "");
+  }
+  /**
+   * Generate semantic color name
+   */
+  generateColorName(color, index) {
+    const lower = color.toLowerCase();
+    if (lower.includes("fff") || lower === "#ffffff" || lower === "rgb(255,255,255)") return "white";
+    if (lower.includes("000") || lower === "#000000" || lower === "rgb(0,0,0)") return "black";
+    if (lower.match(/#[0-9a-f]{3}0{3}|rgba?\([^)]*,\s*0\.?0*\)/)) return `transparent-${index}`;
+    const prefixes = ["primary", "secondary", "accent", "muted", "background", "foreground", "border"];
+    if (index < prefixes.length) return prefixes[index];
+    return `color-${index}`;
+  }
+};
+
+// src/extractor/design-extractor.ts
+import Anthropic from "@anthropic-ai/sdk";
+import fs2 from "fs-extra";
+import path2 from "path";
+import { chromium } from "playwright";
+var DesignExtractor = class {
+  browser = null;
+  page = null;
+  anthropic = null;
+  constructor(apiKey) {
+    const key = apiKey || process.env.ANTHROPIC_API_KEY;
+    if (key) {
+      this.anthropic = new Anthropic({ apiKey: key });
+    }
+  }
+  async extract(url, outputDir) {
+    this.browser = await chromium.launch({ headless: true });
+    const context = await this.browser.newContext({
+      viewport: { width: 1920, height: 1080 },
+      userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36"
+    });
+    this.page = await context.newPage();
+    try {
+      await this.page.goto(url, { waitUntil: "networkidle", timeout: 6e4 });
+      await this.page.waitForTimeout(3e3);
+      await this.autoScroll();
+      const rawExtraction = await this.extractEverything();
+      const organized = await this.organizeWithAI(url, rawExtraction);
+      await this.generateCompleteOutput(organized, outputDir, rawExtraction);
+      return organized;
+    } finally {
+      await this.browser.close();
+    }
+  }
+  async autoScroll() {
+    await this.page.evaluate(async () => {
+      await new Promise((resolve) => {
+        let totalHeight = 0;
+        const distance = 300;
+        const timer = setInterval(() => {
+          window.scrollBy(0, distance);
+          totalHeight += distance;
+          if (totalHeight >= document.body.scrollHeight * 2) {
+            clearInterval(timer);
+            window.scrollTo(0, 0);
+            resolve();
+          }
+        }, 50);
+      });
+    });
+    await this.page.waitForTimeout(2e3);
+  }
+  async extractEverything() {
+    return await this.page.evaluate(() => {
+      const rgbToHex = (rgb) => {
+        const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (!match) return null;
+        const r = parseInt(match[1]);
+        const g = parseInt(match[2]);
+        const b = parseInt(match[3]);
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+      };
+      const addToSet = (set, value) => {
+        if (value && value !== "none" && value !== "normal" && value !== "auto" && value !== "inherit" && value !== "initial" && value !== "0px" && value !== "0" && value !== "rgba(0, 0, 0, 0)" && value !== "transparent") {
+          set.add(value);
+        }
+      };
+      const colors = {
+        solid: /* @__PURE__ */ new Set(),
+        gradients: /* @__PURE__ */ new Set(),
+        rgba: /* @__PURE__ */ new Set()
+      };
+      const typography = {
+        fontFamilies: /* @__PURE__ */ new Set(),
+        fontSizes: /* @__PURE__ */ new Set(),
+        fontWeights: /* @__PURE__ */ new Set(),
+        lineHeights: /* @__PURE__ */ new Set(),
+        letterSpacing: /* @__PURE__ */ new Set(),
+        textTransforms: /* @__PURE__ */ new Set(),
+        textDecorations: /* @__PURE__ */ new Set()
+      };
+      const spacing = {
+        padding: /* @__PURE__ */ new Set(),
+        margin: /* @__PURE__ */ new Set(),
+        gap: /* @__PURE__ */ new Set(),
+        all: /* @__PURE__ */ new Set()
+      };
+      const borders = {
+        radius: /* @__PURE__ */ new Set(),
+        widths: /* @__PURE__ */ new Set(),
+        colors: /* @__PURE__ */ new Set(),
+        styles: /* @__PURE__ */ new Set()
+      };
+      const shadows = {
+        boxShadows: /* @__PURE__ */ new Set(),
+        textShadows: /* @__PURE__ */ new Set(),
+        dropShadows: /* @__PURE__ */ new Set()
+      };
+      const effects = {
+        backdropBlur: /* @__PURE__ */ new Set(),
+        backdropSaturate: /* @__PURE__ */ new Set(),
+        backdropBrightness: /* @__PURE__ */ new Set(),
+        opacity: /* @__PURE__ */ new Set(),
+        filters: /* @__PURE__ */ new Set()
+      };
+      const zIndexes = /* @__PURE__ */ new Set();
+      const transitions = {
+        properties: /* @__PURE__ */ new Set(),
+        durations: /* @__PURE__ */ new Set(),
+        timingFunctions: /* @__PURE__ */ new Set(),
+        delays: /* @__PURE__ */ new Set(),
+        full: /* @__PURE__ */ new Set()
+      };
+      const transforms = /* @__PURE__ */ new Set();
+      const layout = {
+        displays: /* @__PURE__ */ new Set(),
+        justifyContent: /* @__PURE__ */ new Set(),
+        alignItems: /* @__PURE__ */ new Set(),
+        flexDirection: /* @__PURE__ */ new Set(),
+        flexWrap: /* @__PURE__ */ new Set(),
+        gridTemplateColumns: /* @__PURE__ */ new Set(),
+        gridTemplateRows: /* @__PURE__ */ new Set(),
+        positions: /* @__PURE__ */ new Set(),
+        maxWidths: /* @__PURE__ */ new Set(),
+        widths: /* @__PURE__ */ new Set(),
+        heights: /* @__PURE__ */ new Set()
+      };
+      const cursors = /* @__PURE__ */ new Set();
+      const outlines = /* @__PURE__ */ new Set();
+      const buttonData = [];
+      const inputData = [];
+      const cardData = [];
+      const linkData = [];
+      const headingData = [];
+      const containerData = [];
+      const navItemData = [];
+      const badgeData = [];
+      const stylesheetContents = [];
+      const keyframeRules = [];
+      const mediaQueries = [];
+      for (const sheet of document.styleSheets) {
+        try {
+          if (sheet.cssRules) {
+            for (const rule of sheet.cssRules) {
+              stylesheetContents.push(rule.cssText);
+              if (rule instanceof CSSKeyframesRule) {
+                keyframeRules.push(rule.cssText);
+              }
+              if (rule instanceof CSSMediaRule) {
+                mediaQueries.push(rule.cssText);
+              }
+            }
+          }
+        } catch (e) {
+        }
+      }
+      const cssVariables = {};
+      const rootStyles = window.getComputedStyle(document.documentElement);
+      for (let i = 0; i < rootStyles.length; i++) {
+        const prop = rootStyles[i];
+        if (prop.startsWith("--")) {
+          cssVariables[prop] = rootStyles.getPropertyValue(prop).trim();
+        }
+      }
+      const allElements = document.querySelectorAll("*");
+      allElements.forEach((el) => {
+        const computed = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+        ["color", "backgroundColor", "borderColor", "borderTopColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "outlineColor", "caretColor", "accentColor"].forEach((prop) => {
+          const value = computed.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase());
+          if (value) {
+            if (value.includes("gradient")) {
+              colors.gradients.add(value);
+            } else if (value.includes("rgba")) {
+              colors.rgba.add(value);
+              const hex = rgbToHex(value);
+              if (hex) colors.solid.add(hex);
+            } else if (value.includes("rgb")) {
+              const hex = rgbToHex(value);
+              if (hex) colors.solid.add(hex);
+            } else if (value.startsWith("#")) {
+              colors.solid.add(value.toUpperCase());
+            }
+          }
+        });
+        const bgImage = computed.backgroundImage;
+        if (bgImage && bgImage !== "none" && bgImage.includes("gradient")) {
+          colors.gradients.add(bgImage);
+        }
+        const fontFamily = computed.fontFamily;
+        if (fontFamily) {
+          fontFamily.split(",").forEach((f) => {
+            const cleaned = f.trim().replace(/['"]/g, "");
+            if (cleaned && !["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif", "serif", "monospace", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans"].includes(cleaned)) {
+              typography.fontFamilies.add(cleaned);
+            }
+          });
+        }
+        addToSet(typography.fontSizes, computed.fontSize);
+        addToSet(typography.fontWeights, computed.fontWeight);
+        addToSet(typography.lineHeights, computed.lineHeight);
+        addToSet(typography.letterSpacing, computed.letterSpacing);
+        addToSet(typography.textTransforms, computed.textTransform);
+        addToSet(typography.textDecorations, computed.textDecoration);
+        ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"].forEach((prop) => {
+          const value = computed.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase());
+          addToSet(spacing.padding, value);
+          addToSet(spacing.all, value);
+        });
+        ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"].forEach((prop) => {
+          const value = computed.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase());
+          addToSet(spacing.margin, value);
+          addToSet(spacing.all, value);
+        });
+        addToSet(spacing.gap, computed.gap);
+        addToSet(spacing.gap, computed.rowGap);
+        addToSet(spacing.gap, computed.columnGap);
+        addToSet(spacing.all, computed.gap);
+        addToSet(borders.radius, computed.borderRadius);
+        ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"].forEach((prop) => {
+          addToSet(borders.radius, computed.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase()));
+        });
+        addToSet(borders.widths, computed.borderWidth);
+        addToSet(borders.widths, computed.borderTopWidth);
+        addToSet(borders.styles, computed.borderStyle);
+        addToSet(shadows.boxShadows, computed.boxShadow);
+        addToSet(shadows.textShadows, computed.textShadow);
+        const filter = computed.filter;
+        if (filter && filter.includes("drop-shadow")) {
+          shadows.dropShadows.add(filter);
+        }
+        const backdrop = computed.backdropFilter;
+        if (backdrop && backdrop !== "none") {
+          effects.filters.add(backdrop);
+          if (backdrop.includes("blur")) {
+            const blurMatch = backdrop.match(/blur\(([^)]+)\)/);
+            if (blurMatch) effects.backdropBlur.add(blurMatch[1]);
+          }
+          if (backdrop.includes("saturate")) {
+            const satMatch = backdrop.match(/saturate\(([^)]+)\)/);
+            if (satMatch) effects.backdropSaturate.add(satMatch[1]);
+          }
+          if (backdrop.includes("brightness")) {
+            const brightMatch = backdrop.match(/brightness\(([^)]+)\)/);
+            if (brightMatch) effects.backdropBrightness.add(brightMatch[1]);
+          }
+        }
+        if (computed.opacity !== "1") {
+          addToSet(effects.opacity, computed.opacity);
+        }
+        if (filter && filter !== "none") {
+          effects.filters.add(filter);
+        }
+        if (computed.zIndex !== "auto") {
+          addToSet(zIndexes, computed.zIndex);
+        }
+        const transition = computed.transition;
+        if (transition && transition !== "all 0s ease 0s" && transition !== "none") {
+          transitions.full.add(transition);
+          addToSet(transitions.durations, computed.transitionDuration);
+          addToSet(transitions.timingFunctions, computed.transitionTimingFunction);
+          addToSet(transitions.delays, computed.transitionDelay);
+          addToSet(transitions.properties, computed.transitionProperty);
+        }
+        if (computed.transform !== "none") {
+          transforms.add(computed.transform);
+        }
+        addToSet(layout.displays, computed.display);
+        addToSet(layout.justifyContent, computed.justifyContent);
+        addToSet(layout.alignItems, computed.alignItems);
+        addToSet(layout.flexDirection, computed.flexDirection);
+        addToSet(layout.flexWrap, computed.flexWrap);
+        addToSet(layout.gridTemplateColumns, computed.gridTemplateColumns);
+        addToSet(layout.gridTemplateRows, computed.gridTemplateRows);
+        addToSet(layout.positions, computed.position);
+        if (rect.width > 0) addToSet(layout.widths, `${Math.round(rect.width)}px`);
+        if (rect.height > 0) addToSet(layout.heights, `${Math.round(rect.height)}px`);
+        addToSet(layout.maxWidths, computed.maxWidth);
+        addToSet(cursors, computed.cursor);
+        if (computed.outline !== "none") {
+          addToSet(outlines, computed.outline);
+        }
+      });
+      const extractFullStyles = (el) => {
+        const computed = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+        let hoverStyles = null;
+        let activeStyles = null;
+        let focusStyles = null;
+        for (const sheet of document.styleSheets) {
+          try {
+            if (sheet.cssRules) {
+              for (const rule of sheet.cssRules) {
+                if (rule instanceof CSSStyleRule) {
+                  const selector = rule.selectorText;
+                  if (selector && el.matches(selector.replace(":hover", "").replace(":active", "").replace(":focus", ""))) {
+                    if (selector.includes(":hover")) {
+                      hoverStyles = {};
+                      for (let i = 0; i < rule.style.length; i++) {
+                        const prop = rule.style[i];
+                        hoverStyles[prop] = rule.style.getPropertyValue(prop);
+                      }
+                    }
+                    if (selector.includes(":active")) {
+                      activeStyles = {};
+                      for (let i = 0; i < rule.style.length; i++) {
+                        const prop = rule.style[i];
+                        activeStyles[prop] = rule.style.getPropertyValue(prop);
+                      }
+                    }
+                    if (selector.includes(":focus")) {
+                      focusStyles = {};
+                      for (let i = 0; i < rule.style.length; i++) {
+                        const prop = rule.style[i];
+                        focusStyles[prop] = rule.style.getPropertyValue(prop);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          } catch (e) {
+          }
+        }
+        const framerData = {};
+        const dataAttrs = el.attributes;
+        for (let i = 0; i < dataAttrs.length; i++) {
+          const attr = dataAttrs[i];
+          if (attr.name.startsWith("data-framer") || attr.name.includes("motion")) {
+            framerData[attr.name] = attr.value;
+          }
+        }
+        const styleAttr = el.getAttribute("style");
+        return {
+          tag: el.tagName.toLowerCase(),
+          className: el.className,
+          id: el.id,
+          text: el.textContent?.trim().slice(0, 100),
+          dimensions: { width: rect.width, height: rect.height },
+          styles: {
+            // Colors
+            color: computed.color,
+            backgroundColor: computed.backgroundColor,
+            borderColor: computed.borderColor,
+            // Typography
+            fontFamily: computed.fontFamily,
+            fontSize: computed.fontSize,
+            fontWeight: computed.fontWeight,
+            lineHeight: computed.lineHeight,
+            letterSpacing: computed.letterSpacing,
+            textAlign: computed.textAlign,
+            textTransform: computed.textTransform,
+            // Spacing
+            padding: computed.padding,
+            margin: computed.margin,
+            gap: computed.gap,
+            // Borders
+            borderRadius: computed.borderRadius,
+            borderWidth: computed.borderWidth,
+            borderStyle: computed.borderStyle,
+            // Shadows
+            boxShadow: computed.boxShadow,
+            textShadow: computed.textShadow,
+            // Effects
+            opacity: computed.opacity,
+            backdropFilter: computed.backdropFilter,
+            filter: computed.filter,
+            // Transform
+            transform: computed.transform,
+            transformOrigin: computed.transformOrigin,
+            // Transitions
+            transition: computed.transition,
+            transitionDuration: computed.transitionDuration,
+            transitionTimingFunction: computed.transitionTimingFunction,
+            // Layout
+            display: computed.display,
+            position: computed.position,
+            justifyContent: computed.justifyContent,
+            alignItems: computed.alignItems,
+            flexDirection: computed.flexDirection,
+            // Other
+            cursor: computed.cursor,
+            overflow: computed.overflow,
+            zIndex: computed.zIndex,
+            outline: computed.outline
+          },
+          states: {
+            hover: hoverStyles,
+            active: activeStyles,
+            focus: focusStyles
+          },
+          framerMotion: framerData,
+          inlineStyle: styleAttr
+        };
+      };
+      document.querySelectorAll('button, a[class*="btn"], a[class*="button"], [role="button"], a[class*="cta"], a[class*="download"], [class*="Button"]').forEach((el, i) => {
+        if (i < 50) buttonData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('input, textarea, select, [class*="input"], [class*="Input"], [class*="field"]').forEach((el, i) => {
+        if (i < 30) inputData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('[class*="card"], [class*="Card"], article, [class*="feature"], [class*="Feature"], [class*="panel"], [class*="Panel"]').forEach((el, i) => {
+        if (i < 30) cardData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('a:not([class*="btn"]):not([class*="button"])').forEach((el, i) => {
+        if (i < 30) linkData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('h1, h2, h3, h4, h5, h6, [class*="heading"], [class*="Heading"], [class*="title"], [class*="Title"], [class*="headline"]').forEach((el, i) => {
+        if (i < 30) headingData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('section, main, [class*="container"], [class*="Container"], [class*="wrapper"], [class*="Wrapper"], [class*="section"], [class*="Section"]').forEach((el, i) => {
+        if (i < 20) containerData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('nav a, nav button, [class*="nav"] a, [class*="Nav"] a, [class*="menu"] a, [class*="Menu"] a').forEach((el, i) => {
+        if (i < 30) navItemData.push(extractFullStyles(el));
+      });
+      document.querySelectorAll('[class*="badge"], [class*="Badge"], [class*="tag"], [class*="Tag"], [class*="chip"], [class*="Chip"]').forEach((el, i) => {
+        if (i < 20) badgeData.push(extractFullStyles(el));
+      });
+      let selectionColor = "";
+      let selectionBg = "";
+      const selectionEl = document.querySelector("::selection");
+      for (const sheet of document.styleSheets) {
+        try {
+          if (sheet.cssRules) {
+            for (const rule of sheet.cssRules) {
+              if (rule instanceof CSSStyleRule && rule.selectorText?.includes("::selection")) {
+                selectionColor = rule.style.color || "";
+                selectionBg = rule.style.backgroundColor || "";
+              }
+            }
+          }
+        } catch (e) {
+        }
+      }
+      const breakpoints = {};
+      mediaQueries.forEach((mq) => {
+        const match = mq.match(/@media[^{]+\(min-width:\s*(\d+(?:\.\d+)?(?:px|em|rem))\)/);
+        if (match) {
+          breakpoints[match[1]] = mq;
+        }
+        const maxMatch = mq.match(/@media[^{]+\(max-width:\s*(\d+(?:\.\d+)?(?:px|em|rem))\)/);
+        if (maxMatch) {
+          breakpoints[`max-${maxMatch[1]}`] = mq;
+        }
+      });
+      return {
+        colors: {
+          solid: Array.from(colors.solid),
+          gradients: Array.from(colors.gradients),
+          rgba: Array.from(colors.rgba)
+        },
+        typography: {
+          fontFamilies: Array.from(typography.fontFamilies),
+          fontSizes: Array.from(typography.fontSizes),
+          fontWeights: Array.from(typography.fontWeights),
+          lineHeights: Array.from(typography.lineHeights),
+          letterSpacing: Array.from(typography.letterSpacing),
+          textTransforms: Array.from(typography.textTransforms),
+          textDecorations: Array.from(typography.textDecorations)
+        },
+        spacing: {
+          padding: Array.from(spacing.padding),
+          margin: Array.from(spacing.margin),
+          gap: Array.from(spacing.gap),
+          all: Array.from(spacing.all)
+        },
+        borders: {
+          radius: Array.from(borders.radius),
+          widths: Array.from(borders.widths),
+          colors: Array.from(borders.colors),
+          styles: Array.from(borders.styles)
+        },
+        shadows: {
+          boxShadows: Array.from(shadows.boxShadows),
+          textShadows: Array.from(shadows.textShadows),
+          dropShadows: Array.from(shadows.dropShadows)
+        },
+        effects: {
+          backdropBlur: Array.from(effects.backdropBlur),
+          backdropSaturate: Array.from(effects.backdropSaturate),
+          backdropBrightness: Array.from(effects.backdropBrightness),
+          opacity: Array.from(effects.opacity),
+          filters: Array.from(effects.filters)
+        },
+        zIndex: Array.from(zIndexes),
+        transitions: {
+          properties: Array.from(transitions.properties),
+          durations: Array.from(transitions.durations),
+          timingFunctions: Array.from(transitions.timingFunctions),
+          delays: Array.from(transitions.delays),
+          full: Array.from(transitions.full)
+        },
+        transforms: Array.from(transforms),
+        layout: {
+          displays: Array.from(layout.displays),
+          justifyContent: Array.from(layout.justifyContent),
+          alignItems: Array.from(layout.alignItems),
+          flexDirection: Array.from(layout.flexDirection),
+          flexWrap: Array.from(layout.flexWrap),
+          gridTemplateColumns: Array.from(layout.gridTemplateColumns),
+          gridTemplateRows: Array.from(layout.gridTemplateRows),
+          positions: Array.from(layout.positions),
+          maxWidths: Array.from(layout.maxWidths),
+          widths: Array.from(layout.widths).slice(0, 50),
+          heights: Array.from(layout.heights).slice(0, 50)
+        },
+        breakpoints,
+        cursors: Array.from(cursors),
+        outlines: Array.from(outlines),
+        selection: { color: selectionColor, background: selectionBg },
+        // Components
+        components: {
+          buttons: buttonData,
+          inputs: inputData,
+          cards: cardData,
+          links: linkData,
+          headings: headingData,
+          containers: containerData,
+          navItems: navItemData,
+          badges: badgeData
+        },
+        // Raw CSS
+        rawCSS: {
+          stylesheets: stylesheetContents.slice(0, 2e3),
+          cssVariables,
+          mediaQueries: mediaQueries.slice(0, 100),
+          keyframeRules
+        }
+      };
+    });
+  }
+  async organizeWithAI(url, raw) {
+    const designSystem = {
+      name: new URL(url).hostname.replace(/\./g, "-") + "-design-system",
+      sourceUrl: url,
+      extractedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      colors: raw.colors,
+      typography: raw.typography,
+      spacing: raw.spacing,
+      borders: raw.borders,
+      shadows: raw.shadows,
+      effects: raw.effects,
+      zIndex: raw.zIndex,
+      animations: {
+        transitions: raw.transitions,
+        keyframes: this.parseKeyframes(raw.rawCSS.keyframeRules),
+        transforms: raw.transforms,
+        framerMotion: this.extractFramerMotionPatterns(raw.components)
+      },
+      layout: {
+        ...raw.layout,
+        breakpoints: raw.breakpoints,
+        containers: {
+          maxWidths: raw.layout.maxWidths,
+          widths: raw.layout.widths,
+          heights: raw.layout.heights
+        }
+      },
+      states: this.extractStates(raw.components),
+      details: {
+        cursors: raw.cursors,
+        selectionColors: raw.selection.color ? [raw.selection.color, raw.selection.background] : [],
+        scrollbarStyles: {},
+        placeholderStyles: {},
+        outlines: raw.outlines
+      },
+      components: raw.components,
+      rawCSS: raw.rawCSS
+    };
+    return designSystem;
+  }
+  parseKeyframes(rules) {
+    const keyframes = {};
+    rules.forEach((rule, i) => {
+      const nameMatch = rule.match(/@keyframes\s+([^\s{]+)/);
+      if (nameMatch) {
+        keyframes[nameMatch[1]] = rule;
+      } else {
+        keyframes[`animation-${i}`] = rule;
+      }
+    });
+    return keyframes;
+  }
+  extractFramerMotionPatterns(components) {
+    const patterns = {
+      variants: [],
+      initial: [],
+      animate: [],
+      exit: [],
+      whileHover: [],
+      whileTap: [],
+      whileInView: []
+    };
+    Object.values(components).flat().forEach((comp) => {
+      if (comp.framerMotion && Object.keys(comp.framerMotion).length > 0) {
+        patterns.variants.push(comp.framerMotion);
+      }
+      if (comp.inlineStyle) {
+        if (comp.inlineStyle.includes("transform")) {
+          patterns.animate.push({ transform: comp.styles.transform });
+        }
+      }
+    });
+    return patterns;
+  }
+  extractStates(components) {
+    const states = {
+      hover: [],
+      active: [],
+      focus: [],
+      disabled: [],
+      loading: []
+    };
+    Object.values(components).flat().forEach((comp) => {
+      if (comp.states) {
+        if (comp.states.hover) states.hover.push({ component: comp.className, styles: comp.states.hover });
+        if (comp.states.active) states.active.push({ component: comp.className, styles: comp.states.active });
+        if (comp.states.focus) states.focus.push({ component: comp.className, styles: comp.states.focus });
+      }
+    });
+    return states;
+  }
+  async generateCompleteOutput(ds, outputDir, raw) {
+    await fs2.ensureDir(outputDir);
+    await fs2.ensureDir(path2.join(outputDir, "tokens"));
+    await fs2.ensureDir(path2.join(outputDir, "components"));
+    await fs2.ensureDir(path2.join(outputDir, "animations"));
+    await fs2.ensureDir(path2.join(outputDir, "raw"));
+    const tokensCSS = this.generateCompleteTokensCSS(ds);
+    await fs2.writeFile(path2.join(outputDir, "tokens", "all-tokens.css"), tokensCSS);
+    await fs2.writeFile(path2.join(outputDir, "tokens", "colors.css"), this.generateColorsCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "tokens", "typography.css"), this.generateTypographyCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "tokens", "spacing.css"), this.generateSpacingCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "tokens", "shadows.css"), this.generateShadowsCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "tokens", "effects.css"), this.generateEffectsCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "animations", "keyframes.css"), this.generateKeyframesCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "animations", "transitions.css"), this.generateTransitionsCSS(ds));
+    await fs2.writeFile(path2.join(outputDir, "tailwind.preset.js"), this.generateCompleteTailwindPreset(ds));
+    await fs2.writeFile(path2.join(outputDir, "animations", "framer-variants.ts"), this.generateFramerMotionConfig(ds, raw));
+    await this.generateComponentFiles(ds, outputDir, raw);
+    await fs2.writeFile(path2.join(outputDir, "raw", "complete-extraction.json"), JSON.stringify(raw, null, 2));
+    await fs2.writeFile(path2.join(outputDir, "raw", "design-system.json"), JSON.stringify(ds, null, 2));
+    const pkg = {
+      name: ds.name,
+      version: "1.0.0",
+      description: `Complete design system extracted from ${ds.sourceUrl}`,
+      main: "index.js",
+      exports: {
+        ".": "./index.js",
+        "./tailwind.preset": "./tailwind.preset.js",
+        "./tokens/*": "./tokens/*",
+        "./animations/*": "./animations/*",
+        "./components/*": "./components/*"
+      },
+      peerDependencies: {
+        react: ">=18.0.0",
+        tailwindcss: ">=3.0.0",
+        "framer-motion": ">=10.0.0"
+      }
+    };
+    await fs2.writeFile(path2.join(outputDir, "package.json"), JSON.stringify(pkg, null, 2));
+    await fs2.writeFile(path2.join(outputDir, "index.ts"), `// ${ds.name}
+// Extracted from ${ds.sourceUrl} at ${ds.extractedAt}
+//
+// USAGE:
+//
+// 1. Import CSS tokens:
+//    import '${ds.name}/tokens/all-tokens.css'
+//
+// 2. Use Tailwind preset:
+//    // tailwind.config.js
+//    module.exports = { presets: [require('${ds.name}/tailwind.preset')] }
+//
+// 3. Use Framer Motion variants:
+//    import { fadeInUp, staggerContainer } from '${ds.name}/animations/framer-variants'
+
+export * from './components';
+export * from './animations/framer-variants';
+`);
+    const stats = {
+      colors: ds.colors.solid.length + ds.colors.gradients.length,
+      fonts: ds.typography.fontFamilies.length,
+      fontSizes: ds.typography.fontSizes.length,
+      spacing: ds.spacing.all.length,
+      borderRadius: ds.borders.radius.length,
+      shadows: ds.shadows.boxShadows.length,
+      transitions: ds.animations.transitions.full.length,
+      keyframes: Object.keys(ds.animations.keyframes).length,
+      transforms: ds.animations.transforms.length,
+      breakpoints: Object.keys(ds.layout.breakpoints).length,
+      zIndexLayers: ds.zIndex.length,
+      buttons: ds.components.buttons.length,
+      inputs: ds.components.inputs.length,
+      cards: ds.components.cards.length,
+      headings: ds.components.headings.length
+    };
+    await fs2.writeFile(path2.join(outputDir, "stats.json"), JSON.stringify(stats, null, 2));
+  }
+  generateCompleteTokensCSS(ds) {
+    return `/* ============================================
+   ${ds.name.toUpperCase()}
+   Complete Design Tokens
+   Extracted from ${ds.sourceUrl}
+   ============================================ */
+
+/* === COLORS === */
+:root {
+${ds.colors.solid.map((c, i) => `  --color-${i + 1}: ${c};`).join("\n")}
+}
+
+/* === GRADIENTS === */
+:root {
+${ds.colors.gradients.map((g, i) => `  --gradient-${i + 1}: ${g};`).join("\n")}
+}
+
+/* === TYPOGRAPHY === */
+:root {
+  /* Font Families */
+${ds.typography.fontFamilies.map((f, i) => `  --font-${i + 1}: ${f};`).join("\n")}
+
+  /* Font Sizes */
+${ds.typography.fontSizes.map((s, i) => `  --text-${i + 1}: ${s};`).join("\n")}
+
+  /* Font Weights */
+${ds.typography.fontWeights.map((w, i) => `  --weight-${i + 1}: ${w};`).join("\n")}
+
+  /* Line Heights */
+${ds.typography.lineHeights.map((l, i) => `  --leading-${i + 1}: ${l};`).join("\n")}
+
+  /* Letter Spacing */
+${ds.typography.letterSpacing.filter((l) => l !== "normal").map((l, i) => `  --tracking-${i + 1}: ${l};`).join("\n")}
+}
+
+/* === SPACING === */
+:root {
+${ds.spacing.all.map((s, i) => `  --space-${i + 1}: ${s};`).join("\n")}
+}
+
+/* === BORDERS === */
+:root {
+  /* Border Radius */
+${ds.borders.radius.map((r, i) => `  --radius-${i + 1}: ${r};`).join("\n")}
+
+  /* Border Widths */
+${ds.borders.widths.filter((w) => w !== "0px").map((w, i) => `  --border-${i + 1}: ${w};`).join("\n")}
+}
+
+/* === SHADOWS === */
+:root {
+${ds.shadows.boxShadows.map((s, i) => `  --shadow-${i + 1}: ${s};`).join("\n")}
+}
+
+/* === EFFECTS === */
+:root {
+  /* Backdrop Blur */
+${ds.effects.backdropBlur.map((b, i) => `  --blur-${i + 1}: ${b};`).join("\n")}
+
+  /* Opacity */
+${ds.effects.opacity.map((o, i) => `  --opacity-${i + 1}: ${o};`).join("\n")}
+}
+
+/* === Z-INDEX === */
+:root {
+${ds.zIndex.map((z, i) => `  --z-${i + 1}: ${z};`).join("\n")}
+}
+
+/* === TRANSITIONS === */
+:root {
+  /* Durations */
+${ds.animations.transitions.durations.map((d, i) => `  --duration-${i + 1}: ${d};`).join("\n")}
+
+  /* Timing Functions */
+${ds.animations.transitions.timingFunctions.map((t, i) => `  --ease-${i + 1}: ${t};`).join("\n")}
+}
+`;
+  }
+  generateColorsCSS(ds) {
+    return `:root {
+  /* Solid Colors */
+${ds.colors.solid.map((c, i) => `  --color-${i + 1}: ${c};`).join("\n")}
+
+  /* RGBA Colors */
+${ds.colors.rgba.map((c, i) => `  --color-alpha-${i + 1}: ${c};`).join("\n")}
+
+  /* Gradients */
+${ds.colors.gradients.map((g, i) => `  --gradient-${i + 1}: ${g};`).join("\n")}
+}
+`;
+  }
+  generateTypographyCSS(ds) {
+    return `:root {
+  /* Font Families */
+${ds.typography.fontFamilies.map((f, i) => `  --font-family-${i + 1}: "${f}";`).join("\n")}
+
+  /* Font Sizes */
+${ds.typography.fontSizes.map((s, i) => `  --font-size-${i + 1}: ${s};`).join("\n")}
+
+  /* Font Weights */
+${ds.typography.fontWeights.map((w, i) => `  --font-weight-${i + 1}: ${w};`).join("\n")}
+
+  /* Line Heights */
+${ds.typography.lineHeights.map((l, i) => `  --line-height-${i + 1}: ${l};`).join("\n")}
+
+  /* Letter Spacing */
+${ds.typography.letterSpacing.filter((l) => l !== "normal").map((l, i) => `  --letter-spacing-${i + 1}: ${l};`).join("\n")}
+}
+`;
+  }
+  generateSpacingCSS(ds) {
+    const sorted = [...ds.spacing.all].sort((a, b) => {
+      const aNum = parseFloat(a);
+      const bNum = parseFloat(b);
+      return aNum - bNum;
+    });
+    return `:root {
+  /* All Spacing Values */
+${sorted.map((s, i) => `  --space-${i + 1}: ${s};`).join("\n")}
+}
+`;
+  }
+  generateShadowsCSS(ds) {
+    return `:root {
+  /* Box Shadows */
+${ds.shadows.boxShadows.map((s, i) => `  --shadow-${i + 1}: ${s};`).join("\n")}
+
+  /* Text Shadows */
+${ds.shadows.textShadows.map((s, i) => `  --text-shadow-${i + 1}: ${s};`).join("\n")}
+
+  /* Drop Shadows */
+${ds.shadows.dropShadows.map((s, i) => `  --drop-shadow-${i + 1}: ${s};`).join("\n")}
+}
+`;
+  }
+  generateEffectsCSS(ds) {
+    return `:root {
+  /* Backdrop Blur */
+${ds.effects.backdropBlur.map((b, i) => `  --backdrop-blur-${i + 1}: blur(${b});`).join("\n")}
+
+  /* Backdrop Saturate */
+${ds.effects.backdropSaturate.map((s, i) => `  --backdrop-saturate-${i + 1}: saturate(${s});`).join("\n")}
+
+  /* Opacity */
+${ds.effects.opacity.map((o, i) => `  --opacity-${i + 1}: ${o};`).join("\n")}
+
+  /* All Filters */
+${ds.effects.filters.map((f, i) => `  --filter-${i + 1}: ${f};`).join("\n")}
+}
+`;
+  }
+  generateKeyframesCSS(ds) {
+    return `/* Keyframe Animations */
+${Object.entries(ds.animations.keyframes).map(([name, rule]) => rule).join("\n\n")}
+`;
+  }
+  generateTransitionsCSS(ds) {
+    return `:root {
+  /* Transition Durations */
+${ds.animations.transitions.durations.map((d, i) => `  --duration-${i + 1}: ${d};`).join("\n")}
+
+  /* Timing Functions */
+${ds.animations.transitions.timingFunctions.map((t, i) => `  --ease-${i + 1}: ${t};`).join("\n")}
+}
+
+/* Full Transitions */
+${ds.animations.transitions.full.map((t, i) => `.transition-${i + 1} { transition: ${t}; }`).join("\n")}
+`;
+  }
+  generateCompleteTailwindPreset(ds) {
+    const colorMap = {};
+    ds.colors.solid.forEach((c, i) => {
+      colorMap[`c${i + 1}`] = c;
+    });
+    const spacingMap = {};
+    ds.spacing.all.forEach((s, i) => {
+      spacingMap[`s${i + 1}`] = s;
+    });
+    const radiusMap = {};
+    ds.borders.radius.forEach((r, i) => {
+      radiusMap[`r${i + 1}`] = r;
+    });
+    const shadowMap = {};
+    ds.shadows.boxShadows.forEach((s, i) => {
+      shadowMap[`shadow${i + 1}`] = s;
+    });
+    return `// Tailwind CSS Complete Preset
+// Extracted from ${ds.sourceUrl}
+// ${ds.extractedAt}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      // ${ds.colors.solid.length} Colors
+      colors: ${JSON.stringify(colorMap, null, 8)},
+
+      // ${ds.typography.fontFamilies.length} Font Families
+      fontFamily: {
+${ds.typography.fontFamilies.map((f, i) => `        f${i + 1}: ['${f}'],`).join("\n")}
+      },
+
+      // ${ds.typography.fontSizes.length} Font Sizes
+      fontSize: {
+${ds.typography.fontSizes.map((s, i) => `        t${i + 1}: '${s}',`).join("\n")}
+      },
+
+      // ${ds.typography.fontWeights.length} Font Weights
+      fontWeight: {
+${ds.typography.fontWeights.map((w, i) => `        w${i + 1}: '${w}',`).join("\n")}
+      },
+
+      // ${ds.typography.lineHeights.length} Line Heights
+      lineHeight: {
+${ds.typography.lineHeights.map((l, i) => `        lh${i + 1}: '${l}',`).join("\n")}
+      },
+
+      // ${ds.typography.letterSpacing.length} Letter Spacing
+      letterSpacing: {
+${ds.typography.letterSpacing.filter((l) => l !== "normal").map((l, i) => `        ls${i + 1}: '${l}',`).join("\n")}
+      },
+
+      // ${ds.spacing.all.length} Spacing Values
+      spacing: ${JSON.stringify(spacingMap, null, 8)},
+
+      // ${ds.borders.radius.length} Border Radius Values
+      borderRadius: ${JSON.stringify(radiusMap, null, 8)},
+
+      // ${ds.shadows.boxShadows.length} Box Shadows
+      boxShadow: ${JSON.stringify(shadowMap, null, 8)},
+
+      // ${ds.animations.transitions.durations.length} Transition Durations
+      transitionDuration: {
+${ds.animations.transitions.durations.map((d, i) => `        d${i + 1}: '${d}',`).join("\n")}
+      },
+
+      // ${ds.animations.transitions.timingFunctions.length} Timing Functions
+      transitionTimingFunction: {
+${ds.animations.transitions.timingFunctions.map((t, i) => `        e${i + 1}: '${t}',`).join("\n")}
+      },
+
+      // ${ds.zIndex.length} Z-Index Values
+      zIndex: {
+${ds.zIndex.map((z, i) => `        z${i + 1}: '${z}',`).join("\n")}
+      },
+
+      // Backdrop
+      backdropBlur: {
+${ds.effects.backdropBlur.map((b, i) => `        b${i + 1}: '${b}',`).join("\n")}
+      },
+
+      // Opacity
+      opacity: {
+${ds.effects.opacity.map((o, i) => `        o${i + 1}: '${o}',`).join("\n")}
+      },
+    },
+  },
+  plugins: [],
+};
+`;
+  }
+  generateFramerMotionConfig(ds, raw) {
+    const transitions = ds.animations.transitions;
+    const defaultDuration = transitions.durations[0] || "0.3s";
+    const defaultEasing = transitions.timingFunctions[0] || "ease";
+    return `// Framer Motion Variants
+// Extracted from ${ds.sourceUrl}
+
+// Transition presets
+export const transitions = {
+  fast: { duration: 0.15 },
+  normal: { duration: 0.3 },
+  slow: { duration: 0.5 },
+  spring: { type: 'spring', stiffness: 300, damping: 30 },
+  springBouncy: { type: 'spring', stiffness: 400, damping: 20 },
+};
+
+// Fade animations
+export const fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+};
+
+export const fadeInDown = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+};
+
+export const fadeInLeft = {
+  initial: { opacity: 0, x: -20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 20 },
+};
+
+export const fadeInRight = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 },
+};
+
+// Scale animations
+export const scaleIn = {
+  initial: { opacity: 0, scale: 0.9 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.9 },
+};
+
+export const scaleInBounce = {
+  initial: { opacity: 0, scale: 0.8 },
+  animate: { opacity: 1, scale: 1, transition: transitions.springBouncy },
+  exit: { opacity: 0, scale: 0.8 },
+};
+
+// Stagger containers
+export const staggerContainer = {
+  initial: {},
+  animate: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+export const staggerContainerFast = {
+  initial: {},
+  animate: {
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+// Hover states (extracted from site)
+export const hoverScale = {
+  whileHover: { scale: 1.02 },
+  whileTap: { scale: 0.98 },
+};
+
+export const hoverScaleLarge = {
+  whileHover: { scale: 1.05 },
+  whileTap: { scale: 0.95 },
+};
+
+export const hoverLift = {
+  whileHover: { y: -4, transition: { duration: 0.2 } },
+  whileTap: { y: 0 },
+};
+
+export const hoverGlow = {
+  whileHover: {
+    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.15)',
+    transition: { duration: 0.3 }
+  },
+};
+
+// Button variants
+export const buttonVariants = {
+  initial: { scale: 1 },
+  hover: { scale: 1.02 },
+  tap: { scale: 0.98 },
+  disabled: { opacity: 0.5 },
+};
+
+// Card variants
+export const cardVariants = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  hover: { y: -4, boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)' },
+};
+
+// Modal variants
+export const modalVariants = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+};
+
+export const overlayVariants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+// Scroll reveal
+export const scrollReveal = {
+  initial: { opacity: 0, y: 60 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, margin: '-100px' },
+};
+
+// Navigation
+export const navItemVariants = {
+  initial: { opacity: 0, y: -10 },
+  animate: { opacity: 1, y: 0 },
+  hover: { color: 'var(--color-primary)' },
+};
+
+// Export all as default
+export default {
+  transitions,
+  fadeIn,
+  fadeInUp,
+  fadeInDown,
+  fadeInLeft,
+  fadeInRight,
+  scaleIn,
+  scaleInBounce,
+  staggerContainer,
+  staggerContainerFast,
+  hoverScale,
+  hoverScaleLarge,
+  hoverLift,
+  hoverGlow,
+  buttonVariants,
+  cardVariants,
+  modalVariants,
+  overlayVariants,
+  scrollReveal,
+  navItemVariants,
+};
+`;
+  }
+  async generateComponentFiles(ds, outputDir, raw) {
+    const componentsDir = path2.join(outputDir, "components");
+    if (ds.components.buttons.length > 0) {
+      const buttonComponent = this.generateButtonComponent(ds.components.buttons);
+      await fs2.writeFile(path2.join(componentsDir, "Button.tsx"), buttonComponent);
+    }
+    if (ds.components.cards.length > 0) {
+      const cardComponent = this.generateCardComponent(ds.components.cards);
+      await fs2.writeFile(path2.join(componentsDir, "Card.tsx"), cardComponent);
+    }
+    if (ds.components.inputs.length > 0) {
+      const inputComponent = this.generateInputComponent(ds.components.inputs);
+      await fs2.writeFile(path2.join(componentsDir, "Input.tsx"), inputComponent);
+    }
+    if (ds.components.headings.length > 0) {
+      const headingComponent = this.generateHeadingComponent(ds.components.headings);
+      await fs2.writeFile(path2.join(componentsDir, "Heading.tsx"), headingComponent);
+    }
+    if (ds.components.containers.length > 0) {
+      const containerComponent = this.generateContainerComponent(ds.components.containers);
+      await fs2.writeFile(path2.join(componentsDir, "Container.tsx"), containerComponent);
+    }
+    if (ds.components.navItems.length > 0) {
+      const navItemComponent = this.generateNavItemComponent(ds.components.navItems);
+      await fs2.writeFile(path2.join(componentsDir, "NavItem.tsx"), navItemComponent);
+    }
+    if (ds.components.badges.length > 0) {
+      const badgeComponent = this.generateBadgeComponent(ds.components.badges);
+      await fs2.writeFile(path2.join(componentsDir, "Badge.tsx"), badgeComponent);
+    }
+    const exports = [
+      ds.components.buttons.length > 0 ? "export { Button } from './Button';" : "",
+      ds.components.cards.length > 0 ? "export { Card } from './Card';" : "",
+      ds.components.inputs.length > 0 ? "export { Input } from './Input';" : "",
+      ds.components.headings.length > 0 ? "export { Heading } from './Heading';" : "",
+      ds.components.containers.length > 0 ? "export { Container } from './Container';" : "",
+      ds.components.navItems.length > 0 ? "export { NavItem } from './NavItem';" : "",
+      ds.components.badges.length > 0 ? "export { Badge } from './Badge';" : ""
+    ].filter((e) => e).join("\n");
+    await fs2.writeFile(path2.join(componentsDir, "index.ts"), exports);
+  }
+  generateButtonComponent(buttons) {
+    const styles = buttons[0]?.styles || {};
+    return `import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+export interface ButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+const baseStyles = \`
+  inline-flex items-center justify-center
+  font-semibold
+  transition-all duration-300
+  cursor-pointer
+  disabled:opacity-50 disabled:cursor-not-allowed
+\`;
+
+const variants = {
+  primary: 'bg-[var(--color-1)] text-white hover:opacity-90',
+  secondary: 'bg-[var(--color-2)] text-white hover:opacity-90',
+  ghost: 'bg-transparent hover:bg-[var(--color-1)]/10',
+  outline: 'border-2 border-current bg-transparent hover:bg-[var(--color-1)]/10',
+};
+
+const sizes = {
+  sm: 'px-4 py-2 text-sm rounded-[var(--radius-1)]',
+  md: 'px-6 py-3 text-base rounded-[var(--radius-2)]',
+  lg: 'px-8 py-4 text-lg rounded-[var(--radius-3)]',
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  className = '',
+  ...props
+}) => {
+  return (
+    <motion.button
+      className={\`\${baseStyles} \${variants[variant]} \${sizes[size]} \${className}\`}
+      whileHover={{ scale: disabled ? 1 : 1.02 }}
+      whileTap={{ scale: disabled ? 1 : 0.98 }}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <span className="animate-spin mr-2">\u23F3</span>
+      ) : null}
+      {children}
+    </motion.button>
+  );
+};
+
+export default Button;
+`;
+  }
+  generateCardComponent(cards) {
+    return `import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+export interface CardProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+  children: React.ReactNode;
+  variant?: 'default' | 'elevated' | 'bordered' | 'glass';
+  hover?: boolean;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const variants = {
+  default: 'bg-white',
+  elevated: 'bg-white shadow-[var(--shadow-1)]',
+  bordered: 'bg-white border border-[var(--color-1)]/20',
+  glass: 'bg-white/80 backdrop-blur-[var(--blur-1)]',
+};
+
+const paddings = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  variant = 'default',
+  hover = true,
+  padding = 'md',
+  className = '',
+  ...props
+}) => {
+  return (
+    <motion.div
+      className={\`rounded-[var(--radius-2)] \${variants[variant]} \${paddings[padding]} \${className}\`}
+      whileHover={hover ? { y: -4, boxShadow: 'var(--shadow-2)' } : undefined}
+      transition={{ duration: 0.2 }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Card;
+`;
+  }
+  generateInputComponent(inputs) {
+    return `import React from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  variant?: 'default' | 'filled' | 'outlined';
+}
+
+const variants = {
+  default: 'border border-[var(--color-1)]/20 bg-white focus:border-[var(--color-1)]',
+  filled: 'border-0 bg-[var(--color-1)]/5 focus:bg-[var(--color-1)]/10',
+  outlined: 'border-2 border-[var(--color-1)]/30 bg-transparent focus:border-[var(--color-1)]',
+};
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className="flex flex-col gap-1">
+      {label && <label className="text-sm font-medium">{label}</label>}
+      <input
+        className={\`
+          px-4 py-3
+          rounded-[var(--radius-1)]
+          transition-all duration-200
+          outline-none
+          focus:ring-2 focus:ring-[var(--color-1)]/20
+          \${variants[variant]}
+          \${error ? 'border-red-500' : ''}
+          \${className}
+        \`}
+        {...props}
+      />
+      {error && <span className="text-sm text-red-500">{error}</span>}
+    </div>
+  );
+};
+
+export default Input;
+`;
+  }
+  generateHeadingComponent(headings) {
+    return `import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+export interface HeadingProps extends Omit<HTMLMotionProps<'h1'>, 'children'> {
+  children: React.ReactNode;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'hero';
+  animate?: boolean;
+}
+
+const sizes = {
+  xs: 'text-[var(--text-1)]',
+  sm: 'text-[var(--text-2)]',
+  md: 'text-[var(--text-3)]',
+  lg: 'text-[var(--text-4)]',
+  xl: 'text-[var(--text-5)]',
+  '2xl': 'text-[var(--text-6)]',
+  '3xl': 'text-[var(--text-7)]',
+  hero: 'text-[var(--text-8)]',
+};
+
+export const Heading: React.FC<HeadingProps> = ({
+  children,
+  as: Component = 'h2',
+  size = 'lg',
+  animate = false,
+  className = '',
+  ...props
+}) => {
+  const MotionComponent = motion[Component] as any;
+
+  return (
+    <MotionComponent
+      className={\`font-[var(--font-1)] font-bold leading-tight \${sizes[size]} \${className}\`}
+      initial={animate ? { opacity: 0, y: 20 } : undefined}
+      animate={animate ? { opacity: 1, y: 0 } : undefined}
+      {...props}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export default Heading;
+`;
+  }
+  generateContainerComponent(containers) {
+    return `import React from 'react';
+
+export interface ContainerProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: boolean;
+  center?: boolean;
+  className?: string;
+}
+
+const sizes = {
+  sm: 'max-w-2xl',
+  md: 'max-w-4xl',
+  lg: 'max-w-6xl',
+  xl: 'max-w-7xl',
+  full: 'max-w-full',
+};
+
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  size = 'lg',
+  padding = true,
+  center = true,
+  className = '',
+}) => {
+  return (
+    <div
+      className={\`
+        w-full
+        \${sizes[size]}
+        \${padding ? 'px-4 sm:px-6 lg:px-8' : ''}
+        \${center ? 'mx-auto' : ''}
+        \${className}
+      \`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Container;
+`;
+  }
+  generateNavItemComponent(navItems) {
+    return `import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+export interface NavItemProps extends Omit<HTMLMotionProps<'a'>, 'children'> {
+  children: React.ReactNode;
+  active?: boolean;
+  variant?: 'default' | 'pill' | 'underline';
+}
+
+const variants = {
+  default: 'hover:text-[var(--color-1)]',
+  pill: 'px-4 py-2 rounded-full hover:bg-[var(--color-1)]/10',
+  underline: 'relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-current hover:after:w-full after:transition-all',
+};
+
+export const NavItem: React.FC<NavItemProps> = ({
+  children,
+  active = false,
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  return (
+    <motion.a
+      className={\`
+        cursor-pointer
+        transition-colors duration-200
+        \${variants[variant]}
+        \${active ? 'text-[var(--color-1)]' : ''}
+        \${className}
+      \`}
+      whileHover={{ scale: 1.02 }}
+      {...props}
+    >
+      {children}
+    </motion.a>
+  );
+};
+
+export default NavItem;
+`;
+  }
+  generateBadgeComponent(badges) {
+    return `import React from 'react';
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const variants = {
+  default: 'bg-[var(--color-1)]/10 text-[var(--color-1)]',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  error: 'bg-red-100 text-red-800',
+  info: 'bg-blue-100 text-blue-800',
+};
+
+const sizes = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-base',
+};
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  className = '',
+}) => {
+  return (
+    <span
+      className={\`
+        inline-flex items-center
+        font-medium
+        rounded-full
+        \${variants[variant]}
+        \${sizes[size]}
+        \${className}
+      \`}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge;
+`;
+  }
+};
+
+// src/cli/index.ts
+import fs3 from "fs-extra";
+var program = new Command();
+program.name("extraktor").description("Extract complete UI from any website").version("1.0.0");
+program.command("extract <url>").description("Extract UI from a website URL").option("-o, --output <dir>", "Output directory", "./extraktor-output").option("-f, --format <formats...>", "Output formats (tailwind, tokens, css-vars, figma, tsx)", ["tailwind", "tokens", "css-vars"]).option("-c, --config <file>", "Config file path").option("--spa <framework>", "SPA framework (auto, react, vue, angular, svelte)", "auto").option("--no-cache", "Disable caching").option("--headless", "Run browser in headless mode", true).option("--no-headless", "Run browser in visible mode").option("--timeout <ms>", "Navigation timeout in milliseconds", "30000").option("--scroll", "Scroll page to capture lazy-loaded content", true).option("--no-scroll", "Disable page scrolling").option("--hover-states", "Capture hover states", false).option("--devtools [endpoint]", "Connect to existing Chrome via DevTools Protocol (default: http://localhost:9222)").option("-v, --verbose", "Verbose output").option("-q, --quiet", "Quiet mode (errors only)").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.quiet ? "error" : options.verbose ? "debug" : "info"
+  });
+  try {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      try {
+        parsedUrl = new URL(`https://${url}`);
+        url = parsedUrl.toString();
+      } catch {
+        logger.error(`Invalid URL: ${url}`);
+        process.exit(1);
+      }
+    }
+    spinner.start(chalk.blue("Loading configuration..."));
+    let config = getDefaultConfig();
+    if (options.config) {
+      const loaded = await loadConfig(options.config);
+      if (loaded) {
+        config = { ...config, ...loaded };
+      }
+    }
+    config.browser.headless = options.headless;
+    config.browser.timeout = parseInt(options.timeout);
+    config.spa.framework = options.spa;
+    config.spa.scrollToLoad = options.scroll;
+    config.extraction.hoverStates = options.hoverStates;
+    if (options.devtools) {
+      config.browser.cdpEndpoint = typeof options.devtools === "string" ? options.devtools : "http://localhost:9222";
+      config.browser.headless = false;
+    }
+    const formatMap = {
+      tailwind: "tailwind",
+      tokens: "design-tokens",
+      "css-vars": "css-variables",
+      figma: "figma",
+      tsx: "tsx"
+    };
+    config.output.formats = options.format.map((f) => formatMap[f] || f);
+    spinner.succeed(chalk.green("Configuration loaded"));
+    const outputDir = path3.resolve(options.output);
+    await fs3.ensureDir(outputDir);
+    const orchestrator = new Orchestrator({ config, logger });
+    spinner.start(chalk.blue(`Extracting UI from ${chalk.cyan(url)}...`));
+    const startTime = Date.now();
+    const result = await orchestrator.extract(url, outputDir);
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.succeed(chalk.green(`Extraction complete in ${duration}s`));
+    console.log("\n" + chalk.bold("\u{1F4CA} Extraction Summary:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    if (result.colors) {
+      console.log(`  ${chalk.yellow("\u{1F3A8} Colors:")} ${result.colors.palette.length} colors, ${result.colors.gradients.length} gradients`);
+    }
+    if (result.typography) {
+      console.log(`  ${chalk.yellow("\u{1F4DD} Typography:")} ${result.typography.fontFamilies.length} fonts, ${result.typography.fontSizes.length} sizes`);
+    }
+    if (result.spacing) {
+      console.log(`  ${chalk.yellow("\u{1F4D0} Spacing:")} ${result.spacing.scale.length} values`);
+    }
+    if (result.effects) {
+      console.log(`  ${chalk.yellow("\u2728 Effects:")} ${result.effects.shadows.length} shadows, ${result.effects.borderRadii.length} radii`);
+    }
+    if (result.animations) {
+      console.log(`  ${chalk.yellow("\u{1F3AC} Animations:")} ${result.animations.keyframes.length} keyframes, ${result.animations.transitions.length} transitions`);
+    }
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`
+${chalk.bold("\u{1F4C1} Output:")} ${chalk.cyan(outputDir)}`);
+    const files = await fs3.readdir(outputDir);
+    for (const file of files) {
+      const stat = await fs3.stat(path3.join(outputDir, file));
+      if (stat.isFile()) {
+        console.log(`  ${chalk.green("\u2713")} ${file}`);
+      } else if (stat.isDirectory()) {
+        const subfiles = await fs3.readdir(path3.join(outputDir, file));
+        console.log(`  ${chalk.green("\u2713")} ${file}/ (${subfiles.length} files)`);
+      }
+    }
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Extraction failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("init").description("Initialize extraktor configuration").option("--preset <preset>", "Configuration preset (minimal, standard, full)", "standard").option("-f, --force", "Overwrite existing config").action(async (options) => {
+  const configPath = "extraktor.config.json";
+  if (await fs3.pathExists(configPath) && !options.force) {
+    console.log(chalk.yellow("Config file already exists. Use --force to overwrite."));
+    return;
+  }
+  const config = getDefaultConfig();
+  if (options.preset === "minimal") {
+    config.output.formats = ["tailwind", "css-variables"];
+    config.optimization.images.enabled = false;
+    config.optimization.svgs.enabled = false;
+    config.optimization.fonts.enabled = false;
+  } else if (options.preset === "full") {
+    config.output.formats = ["tailwind", "design-tokens", "css-variables", "figma", "tsx"];
+    config.optimization.images.enabled = true;
+    config.optimization.svgs.enabled = true;
+    config.optimization.fonts.enabled = true;
+  }
+  await fs3.writeJSON(configPath, config, { spaces: 2 });
+  console.log(chalk.green(`\u2705 Created ${configPath} with ${options.preset} preset`));
+});
+program.command("generate <url>").description("Extract UI and generate a complete Next.js project").option("-o, --output <dir>", "Output directory", "./extraktor-output").option("-n, --name <name>", "Project name (defaults to domain name)").option("--spa <framework>", "SPA framework (auto, react, vue, angular, svelte)", "auto").option("--timeout <ms>", "Navigation timeout in milliseconds", "30000").option("--headless", "Run browser in headless mode", true).option("--no-headless", "Run browser in visible mode").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      try {
+        parsedUrl = new URL(`https://${url}`);
+        url = parsedUrl.toString();
+      } catch {
+        logger.error(`Invalid URL: ${url}`);
+        process.exit(1);
+      }
+    }
+    spinner.start(chalk.blue("Loading configuration..."));
+    const config = getDefaultConfig();
+    config.browser.headless = options.headless;
+    config.browser.timeout = parseInt(options.timeout);
+    config.spa.framework = options.spa;
+    config.output.formats = ["tailwind", "css-variables", "design-tokens"];
+    spinner.succeed(chalk.green("Configuration loaded"));
+    const outputDir = path3.resolve(options.output);
+    await fs3.ensureDir(outputDir);
+    const orchestrator = new Orchestrator({ config, logger });
+    spinner.start(chalk.blue(`Extracting UI from ${chalk.cyan(url)} and generating Next.js project...`));
+    const startTime = Date.now();
+    const projectDir = await orchestrator.extractAndGenerate(url, outputDir, options.name);
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.succeed(chalk.green(`Next.js project generated in ${duration}s`));
+    console.log("\n" + chalk.bold("\u{1F680} Next.js Project Generated:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`  ${chalk.yellow("\u{1F4C1} Location:")} ${chalk.cyan(projectDir)}`);
+    const listDir = async (dir, prefix = "") => {
+      const items = await fs3.readdir(dir);
+      for (const item of items.slice(0, 10)) {
+        const itemPath = path3.join(dir, item);
+        const stat = await fs3.stat(itemPath);
+        if (stat.isDirectory()) {
+          console.log(`  ${prefix}${chalk.blue(item + "/")}`);
+          if (prefix.length < 4) {
+            await listDir(itemPath, prefix + "  ");
+          }
+        } else {
+          console.log(`  ${prefix}${chalk.green(item)}`);
+        }
+      }
+      if (items.length > 10) {
+        console.log(`  ${prefix}${chalk.gray(`... and ${items.length - 10} more`)}`);
+      }
+    };
+    await listDir(projectDir);
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F4CB} Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} cd ${path3.relative(process.cwd(), projectDir)}`);
+    console.log(`  ${chalk.cyan("2.")} npm install`);
+    console.log(`  ${chalk.cyan("3.")} npm run dev`);
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Generation failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("analyze <url>").description("Analyze a website without generating output").option("--spa <framework>", "SPA framework (auto, react, vue, angular, svelte)", "auto").option("--timeout <ms>", "Navigation timeout", "30000").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({ level: "info" });
+  try {
+    spinner.start(chalk.blue(`Analyzing ${url}...`));
+    const config = getDefaultConfig();
+    config.spa.framework = options.spa;
+    config.browser.timeout = parseInt(options.timeout);
+    config.output.formats = [];
+    const orchestrator = new Orchestrator({ config, logger });
+    const result = await orchestrator.analyze(url);
+    spinner.succeed(chalk.green("Analysis complete"));
+    console.log("\n" + chalk.bold("\u{1F4CA} Page Analysis:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`  ${chalk.yellow("URL:")} ${result.metadata.url}`);
+    console.log(`  ${chalk.yellow("Title:")} ${result.metadata.title}`);
+    console.log(`  ${chalk.yellow("SPA Framework:")} ${result.metadata.spaFramework || "None detected"}`);
+    console.log(`  ${chalk.yellow("Elements Analyzed:")} ${result.metadata.elementsAnalyzed}`);
+    console.log(`  ${chalk.yellow("CSS Variables:")} ${Object.keys(result.cssVariables).length}`);
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F3A8} Colors:"));
+    console.log(`  Palette: ${result.colors.palette.length}`);
+    console.log(`  Gradients: ${result.colors.gradients.length}`);
+    console.log("\n" + chalk.bold("\u{1F4DD} Typography:"));
+    console.log(`  Font Families: ${result.typography.fontFamilies.length}`);
+    console.log(`  Font Sizes: ${result.typography.fontSizes.length}`);
+    console.log(`  Text Styles: ${result.typography.textStyles.length}`);
+    console.log("\n" + chalk.bold("\u{1F4D0} Layout:"));
+    console.log(`  Spacing Values: ${result.spacing.scale.length}`);
+    console.log("\n" + chalk.bold("\u2728 Effects:"));
+    console.log(`  Shadows: ${result.effects.shadows.length}`);
+    console.log(`  Border Radii: ${result.effects.borderRadii.length}`);
+    console.log("\n" + chalk.bold("\u{1F3AC} Animations:"));
+    console.log(`  Keyframes: ${result.animations.keyframes.length}`);
+    console.log(`  Transitions: ${result.animations.transitions.length}`);
+  } catch (error) {
+    spinner.fail(chalk.red("Analysis failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+  }
+});
+program.command("clone <url>").description("Create a pixel-perfect Next.js clone of a website").option("-o, --output <dir>", "Output directory", "./extraktor-output").option("-n, --name <name>", "Project name").option("--timeout <ms>", "Navigation timeout", "60000").option("--content", "Extract content to content.json for easy editing", false).option("--crawl", "Crawl and clone all linked pages", false).option("--handover", "Create complete handover package (tokens, git, zip)", false).option("--no-ai", "Disable AI component generation (use raw HTML fallback)").option("--api-key <key>", "Anthropic API key (or set ANTHROPIC_API_KEY env var) - REQUIRED").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      try {
+        parsedUrl = new URL(`https://${url}`);
+        url = parsedUrl.toString();
+      } catch {
+        console.error(chalk.red(`Invalid URL: ${url}`));
+        process.exit(1);
+      }
+    }
+    const projectName = options.name || parsedUrl.hostname.replace(/\./g, "-");
+    const outputDir = path3.resolve(options.output);
+    await fs3.ensureDir(outputDir);
+    spinner.start(chalk.blue(`Cloning ${chalk.cyan(url)}...`));
+    const config = getDefaultConfig();
+    config.browser.timeout = parseInt(options.timeout);
+    const driver = new PlaywrightDriver({
+      browserConfig: config.browser,
+      spaConfig: config.spa,
+      logger
+    });
+    await driver.initialize();
+    const navResult = await driver.navigate(url);
+    if (!navResult.success) {
+      throw new Error(`Navigation failed: ${navResult.error}`);
+    }
+    const page = driver.getPage();
+    if (!page) {
+      throw new Error("Failed to get page");
+    }
+    await page.waitForTimeout(3e3);
+    const cloner = new SiteCloner();
+    const startTime = Date.now();
+    const result = await cloner.clone(page, {
+      url,
+      outputDir,
+      projectName,
+      downloadAssets: true,
+      inlineStyles: true,
+      extractContent: options.content,
+      crawlPages: options.crawl
+    });
+    await driver.close();
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.succeed(chalk.green(`Cloned in ${duration}s`));
+    console.log("\n" + chalk.bold("\u{1F3AF} Pixel-Perfect Clone Created:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`  ${chalk.yellow("\u{1F4C1} Location:")} ${chalk.cyan(result.projectDir)}`);
+    console.log(`  ${chalk.yellow("\u{1F310} Platform:")} ${chalk.magenta(result.platform)}`);
+    console.log(`  ${chalk.yellow("\u{1F5BC}\uFE0F  Images:")} ${result.assets.images}`);
+    console.log(`  ${chalk.yellow("\u{1F3AC} Videos:")} ${result.assets.videos}`);
+    console.log(`  ${chalk.yellow("\u{1F524} Fonts:")} ${result.assets.fonts}`);
+    console.log(`  ${chalk.yellow("\u{1F4C4} Pages:")} ${result.pagesCloned}`);
+    if (result.contentExtracted) {
+      console.log(`  ${chalk.yellow("\u{1F4DD} Content:")} ${chalk.green("Extracted to content.json")}`);
+    }
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F4CB} Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} cd ${path3.relative(process.cwd(), result.projectDir)}`);
+    console.log(`  ${chalk.cyan("2.")} npm install`);
+    console.log(`  ${chalk.cyan("3.")} npm run dev`);
+    if (result.contentExtracted) {
+      console.log(`  ${chalk.cyan("4.")} Edit ${chalk.cyan("public/content.json")} to customize text & images`);
+    }
+    if (options.ai !== false) {
+      const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+      if (!apiKey) {
+        spinner.fail(chalk.red("ANTHROPIC_API_KEY is required"));
+        console.error(chalk.red("\n\u274C API key required for AI component generation"));
+        console.error(chalk.gray("   Set ANTHROPIC_API_KEY environment variable or use --api-key flag"));
+        console.error(chalk.gray("   Example: ANTHROPIC_API_KEY=sk-ant-... extraktor clone <url>"));
+        console.error(chalk.gray("\n   Use --no-ai flag to skip AI generation (not recommended)"));
+        process.exit(1);
+      } else {
+        spinner.start(chalk.blue("Transforming to clean React components using AI (Claude)..."));
+        try {
+          const transformer = new Transformer();
+          const transformResult = await transformer.transform({
+            inputDir: result.projectDir,
+            components: true,
+            tokens: true,
+            tailwind: true,
+            useAI: true,
+            apiKey,
+            onProgress: (msg) => {
+              spinner.text = chalk.blue(msg);
+            }
+          });
+          if (transformResult.aiGenerated && transformResult.components.length > 0) {
+            spinner.succeed(chalk.green("AI transformation complete!"));
+            console.log("\n" + chalk.bold("\u{1F916} AI-Generated Components:"));
+            console.log(chalk.gray("\u2500".repeat(40)));
+            transformResult.components.forEach((name) => {
+              console.log(`  ${chalk.cyan("\u2022")} ${name}.tsx`);
+            });
+            console.log(chalk.gray("\u2500".repeat(40)));
+            if (transformResult.errors.length > 0) {
+              console.log(chalk.yellow(`\u26A0 ${transformResult.errors.length} warnings: ${transformResult.errors.slice(0, 3).join(", ")}${transformResult.errors.length > 3 ? "..." : ""}`));
+            }
+            console.log(chalk.green("\u2728 Clean, editable React components generated!"));
+          } else {
+            spinner.warn(chalk.yellow("AI transformation had issues, components may use fallback"));
+            if (transformResult.errors && transformResult.errors.length > 0) {
+              console.log(chalk.yellow("  Errors: " + transformResult.errors.slice(0, 5).join(", ")));
+            }
+          }
+        } catch (transformError) {
+          spinner.warn(chalk.yellow("AI transformation failed"));
+          console.log(chalk.yellow(`  Error: ${transformError instanceof Error ? transformError.message : transformError}`));
+          console.log(chalk.gray(`  Clone is still available at: ${result.projectDir}`));
+          console.log(chalk.gray(`  Run 'extraktor transform ${result.projectDir}' to retry`));
+        }
+      }
+    }
+    if (options.handover) {
+      spinner.start(chalk.blue("Creating handover package..."));
+      const transformer = new Transformer();
+      await transformer.transform({
+        inputDir: result.projectDir,
+        components: false,
+        // Skip components for clean handover
+        tokens: true,
+        tailwind: true
+      });
+      const contentJson = {
+        brand: {
+          name: "Your Brand",
+          tagline: "Your tagline here",
+          logo: "/images/logo.png"
+        },
+        hero: {
+          headline: "Your headline here",
+          subheadline: "Your description here",
+          cta: { text: "Get Started", href: "#" }
+        },
+        features: [
+          { title: "Feature 1", description: "Description here" },
+          { title: "Feature 2", description: "Description here" },
+          { title: "Feature 3", description: "Description here" }
+        ],
+        footer: {
+          copyright: "\xA9 2025 Your Brand. All rights reserved.",
+          links: [
+            { label: "About", href: "/about" },
+            { label: "Contact", href: "/contact" }
+          ]
+        }
+      };
+      await fs3.writeJSON(path3.join(result.projectDir, "content.json"), contentJson, { spaces: 2 });
+      const handoverMd = `# Project Handover
+
+## Quick Start
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+Visit http://localhost:3000
+
+## How to Customize
+
+### Colors & Fonts
+Edit \`src/styles/tokens.css\` - all colors and fonts are CSS variables.
+
+### Content
+Edit \`content.json\` - or ask AI to help: *"Change the headline to X"*
+
+### Images
+Replace files in \`public/images/\`
+
+## Deploy to Vercel
+\`\`\`bash
+git add . && git commit -m "Ready to deploy"
+git push
+\`\`\`
+Then import repo at vercel.com
+
+## Need Help?
+Ask AI: "Change the primary color to blue" or "Update all button text"
+`;
+      await fs3.writeFile(path3.join(result.projectDir, "HANDOVER.md"), handoverMd);
+      const gitignore = `node_modules/
+.next/
+.env
+.env.local
+.DS_Store
+`;
+      await fs3.writeFile(path3.join(result.projectDir, ".gitignore"), gitignore);
+      const { execSync } = await import("child_process");
+      try {
+        execSync('git init && git add . && git commit -m "Initial clone - ready for customization"', {
+          cwd: result.projectDir,
+          stdio: "pipe"
+        });
+      } catch (e) {
+      }
+      const zipName = `${projectName}.zip`;
+      const zipPath = path3.join(outputDir, zipName);
+      try {
+        execSync(`zip -r "${zipPath}" "${projectName}" -x "*.git*" -x "*node_modules*" -x "*.next*"`, {
+          cwd: outputDir,
+          stdio: "pipe"
+        });
+      } catch (e) {
+      }
+      spinner.succeed(chalk.green("Handover package created!"));
+      console.log("\n" + chalk.bold("\u{1F4E6} Handover Package:"));
+      console.log(chalk.gray("\u2500".repeat(40)));
+      console.log(`  ${chalk.yellow("\u{1F4C1} Project:")} ${chalk.cyan(result.projectDir)}`);
+      if (await fs3.pathExists(zipPath)) {
+        const zipStats = await fs3.stat(zipPath);
+        const sizeMB = (zipStats.size / 1024 / 1024).toFixed(1);
+        console.log(`  ${chalk.yellow("\u{1F4E6} Zip:")} ${chalk.cyan(zipPath)} (${sizeMB}MB)`);
+      }
+      console.log(`  ${chalk.yellow("\u{1F3A8} Tokens:")} ${chalk.cyan("src/styles/tokens.css")}`);
+      console.log(`  ${chalk.yellow("\u{1F4DD} Content:")} ${chalk.cyan("content.json")}`);
+      console.log(`  ${chalk.yellow("\u{1F4D6} Guide:")} ${chalk.cyan("HANDOVER.md")}`);
+      console.log(chalk.gray("\u2500".repeat(40)));
+      console.log("\n" + chalk.bold("\u{1F680} Share with your team:"));
+      console.log(`  ${chalk.cyan("unzip")} ${zipName} && cd ${projectName} && npm install && npm run dev`);
+    }
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+    if (!options.handover) {
+      console.log(chalk.gray(`
+Tip: Run 'extraktor clone <url> --handover' to create a complete handover package`));
+    }
+  } catch (error) {
+    spinner.fail(chalk.red("Clone failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("handover <dir>").description("Create a handover package from an existing clone").option("-o, --output <dir>", "Output directory for zip file").option("--no-zip", "Skip zip file creation").option("-v, --verbose", "Verbose output").action(async (dir, options) => {
+  const spinner = ora();
+  try {
+    const projectDir = path3.resolve(dir);
+    const projectName = path3.basename(projectDir);
+    if (!await fs3.pathExists(path3.join(projectDir, "public/page-content.html"))) {
+      console.error(chalk.red(`Error: ${dir} is not a valid extraktor clone.`));
+      process.exit(1);
+    }
+    spinner.start(chalk.blue("Creating handover package..."));
+    if (!await fs3.pathExists(path3.join(projectDir, "src/styles/tokens.css"))) {
+      const transformer = new Transformer();
+      await transformer.transform({
+        inputDir: projectDir,
+        components: false,
+        tokens: true,
+        tailwind: true
+      });
+    }
+    if (!await fs3.pathExists(path3.join(projectDir, "content.json"))) {
+      const contentJson = {
+        brand: { name: "Your Brand", tagline: "Your tagline", logo: "/images/logo.png" },
+        hero: { headline: "Your headline", subheadline: "Your description", cta: { text: "Get Started", href: "#" } },
+        features: [
+          { title: "Feature 1", description: "Description" },
+          { title: "Feature 2", description: "Description" }
+        ],
+        footer: { copyright: "\xA9 2025 Your Brand", links: [] }
+      };
+      await fs3.writeJSON(path3.join(projectDir, "content.json"), contentJson, { spaces: 2 });
+    }
+    if (!await fs3.pathExists(path3.join(projectDir, "HANDOVER.md"))) {
+      const handoverMd = `# Project Handover
+
+## Quick Start
+\`\`\`bash
+npm install && npm run dev
+\`\`\`
+
+## Customize
+- Colors: \`src/styles/tokens.css\`
+- Content: \`content.json\`
+- Images: \`public/images/\`
+`;
+      await fs3.writeFile(path3.join(projectDir, "HANDOVER.md"), handoverMd);
+    }
+    if (!await fs3.pathExists(path3.join(projectDir, ".gitignore"))) {
+      await fs3.writeFile(path3.join(projectDir, ".gitignore"), "node_modules/\n.next/\n.env\n.DS_Store\n");
+    }
+    const { execSync } = await import("child_process");
+    if (!await fs3.pathExists(path3.join(projectDir, ".git"))) {
+      try {
+        execSync('git init && git add . && git commit -m "Initial clone"', { cwd: projectDir, stdio: "pipe" });
+      } catch (e) {
+      }
+    }
+    let zipPath = "";
+    if (options.zip !== false) {
+      const outputDir = options.output ? path3.resolve(options.output) : path3.dirname(projectDir);
+      const zipName = `${projectName}.zip`;
+      zipPath = path3.join(outputDir, zipName);
+      try {
+        if (await fs3.pathExists(zipPath)) await fs3.remove(zipPath);
+        execSync(`zip -r "${zipPath}" "${projectName}" -x "*.git*" -x "*node_modules*" -x "*.next*"`, {
+          cwd: path3.dirname(projectDir),
+          stdio: "pipe"
+        });
+      } catch (e) {
+        console.log(chalk.yellow("Note: Could not create zip file"));
+      }
+    }
+    spinner.succeed(chalk.green("Handover package ready!"));
+    console.log("\n" + chalk.bold("\u{1F4E6} Handover Package:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`  ${chalk.yellow("\u{1F4C1} Project:")} ${chalk.cyan(projectDir)}`);
+    if (zipPath && await fs3.pathExists(zipPath)) {
+      const zipStats = await fs3.stat(zipPath);
+      const sizeMB = (zipStats.size / 1024 / 1024).toFixed(1);
+      console.log(`  ${chalk.yellow("\u{1F4E6} Zip:")} ${chalk.cyan(zipPath)} (${sizeMB}MB)`);
+    }
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F680} Share:"));
+    if (zipPath) {
+      console.log(`  ${chalk.cyan(`unzip ${path3.basename(zipPath)} && cd ${projectName} && npm i && npm run dev`)}`);
+    }
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Handover failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+  }
+});
+program.command("transform <dir>").description("Transform a cloned site into React components + design tokens").option("--components", "Generate React components (Header, Hero, Footer, etc.)", true).option("--no-components", "Skip component generation").option("--tokens", "Extract design tokens to CSS variables", true).option("--no-tokens", "Skip token extraction").option("--tailwind", "Generate Tailwind config with extracted colors", true).option("--no-tailwind", "Skip Tailwind config generation").option("--no-ai", "Disable AI component generation (use raw HTML fallback)").option("--api-key <key>", "Anthropic API key (or set ANTHROPIC_API_KEY env var) - REQUIRED").option("-o, --output <dir>", "Output directory (default: same as input)").option("-v, --verbose", "Verbose output").action(async (dir, options) => {
+  const spinner = ora();
+  try {
+    const inputDir = path3.resolve(dir);
+    if (!await fs3.pathExists(path3.join(inputDir, "public/page-content.html"))) {
+      console.error(chalk.red(`Error: ${dir} is not a valid extraktor clone.`));
+      console.error(chalk.gray(`Run 'extraktor clone <url>' first to create a clone.`));
+      process.exit(1);
+    }
+    const useAI = options.ai !== false;
+    const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+    if (useAI && !apiKey) {
+      console.error(chalk.red("\n\u274C ANTHROPIC_API_KEY is required for AI component generation"));
+      console.error(chalk.gray("   Set ANTHROPIC_API_KEY environment variable or use --api-key flag"));
+      console.error(chalk.gray("   Example: ANTHROPIC_API_KEY=sk-ant-... extraktor transform <dir>"));
+      console.error(chalk.gray("\n   Use --no-ai flag to skip AI generation (not recommended)"));
+      process.exit(1);
+    }
+    if (useAI) {
+      spinner.start(chalk.blue("Transforming clone into React components using AI (Claude)..."));
+    } else {
+      spinner.start(chalk.blue("Transforming clone into React components (fallback mode)..."));
+    }
+    const transformer = new Transformer();
+    const result = await transformer.transform({
+      inputDir,
+      outputDir: options.output,
+      components: options.components,
+      tokens: options.tokens,
+      tailwind: options.tailwind,
+      useAI,
+      apiKey,
+      onProgress: useAI ? (msg) => {
+        spinner.text = chalk.blue(msg);
+      } : void 0
+    });
+    if (useAI && result.aiGenerated) {
+      spinner.succeed(chalk.green("AI transformation complete!"));
+    } else if (useAI && !result.aiGenerated) {
+      spinner.warn(chalk.yellow("AI transformation failed, fell back to standard generation"));
+      if (result.errors && result.errors.length > 0) {
+        console.log(chalk.yellow("  Errors: " + result.errors.join(", ")));
+      }
+    } else {
+      spinner.succeed(chalk.green("Transformation complete!"));
+    }
+    console.log("\n" + chalk.bold("\u{1F504} Transformation Results:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    if (result.components.length > 0) {
+      console.log(`  ${chalk.yellow("\u{1F4E6} Components:")} ${result.components.length}`);
+      result.components.forEach((name) => {
+        console.log(`     ${chalk.cyan("\u2022")} ${name}.tsx`);
+      });
+    }
+    if (result.tokensFile) {
+      console.log(`  ${chalk.yellow("\u{1F3A8} Tokens:")} ${chalk.cyan(path3.relative(process.cwd(), result.tokensFile))}`);
+    }
+    if (result.tailwindConfig) {
+      console.log(`  ${chalk.yellow("\u{1F30A} Tailwind:")} ${chalk.cyan(path3.relative(process.cwd(), result.tailwindConfig))}`);
+    }
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F4CB} Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} Review generated components in ${chalk.cyan("src/components/")}`);
+    console.log(`  ${chalk.cyan("2.")} Edit ${chalk.cyan("src/styles/tokens.css")} to customize colors/fonts`);
+    console.log(`  ${chalk.cyan("3.")} Import components in your pages as needed`);
+    console.log("\n" + chalk.green.bold("\u2705 Ready for handover!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Transform failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("theme <url>").description("Generate a theme package from a website that can be installed in existing projects").option("-o, --output <dir>", "Output directory", "./extraktor-theme").option("-n, --name <name>", "Package name", "@rainbow/theme").option("--dark-mode", "Generate dark mode variants", false).option("--no-components", "Exclude component utilities").option("--no-tailwind", "Exclude Tailwind preset").option("--no-css", "Exclude CSS variables").option("--timeout <ms>", "Navigation timeout", "60000").option("--custom-color <name:value...>", "Add custom colors (e.g., brand:#FF6B35)").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      try {
+        parsedUrl = new URL(`https://${url}`);
+        url = parsedUrl.toString();
+      } catch {
+        logger.error(`Invalid URL: ${url}`);
+        process.exit(1);
+      }
+    }
+    spinner.start(chalk.blue(`Extracting theme from ${chalk.cyan(url)}...`));
+    const customColors = {};
+    if (options.customColor) {
+      for (const colorDef of Array.isArray(options.customColor) ? options.customColor : [options.customColor]) {
+        const [name, value] = colorDef.split(":");
+        if (name && value) {
+          customColors[name] = value;
+        }
+      }
+    }
+    const config = getDefaultConfig();
+    config.browser.headless = true;
+    config.browser.timeout = parseInt(options.timeout);
+    config.output.formats = ["design-tokens"];
+    const orchestrator = new Orchestrator({ config, logger });
+    const startTime = Date.now();
+    const tempDir = await fs3.mkdtemp(path3.join(os.tmpdir(), "extraktor-"));
+    const result = await orchestrator.extract(url, tempDir);
+    const extractDuration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.text = chalk.blue(`Extracted theme in ${extractDuration}s. Generating package...`);
+    const simpleTokens = {
+      colors: result.colors.palette.map((c) => ({ name: c.name, value: c.value, type: "color" })),
+      fonts: result.typography.fontFamilies.map((f) => ({ name: f.name, value: f.value, type: "font" })),
+      spacing: result.spacing.scale.map((s) => ({ name: s.name, value: s.value, type: "spacing" })),
+      borderRadius: result.effects.borderRadii.map((br) => ({ name: br.name, value: br.value, type: "radius" })),
+      shadows: result.effects.shadows.map((sh) => ({ name: sh.name, value: sh.value, type: "shadow" }))
+    };
+    const { ThemePackageGenerator } = await import("../theme-package-generator-E55BBBZN.js");
+    const generator = new ThemePackageGenerator();
+    const outputDir = path3.resolve(options.output);
+    await generator.generate(simpleTokens, {
+      packageName: options.name,
+      outputDir,
+      includeComponents: options.components !== false,
+      includeTailwindPreset: options.tailwind !== false,
+      includeCSSVariables: options.css !== false,
+      darkMode: options.darkMode,
+      customColors: Object.keys(customColors).length > 0 ? customColors : void 0
+    });
+    await fs3.remove(tempDir);
+    const totalDuration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.succeed(chalk.green(`Theme package generated in ${totalDuration}s`));
+    console.log("\n" + chalk.bold("\u{1F4E6} Theme Package Created:"));
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log(`  ${chalk.yellow("\u{1F4C1} Location:")} ${chalk.cyan(outputDir)}`);
+    console.log(`  ${chalk.yellow("\u{1F4E6} Package:")} ${chalk.cyan(options.name)}`);
+    console.log(`  ${chalk.yellow("\u{1F3A8} Colors:")} ${simpleTokens.colors.length}`);
+    console.log(`  ${chalk.yellow("\u{1F524} Fonts:")} ${simpleTokens.fonts.length}`);
+    if (options.darkMode) {
+      console.log(`  ${chalk.yellow("\u{1F319} Dark Mode:")} ${chalk.green("Enabled")}`);
+    }
+    if (Object.keys(customColors).length > 0) {
+      console.log(`  ${chalk.yellow("\u{1F3AF} Custom Colors:")} ${chalk.cyan(Object.keys(customColors).join(", "))}`);
+    }
+    console.log(chalk.gray("\u2500".repeat(40)));
+    console.log("\n" + chalk.bold("\u{1F4CB} Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} cd ${path3.relative(process.cwd(), outputDir)}`);
+    console.log(`  ${chalk.cyan("2.")} npm install`);
+    console.log(`  ${chalk.cyan("3.")} npm run build`);
+    console.log(`  ${chalk.cyan("4.")} npm publish ${chalk.gray("(or npm link for local development)")}`);
+    console.log("\n" + chalk.bold("\u{1F4D6} Usage in Your Project:"));
+    console.log(`  ${chalk.gray("$")} npm install ${options.name}`);
+    console.log(`  ${chalk.gray("#")} Then import in your code:`);
+    console.log(`  ${chalk.gray("import")} { theme } ${chalk.gray("from")} '${options.name}'`);
+    console.log(`  ${chalk.gray("import")} '${options.name}/css'`);
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Theme package generation failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("design <url>").description("Extract a complete design system from a website (colors, typography, components, Tailwind preset)").option("-o, --output <dir>", "Output directory", "./design-system").option("-n, --name <name>", "Package name (auto-generated from URL if not provided)").option("--api-key <key>", "Anthropic API key (or set ANTHROPIC_API_KEY env var) - REQUIRED").option("--timeout <ms>", "Navigation timeout", "60000").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  try {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      try {
+        parsedUrl = new URL(`https://${url}`);
+        url = parsedUrl.toString();
+      } catch {
+        console.error(chalk.red(`Invalid URL: ${url}`));
+        process.exit(1);
+      }
+    }
+    const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+    const packageName = options.name || `${parsedUrl.hostname.replace(/\./g, "-")}-design-system`;
+    const outputDir = path3.resolve(options.output);
+    spinner.start(chalk.blue(`Extracting design system from ${chalk.cyan(url)}...`));
+    const extractor = new DesignExtractor(apiKey);
+    const startTime = Date.now();
+    const designSystem = await extractor.extract(url, outputDir);
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    spinner.succeed(chalk.green(`Design system extracted in ${duration}s`));
+    console.log("\n" + chalk.bold("\u{1F3A8} Design System Package Created:"));
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log(`  ${chalk.yellow("\u{1F4C1} Location:")} ${chalk.cyan(outputDir)}`);
+    console.log(`  ${chalk.yellow("\u{1F4E6} Package:")} ${chalk.cyan(packageName)}`);
+    console.log(`  ${chalk.yellow("\u{1F310} Source:")} ${chalk.gray(url)}`);
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log("\n" + chalk.bold("\u{1F4CA} Design Tokens:"));
+    const colorCount = Object.keys(designSystem.colors.solid).length + designSystem.colors.gradients.length + designSystem.colors.rgba.length;
+    console.log(`  ${chalk.yellow("\u{1F3A8} Colors:")} ${colorCount} (${Object.keys(designSystem.colors.solid).length} solid, ${designSystem.colors.gradients.length} gradients, ${designSystem.colors.rgba.length} rgba)`);
+    Object.entries(designSystem.colors.solid).slice(0, 5).forEach(([name, value]) => {
+      try {
+        console.log(`     ${chalk.gray("\u2022")} ${name}: ${chalk.hex(value)(value)}`);
+      } catch {
+        console.log(`     ${chalk.gray("\u2022")} ${name}: ${value}`);
+      }
+    });
+    if (Object.keys(designSystem.colors.solid).length > 5) {
+      console.log(`     ${chalk.gray(`... and ${Object.keys(designSystem.colors.solid).length - 5} more`)}`);
+    }
+    console.log(`  ${chalk.yellow("\u{1F524} Fonts:")} ${designSystem.typography.fontFamilies.length} families, ${designSystem.typography.fontSizes.length} sizes`);
+    console.log(`  ${chalk.yellow("\u{1F4D0} Spacing:")} ${designSystem.spacing.all.length} values`);
+    console.log(`  ${chalk.yellow("\u2B1C Radius:")} ${designSystem.borders.radius.length} values`);
+    console.log(`  ${chalk.yellow("\u{1F32B}\uFE0F  Shadows:")} ${designSystem.shadows.boxShadows.length} box, ${designSystem.shadows.dropShadows.length} drop`);
+    console.log(`  ${chalk.yellow("\u{1F3AC} Transitions:")} ${designSystem.animations.transitions.full.length} unique`);
+    console.log(`  ${chalk.yellow("\u{1F4D0} Layout:")} ${designSystem.layout.displays.length} displays, ${Object.keys(designSystem.layout.breakpoints).length} breakpoints`);
+    console.log("\n" + chalk.bold("\u{1F4E6} Component Patterns:"));
+    console.log(`  ${chalk.cyan("\u2022")} Buttons: ${designSystem.components.buttons.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Inputs: ${designSystem.components.inputs.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Cards: ${designSystem.components.cards.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Links: ${designSystem.components.links.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Headings: ${designSystem.components.headings.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Nav Items: ${designSystem.components.navItems.length}`);
+    console.log(`  ${chalk.cyan("\u2022")} Badges: ${designSystem.components.badges.length}`);
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log("\n" + chalk.bold("\u{1F4C4} Files Generated:"));
+    console.log(`  ${chalk.green("\u2713")} design-tokens/colors.css`);
+    console.log(`  ${chalk.green("\u2713")} design-tokens/typography.css`);
+    console.log(`  ${chalk.green("\u2713")} design-tokens/spacing.css`);
+    console.log(`  ${chalk.green("\u2713")} tailwind.preset.js`);
+    console.log(`  ${chalk.green("\u2713")} components/*.tsx`);
+    console.log(`  ${chalk.green("\u2713")} package.json`);
+    console.log(`  ${chalk.green("\u2713")} design-system.json`);
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log("\n" + chalk.bold("\u{1F4CB} Usage:"));
+    console.log(chalk.gray("  Option 1: Copy files to your project"));
+    console.log(`    ${chalk.cyan("cp -r")} ${outputDir}/design-tokens ${chalk.cyan("your-project/src/")}`);
+    console.log(`    ${chalk.cyan("cp")} ${outputDir}/tailwind.preset.js ${chalk.cyan("your-project/")}`);
+    console.log(chalk.gray("\n  Option 2: Use as Tailwind preset"));
+    console.log(`    ${chalk.gray("// tailwind.config.js")}`);
+    console.log(`    ${chalk.cyan("module.exports")} = {`);
+    console.log(`      ${chalk.cyan("presets")}: [require('${outputDir}/tailwind.preset')],`);
+    console.log(`    }`);
+    console.log(chalk.gray("\n  Option 3: Import CSS variables"));
+    console.log(`    ${chalk.gray("@import '")}${outputDir}/design-tokens/colors.css${chalk.gray("';")}`);
+    console.log(`    ${chalk.gray("@import '")}${outputDir}/design-tokens/typography.css${chalk.gray("';")}`);
+    console.log("\n" + chalk.green.bold("\u2705 Done!"));
+    console.log(chalk.gray(`
+Tip: Run 'cat ${outputDir}/design-system.json' to see the full extracted design system`));
+  } catch (error) {
+    spinner.fail(chalk.red("Design extraction failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("apply <source>").description("Apply styles from a website to your existing project components").requiredOption("--to <project>", "Target project directory").option("--dry-run", "Show what would be changed without making changes").option("-v, --verbose", "Verbose output").action(async (source, options) => {
+  const spinner = ora();
+  try {
+    let sourceUrl;
+    try {
+      const parsed = new URL(source);
+      sourceUrl = parsed.toString();
+    } catch {
+      try {
+        const parsed = new URL(`https://${source}`);
+        sourceUrl = parsed.toString();
+      } catch {
+        console.error(chalk.red(`Invalid source URL: ${source}`));
+        process.exit(1);
+      }
+    }
+    const targetProject = path3.resolve(options.to);
+    if (!await fs3.pathExists(targetProject)) {
+      console.error(chalk.red(`Target project not found: ${targetProject}`));
+      process.exit(1);
+    }
+    const hasPackageJson = await fs3.pathExists(path3.join(targetProject, "package.json"));
+    const hasSrcFolder = await fs3.pathExists(path3.join(targetProject, "src"));
+    if (!hasPackageJson && !hasSrcFolder) {
+      console.error(chalk.red(`Invalid project directory: ${targetProject}`));
+      console.error(chalk.gray("  Expected a project with package.json or src/ folder"));
+      process.exit(1);
+    }
+    console.log("\n" + chalk.bold("\u{1F3A8} Extraktor Apply"));
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log(`  ${chalk.yellow("\u{1F4E5} Source:")} ${chalk.cyan(sourceUrl)}`);
+    console.log(`  ${chalk.yellow("\u{1F4C1} Target:")} ${chalk.cyan(targetProject)}`);
+    console.log(chalk.gray("\u2500".repeat(50)));
+    if (options.dryRun) {
+      console.log(chalk.yellow("\n\u26A0\uFE0F  Dry run mode - no changes will be made\n"));
+    }
+    const { StyleApplier } = await import("../style-applier-BMHP6V57.js");
+    const applier = new StyleApplier();
+    const startTime = Date.now();
+    await applier.apply(sourceUrl, targetProject);
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+    console.log(chalk.gray("\u2500".repeat(50)));
+    console.log(`
+${chalk.green.bold("\u2705 Styles applied in " + duration + "s")}`);
+    console.log(chalk.gray("\nYour components now have the style of " + sourceUrl));
+    console.log(chalk.gray("Run your dev server to see the changes!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Style application failed"));
+    console.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("genome <url>").description("Reverse-engineer a website into a portable design system using Vision AI").option("-o, --output <dir>", "Output directory").option("--api-key <key>", "Anthropic API key (or set ANTHROPIC_API_KEY)").option("--model <model>", "Claude model to use", "claude-sonnet-4-6-20250514").option("--max-components <n>", "Max components to synthesize", "20").option("--skip-storybook", "Skip Storybook generation").option("--skip-screenshots", "Skip saving screenshots to output").option("--headless", "Run browser in headless mode", true).option("--no-headless", "Run browser in visible mode").option("--devtools [endpoint]", "Connect to existing Chrome via DevTools Protocol (default: http://localhost:9222)").option("--timeout <ms>", "Navigation timeout", "30000").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    try {
+      new URL(url);
+    } catch {
+      try {
+        url = new URL(`https://${url}`).toString();
+      } catch {
+        console.error(chalk.red(`Invalid URL: ${url}`));
+        process.exit(1);
+      }
+    }
+    const hostname = new URL(url).hostname.replace(/\./g, "-").replace(/^www-/, "");
+    const outputDir = options.output || `./${hostname}-genome`;
+    let cdpEndpoint;
+    if (options.devtools) {
+      cdpEndpoint = typeof options.devtools === "string" ? options.devtools : "http://localhost:9222";
+      spinner.start(chalk.blue(`Connecting to Chrome DevTools at ${chalk.cyan(cdpEndpoint)}...`));
+    } else {
+      spinner.start(chalk.blue(`Extracting design genome from ${chalk.cyan(url)}...`));
+    }
+    const engine = new GenomeEngine({ logger });
+    const startTime = Date.now();
+    const genome = await engine.genome({
+      url,
+      outputDir,
+      cdpEndpoint,
+      apiKey: options.apiKey,
+      model: options.model,
+      maxComponents: parseInt(options.maxComponents),
+      skipStorybook: options.skipStorybook,
+      skipScreenshots: options.skipScreenshots,
+      headless: options.headless,
+      timeout: parseInt(options.timeout),
+      verbose: options.verbose
+    });
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(1);
+    spinner.succeed(chalk.green(`Genome extracted in ${duration}s`));
+    console.log("\n" + chalk.bold("Genome Extracted:"));
+    console.log(chalk.gray("-".repeat(50)));
+    console.log(`  ${chalk.yellow("Source:")} ${chalk.cyan(genome.meta.sourceUrl)}`);
+    console.log(`  ${chalk.yellow("Components:")} ${genome.meta.componentCount}`);
+    console.log(`  ${chalk.yellow("Colors:")} ${Object.keys(genome.theme.colors).length}`);
+    console.log(`  ${chalk.yellow("Fonts:")} ${Object.keys(genome.theme.typography.families).length}`);
+    console.log(`  ${chalk.yellow("Sections:")} ${genome.layout.sectionOrder.join(" -> ")}`);
+    console.log("\n" + chalk.bold("Components:"));
+    genome.components.forEach((c) => {
+      console.log(`  ${chalk.green("*")} ${chalk.bold(c.name)} (${c.type}) - ${c.description}`);
+    });
+    console.log(chalk.gray("-".repeat(50)));
+    console.log(`
+${chalk.bold("Output:")} ${chalk.cyan(path3.resolve(outputDir))}`);
+    console.log("\n" + chalk.bold("Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} Browse components in ${chalk.cyan(outputDir + "/components/")}`);
+    if (!options.skipStorybook) {
+      console.log(`  ${chalk.cyan("2.")} Run Storybook: ${chalk.gray(`cd ${outputDir}/stories && npx storybook dev`)}`);
+    }
+    console.log(`  ${chalk.cyan("3.")} Regen a new page: ${chalk.gray(`extraktor regen ${outputDir} --prompt "Your page idea"`)}`);
+    console.log("\n" + chalk.green.bold("Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Genome extraction failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("regen <genome-dir>").description("Generate a new page using a previously extracted design genome").requiredOption("--prompt <text>", "Content/purpose description for the new page").option("-o, --output <dir>", "Output directory", "./regen-output").option("--api-key <key>", "Anthropic API key (or set ANTHROPIC_API_KEY)").option("--model <model>", "Claude model to use", "claude-sonnet-4-6-20250514").option("--sections <types>", "Specific sections to generate (comma-separated)").option("-v, --verbose", "Verbose output").action(async (genomeDir, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    spinner.start(chalk.blue("Regenerating page from genome..."));
+    const engine = new GenomeEngine({ logger });
+    const startTime = Date.now();
+    const outputDir = await engine.regen({
+      genomeDir,
+      prompt: options.prompt,
+      outputDir: options.output,
+      apiKey: options.apiKey,
+      model: options.model,
+      sections: options.sections?.split(",").map((s) => s.trim()),
+      verbose: options.verbose
+    });
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(1);
+    spinner.succeed(chalk.green(`Page regenerated in ${duration}s`));
+    console.log("\n" + chalk.bold("Page Generated:"));
+    console.log(chalk.gray("-".repeat(40)));
+    console.log(`  ${chalk.yellow("Output:")} ${chalk.cyan(path3.resolve(outputDir))}`);
+    console.log(`  ${chalk.yellow("Prompt:")} ${options.prompt}`);
+    console.log(chalk.gray("-".repeat(40)));
+    console.log("\n" + chalk.bold("Next Steps:"));
+    console.log(`  ${chalk.cyan("1.")} cd ${path3.relative(process.cwd(), outputDir)}`);
+    console.log(`  ${chalk.cyan("2.")} npm install`);
+    console.log(`  ${chalk.cyan("3.")} npm run dev`);
+    console.log("\n" + chalk.green.bold("Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("Regeneration failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("design-md <url>").description("Generate a DESIGN.md file (Stitch format) from any website").option("-o, --output <file>", "Output file path", "./DESIGN.md").option("--timeout <ms>", "Navigation timeout", "30000").option("--headless", "Run browser in headless mode", true).option("--no-headless", "Run browser in visible mode").option("--devtools [endpoint]", "Connect to existing Chrome via DevTools Protocol").option("-v, --verbose", "Verbose output").action(async (url, options) => {
+  const spinner = ora();
+  const logger = createLogger({
+    level: options.verbose ? "debug" : "info"
+  });
+  try {
+    try {
+      new URL(url);
+    } catch {
+      try {
+        url = new URL(`https://${url}`).toString();
+      } catch {
+        console.error(chalk.red(`Invalid URL: ${url}`));
+        process.exit(1);
+      }
+    }
+    spinner.start(chalk.blue(`Generating DESIGN.md from ${chalk.cyan(url)}...`));
+    const config = getDefaultConfig();
+    config.browser.headless = options.headless;
+    config.browser.timeout = parseInt(options.timeout);
+    config.output.formats = ["tailwind", "css-variables", "design-tokens"];
+    if (options.devtools) {
+      config.browser.cdpEndpoint = typeof options.devtools === "string" ? options.devtools : "http://localhost:9222";
+      config.browser.headless = false;
+    }
+    const orchestrator = new Orchestrator({ config, logger });
+    const startTime = Date.now();
+    const tmpDir = path3.join("/tmp", `extraktor-design-md-${Date.now()}`);
+    await fs3.ensureDir(tmpDir);
+    const result = await orchestrator.extract(url, tmpDir);
+    const { DesignMdGenerator } = await import("../design-md-generator-YMQOE2IW.js");
+    const generator = new DesignMdGenerator({ logger });
+    const outputPath = path3.resolve(options.output);
+    await generator.generate(result, outputPath, url);
+    await fs3.remove(tmpDir);
+    const duration = ((Date.now() - startTime) / 1e3).toFixed(1);
+    spinner.succeed(chalk.green(`DESIGN.md generated in ${duration}s`));
+    console.log("\n" + chalk.bold("DESIGN.md Generated:"));
+    console.log(chalk.gray("-".repeat(40)));
+    console.log(`  ${chalk.yellow("File:")} ${chalk.cyan(outputPath)}`);
+    console.log(`  ${chalk.yellow("Colors:")} ${result.colors.palette.length}`);
+    console.log(`  ${chalk.yellow("Fonts:")} ${result.typography.fontFamilies.length}`);
+    console.log(`  ${chalk.yellow("Animations:")} ${result.animations.keyframes.length}`);
+    console.log(chalk.gray("-".repeat(40)));
+    console.log(`
+Drop this file into any project and tell your AI agent:`);
+    console.log(chalk.cyan(`  "Build me a page that follows DESIGN.md"`));
+    console.log("\n" + chalk.green.bold("Done!"));
+  } catch (error) {
+    spinner.fail(chalk.red("DESIGN.md generation failed"));
+    logger.error(error instanceof Error ? error.message : String(error));
+    if (options.verbose && error instanceof Error) {
+      console.error(error.stack);
+    }
+    process.exit(1);
+  }
+});
+program.command("mcp", { hidden: true }).action(async () => {
+  const { startMcpServer } = await import("../server-DR7RCM5S.js");
+  await startMcpServer();
+});
+program.parse();