extraktor 1.0.0

package/dist/style-applier-BMHP6V57.js

@@ -0,0 +1,1032 @@
+// src/extractor/style-applier.ts
+import fs from "fs-extra";
+import path from "path";
+import { chromium } from "playwright";
+import { glob } from "glob";
+import https from "https";
+import http from "http";
+var StyleApplier = class {
+  browser = null;
+  page = null;
+  async apply(sourceUrl, targetProject) {
+    console.log(`
+\u{1F3A8} Extracting styles from ${sourceUrl}...`);
+    const styles = await this.extractStylesFromSource(sourceUrl);
+    console.log(`
+\u{1F4C1} Analyzing project at ${targetProject}...`);
+    const components = await this.findProjectComponents(targetProject);
+    console.log(`   Found ${components.length} components`);
+    await this.updateTailwindConfig(targetProject, styles);
+    await this.updateGlobalsCss(targetProject, styles);
+    await this.generateFramerVariants(targetProject, styles);
+    if (styles.assets.length > 0) {
+      await this.downloadAssets(targetProject, styles.assets);
+    }
+    for (const component of components) {
+      await this.applyStylesToComponent(component, styles);
+    }
+    console.log(`
+\u2705 Applied ${styles.sitePrefix} design system`);
+    console.log(`   \u2022 ${Object.keys(styles.colors).length} colors`);
+    console.log(`   \u2022 ${Object.keys(styles.gradients).length} gradients`);
+    console.log(`   \u2022 ${Object.keys(styles.shadows).length} shadows`);
+    console.log(`   \u2022 ${styles.assets.length} assets downloaded`);
+    console.log(`   \u2022 ${components.length} components styled`);
+  }
+  async extractStylesFromSource(url) {
+    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();
+    const parsedUrl = new URL(url);
+    const siteName = parsedUrl.hostname.replace(/^www\./, "").split(".")[0];
+    const sitePrefix = siteName.toLowerCase().replace(/[^a-z0-9]/g, "-");
+    await this.page.goto(url, { waitUntil: "networkidle", timeout: 6e4 });
+    await this.page.waitForTimeout(2e3);
+    await this.autoScroll();
+    const styles = await this.page.evaluate((prefix) => {
+      const result = {
+        siteName: document.title || prefix,
+        sitePrefix: prefix,
+        colors: {},
+        gradients: {},
+        fonts: [],
+        fontSizes: {},
+        fontWeights: {},
+        lineHeights: {},
+        letterSpacing: {},
+        spacing: {},
+        borderRadius: {},
+        shadows: {},
+        transitions: [],
+        assets: [],
+        componentStyles: {
+          buttons: [],
+          cards: [],
+          inputs: [],
+          headings: [],
+          links: [],
+          containers: [],
+          heroes: [],
+          navs: []
+        }
+      };
+      const colorSet = /* @__PURE__ */ new Set();
+      const gradientSet = /* @__PURE__ */ new Set();
+      const fontSet = /* @__PURE__ */ new Set();
+      const shadowSet = /* @__PURE__ */ new Set();
+      const transitionSet = /* @__PURE__ */ new Set();
+      const rgbToHex = (rgb) => {
+        const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (match) {
+          const r = parseInt(match[1]).toString(16).padStart(2, "0");
+          const g = parseInt(match[2]).toString(16).padStart(2, "0");
+          const b = parseInt(match[3]).toString(16).padStart(2, "0");
+          return `#${r}${g}${b}`.toUpperCase();
+        }
+        return rgb;
+      };
+      const elements = document.querySelectorAll("*");
+      elements.forEach((el) => {
+        const style = window.getComputedStyle(el);
+        const color = style.color;
+        const bgColor = style.backgroundColor;
+        if (color && color !== "rgba(0, 0, 0, 0)") {
+          colorSet.add(color.startsWith("rgb(") ? rgbToHex(color) : color);
+        }
+        if (bgColor && bgColor !== "rgba(0, 0, 0, 0)") {
+          if (bgColor.includes("gradient")) {
+            gradientSet.add(bgColor);
+          } else {
+            colorSet.add(bgColor.startsWith("rgb(") ? rgbToHex(bgColor) : bgColor);
+          }
+        }
+        const bgImage = style.backgroundImage;
+        if (bgImage && bgImage !== "none" && bgImage.includes("gradient")) {
+          const tagName = el.tagName.toLowerCase();
+          const className = el.className?.toString?.() || "";
+          let gradientName = "gradient";
+          if (className.includes("hero") || className.includes("Hero") || tagName === "main") {
+            gradientName = "bg";
+          } else if (className.includes("btn") || className.includes("button") || tagName === "button") {
+            gradientName = "button";
+          } else if (className.includes("card") || className.includes("Card")) {
+            gradientName = "card";
+          } else if (className.includes("nav") || className.includes("header") || tagName === "nav" || tagName === "header") {
+            gradientName = "nav";
+          } else if (className.includes("footer") || tagName === "footer") {
+            gradientName = "footer";
+          } else if (className.includes("cta") || className.includes("CTA")) {
+            gradientName = "cta";
+          }
+          if (!result.gradients[gradientName]) {
+            result.gradients[gradientName] = bgImage;
+          }
+        }
+        const fontFamily = style.fontFamily;
+        if (fontFamily) fontSet.add(fontFamily.split(",")[0].trim().replace(/"/g, ""));
+        const boxShadow = style.boxShadow;
+        if (boxShadow && boxShadow !== "none") shadowSet.add(boxShadow);
+        const transition = style.transition;
+        if (transition && transition !== "all 0s ease 0s") transitionSet.add(transition);
+      });
+      let colorIndex = 1;
+      colorSet.forEach((c) => {
+        if (c.startsWith("#")) {
+          result.colors[`color-${colorIndex++}`] = c;
+        }
+      });
+      let gradientIndex = 1;
+      gradientSet.forEach((g) => {
+        if (!Object.values(result.gradients).includes(g)) {
+          result.gradients[`accent-${gradientIndex++}`] = g;
+        }
+      });
+      result.fonts = Array.from(fontSet).slice(0, 5);
+      result.shadows = {};
+      const assetSet = /* @__PURE__ */ new Set();
+      const images = document.querySelectorAll('img[src*=".png"], img[src*=".webp"], img[src*="3d"], img[src*="icon"]');
+      images.forEach((img) => {
+        const src = img.src;
+        if (src && !src.includes("data:") && !assetSet.has(src)) {
+          const url2 = new URL(src, window.location.href);
+          const filename = url2.pathname.split("/").pop() || "asset.png";
+          const isIcon = filename.includes("icon") || img.classList.toString().includes("icon");
+          const is3d = filename.includes("3d") || src.includes("3d") || img.closest('[class*="3d"]');
+          result.assets.push({
+            url: url2.href,
+            type: is3d ? "3d" : isIcon ? "icon" : "image",
+            filename
+          });
+          assetSet.add(src);
+        }
+      });
+      const svgs = document.querySelectorAll('svg[class*="icon"], svg[id*="icon"]');
+      svgs.forEach((svg, i) => {
+        const svgContent = svg.outerHTML;
+        result.assets.push({
+          url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`,
+          type: "icon",
+          filename: `icon-${i + 1}.svg`
+        });
+      });
+      let shadowIndex = 1;
+      shadowSet.forEach((s) => {
+        result.shadows[`shadow-${shadowIndex++}`] = s;
+      });
+      result.transitions = Array.from(transitionSet).slice(0, 5);
+      const buttons = document.querySelectorAll('button, [role="button"], a[class*="button"], a[class*="btn"]');
+      buttons.forEach((btn, i) => {
+        if (i >= 5) return;
+        const style = window.getComputedStyle(btn);
+        result.componentStyles.buttons.push({
+          selector: "button",
+          className: `btn-style-${i + 1}`,
+          styles: {
+            backgroundColor: style.backgroundColor,
+            color: style.color,
+            padding: style.padding,
+            borderRadius: style.borderRadius,
+            fontWeight: style.fontWeight,
+            fontSize: style.fontSize,
+            border: style.border,
+            boxShadow: style.boxShadow,
+            transition: style.transition
+          }
+        });
+      });
+      const cards = document.querySelectorAll('[class*="card"], [class*="Card"], article, .rounded-xl, .rounded-2xl, .rounded-3xl');
+      cards.forEach((card, i) => {
+        if (i >= 5) return;
+        const style = window.getComputedStyle(card);
+        if (style.borderRadius !== "0px" && style.boxShadow !== "none") {
+          result.componentStyles.cards.push({
+            selector: ".card",
+            className: `card-style-${i + 1}`,
+            styles: {
+              backgroundColor: style.backgroundColor,
+              borderRadius: style.borderRadius,
+              boxShadow: style.boxShadow,
+              padding: style.padding,
+              border: style.border
+            }
+          });
+        }
+      });
+      const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+      const headingStyles = {};
+      headings.forEach((h) => {
+        const tag = h.tagName.toLowerCase();
+        if (!headingStyles[tag]) {
+          const style = window.getComputedStyle(h);
+          headingStyles[tag] = {
+            selector: tag,
+            className: `${tag}-style`,
+            styles: {
+              fontSize: style.fontSize,
+              fontWeight: style.fontWeight,
+              lineHeight: style.lineHeight,
+              letterSpacing: style.letterSpacing,
+              color: style.color,
+              fontFamily: style.fontFamily
+            }
+          };
+        }
+      });
+      result.componentStyles.headings = Object.values(headingStyles);
+      const inputs = document.querySelectorAll("input, textarea, select");
+      inputs.forEach((input, i) => {
+        if (i >= 3) return;
+        const style = window.getComputedStyle(input);
+        result.componentStyles.inputs.push({
+          selector: "input",
+          className: `input-style-${i + 1}`,
+          styles: {
+            backgroundColor: style.backgroundColor,
+            border: style.border,
+            borderRadius: style.borderRadius,
+            padding: style.padding,
+            fontSize: style.fontSize,
+            color: style.color,
+            outline: style.outline
+          }
+        });
+      });
+      const sections = document.querySelectorAll('section, [class*="hero"], [class*="Hero"], main > div:first-child');
+      sections.forEach((section, i) => {
+        if (i >= 3) return;
+        const style = window.getComputedStyle(section);
+        result.componentStyles.heroes.push({
+          selector: "section",
+          className: `hero-style-${i + 1}`,
+          styles: {
+            backgroundColor: style.backgroundColor,
+            backgroundImage: style.backgroundImage,
+            padding: style.padding,
+            minHeight: style.minHeight
+          }
+        });
+      });
+      const navs = document.querySelectorAll('nav, header, [class*="nav"], [class*="Nav"]');
+      navs.forEach((nav, i) => {
+        if (i >= 2) return;
+        const style = window.getComputedStyle(nav);
+        result.componentStyles.navs.push({
+          selector: "nav",
+          className: `nav-style-${i + 1}`,
+          styles: {
+            backgroundColor: style.backgroundColor,
+            padding: style.padding,
+            boxShadow: style.boxShadow,
+            backdropFilter: style.backdropFilter
+          }
+        });
+      });
+      const containers = document.querySelectorAll('[class*="container"], [class*="Container"], .max-w-');
+      containers.forEach((container, i) => {
+        if (i >= 3) return;
+        const style = window.getComputedStyle(container);
+        result.componentStyles.containers.push({
+          selector: ".container",
+          className: `container-style-${i + 1}`,
+          styles: {
+            maxWidth: style.maxWidth,
+            padding: style.padding,
+            margin: style.margin
+          }
+        });
+      });
+      const links = document.querySelectorAll('a:not([class*="button"]):not([class*="btn"])');
+      links.forEach((link, i) => {
+        if (i >= 3) return;
+        const style = window.getComputedStyle(link);
+        result.componentStyles.links.push({
+          selector: "a",
+          className: `link-style-${i + 1}`,
+          styles: {
+            color: style.color,
+            textDecoration: style.textDecoration,
+            fontWeight: style.fontWeight,
+            transition: style.transition
+          }
+        });
+      });
+      const fontSizes = ["12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "64px", "72px", "96px", "120px"];
+      fontSizes.forEach((size, i) => {
+        result.fontSizes[`text-${["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"][i]}`] = size;
+      });
+      [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128].forEach((px, i) => {
+        result.spacing[`${i + 1}`] = `${px}px`;
+      });
+      ["4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "50px", "9999px"].forEach((r, i) => {
+        result.borderRadius[["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"][i]] = r;
+      });
+      return result;
+    }, sitePrefix);
+    styles.siteName = siteName;
+    styles.sitePrefix = sitePrefix;
+    await this.browser.close();
+    return styles;
+  }
+  async autoScroll() {
+    if (!this.page) return;
+    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) {
+            clearInterval(timer);
+            window.scrollTo(0, 0);
+            resolve();
+          }
+        }, 100);
+      });
+    });
+  }
+  async findProjectComponents(projectPath) {
+    const components = [];
+    const files = await glob("**/*.{tsx,jsx}", {
+      cwd: projectPath,
+      ignore: ["node_modules/**", ".next/**", "dist/**", "build/**"]
+    });
+    for (const file of files) {
+      const filePath = path.join(projectPath, file);
+      const content = await fs.readFile(filePath, "utf-8");
+      const name = path.basename(file, path.extname(file));
+      const type = this.detectComponentType(name, content);
+      if (type !== "unknown") {
+        components.push({ filePath, name, type, content });
+      }
+    }
+    return components;
+  }
+  detectComponentType(name, content) {
+    const nameLower = name.toLowerCase();
+    if (nameLower.includes("button") || nameLower.includes("btn")) return "button";
+    if (nameLower.includes("card")) return "card";
+    if (nameLower.includes("input") || nameLower.includes("field") || nameLower.includes("text")) return "input";
+    if (nameLower.includes("heading") || nameLower.includes("title") || nameLower.includes("header") && !nameLower.includes("nav")) return "heading";
+    if (nameLower.includes("link")) return "link";
+    if (nameLower.includes("container") || nameLower.includes("wrapper") || nameLower.includes("layout")) return "container";
+    if (nameLower.includes("hero") || nameLower.includes("banner") || nameLower.includes("splash")) return "hero";
+    if (nameLower.includes("nav") || nameLower.includes("menu") || nameLower.includes("header")) return "nav";
+    if (content.includes("<button") || content.includes("onClick")) return "button";
+    if (content.includes("<input") || content.includes("<textarea")) return "input";
+    if (/<h[1-6]/.test(content)) return "heading";
+    return "unknown";
+  }
+  async updateTailwindConfig(projectPath, styles) {
+    const configPaths = [
+      "tailwind.config.js",
+      "tailwind.config.ts",
+      "tailwind.config.mjs"
+    ];
+    let configPath = null;
+    for (const cp of configPaths) {
+      const fullPath = path.join(projectPath, cp);
+      if (await fs.pathExists(fullPath)) {
+        configPath = fullPath;
+        break;
+      }
+    }
+    if (!configPath) {
+      configPath = path.join(projectPath, "tailwind.config.js");
+    }
+    const config = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+${Object.entries(styles.colors).map(([k, v]) => `        '${k}': '${v}',`).join("\n")}
+      },
+      fontFamily: {
+        'extracted': [${styles.fonts.length > 0 ? styles.fonts.map((f) => `'${f}'`).join(", ") : "'system-ui', 'sans-serif'"}],
+      },
+      boxShadow: {
+${Object.entries(styles.shadows).map(([k, v]) => `        '${k}': '${v}',`).join("\n")}
+      },
+      borderRadius: {
+${Object.entries(styles.borderRadius).map(([k, v]) => `        '${k}': '${v}',`).join("\n")}
+      },
+    },
+  },
+  plugins: [],
+};
+`;
+    await fs.writeFile(configPath, config);
+    console.log(`   \u2713 Updated ${path.basename(configPath)}`);
+  }
+  async updateGlobalsCss(projectPath, styles) {
+    const possiblePaths = [
+      "src/app/globals.css",
+      "src/styles/globals.css",
+      "styles/globals.css",
+      "app/globals.css",
+      "src/index.css"
+    ];
+    let globalsPath = null;
+    for (const gp of possiblePaths) {
+      const fullPath = path.join(projectPath, gp);
+      if (await fs.pathExists(fullPath)) {
+        globalsPath = fullPath;
+        break;
+      }
+    }
+    if (!globalsPath) {
+      globalsPath = path.join(projectPath, "src/app/globals.css");
+      await fs.ensureDir(path.dirname(globalsPath));
+    }
+    const prefix = styles.sitePrefix;
+    const cssContent = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ========================================
+   ${styles.siteName.toUpperCase()} DESIGN SYSTEM
+   Extracted via Extraktor
+======================================== */
+
+:root {
+  /* Colors */
+${Object.entries(styles.colors).map(([k, v]) => `  --${k}: ${v};`).join("\n")}
+
+  /* Gradients */
+${Object.entries(styles.gradients).map(([k, v]) => `  --gradient-${k}: ${v};`).join("\n")}
+
+  /* Shadows */
+${Object.entries(styles.shadows).map(([k, v]) => `  --${k}: ${v};`).join("\n")}
+
+  /* Border Radius */
+${Object.entries(styles.borderRadius).map(([k, v]) => `  --radius-${k}: ${v};`).join("\n")}
+}
+
+/* ========================================
+   BASE STYLES
+======================================== */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: ${styles.fonts[0] ? `'${styles.fonts[0]}', ` : ""}-apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  ${styles.gradients["bg"] ? `background: var(--gradient-bg);` : ""}
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  color: var(--color-3);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} NAVIGATION
+======================================== */
+.${prefix}-nav {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: var(--radius-3xl);
+  box-shadow: var(--shadow-sm);
+}
+
+.${prefix}-nav-link {
+  color: var(--color-7);
+  font-weight: 700;
+  font-size: 16px;
+  padding: 12px 20px;
+  border-radius: var(--radius-xl);
+  transition: all 0.2s ease;
+}
+
+.${prefix}-nav-link:hover {
+  color: var(--color-3);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} BUTTONS
+======================================== */
+.${prefix}-btn-primary {
+  ${styles.gradients["button"] ? `background: var(--gradient-button);` : `background: var(--color-5);`}
+  color: white;
+  font-weight: 800;
+  padding: 16px 32px;
+  border-radius: var(--radius-full);
+  font-size: 18px;
+  border: none;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.${prefix}-btn-primary:hover {
+  transform: scale(1.05);
+  box-shadow: var(--shadow-lg);
+}
+
+.${prefix}-btn-secondary {
+  background: var(--color-4);
+  color: var(--color-3);
+  font-weight: 700;
+  padding: 16px 32px;
+  border-radius: var(--radius-full);
+  font-size: 18px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.${prefix}-btn-secondary:hover {
+  transform: scale(1.05);
+  box-shadow: var(--shadow-md);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} CARDS
+======================================== */
+.${prefix}-card {
+  background: var(--color-4);
+  border-radius: var(--radius-4xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+.${prefix}-card-featured {
+  ${styles.gradients["card"] ? `background: var(--gradient-card);` : `background: var(--color-4);`}
+  border-radius: var(--radius-5xl);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+}
+
+.${prefix}-card-glass {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: var(--radius-3xl);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} TYPOGRAPHY
+======================================== */
+.${prefix}-h1 {
+  font-size: 120px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -2.4px;
+  color: var(--color-3);
+}
+
+.${prefix}-h2 {
+  font-size: 72px;
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: -1px;
+  color: var(--color-3);
+}
+
+.${prefix}-h3 {
+  font-size: 48px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -1px;
+  color: var(--color-3);
+}
+
+.${prefix}-h4 {
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.5px;
+  color: var(--color-3);
+}
+
+.${prefix}-text-gradient {
+  ${styles.gradients["button"] ? `background: var(--gradient-button);` : `background: linear-gradient(90deg, var(--color-5), var(--color-6));`}
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.${prefix}-text-muted {
+  color: var(--color-7);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} BADGES
+======================================== */
+.${prefix}-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-4);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 10px 20px;
+  border-radius: var(--radius-full);
+  font-weight: 700;
+  font-size: 14px;
+  box-shadow: var(--shadow-sm);
+}
+
+.${prefix}-badge-featured {
+  ${styles.gradients["button"] ? `background: var(--gradient-button);` : `background: var(--color-5);`}
+  color: white;
+  font-weight: 800;
+  padding: 8px 16px;
+  border-radius: var(--radius-lg);
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} STATS
+======================================== */
+.${prefix}-stat-card {
+  background: var(--color-4);
+  border-radius: var(--radius-4xl);
+  padding: 32px;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.${prefix}-stat-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 20px;
+  ${styles.gradients["button"] ? `background: var(--gradient-button);` : `background: var(--color-5);`}
+  border-radius: var(--radius-2xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-md);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} CTA
+======================================== */
+.${prefix}-cta {
+  ${styles.gradients["button"] ? `background: var(--gradient-button);` : `background: var(--color-5);`}
+  border-radius: var(--radius-5xl);
+  box-shadow: var(--shadow-lg);
+  position: relative;
+  overflow: hidden;
+}
+
+.${prefix}-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
+}
+
+/* ========================================
+   ${prefix.toUpperCase()} FOOTER
+======================================== */
+.${prefix}-footer {
+  ${styles.gradients["footer"] ? `background: var(--gradient-footer);` : `background: var(--color-9);`}
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* ========================================
+   RESPONSIVE
+======================================== */
+@media (max-width: 1024px) {
+  .${prefix}-h1 { font-size: 72px; }
+  .${prefix}-h2 { font-size: 48px; }
+  .${prefix}-h3 { font-size: 36px; }
+}
+
+@media (max-width: 768px) {
+  .${prefix}-h1 { font-size: 48px; letter-spacing: -1px; }
+  .${prefix}-h2 { font-size: 36px; }
+  .${prefix}-h3 { font-size: 28px; }
+}
+`;
+    await fs.writeFile(globalsPath, cssContent);
+    console.log(`   \u2713 Updated ${path.relative(projectPath, globalsPath)}`);
+  }
+  async generateFramerVariants(projectPath, styles) {
+    const variantsPath = path.join(projectPath, "src/lib/framer-variants.ts");
+    await fs.ensureDir(path.dirname(variantsPath));
+    const prefix = styles.sitePrefix;
+    const content = `// Framer Motion Variants
+// Extracted from ${styles.siteName} via Extraktor
+
+// 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 },
+  smooth: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
+};
+
+// 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
+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)' },
+};
+
+// Floating animation (for 3D elements)
+export const floatingVariants = {
+  animate: {
+    y: [0, -10, 0],
+    transition: {
+      duration: 3,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+// 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,
+  floatingVariants,
+};
+`;
+    await fs.writeFile(variantsPath, content);
+    console.log(`   \u2713 Generated ${path.relative(projectPath, variantsPath)}`);
+  }
+  async downloadAssets(projectPath, assets) {
+    const assetsDir = path.join(projectPath, "public/assets");
+    await fs.ensureDir(assetsDir);
+    let downloaded = 0;
+    for (const asset of assets.slice(0, 20)) {
+      try {
+        const outputPath = path.join(assetsDir, asset.filename);
+        if (asset.url.startsWith("data:")) {
+          const match = asset.url.match(/data:image\/svg\+xml,(.+)/);
+          if (match) {
+            const svgContent = decodeURIComponent(match[1]);
+            await fs.writeFile(outputPath, svgContent);
+            downloaded++;
+          }
+        } else {
+          await this.downloadFile(asset.url, outputPath);
+          downloaded++;
+        }
+      } catch (err) {
+      }
+    }
+    if (downloaded > 0) {
+      console.log(`   \u2713 Downloaded ${downloaded} assets to public/assets/`);
+    }
+  }
+  downloadFile(url, outputPath) {
+    return new Promise((resolve, reject) => {
+      const protocol = url.startsWith("https") ? https : http;
+      const file = fs.createWriteStream(outputPath);
+      protocol.get(url, (response) => {
+        if (response.statusCode === 301 || response.statusCode === 302) {
+          const redirectUrl = response.headers.location;
+          if (redirectUrl) {
+            file.close();
+            fs.unlinkSync(outputPath);
+            this.downloadFile(redirectUrl, outputPath).then(resolve).catch(reject);
+            return;
+          }
+        }
+        response.pipe(file);
+        file.on("finish", () => {
+          file.close();
+          resolve();
+        });
+      }).on("error", (err) => {
+        fs.unlink(outputPath, () => {
+        });
+        reject(err);
+      });
+    });
+  }
+  async applyStylesToComponent(component, styles) {
+    let content = component.content;
+    let modified = false;
+    const componentStyles = styles.componentStyles[`${component.type}s`] || [];
+    if (componentStyles.length === 0) return;
+    const primaryStyle = componentStyles[0];
+    if (!primaryStyle) return;
+    const styleClass = primaryStyle.className;
+    const classNamePatterns = [
+      // className="..."
+      /(className\s*=\s*["'])([^"']*)(["'])/g,
+      // className={`...`}
+      /(className\s*=\s*\{`?)([^`}]*)(`?\})/g,
+      // className={cn("...")}
+      /(className\s*=\s*\{cn\(["'])([^"']*)(["']\)\})/g
+    ];
+    for (const pattern of classNamePatterns) {
+      if (pattern.test(content)) {
+        content = content.replace(pattern, (match, prefix, classes, suffix) => {
+          if (classes.includes(styleClass)) {
+            return match;
+          }
+          modified = true;
+          return `${prefix}${styleClass} ${classes}${suffix}`;
+        });
+        break;
+      }
+    }
+    if (!modified) {
+      const returnMatch = content.match(/return\s*\(\s*<(\w+)/);
+      if (returnMatch) {
+        const element = returnMatch[1];
+        const elementPattern = new RegExp(`(<${element})(\\s|>)`, "g");
+        if (content.match(new RegExp(`<${element}[^>]*className`))) {
+          content = content.replace(
+            new RegExp(`(<${element}[^>]*className\\s*=\\s*["'])([^"']*)(["'])`),
+            `$1${styleClass} $2$3`
+          );
+          modified = true;
+        } else {
+          content = content.replace(elementPattern, `$1 className="${styleClass}"$2`);
+          modified = true;
+        }
+      }
+    }
+    if (component.type === "button" && primaryStyle.styles.backgroundColor?.includes("gradient")) {
+      content = content.replace(
+        /(style\s*=\s*\{\{?)([^}]*)(}?\})/g,
+        `$1$2, background: 'var(--gradient-1)'$3`
+      );
+      if (!content.includes("style=")) {
+        const returnMatch = content.match(/return\s*\(\s*<(\w+)([^>]*)(>)/);
+        if (returnMatch) {
+          content = content.replace(
+            returnMatch[0],
+            `return (<${returnMatch[1]}${returnMatch[2]} style={{ background: 'var(--gradient-1)' }}${returnMatch[3]}`
+          );
+        }
+      }
+      modified = true;
+    }
+    if (modified) {
+      await fs.writeFile(component.filePath, content);
+      console.log(`   \u2713 Styled ${component.name} (${component.type})`);
+    }
+  }
+};
+export {
+  StyleApplier
+};