extraktor 1.0.0

package/dist/chunk-VLLFGYUN.js

@@ -0,0 +1,2773 @@
+import {
+  Orchestrator,
+  getDefaultConfig
+} from "./chunk-PHMSK7VD.js";
+import {
+  createLogger
+} from "./chunk-5IH5TLAQ.js";
+
+// src/cloner/site-cloner.ts
+import fs from "fs-extra";
+import path from "path";
+import crypto from "crypto";
+
+// src/cloner/content-extractor.ts
+var ContentExtractor = class {
+  /**
+   * Extract all editable content from a page
+   */
+  async extract(page, sourceUrl) {
+    const extracted = await page.evaluate(() => {
+      const items = [];
+      const images = [];
+      const links = [];
+      let itemIndex = 0;
+      function getSelector(el) {
+        if (el.id) return `#${el.id}`;
+        const classes = Array.from(el.classList).filter((c) => c.startsWith("framer-") || c.length < 20).slice(0, 2).join(".");
+        if (classes) {
+          const selector = `${el.tagName.toLowerCase()}.${classes}`;
+          if (document.querySelectorAll(selector).length === 1) {
+            return selector;
+          }
+        }
+        const parent = el.parentElement;
+        if (parent) {
+          const index = Array.from(parent.children).indexOf(el) + 1;
+          const parentSelector = getSelector(parent);
+          return `${parentSelector} > ${el.tagName.toLowerCase()}:nth-child(${index})`;
+        }
+        return el.tagName.toLowerCase();
+      }
+      function generateId(type, text) {
+        const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 30).replace(/-+$/, "");
+        return `${type}-${itemIndex++}-${slug || "item"}`;
+      }
+      document.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((el) => {
+        const text = el.textContent?.trim();
+        if (text && text.length > 1) {
+          items.push({
+            id: generateId("heading", text),
+            type: "text",
+            selector: getSelector(el),
+            value: text,
+            tag: el.tagName.toLowerCase()
+          });
+        }
+      });
+      document.querySelectorAll("p").forEach((el) => {
+        const text = el.textContent?.trim();
+        if (text && text.length > 10) {
+          items.push({
+            id: generateId("text", text),
+            type: "text",
+            selector: getSelector(el),
+            value: text,
+            tag: "p"
+          });
+        }
+      });
+      document.querySelectorAll('button, [role="button"], a[class*="button"], a[class*="btn"]').forEach((el) => {
+        const text = el.textContent?.trim();
+        if (text && text.length > 1 && text.length < 50) {
+          items.push({
+            id: generateId("button", text),
+            type: "button",
+            selector: getSelector(el),
+            value: text,
+            href: el.href || void 0
+          });
+        }
+      });
+      document.querySelectorAll("img").forEach((el) => {
+        const img = el;
+        if (img.src && !img.src.startsWith("data:") && img.width > 50) {
+          images.push({
+            id: generateId("image", img.alt || "img"),
+            type: "image",
+            selector: getSelector(el),
+            value: img.src,
+            alt: img.alt || ""
+          });
+        }
+      });
+      document.querySelectorAll("a[href]").forEach((el) => {
+        const link = el;
+        const text = link.textContent?.trim();
+        if (text && text.length > 1 && link.href && !link.href.startsWith("javascript:")) {
+          links.push({
+            id: generateId("link", text),
+            type: "link",
+            selector: getSelector(el),
+            value: text,
+            href: link.href
+          });
+        }
+      });
+      return { items, images, links };
+    });
+    const sections = this.organizeSections(extracted.items);
+    return {
+      meta: {
+        sourceUrl,
+        extractedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        version: "1.0.0"
+      },
+      sections,
+      images: extracted.images,
+      links: extracted.links
+    };
+  }
+  /**
+   * Organize items into logical sections
+   */
+  organizeSections(items) {
+    const sections = {};
+    let currentSection = "hero";
+    let sectionIndex = 0;
+    items.forEach((item) => {
+      if (item.tag === "h1" || item.tag === "h2") {
+        const sectionName = item.value.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 30) || `section-${sectionIndex}`;
+        currentSection = sectionName;
+        sectionIndex++;
+      }
+      if (!sections[currentSection]) {
+        sections[currentSection] = {
+          name: currentSection.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+          items: []
+        };
+      }
+      sections[currentSection].items.push(item);
+    });
+    return sections;
+  }
+  /**
+   * Generate a content loader script that applies content.json to the page
+   */
+  generateLoaderScript() {
+    return `/**
+ * Content Loader - Applies content.json to the page
+ * Edit content.json to change text and images
+ */
+
+(function() {
+  'use strict';
+
+  async function loadContent() {
+    try {
+      const response = await fetch('/content.json');
+      const content = await response.json();
+      applyContent(content);
+    } catch (e) {
+      console.log('No content.json found, using default content');
+    }
+  }
+
+  function applyContent(content) {
+    // Apply text content from sections
+    Object.values(content.sections || {}).forEach(section => {
+      (section.items || []).forEach(item => {
+        if (item.type === 'text' || item.type === 'button') {
+          const el = document.querySelector(item.selector);
+          if (el) {
+            el.textContent = item.value;
+          }
+        }
+      });
+    });
+
+    // Apply images
+    (content.images || []).forEach(item => {
+      const el = document.querySelector(item.selector);
+      if (el && el.tagName === 'IMG') {
+        el.src = item.value;
+        if (item.alt) el.alt = item.alt;
+      }
+    });
+
+    // Apply links
+    (content.links || []).forEach(item => {
+      const el = document.querySelector(item.selector);
+      if (el) {
+        if (item.value) el.textContent = item.value;
+        if (item.href) el.href = item.href;
+      }
+    });
+
+    console.log('Content loaded from content.json');
+  }
+
+  // Load on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadContent);
+  } else {
+    loadContent();
+  }
+})();
+`;
+  }
+};
+
+// src/cloner/site-cloner.ts
+var SiteCloner = class {
+  assetMap = /* @__PURE__ */ new Map();
+  baseUrl = "";
+  contentExtractor = new ContentExtractor();
+  async clone(page, options) {
+    this.baseUrl = new URL(options.url).origin;
+    const projectDir = path.join(options.outputDir, options.projectName);
+    const platform = await this.detectPlatform(page);
+    console.log(`Detected platform: ${platform}`);
+    const animations = await this.detectAnimations(page);
+    console.log(`Detected animations:`, animations);
+    await this.createProjectStructure(projectDir);
+    const extracted = await this.extractPage(page);
+    if (options.downloadAssets) {
+      await this.downloadAssets(extracted.assets, projectDir);
+    }
+    await this.downloadStylesheets(extracted.stylesheetUrls, projectDir);
+    const processedHtml = this.processHtml(extracted.html);
+    let contentExtracted = false;
+    if (options.extractContent) {
+      const contentJson = await this.contentExtractor.extract(page, options.url);
+      await fs.writeJson(path.join(projectDir, "public/content.json"), contentJson, { spaces: 2 });
+      const loaderScript = this.contentExtractor.generateLoaderScript();
+      await fs.writeFile(path.join(projectDir, "public/content-loader.js"), loaderScript);
+      contentExtracted = true;
+      console.log("Content extracted to content.json");
+    }
+    await this.generateNextjsProject(projectDir, processedHtml, extracted.styles, extracted.keyframes, options, contentExtracted);
+    await this.generateAnimationScript(projectDir, platform, animations);
+    let pagesCloned = 1;
+    if (options.crawlPages) {
+      const discoveredPages = await this.discoverPages(page);
+      console.log(`Discovered ${discoveredPages.length} additional pages to clone`);
+      for (const pagePath of discoveredPages) {
+        try {
+          const pageUrl = `${this.baseUrl}${pagePath}`;
+          console.log(`Cloning page: ${pageUrl}`);
+          await page.goto(pageUrl, { waitUntil: "networkidle" });
+          await page.waitForTimeout(1e3);
+          const pageExtracted = await this.extractPage(page);
+          if (options.downloadAssets) {
+            await this.downloadAssets(pageExtracted.assets, projectDir);
+          }
+          const pageHtml = this.processHtml(pageExtracted.html);
+          const safeFilename = pagePath.replace(/^\//, "").replace(/\//g, "-") || "page";
+          await fs.writeFile(
+            path.join(projectDir, `public/${safeFilename}.html`),
+            pageHtml
+          );
+          if (options.extractContent) {
+            const pageContent = await this.contentExtractor.extract(page, pageUrl);
+            await fs.writeJson(
+              path.join(projectDir, `public/content-${safeFilename}.json`),
+              pageContent,
+              { spaces: 2 }
+            );
+          }
+          pagesCloned++;
+        } catch (err) {
+          console.log(`Failed to clone page ${pagePath}: ${err}`);
+        }
+      }
+    }
+    return {
+      projectDir,
+      assets: {
+        images: extracted.assets.images.length,
+        fonts: extracted.assets.fonts.length,
+        svgs: extracted.assets.svgs.length,
+        videos: extracted.assets.videos.length
+      },
+      components: 1,
+      platform,
+      contentExtracted,
+      pagesCloned
+    };
+  }
+  /**
+   * Detect the platform the site is built on
+   */
+  async detectPlatform(page) {
+    return page.evaluate(() => {
+      const html = document.documentElement.outerHTML.toLowerCase();
+      const scripts = Array.from(document.scripts).map((s) => s.src).join(" ").toLowerCase();
+      if (document.querySelector("[data-framer-component-type]") || html.includes("framer.com") || html.includes("framerusercontent.com") || document.querySelector('[class*="framer-"]')) {
+        return "framer";
+      }
+      if (html.includes("webflow.com") || document.querySelector("[data-wf-site]") || document.querySelector(".w-webflow-badge")) {
+        return "webflow";
+      }
+      if (html.includes("wp-content") || html.includes("wp-includes") || document.querySelector('[class*="wp-"]')) {
+        return "wordpress";
+      }
+      if (html.includes("shopify.com") || html.includes("cdn.shopify.com") || document.querySelector("[data-shopify]")) {
+        return "shopify";
+      }
+      if (html.includes("squarespace.com") || scripts.includes("squarespace")) {
+        return "squarespace";
+      }
+      if (html.includes("wix.com") || scripts.includes("wix")) {
+        return "wix";
+      }
+      return "custom";
+    });
+  }
+  /**
+   * Detect animation libraries used on the page
+   */
+  async detectAnimations(page) {
+    return page.evaluate(() => {
+      const scripts = Array.from(document.scripts).map((s) => s.src + " " + (s.textContent || "")).join(" ").toLowerCase();
+      const html = document.documentElement.outerHTML.toLowerCase();
+      return {
+        framer: !!document.querySelector("[data-framer-appear-id]") || html.includes("framer-motion"),
+        gsap: scripts.includes("gsap") || scripts.includes("greensock") || typeof window.gsap !== "undefined",
+        lottie: scripts.includes("lottie") || !!document.querySelector("lottie-player") || !!document.querySelector("[data-animation-path]"),
+        scrollTrigger: scripts.includes("scrolltrigger") || !!document.querySelector("[data-scroll]"),
+        aos: scripts.includes("aos.js") || !!document.querySelector("[data-aos]")
+      };
+    });
+  }
+  /**
+   * Discover all internal pages for multi-page crawling
+   */
+  async discoverPages(page) {
+    const baseUrl = this.baseUrl;
+    return page.evaluate((base) => {
+      const links = Array.from(document.querySelectorAll("a[href]"));
+      const pages = [];
+      links.forEach((link) => {
+        const href = link.href;
+        try {
+          const url = new URL(href);
+          if (url.origin === base && !url.hash && !href.includes("mailto:") && !href.includes("tel:") && !pages.includes(url.pathname)) {
+            pages.push(url.pathname);
+          }
+        } catch {
+        }
+      });
+      return pages.filter((p) => p !== "/" && p !== "");
+    }, baseUrl);
+  }
+  async createProjectStructure(projectDir) {
+    await fs.ensureDir(path.join(projectDir, "src/app"));
+    await fs.ensureDir(path.join(projectDir, "src/styles"));
+    await fs.ensureDir(path.join(projectDir, "public/images"));
+    await fs.ensureDir(path.join(projectDir, "public/fonts"));
+    await fs.ensureDir(path.join(projectDir, "public/videos"));
+  }
+  async extractPage(page) {
+    return page.evaluate(() => {
+      const images = [];
+      const fonts = [];
+      const svgs = [];
+      const videos = [];
+      const stylesheetUrls = [];
+      let keyframes = "";
+      let inlineStyles = "";
+      document.querySelectorAll("img").forEach((img) => {
+        if (img.src && !img.src.startsWith("data:")) {
+          images.push(img.src);
+        }
+      });
+      document.querySelectorAll("video").forEach((video) => {
+        if (video.src && !video.src.startsWith("data:")) {
+          videos.push(video.src);
+        }
+        video.querySelectorAll("source").forEach((source) => {
+          if (source.src && !source.src.startsWith("data:")) {
+            videos.push(source.src);
+          }
+        });
+      });
+      document.querySelectorAll("*").forEach((el) => {
+        const style = getComputedStyle(el);
+        const bg = style.backgroundImage;
+        if (bg && bg !== "none") {
+          const matches = bg.matchAll(/url\(["']?([^"')]+)["']?\)/g);
+          for (const match of matches) {
+            if (match[1] && !match[1].startsWith("data:")) {
+              images.push(match[1]);
+            }
+          }
+        }
+      });
+      for (const sheet of document.styleSheets) {
+        try {
+          if (sheet.href) {
+            stylesheetUrls.push(sheet.href);
+          }
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSKeyframesRule) {
+              keyframes += rule.cssText + "\n";
+            }
+            if (rule instanceof CSSFontFaceRule) {
+              const src = rule.style.getPropertyValue("src");
+              const matches = src.matchAll(/url\(["']?([^"')]+)["']?\)/g);
+              for (const match of matches) {
+                if (match[1] && !match[1].startsWith("data:")) {
+                  fonts.push(match[1]);
+                }
+              }
+            }
+          }
+        } catch (e) {
+          if (sheet.href) {
+            stylesheetUrls.push(sheet.href);
+          }
+        }
+      }
+      document.querySelectorAll("style").forEach((style) => {
+        inlineStyles += style.textContent + "\n";
+      });
+      const html = document.documentElement.outerHTML;
+      return {
+        html,
+        styles: inlineStyles,
+        keyframes,
+        stylesheetUrls: [...new Set(stylesheetUrls)],
+        assets: {
+          images: [...new Set(images)],
+          fonts: [...new Set(fonts)],
+          svgs: [],
+          videos: [...new Set(videos)]
+        }
+      };
+    });
+  }
+  async downloadStylesheets(urls, projectDir) {
+    let allCss = "";
+    for (const url of urls) {
+      try {
+        const fullUrl = url.startsWith("http") ? url : `${this.baseUrl}${url}`;
+        const response = await fetch(fullUrl);
+        if (response.ok) {
+          let css = await response.text();
+          css = css.replace(/url\(["']?([^"')]+)["']?\)/g, (match, assetUrl) => {
+            if (assetUrl.startsWith("data:")) return match;
+            let absoluteUrl = assetUrl;
+            if (!assetUrl.startsWith("http")) {
+              try {
+                absoluteUrl = new URL(assetUrl, fullUrl).href;
+              } catch {
+                return match;
+              }
+            }
+            const localPath = this.assetMap.get(absoluteUrl);
+            if (localPath) {
+              return `url("${localPath}")`;
+            }
+            return match;
+          });
+          allCss += `/* From: ${url} */
+${css}
+
+`;
+        }
+      } catch (e) {
+        console.log(`Failed to download stylesheet: ${url}`);
+      }
+    }
+    if (allCss) {
+      await fs.writeFile(path.join(projectDir, "src/styles/external.css"), allCss);
+    }
+  }
+  async downloadAssets(assets, projectDir) {
+    for (const url of assets.images) {
+      try {
+        const fullUrl = url.startsWith("http") ? url : `${this.baseUrl}${url}`;
+        const response = await fetch(fullUrl);
+        if (response.ok) {
+          const buffer = Buffer.from(await response.arrayBuffer());
+          const ext = this.getExtension(url) || "png";
+          const hash = crypto.createHash("md5").update(url).digest("hex").slice(0, 8);
+          const filename = `img-${hash}.${ext}`;
+          const localPath = path.join(projectDir, "public/images", filename);
+          await fs.writeFile(localPath, buffer);
+          this.assetMap.set(url, `/images/${filename}`);
+          this.assetMap.set(fullUrl, `/images/${filename}`);
+        }
+      } catch (e) {
+      }
+    }
+    for (const url of assets.fonts) {
+      try {
+        const fullUrl = url.startsWith("http") ? url : `${this.baseUrl}${url}`;
+        const response = await fetch(fullUrl);
+        if (response.ok) {
+          const buffer = Buffer.from(await response.arrayBuffer());
+          const ext = this.getExtension(url) || "woff2";
+          const hash = crypto.createHash("md5").update(url).digest("hex").slice(0, 8);
+          const filename = `font-${hash}.${ext}`;
+          const localPath = path.join(projectDir, "public/fonts", filename);
+          await fs.writeFile(localPath, buffer);
+          this.assetMap.set(url, `/fonts/${filename}`);
+          this.assetMap.set(fullUrl, `/fonts/${filename}`);
+        }
+      } catch (e) {
+      }
+    }
+    for (const url of assets.videos) {
+      try {
+        const fullUrl = url.startsWith("http") ? url : `${this.baseUrl}${url}`;
+        const response = await fetch(fullUrl);
+        if (response.ok) {
+          const buffer = Buffer.from(await response.arrayBuffer());
+          const ext = this.getExtension(url) || "mp4";
+          const hash = crypto.createHash("md5").update(url).digest("hex").slice(0, 8);
+          const filename = `video-${hash}.${ext}`;
+          const localPath = path.join(projectDir, "public/videos", filename);
+          await fs.writeFile(localPath, buffer);
+          this.assetMap.set(url, `/videos/${filename}`);
+          this.assetMap.set(fullUrl, `/videos/${filename}`);
+        }
+      } catch (e) {
+      }
+    }
+  }
+  processHtml(html) {
+    let processed = html.replace(/<!--[\s\S]*?-->/g, "").replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<noscript\b[^>]*>[\s\S]*?<\/noscript>/gi, "").replace(/<link\b(?![^>]*rel=["']stylesheet["'])[^>]*\/?>/gi, "").replace(/<meta\b[^>]*\/?>/gi, "").replace(/<iframe\b[^>]*>[\s\S]*?<\/iframe>/gi, "").replace(/data-style="/g, 'style="').replace(/src="([^"]*)"/g, (match, url) => {
+      if (url.startsWith("data:")) return match;
+      const localPath = this.assetMap.get(url);
+      return localPath ? `src="${localPath}"` : match;
+    }).replace(/srcset="([^"]*)"/g, (match, srcset) => {
+      const newSrcset = srcset.split(",").map((src) => {
+        const parts = src.trim().split(/\s+/);
+        const url = parts[0];
+        if (url.startsWith("data:")) return src;
+        const localPath = this.assetMap.get(url);
+        if (localPath) parts[0] = localPath;
+        return parts.join(" ");
+      }).join(", ");
+      return `srcset="${newSrcset}"`;
+    }).replace(/url\(["']?([^"')]+)["']?\)/g, (match, url) => {
+      if (url.startsWith("data:")) return match;
+      const localPath = this.assetMap.get(url);
+      return localPath ? `url("${localPath}")` : match;
+    }).replace(/\n\s*\n\s*\n/g, "\n\n").trim();
+    processed = processed.replace("</body>", '<script src="/animations.js"></script></body>');
+    return processed;
+  }
+  getExtension(url) {
+    const match = url.match(/\.([a-z0-9]+)(?:\?|$)/i);
+    return match ? match[1] : null;
+  }
+  /**
+   * Generate animation/interaction script for the cloned site
+   */
+  async generateAnimationScript(projectDir, platform, animations) {
+    const initCalls = [
+      "initAppearAnimations();",
+      "initKeyboardNavigation();",
+      "initHoverEffects();",
+      "initSmoothScroll();",
+      "initVideoCarousel();",
+      "initTabSwitching();",
+      "initFaqAccordion();"
+    ];
+    if (animations.aos || platform === "webflow" || platform === "squarespace") {
+      initCalls.push("initAOSAnimations();");
+    }
+    if (animations.scrollTrigger || platform === "webflow") {
+      initCalls.push("initScrollParallax();");
+    }
+    if (platform === "framer") {
+      initCalls.push("initFramerSpecific();");
+    } else if (platform === "webflow") {
+      initCalls.push("initWebflowSpecific();");
+    }
+    const script = `/**
+ * Extraktor Animation & Interaction Script
+ * Auto-generated for platform: ${platform}
+ * Detected: ${Object.entries(animations).filter(([_, v]) => v).map(([k]) => k).join(", ") || "native"}
+ */
+
+(function() {
+  'use strict';
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  function init() {
+    ${initCalls.join("\n    ")}
+  }
+
+  // AOS-style scroll animations (works for all platforms)
+  function initAOSAnimations() {
+    const aosElements = document.querySelectorAll('[data-aos], [data-scroll], [class*="animate-"]');
+
+    aosElements.forEach(el => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(30px)';
+      el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.15 });
+
+    aosElements.forEach(el => observer.observe(el));
+  }
+
+  // Scroll-triggered parallax effects
+  function initScrollParallax() {
+    const parallaxElements = document.querySelectorAll('[data-parallax], [class*="parallax"]');
+
+    window.addEventListener('scroll', () => {
+      const scrollY = window.scrollY;
+
+      parallaxElements.forEach(el => {
+        const speed = parseFloat(el.dataset?.parallax || '0.5');
+        const yPos = -(scrollY * speed);
+        el.style.transform = \`translateY(\${yPos}px)\`;
+      });
+    }, { passive: true });
+  }
+
+  // Framer-specific optimizations
+  function initFramerSpecific() {
+    // Fix Framer's data-framer-generated-page-id scroll behavior
+    const framerPages = document.querySelectorAll('[data-framer-generated-page-id]');
+    framerPages.forEach(page => {
+      page.style.overflowX = 'hidden';
+    });
+
+    // Enable smooth transitions on framer variants
+    const variants = document.querySelectorAll('[data-framer-component-variants]');
+    variants.forEach(v => {
+      v.style.transition = 'all 0.3s ease';
+    });
+  }
+
+  // Webflow-specific optimizations
+  function initWebflowSpecific() {
+    // Fix Webflow IX2 interactions
+    const ixElements = document.querySelectorAll('[data-w-id]');
+    ixElements.forEach(el => {
+      el.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
+    });
+
+    // Handle Webflow slider
+    const sliders = document.querySelectorAll('.w-slider');
+    sliders.forEach(slider => {
+      slider.style.overflow = 'hidden';
+    });
+  }
+
+  // Entrance animations using Intersection Observer
+  function initAppearAnimations() {
+    const appearElements = document.querySelectorAll('[data-framer-appear-id]');
+    if (!appearElements.length) return;
+
+    appearElements.forEach(el => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(20px)';
+      el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateY(0)';
+          }, index * 100);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+
+    appearElements.forEach(el => observer.observe(el));
+  }
+
+  // Video carousel - play on hover, drag to scroll
+  function initVideoCarousel() {
+    const videos = document.querySelectorAll('video');
+
+    videos.forEach(video => {
+      video.preload = 'auto';
+
+      const container = video.closest('li') || video.closest('[class*="framer-"]');
+      if (container) {
+        container.addEventListener('mouseenter', () => {
+          video.play().catch(() => {});
+        });
+
+        container.addEventListener('mouseleave', () => {
+          video.pause();
+          video.currentTime = 0;
+        });
+      }
+
+      const videoObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            video.play().catch(() => {});
+          } else {
+            video.pause();
+          }
+        });
+      }, { threshold: 0.5 });
+
+      videoObserver.observe(video);
+    });
+
+    // Make carousels draggable
+    const carousels = document.querySelectorAll('ul[style*="translateX"]');
+    carousels.forEach(carousel => {
+      let isDown = false;
+      let startX;
+      let scrollLeft;
+      const parent = carousel.parentElement;
+
+      if (!parent) return;
+
+      parent.style.cursor = 'grab';
+      parent.style.overflow = 'auto';
+      parent.style.scrollBehavior = 'smooth';
+
+      parent.addEventListener('mousedown', (e) => {
+        isDown = true;
+        parent.style.cursor = 'grabbing';
+        startX = e.pageX - parent.offsetLeft;
+        scrollLeft = parent.scrollLeft;
+      });
+
+      parent.addEventListener('mouseleave', () => {
+        isDown = false;
+        parent.style.cursor = 'grab';
+      });
+
+      parent.addEventListener('mouseup', () => {
+        isDown = false;
+        parent.style.cursor = 'grab';
+      });
+
+      parent.addEventListener('mousemove', (e) => {
+        if (!isDown) return;
+        e.preventDefault();
+        const x = e.pageX - parent.offsetLeft;
+        const walk = (x - startX) * 2;
+        parent.scrollLeft = scrollLeft - walk;
+      });
+    });
+  }
+
+  // Tab switching for interactive tabs
+  function initTabSwitching() {
+    const tabs = document.querySelectorAll('[name][tabindex="0"][data-highlight="true"]');
+
+    tabs.forEach(tab => {
+      tab.style.cursor = 'pointer';
+
+      tab.addEventListener('click', () => {
+        tabs.forEach(t => {
+          t.style.backgroundColor = 'rgba(255, 255, 255, 0.64)';
+          t.style.boxShadow = 'none';
+          t.style.borderWidth = '0px';
+        });
+
+        tab.style.backgroundColor = 'rgb(255, 255, 255)';
+        tab.style.boxShadow = 'rgba(0, 0, 0, 0.23) 0px 0.722625px 1.30072px -1.25px, rgba(0, 0, 0, 0.204) 0px 2.74624px 4.94323px -2.5px, rgba(0, 0, 0, 0.08) 0px 12px 21.6px -3.75px';
+        tab.style.borderWidth = '2px';
+      });
+
+      tab.addEventListener('mouseenter', () => {
+        if (!tab.style.borderWidth || tab.style.borderWidth === '0px') {
+          tab.style.backgroundColor = 'rgba(255, 255, 255, 0.85)';
+        }
+      });
+
+      tab.addEventListener('mouseleave', () => {
+        if (!tab.style.borderWidth || tab.style.borderWidth === '0px') {
+          tab.style.backgroundColor = 'rgba(255, 255, 255, 0.64)';
+        }
+      });
+    });
+  }
+
+  // FAQ Accordion functionality
+  function initFaqAccordion() {
+    const faqItems = document.querySelectorAll('[data-framer-name*="Rainbow"], [data-framer-name*="safe"], [data-framer-name*="Support"], [data-framer-name*="FAQ"]');
+
+    faqItems.forEach(item => {
+      const container = item.closest('[class*="container"]');
+      if (!container) return;
+
+      container.style.cursor = 'pointer';
+
+      container.addEventListener('click', () => {
+        const content = container.querySelector('[style*="height: 0"]') ||
+                       container.querySelector('[style*="max-height"]');
+        if (content) {
+          const isExpanded = content.style.height !== '0px';
+          content.style.height = isExpanded ? '0px' : 'auto';
+          content.style.overflow = isExpanded ? 'hidden' : 'visible';
+        }
+      });
+    });
+  }
+
+  // Keyboard navigation between sections
+  function initKeyboardNavigation() {
+    const sections = Array.from(document.querySelectorAll('[class*="framer-"][class*=" framer-v-"]'));
+    let currentSection = 0;
+
+    const mainSections = sections.filter(s => {
+      const rect = s.getBoundingClientRect();
+      return rect.height > 200;
+    });
+
+    if (mainSections.length === 0) return;
+
+    document.addEventListener('keydown', (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+      switch(e.key) {
+        case 'ArrowDown':
+        case 'j':
+          e.preventDefault();
+          currentSection = Math.min(currentSection + 1, mainSections.length - 1);
+          scrollToSection(mainSections[currentSection]);
+          break;
+        case 'ArrowUp':
+        case 'k':
+          e.preventDefault();
+          currentSection = Math.max(currentSection - 1, 0);
+          scrollToSection(mainSections[currentSection]);
+          break;
+        case 'Home':
+          e.preventDefault();
+          currentSection = 0;
+          scrollToSection(mainSections[currentSection]);
+          break;
+        case 'End':
+          e.preventDefault();
+          currentSection = mainSections.length - 1;
+          scrollToSection(mainSections[currentSection]);
+          break;
+        default:
+          if (e.key >= '1' && e.key <= '9') {
+            const index = parseInt(e.key) - 1;
+            if (index < mainSections.length) {
+              e.preventDefault();
+              currentSection = index;
+              scrollToSection(mainSections[currentSection]);
+            }
+          }
+      }
+    });
+
+    document.addEventListener('scroll', () => {
+      const scrollPos = window.scrollY + window.innerHeight / 2;
+      mainSections.forEach((section, index) => {
+        const rect = section.getBoundingClientRect();
+        const sectionTop = window.scrollY + rect.top;
+        const sectionBottom = sectionTop + rect.height;
+        if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
+          currentSection = index;
+        }
+      });
+    }, { passive: true });
+  }
+
+  function scrollToSection(section) {
+    if (!section) return;
+    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  // Hover effects for interactive elements
+  function initHoverEffects() {
+    const interactiveElements = document.querySelectorAll('a, button, [role="button"]');
+
+    interactiveElements.forEach(el => {
+      el.addEventListener('mouseenter', () => {
+        el.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
+        el.style.transform = 'scale(1.02)';
+      });
+
+      el.addEventListener('mouseleave', () => {
+        el.style.transform = 'scale(1)';
+      });
+    });
+
+    const cards = document.querySelectorAll('[class*="framer-"][style*="border-radius"]');
+    cards.forEach(card => {
+      const originalTransform = card.style.transform || '';
+      card.addEventListener('mouseenter', () => {
+        card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
+        card.style.transform = originalTransform + ' translateY(-4px)';
+        card.style.boxShadow = '0 10px 40px rgba(0,0,0,0.2)';
+      });
+
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = originalTransform;
+        card.style.boxShadow = '';
+      });
+    });
+  }
+
+  // Smooth scroll for anchor links
+  function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+        }
+      });
+    });
+  }
+
+  // Rainbow click effect
+  function initRainbowClickEffect() {
+    const colors = ['#FF6B6B', '#FFE66D', '#4ECDC4', '#45B7D1', '#96CEB4', '#DDA0DD', '#FF9FF3'];
+
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('a, button, input, video, [role="button"], [tabindex="0"]')) return;
+
+      const x = e.clientX;
+      const y = e.clientY;
+
+      for (let i = 0; i < 12; i++) {
+        createParticle(x, y, colors[i % colors.length], i);
+      }
+    });
+
+    function createParticle(x, y, color, index) {
+      const particle = document.createElement('div');
+      particle.style.cssText = \`
+        position: fixed;
+        left: \${x}px;
+        top: \${y}px;
+        width: 10px;
+        height: 10px;
+        background: \${color};
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 99999;
+        opacity: 1;
+      \`;
+
+      document.body.appendChild(particle);
+
+      const angle = (index / 12) * Math.PI * 2;
+      const velocity = 100 + Math.random() * 100;
+      const targetX = x + Math.cos(angle) * velocity;
+      const targetY = y + Math.sin(angle) * velocity;
+
+      particle.animate([
+        { transform: 'scale(1) translate(0, 0)', opacity: 1 },
+        { transform: \`scale(0.5) translate(\${targetX - x}px, \${targetY - y}px)\`, opacity: 0 }
+      ], {
+        duration: 600,
+        easing: 'cubic-bezier(0, 0.55, 0.45, 1)'
+      }).onfinish = () => particle.remove();
+    }
+  }
+
+})();
+`;
+    await fs.writeFile(path.join(projectDir, "public/animations.js"), script);
+  }
+  async generateNextjsProject(projectDir, htmlContent, inlineStyles, keyframes, options, contentExtracted = false) {
+    const pkg = {
+      name: options.projectName,
+      version: "0.1.0",
+      private: true,
+      scripts: {
+        dev: "next dev",
+        build: "next build",
+        start: "next start"
+      },
+      dependencies: {
+        next: "^15.1.0",
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+        "framer-motion": "^11.15.0"
+      },
+      devDependencies: {
+        typescript: "^5.7.0",
+        "@types/node": "^22.0.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0"
+      }
+    };
+    await fs.writeJson(path.join(projectDir, "package.json"), pkg, { spaces: 2 });
+    const tsconfig = {
+      compilerOptions: {
+        lib: ["dom", "dom.iterable", "esnext"],
+        allowJs: true,
+        skipLibCheck: true,
+        strict: false,
+        noEmit: true,
+        esModuleInterop: true,
+        module: "esnext",
+        moduleResolution: "bundler",
+        resolveJsonModule: true,
+        isolatedModules: true,
+        jsx: "preserve",
+        incremental: true,
+        plugins: [{ name: "next" }],
+        paths: { "@/*": ["./src/*"] }
+      },
+      include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+      exclude: ["node_modules"]
+    };
+    await fs.writeJson(path.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+    const nextConfig = `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [{ protocol: 'https', hostname: '**' }],
+    unoptimized: true,
+  },
+};
+export default nextConfig;
+`;
+    await fs.writeFile(path.join(projectDir, "next.config.mjs"), nextConfig);
+    const externalCssPath = path.join(projectDir, "src/styles/external.css");
+    const hasExternalCss = await fs.pathExists(externalCssPath);
+    const layout = `import './globals.css';
+${hasExternalCss ? "import '@/styles/external.css';" : ""}
+
+export const metadata = {
+  title: '${options.projectName}',
+  description: 'Cloned by extraktor',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`;
+    await fs.writeFile(path.join(projectDir, "src/app/layout.tsx"), layout);
+    const globalsCss = `/* Cloned styles by extraktor */
+
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Keyframe Animations */
+${keyframes}
+
+/* Inline Styles from Page */
+${inlineStyles}
+`;
+    await fs.writeFile(path.join(projectDir, "src/app/globals.css"), globalsCss);
+    await fs.writeFile(path.join(projectDir, "public/index.html"), htmlContent);
+    await fs.writeFile(path.join(projectDir, "public/page-content.html"), htmlContent);
+    const contentLoaderScript = contentExtracted ? `
+    // Load content customizations
+    const contentScript = document.createElement('script');
+    contentScript.src = '/content-loader.js';
+    document.body.appendChild(contentScript);` : "";
+    const page = `'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+
+export default function Home() {
+  const [html, setHtml] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch('/page-content.html')
+      .then(res => res.text())
+      .then(content => {
+        setHtml(content);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current || !html) return;
+
+    // Load animation script
+    const script = document.createElement('script');
+    script.src = '/animations.js';
+    document.body.appendChild(script);
+${contentLoaderScript}
+
+    return () => {
+      script.remove();
+    };
+  }, [html]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div
+        ref={containerRef}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </motion.div>
+  );
+}
+`;
+    await fs.writeFile(path.join(projectDir, "src/app/page.tsx"), page);
+  }
+  /**
+   * Extract React components from HTML (basic component extraction)
+   */
+  async extractComponents(page) {
+    return page.evaluate(() => {
+      const components = [];
+      const sections = document.querySelectorAll(
+        'section, [class*="section"], [class*="hero"], [class*="header"], [class*="footer"], [class*="nav"]'
+      );
+      let componentIndex = 0;
+      sections.forEach((section) => {
+        const classes = section.className;
+        let name = "Component";
+        if (classes.includes("hero")) name = "Hero";
+        else if (classes.includes("header")) name = "Header";
+        else if (classes.includes("footer")) name = "Footer";
+        else if (classes.includes("nav")) name = "Navigation";
+        else if (classes.includes("section")) name = "Section";
+        name = `${name}${componentIndex++}`;
+        const computed = getComputedStyle(section);
+        const relevantStyles = [
+          `display: ${computed.display}`,
+          `position: ${computed.position}`,
+          `background: ${computed.background}`,
+          `padding: ${computed.padding}`,
+          `margin: ${computed.margin}`
+        ].join("; ");
+        components.push({
+          name,
+          html: section.outerHTML,
+          styles: relevantStyles
+        });
+      });
+      return components;
+    });
+  }
+};
+
+// src/genome/genome-engine.ts
+import fs7 from "fs-extra";
+import path6 from "path";
+
+// src/genome/vision-analyzer.ts
+import Anthropic from "@anthropic-ai/sdk";
+import sharp from "sharp";
+import fs2 from "fs-extra";
+import path2 from "path";
+var SECTION_SELECTORS = [
+  "header",
+  "nav",
+  "main",
+  "section",
+  "article",
+  "aside",
+  "footer",
+  '[role="banner"]',
+  '[role="navigation"]',
+  '[role="main"]',
+  '[role="contentinfo"]'
+].join(", ");
+var VisionAnalyzer = class {
+  client;
+  model;
+  logger;
+  constructor(options) {
+    this.client = new Anthropic({ apiKey: options.apiKey });
+    this.model = options.model ?? "claude-sonnet-4-6-20250514";
+    this.logger = options.logger.child({ prefix: "vision-analyzer" });
+  }
+  // ─── Main Entry Point ───────────────────────────────────────
+  async analyze(page, extractionResult, outputDir) {
+    const screenshotsDir = path2.join(outputDir, "screenshots");
+    await fs2.ensureDir(screenshotsDir);
+    this.logger.info("Capturing full-page screenshot");
+    const fullPageBuffer = await page.screenshot({ fullPage: true });
+    const fullPagePath = path2.join(screenshotsDir, "full-page.png");
+    await fs2.writeFile(fullPagePath, fullPageBuffer);
+    this.logger.info("Resolving section bounding boxes");
+    const sectionBounds = await this.resolveSectionBounds(page);
+    this.logger.info(`Found ${sectionBounds.length} sections`);
+    const imageMetadata = await sharp(fullPageBuffer).metadata();
+    const imageWidth = imageMetadata.width ?? 1920;
+    const imageHeight = imageMetadata.height ?? 1080;
+    const sections = [];
+    for (const section of sectionBounds) {
+      const sectionName = this.buildSectionName(section, sectionBounds);
+      this.logger.info(`Processing section: ${sectionName}`);
+      const cropped = this.clampBounds(section.bounds, imageWidth, imageHeight);
+      if (cropped.width < 2 || cropped.height < 2) {
+        this.logger.warn(`Skipping section ${sectionName}: too small after clamping`);
+        continue;
+      }
+      let sectionBuffer;
+      try {
+        sectionBuffer = await sharp(fullPageBuffer).extract({
+          left: Math.round(cropped.x),
+          top: Math.round(cropped.y),
+          width: Math.round(cropped.width),
+          height: Math.round(cropped.height)
+        }).toBuffer();
+      } catch (err) {
+        this.logger.warn(`Failed to crop section ${sectionName}: ${err}`);
+        continue;
+      }
+      const sectionPath = path2.join(screenshotsDir, `section-${sectionName}.png`);
+      await fs2.writeFile(sectionPath, sectionBuffer);
+      const rawComponents = await this.analyzeSection(sectionBuffer, sectionName);
+      const components = await this.mapToDom(page, rawComponents, section.bounds);
+      sections.push({
+        name: sectionName,
+        screenshotPath: sectionPath,
+        bounds: section.bounds,
+        components
+      });
+    }
+    this.logger.info("Analyzing design language");
+    const designLanguage = await this.analyzeDesignLanguage(fullPageBuffer);
+    this.logger.info("Building component hierarchy");
+    const hierarchy = this.buildHierarchy(sections);
+    return { sections, hierarchy, designLanguage };
+  }
+  // ─── Section Bounds Resolution ──────────────────────────────
+  async resolveSectionBounds(page) {
+    const rawBounds = await page.evaluate((selector) => {
+      const elements = document.querySelectorAll(selector);
+      const results = [];
+      elements.forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        const style = window.getComputedStyle(el);
+        if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0 || rect.width < 10 && rect.height < 10) {
+          return;
+        }
+        results.push({
+          tag: el.tagName.toLowerCase(),
+          role: el.getAttribute("role") || "",
+          bounds: {
+            x: rect.x + window.scrollX,
+            y: rect.y + window.scrollY,
+            width: rect.width,
+            height: rect.height
+          }
+        });
+      });
+      return results;
+    }, SECTION_SELECTORS);
+    rawBounds.sort((a, b) => a.bounds.y - b.bounds.y);
+    return rawBounds.map((r) => ({
+      name: r.role || r.tag,
+      tag: r.tag,
+      bounds: r.bounds
+    }));
+  }
+  // ─── Section Naming ─────────────────────────────────────────
+  buildSectionName(section, allSections) {
+    const sameName = allSections.filter((s) => (s.name || s.tag) === (section.name || section.tag));
+    const baseName = section.name || section.tag;
+    if (sameName.length <= 1) return baseName;
+    const idx = sameName.indexOf(section);
+    return `${baseName}-${idx + 1}`;
+  }
+  // ─── Bounds Clamping ────────────────────────────────────────
+  clampBounds(bounds, imageWidth, imageHeight) {
+    const x = Math.max(0, Math.min(bounds.x, imageWidth - 1));
+    const y = Math.max(0, Math.min(bounds.y, imageHeight - 1));
+    const width = Math.min(bounds.width, imageWidth - x);
+    const height = Math.min(bounds.height, imageHeight - y);
+    return { x, y, width: Math.max(1, width), height: Math.max(1, height) };
+  }
+  // ─── Section Analysis via Claude Vision ─────────────────────
+  async analyzeSection(buffer, sectionName) {
+    const base64 = buffer.toString("base64");
+    const prompt = `Analyze this UI section screenshot ("${sectionName}") and identify all visual components.
+
+Return a JSON array of components. Each component should have:
+- name: descriptive component name (e.g. "PrimaryNavLink", "HeroHeading")
+- type: component type (e.g. "button", "heading", "card", "image", "nav-link", "input", "icon", "badge", "avatar")
+- bounds: { x, y, width, height } in pixels relative to this cropped section image
+- description: what the component does/shows
+- designNotes: visual design observations (colors, typography, spacing, effects)
+- children: nested components (same structure), empty array if none
+- variants: visual states or variations observed (e.g. ["hover", "active", "disabled"])
+
+Return ONLY valid JSON. No markdown, no explanation. Just the JSON array.`;
+    const components = await this.callVisionApi(base64, prompt);
+    return components ?? [];
+  }
+  // ─── DOM Mapping ────────────────────────────────────────────
+  async mapToDom(page, rawComponents, sectionBounds) {
+    const mapped = [];
+    for (const raw of rawComponents) {
+      const absX = sectionBounds.x + raw.bounds.x;
+      const absY = sectionBounds.y + raw.bounds.y;
+      const centerX = absX + raw.bounds.width / 2;
+      const centerY = absY + raw.bounds.height / 2;
+      const domInfo = await page.evaluate(
+        ({ cx, cy, maxHtml }) => {
+          const viewX = cx - window.scrollX;
+          const viewY = cy - window.scrollY;
+          const el = document.elementFromPoint(viewX, viewY);
+          if (!el) return null;
+          const buildSelector = (element) => {
+            if (element.id) return `#${element.id}`;
+            const tag = element.tagName.toLowerCase();
+            const classes = Array.from(element.classList).slice(0, 3).join(".");
+            const parent = element.parentElement;
+            if (!parent) return tag;
+            const siblings = Array.from(parent.children).filter(
+              (s) => s.tagName === element.tagName
+            );
+            const idx = siblings.indexOf(element);
+            const nthChild = siblings.length > 1 ? `:nth-child(${idx + 1})` : "";
+            return classes ? `${tag}.${classes}${nthChild}` : `${tag}${nthChild}`;
+          };
+          const selector = buildSelector(el);
+          let html = el.outerHTML;
+          if (html.length > maxHtml) {
+            html = html.slice(0, maxHtml) + "<!-- truncated -->";
+          }
+          return { selector, html };
+        },
+        { cx: centerX, cy: centerY, maxHtml: 3e3 }
+      );
+      const children = await this.mapToDom(page, raw.children, sectionBounds);
+      mapped.push({
+        name: raw.name,
+        type: raw.type,
+        bounds: {
+          x: absX,
+          y: absY,
+          width: raw.bounds.width,
+          height: raw.bounds.height
+        },
+        description: raw.description,
+        designNotes: raw.designNotes,
+        domSelector: domInfo?.selector ?? "",
+        domHtml: domInfo?.html ?? "",
+        children,
+        variants: raw.variants
+      });
+    }
+    return mapped;
+  }
+  // ─── Design Language Analysis ───────────────────────────────
+  async analyzeDesignLanguage(fullPageBuffer) {
+    const base64 = fullPageBuffer.toString("base64");
+    const prompt = `Analyze the overall design language of this full-page screenshot.
+
+Return a JSON object with exactly these fields:
+- colorStrategy: Describe the color palette strategy (primary/secondary/accent usage, contrast approach, dark/light mode handling)
+- typographyHierarchy: Describe the typography system (heading scales, body text, font families, weight patterns, line-height rhythm)
+- spacingRhythm: Describe the spacing system (consistent spacing units, section padding patterns, component gaps, margin rhythm)
+- animationStyle: Describe the animation/motion design approach (entrance animations, hover effects, transition timing, scroll behaviors observed)
+- overallAesthetic: Describe the overall design aesthetic in 2-3 sentences (modern/classic, minimal/rich, corporate/playful, design influences)
+
+Return ONLY valid JSON. No markdown, no explanation. Just the JSON object.`;
+    const result = await this.callVisionApi(base64, prompt);
+    return result ?? {
+      colorStrategy: "Unable to analyze",
+      typographyHierarchy: "Unable to analyze",
+      spacingRhythm: "Unable to analyze",
+      animationStyle: "Unable to analyze",
+      overallAesthetic: "Unable to analyze"
+    };
+  }
+  // ─── Hierarchy Builder ──────────────────────────────────────
+  buildHierarchy(sections) {
+    const tree = [];
+    for (const section of sections) {
+      for (const component of section.components) {
+        tree.push(this.componentToTreeNode(component));
+      }
+    }
+    return tree;
+  }
+  componentToTreeNode(component) {
+    return {
+      component,
+      children: component.children.map((child) => this.componentToTreeNode(child))
+    };
+  }
+  // ─── Vision API Helper ──────────────────────────────────────
+  async callVisionApi(base64, prompt) {
+    let attempts = 0;
+    const maxAttempts = 2;
+    while (attempts < maxAttempts) {
+      attempts++;
+      try {
+        const response = await this.client.messages.create({
+          model: this.model,
+          max_tokens: 4096,
+          messages: [
+            {
+              role: "user",
+              content: [
+                {
+                  type: "image",
+                  source: {
+                    type: "base64",
+                    media_type: "image/png",
+                    data: base64
+                  }
+                },
+                {
+                  type: "text",
+                  text: prompt
+                }
+              ]
+            }
+          ]
+        });
+        const textBlock = response.content.find((block) => block.type === "text");
+        if (!textBlock || textBlock.type !== "text") {
+          this.logger.warn("No text block in vision response");
+          continue;
+        }
+        const rawText = textBlock.text.trim();
+        const jsonText = rawText.replace(/^```(?:json)?\s*\n?/i, "").replace(/\n?```\s*$/i, "").trim();
+        const parsed = JSON.parse(jsonText);
+        return parsed;
+      } catch (err) {
+        if (attempts < maxAttempts) {
+          this.logger.warn(
+            `Vision API parse failed (attempt ${attempts}/${maxAttempts}), retrying: ${err}`
+          );
+        } else {
+          this.logger.error(`Vision API failed after ${maxAttempts} attempts: ${err}`);
+        }
+      }
+    }
+    return null;
+  }
+};
+
+// src/genome/component-synthesizer.ts
+import Anthropic2 from "@anthropic-ai/sdk";
+import fs3 from "fs-extra";
+var TRIVIAL_TYPES = /* @__PURE__ */ new Set(["divider", "icon-group"]);
+var BATCH_SIZE = 3;
+var BATCH_DELAY_MS = 500;
+var SYSTEM_PROMPT = `You are an expert React/TypeScript developer. You receive two inputs for each component:
+
+1. A SCREENSHOT of the page section (visual ground truth)
+2. An HTML DOM fragment (structural hints)
+
+Your job: produce a single, clean React component that faithfully reproduces the visual design.
+
+RULES:
+- Use Tailwind CSS utility classes exclusively. No inline styles, no CSS modules, no styled-components.
+- Use semantic HTML elements (section, nav, header, article, figure, etc.).
+- Define a TypeScript props interface for ALL editable content (headings, body text, images, links, button labels, stats, etc.). Name it <ComponentName>Props.
+- Add framer-motion entrance animations (fadeIn, slideUp, stagger children) using the motion component.
+- Provide both a named export and a default export.
+- Add the 'use client' directive at the top of the file.
+- Write clean, readable code with consistent formatting.
+- Return ONLY the TypeScript/React code. No markdown fences, no explanations, no commentary.
+- Start directly with 'use client' on line 1.`;
+var ComponentSynthesizer = class {
+  client;
+  model;
+  maxComponents;
+  logger;
+  constructor(options) {
+    this.client = new Anthropic2({ apiKey: options.apiKey });
+    this.model = options.model ?? "claude-sonnet-4-6-20250514";
+    this.maxComponents = options.maxComponents ?? 20;
+    this.logger = options.logger;
+  }
+  // ─── Main Entry Point ──────────────────────────────────────
+  async synthesize(visionMap, extractionResult) {
+    const tokensSummary = this.buildTokensSummary(extractionResult);
+    const results = [];
+    let totalProcessed = 0;
+    for (const section of visionMap.sections) {
+      if (totalProcessed >= this.maxComponents) break;
+      const eligibleComponents = section.components.filter(
+        (c) => !TRIVIAL_TYPES.has(c.type)
+      );
+      if (eligibleComponents.length === 0) {
+        this.logger?.debug(`Skipping section "${section.name}" - no eligible components`);
+        continue;
+      }
+      this.logger?.info(
+        `Processing section "${section.name}" (${eligibleComponents.length} components)`
+      );
+      let screenshotBase64 = null;
+      if (section.screenshotPath && await fs3.pathExists(section.screenshotPath)) {
+        const buffer = await fs3.readFile(section.screenshotPath);
+        screenshotBase64 = buffer.toString("base64");
+      } else {
+        this.logger?.warn(
+          `Screenshot not found for section "${section.name}": ${section.screenshotPath}`
+        );
+      }
+      for (let i = 0; i < eligibleComponents.length; i += BATCH_SIZE) {
+        if (totalProcessed >= this.maxComponents) break;
+        const remaining = this.maxComponents - totalProcessed;
+        const batch = eligibleComponents.slice(i, Math.min(i + BATCH_SIZE, i + remaining));
+        const batchResults = await Promise.all(
+          batch.map(
+            (comp) => this.synthesizeComponent(comp, section, screenshotBase64, tokensSummary)
+          )
+        );
+        for (const result of batchResults) {
+          if (result) {
+            results.push(result);
+            totalProcessed++;
+          }
+        }
+        if (i + BATCH_SIZE < eligibleComponents.length && totalProcessed < this.maxComponents) {
+          await new Promise((resolve) => setTimeout(resolve, BATCH_DELAY_MS));
+        }
+      }
+    }
+    this.logger?.info(`Synthesized ${results.length} components total`);
+    return results;
+  }
+  // ─── Single Component Synthesis ────────────────────────────
+  async synthesizeComponent(comp, section, screenshotBase64, tokensSummary) {
+    try {
+      this.logger?.debug(`Synthesizing component "${comp.name}" (${comp.type})`);
+      const userPrompt = this.buildUserPrompt(comp, tokensSummary);
+      const content = [];
+      if (screenshotBase64) {
+        content.push({
+          type: "image",
+          source: {
+            type: "base64",
+            media_type: "image/png",
+            data: screenshotBase64
+          }
+        });
+      }
+      content.push({
+        type: "text",
+        text: userPrompt
+      });
+      const response = await this.client.messages.create({
+        model: this.model,
+        max_tokens: 4096,
+        system: SYSTEM_PROMPT,
+        messages: [{ role: "user", content }]
+      });
+      const textBlock = response.content.find((block) => block.type === "text");
+      if (!textBlock || textBlock.type !== "text") {
+        this.logger?.warn(`No text response for component "${comp.name}"`);
+        return null;
+      }
+      let code = textBlock.text.replace(/^```(?:tsx?|typescript|javascript)?\n?/gm, "").replace(/```$/gm, "").trim();
+      const propsInterface = this.extractPropsInterface(code);
+      const dependencies = this.extractDependencies(code);
+      const defaultProps = this.inferDefaultProps(code, comp);
+      const designRelationships = {
+        usesColors: this.detectColorUsage(code),
+        usesTypography: this.detectTypographyUsage(code),
+        usesSpacing: this.detectSpacingUsage(code)
+      };
+      const synthesized = {
+        name: comp.name,
+        type: comp.type,
+        code,
+        propsInterface,
+        storyCode: "",
+        // Story generation is handled separately
+        defaultProps,
+        dependencies,
+        designRelationships
+      };
+      this.logger?.info(`Synthesized "${comp.name}" (${dependencies.length} deps)`);
+      return synthesized;
+    } catch (error) {
+      this.logger?.error(
+        `Failed to synthesize "${comp.name}": ${error instanceof Error ? error.message : String(error)}`
+      );
+      return null;
+    }
+  }
+  // ─── Prompt Builders ───────────────────────────────────────
+  buildUserPrompt(comp, tokensSummary) {
+    const lines = [
+      `Generate a React component named "${comp.name}".`,
+      "",
+      `COMPONENT TYPE: ${comp.type}`,
+      `DESCRIPTION: ${comp.description}`
+    ];
+    if (comp.designNotes) {
+      lines.push(`DESIGN NOTES: ${comp.designNotes}`);
+    }
+    if (comp.variants.length > 0) {
+      lines.push(`VARIANTS: ${comp.variants.join(", ")}`);
+    }
+    lines.push("", "--- DESIGN TOKENS ---", tokensSummary);
+    if (comp.domHtml) {
+      lines.push(
+        "",
+        "--- DOM FRAGMENT (structural hint, do NOT copy verbatim) ---",
+        comp.domHtml
+      );
+    }
+    lines.push(
+      "",
+      "The screenshot above is the visual ground truth. Match it precisely.",
+      "Return ONLY the component code, starting with 'use client';"
+    );
+    return lines.join("\n");
+  }
+  buildTokensSummary(result) {
+    const lines = [];
+    if (result.colors?.palette?.length) {
+      const colors = result.colors.palette.slice(0, 15).map((c) => `${c.name}: ${c.value}`).join(", ");
+      lines.push(`COLORS: ${colors}`);
+    }
+    if (result.typography?.fontFamilies?.length) {
+      const fonts = result.typography.fontFamilies.slice(0, 5).map((f) => `${f.name}: ${f.value}`).join(", ");
+      lines.push(`FONTS: ${fonts}`);
+    }
+    if (result.typography?.fontSizes?.length) {
+      const sizes = result.typography.fontSizes.slice(0, 8).map((s) => `${s.name}: ${s.value}`).join(", ");
+      lines.push(`SIZES: ${sizes}`);
+    }
+    if (result.spacing?.scale?.length) {
+      const spacing = result.spacing.scale.slice(0, 10).map((s) => `${s.name}: ${s.value}`).join(", ");
+      lines.push(`SPACING: ${spacing}`);
+    }
+    if (result.effects?.borderRadii?.length) {
+      const radii = result.effects.borderRadii.slice(0, 5).map((r) => `${r.name}: ${r.value}`).join(", ");
+      lines.push(`RADII: ${radii}`);
+    }
+    if (result.effects?.shadows?.length) {
+      const shadows = result.effects.shadows.slice(0, 3).map((s) => `${s.name}: ${s.value}`).join(", ");
+      lines.push(`SHADOWS: ${shadows}`);
+    }
+    return lines.join("\n");
+  }
+  // ─── Code Analysis Helpers ─────────────────────────────────
+  extractPropsInterface(code) {
+    const match = code.match(/interface\s+\w*Props\s*\{[^}]*\}/s);
+    return match ? match[0] : "";
+  }
+  extractDependencies(code) {
+    const deps = [];
+    if (/from\s+['"]framer-motion['"]/.test(code)) {
+      deps.push("framer-motion");
+    }
+    if (/from\s+['"]lucide-react['"]/.test(code)) {
+      deps.push("lucide-react");
+    }
+    if (/from\s+['"]next\/image['"]/.test(code)) {
+      deps.push("next/image");
+    }
+    if (/from\s+['"]next\/link['"]/.test(code)) {
+      deps.push("next/link");
+    }
+    return deps;
+  }
+  inferDefaultProps(code, comp) {
+    const defaults = {};
+    const destructureMatch = code.match(/\{\s*([^}]+)\}\s*:\s*\w*Props/);
+    if (destructureMatch) {
+      const propsBlock = destructureMatch[1];
+      const defaultRegex = /(\w+)\s*=\s*(?:"([^"]*)"|'([^']*)'|(\d+(?:\.\d+)?)|(\[.*?\])|(\{.*?\})|(true|false))/g;
+      let match;
+      while ((match = defaultRegex.exec(propsBlock)) !== null) {
+        const propName = match[1];
+        const strVal = match[2] ?? match[3];
+        const numVal = match[4];
+        const arrVal = match[5];
+        const objVal = match[6];
+        const boolVal = match[7];
+        if (strVal !== void 0) {
+          defaults[propName] = strVal;
+        } else if (numVal !== void 0) {
+          defaults[propName] = parseFloat(numVal);
+        } else if (boolVal !== void 0) {
+          defaults[propName] = boolVal === "true";
+        } else if (arrVal !== void 0) {
+          try {
+            defaults[propName] = JSON.parse(arrVal);
+          } catch {
+            defaults[propName] = arrVal;
+          }
+        } else if (objVal !== void 0) {
+          try {
+            defaults[propName] = JSON.parse(objVal);
+          } catch {
+            defaults[propName] = objVal;
+          }
+        }
+      }
+    }
+    if (!defaults["title"] && !defaults["heading"] && comp.description) {
+      defaults["title"] = comp.name.replace(/([A-Z])/g, " $1").trim();
+    }
+    return defaults;
+  }
+  detectColorUsage(code) {
+    const colorClasses = /* @__PURE__ */ new Set();
+    const colorRegex = /(?:bg|text|border|ring|from|to|via)-([a-z]+-\d{2,3}(?:\/\d+)?|black|white|transparent|current)/g;
+    let match;
+    while ((match = colorRegex.exec(code)) !== null) {
+      colorClasses.add(match[0]);
+    }
+    return Array.from(colorClasses);
+  }
+  detectTypographyUsage(code) {
+    const typoClasses = /* @__PURE__ */ new Set();
+    const typoRegex = /(?:text-(?:xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)|font-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black|sans|serif|mono))/g;
+    let match;
+    while ((match = typoRegex.exec(code)) !== null) {
+      typoClasses.add(match[0]);
+    }
+    return Array.from(typoClasses);
+  }
+  detectSpacingUsage(code) {
+    const spacingClasses = /* @__PURE__ */ new Set();
+    const spacingRegex = /(?:p|m|gap|px|py|mx|my|pt|pr|pb|pl|mt|mr|mb|ml)-(?:\d+(?:\.\d+)?|\[[\d.]+(?:px|rem|em|%)\]|auto)/g;
+    let match;
+    while ((match = spacingRegex.exec(code)) !== null) {
+      spacingClasses.add(match[0]);
+    }
+    return Array.from(spacingClasses);
+  }
+};
+
+// src/genome/story-generator.ts
+import fs4 from "fs-extra";
+import path3 from "path";
+var StoryGenerator = class {
+  logger;
+  constructor(options) {
+    this.logger = options.logger;
+  }
+  /**
+   * Generate Storybook stories and configuration for all components.
+   */
+  async generate(components, outputDir) {
+    const storiesDir = path3.join(outputDir, "stories");
+    const storybookDir = path3.join(storiesDir, ".storybook");
+    await fs4.ensureDir(storiesDir);
+    await fs4.ensureDir(storybookDir);
+    this.logger.info(`Generating stories for ${components.length} components`);
+    for (const comp of components) {
+      const storyCode = this.generateComponentStory(comp);
+      comp.storyCode = storyCode;
+      const storyFile = path3.join(storiesDir, `${comp.name}.stories.tsx`);
+      await fs4.writeFile(storyFile, storyCode, "utf-8");
+      this.logger.debug(`Wrote story: ${storyFile}`);
+    }
+    const mainConfig = this.generateMainConfig();
+    await fs4.writeFile(path3.join(storybookDir, "main.ts"), mainConfig, "utf-8");
+    this.logger.debug("Wrote .storybook/main.ts");
+    const previewConfig = this.generatePreviewConfig();
+    await fs4.writeFile(path3.join(storybookDir, "preview.ts"), previewConfig, "utf-8");
+    this.logger.debug("Wrote .storybook/preview.ts");
+    this.logger.info(`Storybook generation complete: ${components.length} stories written`);
+  }
+  /**
+   * Generate a .stories.tsx file for a single component.
+   */
+  generateComponentStory(comp) {
+    const filteredProps = this.filterDefaultProps(comp.defaultProps);
+    const propsArg = JSON.stringify(filteredProps, null, 2);
+    const indentedProps = propsArg.split("\n").map((line, i) => i === 0 ? line : `      ${line}`).join("\n");
+    return `import type { Meta, StoryObj } from '@storybook/react';
+import { ${comp.name} } from '../components/${comp.name}';
+
+const meta: Meta<typeof ${comp.name}> = {
+  title: 'Components/${comp.name}',
+  component: ${comp.name},
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ${comp.name}>;
+
+export const Default: Story = {
+  args: ${indentedProps},
+};
+
+export const Mobile: Story = {
+  args: ${indentedProps},
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};
+
+export const Tablet: Story = {
+  args: ${indentedProps},
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+};
+`;
+  }
+  /**
+   * Filter out internal props (keys starting with _) from defaultProps.
+   */
+  filterDefaultProps(defaultProps) {
+    const filtered = {};
+    for (const [key, value] of Object.entries(defaultProps)) {
+      if (!key.startsWith("_")) {
+        filtered[key] = value;
+      }
+    }
+    return filtered;
+  }
+  /**
+   * Generate .storybook/main.ts configuration.
+   */
+  generateMainConfig() {
+    return `import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  stories: ['../*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+  ],
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;
+`;
+  }
+  /**
+   * Generate .storybook/preview.ts configuration with viewport presets.
+   */
+  generatePreviewConfig() {
+    return `import type { Preview } from '@storybook/react';
+import '../theme/globals.css';
+
+const customViewports = {
+  mobile: {
+    name: 'Mobile',
+    styles: {
+      width: '375px',
+      height: '812px',
+    },
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
+  desktop: {
+    name: 'Desktop',
+    styles: {
+      width: '1440px',
+      height: '900px',
+    },
+  },
+};
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
+  },
+};
+
+export default preview;
+`;
+  }
+};
+
+// src/genome/genome-serializer.ts
+import Anthropic3 from "@anthropic-ai/sdk";
+import fs5 from "fs-extra";
+import path4 from "path";
+var GenomeSerializer = class {
+  client;
+  model;
+  logger;
+  constructor(options) {
+    this.client = new Anthropic3({ apiKey: options.apiKey });
+    this.model = options.model ?? "claude-sonnet-4-6-20250514";
+    this.logger = options.logger.child({ prefix: "genome-serializer" });
+  }
+  // ─── Main Entry Point ────────────────────────────────────────
+  /**
+   * Serialize extraction results into the genome output format.
+   *
+   * Writes component .tsx files, theme files, genome.json, and README.md.
+   */
+  async serialize(extractionResult, visionMap, components, outputDir, sourceUrl) {
+    this.logger.info("Serializing genome output...");
+    const componentsDir = path4.join(outputDir, "components");
+    const themeDir = path4.join(outputDir, "theme");
+    await fs5.ensureDir(componentsDir);
+    await fs5.ensureDir(themeDir);
+    await this.writeComponentFiles(components, componentsDir);
+    await this.writeBarrelIndex(components, componentsDir);
+    await this.writeThemeFiles(extractionResult, themeDir);
+    const styleNarrative = await this.generateStyleNarrative(
+      extractionResult,
+      visionMap,
+      sourceUrl
+    );
+    const colorRelationships = await this.analyzeColorRelationships(extractionResult);
+    const genome = this.buildGenome(
+      extractionResult,
+      visionMap,
+      components,
+      colorRelationships,
+      styleNarrative,
+      sourceUrl
+    );
+    const genomePath = path4.join(outputDir, "genome.json");
+    await fs5.writeJSON(genomePath, genome, { spaces: 2 });
+    this.logger.info(`Wrote genome.json (${components.length} components)`);
+    await this.writeReadme(genome, outputDir);
+    return genome;
+  }
+  // ─── Component File Writing ──────────────────────────────────
+  async writeComponentFiles(components, componentsDir) {
+    for (const comp of components) {
+      const filePath = path4.join(componentsDir, `${comp.name}.tsx`);
+      await fs5.writeFile(filePath, comp.code, "utf-8");
+      this.logger.debug(`Wrote component: ${comp.name}.tsx`);
+    }
+    this.logger.info(`Wrote ${components.length} component files`);
+  }
+  async writeBarrelIndex(components, componentsDir) {
+    const lines = components.map(
+      (comp) => `export { ${comp.name}, default as ${comp.name}Default } from './${comp.name}';`
+    );
+    const content = lines.join("\n") + "\n";
+    await fs5.writeFile(path4.join(componentsDir, "index.ts"), content, "utf-8");
+    this.logger.debug("Wrote components/index.ts barrel");
+  }
+  // ─── Theme File Generation ───────────────────────────────────
+  /**
+   * Write all theme output files:
+   * - tailwind.config.ts: extends colors from palette, fontFamily from fontFamilies
+   * - globals.css: @tailwind directives, CSS vars for colors, body font-family
+   * - animations.ts: framer-motion preset objects
+   * - tokens.json: DTCG format with color and typography sections
+   */
+  async writeThemeFiles(extractionResult, themeDir) {
+    await fs5.ensureDir(themeDir);
+    await Promise.all([
+      this.writeTailwindConfig(extractionResult, themeDir),
+      this.writeGlobalsCss(extractionResult, themeDir),
+      this.writeAnimations(themeDir),
+      this.writeDesignTokens(extractionResult, themeDir)
+    ]);
+    this.logger.info("Theme files written");
+  }
+  async writeTailwindConfig(result, themeDir) {
+    const colorEntries = result.colors.palette.map((c) => {
+      const key = c.name.replace(/\s+/g, "-").toLowerCase();
+      return `        '${key}': '${c.value}',`;
+    });
+    const fontEntries = result.typography.fontFamilies.map((f) => {
+      const key = f.category === "mono" ? "mono" : f.category === "serif" ? "serif" : "sans";
+      const fallbacks = f.fallbacks.length > 0 ? f.fallbacks.map((fb) => `'${fb}'`).join(", ") : "'sans-serif'";
+      return `        '${key}': ['${f.value}', ${fallbacks}],`;
+    });
+    const content = `import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx,js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+${colorEntries.join("\n")}
+      },
+      fontFamily: {
+${fontEntries.join("\n")}
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+`;
+    await fs5.writeFile(path4.join(themeDir, "tailwind.config.ts"), content, "utf-8");
+    this.logger.debug("Wrote theme/tailwind.config.ts");
+  }
+  async writeGlobalsCss(result, themeDir) {
+    const colorVars = result.colors.palette.map((c) => {
+      const key = c.name.replace(/\s+/g, "-").toLowerCase();
+      return `  --color-${key}: ${c.value};`;
+    });
+    const primaryFont = result.typography.fontFamilies[0];
+    const bodyFontFamily = primaryFont ? `${primaryFont.value}, ${primaryFont.fallbacks.join(", ") || "sans-serif"}` : "system-ui, sans-serif";
+    const content = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+${colorVars.join("\n")}
+}
+
+body {
+  font-family: ${bodyFontFamily};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+    await fs5.writeFile(path4.join(themeDir, "globals.css"), content, "utf-8");
+    this.logger.debug("Wrote theme/globals.css");
+  }
+  async writeAnimations(themeDir) {
+    const content = `/**
+ * Motion presets extracted from source site.
+ * Use with framer-motion or CSS transitions.
+ */
+
+export const motionPresets = {
+  fadeUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.5, ease: 'easeOut' },
+  },
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+  slideInLeft: {
+    initial: { opacity: 0, x: -30 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.5, ease: 'easeOut' },
+  },
+  slideInRight: {
+    initial: { opacity: 0, x: 30 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.5, ease: 'easeOut' },
+  },
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+  staggerContainer: {
+    animate: {
+      transition: {
+        staggerChildren: 0.08,
+        delayChildren: 0.1,
+      },
+    },
+  },
+} as const;
+
+export type MotionPresetKey = keyof typeof motionPresets;
+`;
+    await fs5.writeFile(path4.join(themeDir, "animations.ts"), content, "utf-8");
+    this.logger.debug("Wrote theme/animations.ts");
+  }
+  async writeDesignTokens(result, themeDir) {
+    const colorTokens = {};
+    for (const c of result.colors.palette) {
+      const key = c.name.replace(/\s+/g, "-").toLowerCase();
+      colorTokens[key] = {
+        $type: "color",
+        $value: c.value,
+        $description: `Usage: ${c.usage.join(", ")}`
+      };
+    }
+    const typographyTokens = {};
+    for (const size of result.typography.fontSizes) {
+      typographyTokens[size.name] = {
+        $type: "dimension",
+        $value: size.value,
+        $description: `${size.pxValue}px / ${size.remValue}rem`
+      };
+    }
+    for (const family of result.typography.fontFamilies) {
+      typographyTokens[`family-${family.category}`] = {
+        $type: "fontFamily",
+        $value: [family.value, ...family.fallbacks]
+      };
+    }
+    const tokens = {
+      $schema: "https://design-tokens.github.io/community-group/format/",
+      color: colorTokens,
+      typography: typographyTokens
+    };
+    await fs5.writeJSON(path4.join(themeDir, "tokens.json"), tokens, { spaces: 2 });
+    this.logger.debug("Wrote theme/tokens.json");
+  }
+  // ─── Genome Assembly ─────────────────────────────────────────
+  buildGenome(result, visionMap, components, colorRelationships, styleNarrative, sourceUrl) {
+    const colors = {};
+    for (const c of result.colors.palette) {
+      const key = c.name.replace(/\s+/g, "-").toLowerCase();
+      colors[key] = c.value;
+    }
+    const typographyScale = {};
+    for (const size of result.typography.fontSizes) {
+      typographyScale[size.name] = size.value;
+    }
+    const scaleRatio = this.detectScaleRatio(
+      result.typography.fontSizes.map((s) => s.pxValue)
+    );
+    const families = {};
+    for (const f of result.typography.fontFamilies) {
+      families[f.category] = f.value;
+    }
+    const spacingScale = {};
+    for (const s of result.spacing.scale) {
+      spacingScale[s.name] = s.value;
+    }
+    const shadows = {};
+    for (const s of result.effects.shadows) {
+      shadows[s.name] = s.value;
+    }
+    const radii = {};
+    for (const r of result.effects.borderRadii) {
+      radii[r.name] = r.value;
+    }
+    const transitions = {};
+    for (const t of result.animations.transitions) {
+      const key = t.property.replace(/\s+/g, "-");
+      transitions[key] = `${t.duration} ${t.timingFunction}${t.delay ? ` ${t.delay}` : ""}`;
+    }
+    const genomeComponents = components.map((comp) => ({
+      name: comp.name,
+      type: comp.type,
+      file: `components/${comp.name}.tsx`,
+      storyFile: `stories/${comp.name}.stories.tsx`,
+      description: this.extractComponentDescription(comp),
+      designRelationships: comp.designRelationships,
+      propsSchema: this.extractPropsSchema(comp.propsInterface),
+      defaultContent: comp.defaultProps
+    }));
+    const sectionOrder = visionMap.sections.map((s) => s.name);
+    const gridSystem = this.detectGridSystem(result);
+    const breakpoints = {};
+    for (const bp of result.layout.breakpoints) {
+      if (bp.minWidth) {
+        breakpoints[bp.name] = parseInt(bp.minWidth, 10);
+      }
+    }
+    if (Object.keys(breakpoints).length === 0) {
+      Object.assign(breakpoints, { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 });
+    }
+    const patterns = this.detectPatterns(result);
+    const spacingRhythm = visionMap.designLanguage.spacingRhythm || "consistent";
+    return {
+      meta: {
+        sourceUrl,
+        extractedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        extraktorVersion: "1.0.0",
+        componentCount: components.length,
+        pageTitle: result.metadata.title || ""
+      },
+      theme: {
+        colors,
+        colorRelationships,
+        typography: {
+          scale: typographyScale,
+          scaleRatio,
+          families
+        },
+        spacing: {
+          scale: spacingScale,
+          rhythm: spacingRhythm
+        },
+        effects: {
+          shadows,
+          radii,
+          transitions
+        },
+        animations: {
+          entrance: visionMap.designLanguage.animationStyle || "fade-up",
+          interaction: "hover-scale",
+          motionPresets: {
+            fadeUp: { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
+            fadeIn: { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.4 } },
+            slideInLeft: { initial: { opacity: 0, x: -30 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.5 } },
+            slideInRight: { initial: { opacity: 0, x: 30 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.5 } },
+            scaleIn: { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.4 } },
+            staggerContainer: { animate: { transition: { staggerChildren: 0.08 } } }
+          }
+        }
+      },
+      components: genomeComponents,
+      layout: {
+        sectionOrder,
+        gridSystem,
+        breakpoints,
+        patterns
+      },
+      styleNarrative
+    };
+  }
+  // ─── Claude AI Helpers ────────────────────────────────────────
+  /**
+   * Generate a 2-3 paragraph style narrative via Claude describing the design
+   * principles in second person, suitable for guiding future page generation.
+   */
+  async generateStyleNarrative(result, visionMap, sourceUrl) {
+    this.logger.info("Generating style narrative via Claude...");
+    const colorSummary = result.colors.palette.slice(0, 8).map((c) => `${c.name}: ${c.value}`).join(", ");
+    const fontSummary = result.typography.fontFamilies.map((f) => `${f.value} (${f.category})`).join(", ");
+    const designLang = visionMap.designLanguage;
+    const prompt = `You are a design system analyst. Based on the following extracted design data from ${sourceUrl}, write a 2-3 paragraph style narrative in second person ("you") that describes the design principles, visual identity, and how to maintain consistency when building new pages.
+
+Design Language:
+- Color Strategy: ${designLang.colorStrategy}
+- Typography Hierarchy: ${designLang.typographyHierarchy}
+- Spacing Rhythm: ${designLang.spacingRhythm}
+- Animation Style: ${designLang.animationStyle}
+- Overall Aesthetic: ${designLang.overallAesthetic}
+
+Colors: ${colorSummary}
+Fonts: ${fontSummary}
+Sections: ${visionMap.sections.map((s) => s.name).join(", ")}
+
+Write a concise, actionable narrative. Focus on the "why" behind design choices and how to maintain the visual identity. Do not use bullet points - write flowing paragraphs.`;
+    try {
+      const response = await this.client.messages.create({
+        model: this.model,
+        max_tokens: 1024,
+        messages: [{ role: "user", content: prompt }]
+      });
+      const textBlock = response.content.find((b) => b.type === "text");
+      return textBlock?.text ?? "";
+    } catch (error) {
+      this.logger.warn("Failed to generate style narrative, using fallback", error);
+      return `This design system follows a ${designLang.overallAesthetic} aesthetic with ${designLang.colorStrategy} color usage and ${designLang.typographyHierarchy} typography. Maintain the ${designLang.spacingRhythm} spacing rhythm when extending the design.`;
+    }
+  }
+  /**
+   * Analyze color relationships via Claude, returning a JSON array of
+   * token/usage/pairedWith/neverWith objects.
+   */
+  async analyzeColorRelationships(result) {
+    this.logger.info("Analyzing color relationships via Claude...");
+    const palette = result.colors.palette.slice(0, 12);
+    if (palette.length === 0) {
+      return [];
+    }
+    const paletteDescription = palette.map((c) => `${c.name} (${c.value}): used for ${c.usage.join(", ")}, frequency ${c.frequency}`).join("\n");
+    const prompt = `Analyze the following color palette and return a JSON array of color relationships. Each entry should describe how a color token is used, which colors it pairs well with, and which colors it should never be combined with.
+
+Palette:
+${paletteDescription}
+
+Return ONLY a valid JSON array with this exact shape (no markdown fencing, no explanation):
+[
+  {
+    "token": "color-name",
+    "usage": "brief description of primary usage",
+    "pairedWith": ["other-color-1", "other-color-2"],
+    "neverWith": ["clash-color"]
+  }
+]
+
+Include an entry for each color in the palette.`;
+    try {
+      const response = await this.client.messages.create({
+        model: this.model,
+        max_tokens: 2048,
+        messages: [{ role: "user", content: prompt }]
+      });
+      const textBlock = response.content.find((b) => b.type === "text");
+      const raw = textBlock?.text ?? "[]";
+      const cleaned = raw.replace(/```json\s*/g, "").replace(/```\s*/g, "").trim();
+      const parsed = JSON.parse(cleaned);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter(
+        (r) => typeof r.token === "string" && typeof r.usage === "string" && Array.isArray(r.pairedWith) && Array.isArray(r.neverWith)
+      );
+    } catch (error) {
+      this.logger.warn("Failed to analyze color relationships, using fallback", error);
+      return palette.map((c) => ({
+        token: c.name,
+        usage: c.usage.join(", "),
+        pairedWith: [],
+        neverWith: []
+      }));
+    }
+  }
+  // ─── README Generation ────────────────────────────────────────
+  async writeReadme(genome, outputDir) {
+    const componentList = genome.components.map((c) => `- **${c.name}** (\`${c.type}\`): ${c.description}`).join("\n");
+    const colorList = Object.entries(genome.theme.colors).map(([name, value]) => `| \`${name}\` | \`${value}\` |`).join("\n");
+    const content = `# ${genome.meta.pageTitle || "Design System"} - Design Genome
+
+> Extracted from [${genome.meta.sourceUrl}](${genome.meta.sourceUrl}) on ${genome.meta.extractedAt}
+> Generated by extraktor v${genome.meta.extraktorVersion}
+
+## Style Narrative
+
+${genome.styleNarrative}
+
+## Components (${genome.meta.componentCount})
+
+${componentList}
+
+### Usage
+
+\`\`\`tsx
+import { ${genome.components.map((c) => c.name).join(", ")} } from './components';
+\`\`\`
+
+### Run Storybook
+
+\`\`\`bash
+cd stories && npx storybook dev -p 6006
+\`\`\`
+
+### Regenerate a new page
+
+\`\`\`bash
+extraktor regen ./ --prompt "Your page description" -o ../my-new-site/
+\`\`\`
+
+## Color Palette
+
+| Token | Value |
+|-------|-------|
+${colorList}
+
+## Typography
+
+- **Scale ratio:** ${genome.theme.typography.scaleRatio.toFixed(3)}
+- **Families:** ${Object.entries(genome.theme.typography.families).map(([k, v]) => `${k}: ${v}`).join(", ")}
+
+## Layout
+
+- **Section order:** ${genome.layout.sectionOrder.join(" > ")}
+- **Grid system:** ${genome.layout.gridSystem}
+- **Patterns:** ${genome.layout.patterns.join(", ") || "none detected"}
+
+## Files
+
+\`\`\`
+genome.json          # Complete design genome
+components/          # React/TSX component files
+components/index.ts  # Barrel exports
+theme/
+  tailwind.config.ts # Tailwind CSS configuration
+  globals.css        # CSS variables and base styles
+  animations.ts      # Framer Motion presets
+  tokens.json        # DTCG design tokens
+stories/             # Storybook stories
+screenshots/         # Vision analysis screenshots
+\`\`\`
+`;
+    await fs5.writeFile(path4.join(outputDir, "README.md"), content, "utf-8");
+    this.logger.debug("Wrote README.md");
+  }
+  // ─── Utility Helpers ──────────────────────────────────────────
+  /**
+   * Detect the typographic scale ratio from sorted font sizes.
+   * Returns the geometric mean of consecutive size ratios, clamped to [1.05, 2.0].
+   */
+  detectScaleRatio(sizes) {
+    if (sizes.length < 2) return 1.25;
+    const sorted = [...sizes].sort((a, b) => a - b);
+    const unique = [...new Set(sorted)].filter((s) => s > 0);
+    if (unique.length < 2) return 1.25;
+    const ratios = [];
+    for (let i = 1; i < unique.length; i++) {
+      ratios.push(unique[i] / unique[i - 1]);
+    }
+    const product = ratios.reduce((acc, r) => acc * r, 1);
+    const geoMean = Math.pow(product, 1 / ratios.length);
+    return Math.max(1.05, Math.min(geoMean, 2));
+  }
+  /**
+   * Parse a TypeScript interface string into a Record of prop name to type.
+   * Handles patterns like `propName: type;` and `propName?: type;`.
+   */
+  extractPropsSchema(propsInterface) {
+    const schema = {};
+    if (!propsInterface) return schema;
+    const propRegex = /(\w+)\??\s*:\s*([^;}\n]+)/g;
+    let match;
+    while ((match = propRegex.exec(propsInterface)) !== null) {
+      const name = match[1].trim();
+      const type = match[2].trim();
+      schema[name] = type;
+    }
+    return schema;
+  }
+  /**
+   * Detect the grid system from layout extraction data.
+   * Inspects grid patterns, flex patterns, and containers in priority order.
+   */
+  detectGridSystem(result) {
+    const { gridPatterns, flexPatterns, containers } = result.layout;
+    if (gridPatterns.length > 0) {
+      const colCounts = gridPatterns.map((g) => g.columns).filter(Boolean);
+      if (colCounts.length > 0) {
+        return `css-grid (${colCounts[0]})`;
+      }
+      return "css-grid";
+    }
+    if (flexPatterns.length > 0) {
+      return "flexbox";
+    }
+    if (containers.length > 0) {
+      const maxWidth = containers[0].maxWidth;
+      return `container-based (${maxWidth})`;
+    }
+    return "12-col, 1280px max";
+  }
+  /**
+   * Detect layout patterns from extraction and layout architecture data.
+   */
+  detectPatterns(result) {
+    const patterns = [];
+    if (result.layout.gridPatterns.length > 0) {
+      patterns.push("css-grid");
+    }
+    if (result.layout.flexPatterns.length > 0) {
+      patterns.push("flexbox");
+    }
+    if (result.layout.containers.length > 0) {
+      patterns.push("container-layout");
+    }
+    if (result.layout.zIndexLayers.length > 3) {
+      patterns.push("layered-z-index");
+    }
+    const stickyElements = result.rawStyles.filter(
+      (el) => el.computedStyles.position === "sticky" || el.computedStyles.position === "fixed"
+    );
+    if (stickyElements.length > 0) {
+      patterns.push("sticky-elements");
+    }
+    if (result.layout.breakpoints.length > 0) {
+      patterns.push("responsive");
+    }
+    const layoutArch = result.layoutArchitecture;
+    if (layoutArch?.layoutType) {
+      patterns.push(layoutArch.layoutType);
+    }
+    return patterns;
+  }
+  /**
+   * Extract a short description from a synthesized component.
+   * Attempts to pull from JSDoc comment, then falls back to type name.
+   */
+  extractComponentDescription(comp) {
+    if (comp.defaultProps._description && typeof comp.defaultProps._description === "string") {
+      return comp.defaultProps._description;
+    }
+    const jsdocMatch = comp.code.match(/\/\*\*\s*\n?\s*\*\s*(.+?)(?:\n|\*\/)/);
+    if (jsdocMatch) {
+      return jsdocMatch[1].trim();
+    }
+    return `${comp.type.charAt(0).toUpperCase() + comp.type.slice(1)} component`;
+  }
+};
+
+// src/genome/page-regenerator.ts
+import Anthropic4 from "@anthropic-ai/sdk";
+import fs6 from "fs-extra";
+import path5 from "path";
+var PageRegenerator = class {
+  client;
+  model;
+  logger;
+  constructor(options) {
+    this.client = new Anthropic4({ apiKey: options.apiKey });
+    this.model = options.model || "claude-sonnet-4-6-20250514";
+    this.logger = options.logger;
+  }
+  /**
+   * Regenerate a new page from genome + prompt
+   */
+  async regenerate(genome, genomeDir, prompt, outputDir, sections) {
+    await fs6.ensureDir(outputDir);
+    this.logger.info("Copying genome components...");
+    const srcComponentsDir = path5.join(genomeDir, "components");
+    const destComponentsDir = path5.join(outputDir, "components");
+    if (await fs6.pathExists(srcComponentsDir)) {
+      await fs6.copy(srcComponentsDir, destComponentsDir);
+    }
+    const srcThemeDir = path5.join(genomeDir, "theme");
+    if (await fs6.pathExists(srcThemeDir)) {
+      await fs6.copy(
+        path5.join(srcThemeDir, "tailwind.config.ts"),
+        path5.join(outputDir, "tailwind.config.ts")
+      );
+      const srcDir = path5.join(outputDir, "src", "app");
+      await fs6.ensureDir(srcDir);
+      if (await fs6.pathExists(path5.join(srcThemeDir, "globals.css"))) {
+        await fs6.copy(
+          path5.join(srcThemeDir, "globals.css"),
+          path5.join(srcDir, "globals.css")
+        );
+      }
+    }
+    this.logger.info("Generating page composition...");
+    const pageCode = await this.generatePage(genome, prompt, sections);
+    this.logger.info("Writing Next.js project...");
+    await this.writeProject(outputDir, pageCode, genome);
+    this.logger.info(`Regen complete: ${outputDir}`);
+    return outputDir;
+  }
+  async generatePage(genome, prompt, sections) {
+    const componentInventory = genome.components.map((c) => {
+      const props = Object.entries(c.propsSchema).map(([k, v]) => `  ${k}: ${v}`).join("\n");
+      return `### ${c.name} (${c.type})
+${c.description}
+Props:
+${props || "  className?: string"}`;
+    }).join("\n\n");
+    const systemPrompt = `You are a senior frontend developer. You have a complete design system (genome) extracted from ${genome.meta.sourceUrl}. Create a NEW page using ONLY the components and design tokens from this system, with completely original content.
+
+STYLE NARRATIVE:
+${genome.styleNarrative}
+
+AVAILABLE COMPONENTS:
+${componentInventory}
+
+SECTION ORDER FROM ORIGINAL:
+${genome.layout.sectionOrder.join(" -> ")}
+
+LAYOUT PATTERNS: ${genome.layout.patterns.join(", ")}
+
+RULES:
+1. Use ONLY components imported from '../components'
+2. Follow the color/typography/spacing relationships from the genome
+3. Match the animation style described in the narrative
+4. Content must be original, specific, and relevant to the user's prompt
+5. Output a complete Next.js page.tsx with 'use client' directive
+6. Import framer-motion for page-level animations
+7. Use realistic, specific content (not lorem ipsum or generic placeholder)
+8. Return ONLY the code, no markdown blocks`;
+    const userPrompt = sections ? `Create a page with these sections: ${sections.join(", ")}. Theme: ${prompt}` : `Create a complete landing page: ${prompt}`;
+    const response = await this.client.messages.create({
+      model: this.model,
+      max_tokens: 8192,
+      system: systemPrompt,
+      messages: [{ role: "user", content: userPrompt }]
+    });
+    const code = response.content[0]?.type === "text" ? response.content[0].text : "";
+    return code.replace(/^```(?:tsx?|typescript)?\n?/gm, "").replace(/```$/gm, "").trim();
+  }
+  async writeProject(outputDir, pageCode, genome) {
+    const srcApp = path5.join(outputDir, "src", "app");
+    await fs6.ensureDir(srcApp);
+    await fs6.writeFile(path5.join(srcApp, "page.tsx"), pageCode);
+    const escapedTitle = (genome.meta.pageTitle || "Generated Page").replace(/'/g, "\\'");
+    const layoutCode = `import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '${escapedTitle}',
+  description: 'Generated with extraktor genome',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`;
+    await fs6.writeFile(path5.join(srcApp, "layout.tsx"), layoutCode);
+    const packageJson = {
+      name: path5.basename(outputDir),
+      version: "0.1.0",
+      private: true,
+      scripts: {
+        dev: "next dev",
+        build: "next build",
+        start: "next start"
+      },
+      dependencies: {
+        next: "^15.0.0",
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+        "framer-motion": "^11.0.0"
+      },
+      devDependencies: {
+        typescript: "^5.0.0",
+        "@types/react": "^19.0.0",
+        "@types/node": "^22.0.0",
+        tailwindcss: "^4.0.0",
+        postcss: "^8.0.0"
+      }
+    };
+    await fs6.writeJSON(path5.join(outputDir, "package.json"), packageJson, { spaces: 2 });
+    const tsConfig = {
+      compilerOptions: {
+        target: "ES2017",
+        lib: ["dom", "dom.iterable", "esnext"],
+        allowJs: true,
+        skipLibCheck: true,
+        strict: true,
+        noEmit: true,
+        esModuleInterop: true,
+        module: "esnext",
+        moduleResolution: "bundler",
+        resolveJsonModule: true,
+        isolatedModules: true,
+        jsx: "preserve",
+        incremental: true,
+        plugins: [{ name: "next" }],
+        paths: { "@/*": ["./src/*"] }
+      },
+      include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+      exclude: ["node_modules"]
+    };
+    await fs6.writeJSON(path5.join(outputDir, "tsconfig.json"), tsConfig, { spaces: 2 });
+  }
+};
+
+// src/genome/genome-engine.ts
+var GenomeEngine = class {
+  logger;
+  constructor(options) {
+    this.logger = options?.logger || createLogger({ level: "info" });
+  }
+  /**
+   * Run the full genome extraction pipeline
+   */
+  async genome(options) {
+    const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+    if (!apiKey) {
+      throw new Error(
+        "ANTHROPIC_API_KEY is required for genome extraction. Set the environment variable or pass --api-key."
+      );
+    }
+    const outputDir = path6.resolve(options.outputDir);
+    await fs7.ensureDir(outputDir);
+    const model = options.model;
+    this.logger.info("Phase 1/4: Extracting design tokens...");
+    const config = getDefaultConfig();
+    config.browser.headless = options.cdpEndpoint ? false : options.headless ?? true;
+    config.browser.timeout = options.timeout ?? 3e4;
+    config.browser.cdpEndpoint = options.cdpEndpoint;
+    config.output.formats = ["tailwind", "css-variables", "design-tokens"];
+    const orchestrator = new Orchestrator({ config, logger: this.logger });
+    const { result, page, close } = await orchestrator.extractWithPage(options.url, outputDir);
+    try {
+      this.logger.info("Phase 2/4: Vision analysis...");
+      const visionAnalyzer = new VisionAnalyzer({
+        apiKey,
+        model,
+        logger: this.logger
+      });
+      const visionMap = await visionAnalyzer.analyze(page, result, outputDir);
+      this.logger.info(
+        `Vision found ${visionMap.sections.length} sections with ${visionMap.sections.reduce((sum, s) => sum + s.components.length, 0)} components`
+      );
+      this.logger.info("Phase 3/4: Synthesizing components...");
+      const synthesizer = new ComponentSynthesizer({
+        apiKey,
+        model,
+        maxComponents: options.maxComponents ?? 20,
+        logger: this.logger
+      });
+      const components = await synthesizer.synthesize(visionMap, result);
+      if (!options.skipStorybook) {
+        this.logger.info("Generating Storybook stories...");
+        const storyGen = new StoryGenerator({ logger: this.logger });
+        await storyGen.generate(components, outputDir);
+      }
+      this.logger.info("Phase 4/4: Packaging genome...");
+      const serializer = new GenomeSerializer({
+        apiKey,
+        model,
+        logger: this.logger
+      });
+      const genome = await serializer.serialize(
+        result,
+        visionMap,
+        components,
+        outputDir,
+        options.url
+      );
+      if (options.skipScreenshots) {
+        await fs7.remove(path6.join(outputDir, "screenshots"));
+      }
+      return genome;
+    } finally {
+      await close();
+    }
+  }
+  /**
+   * Regenerate a new page from an existing genome
+   */
+  async regen(options) {
+    const apiKey = options.apiKey || process.env.ANTHROPIC_API_KEY;
+    if (!apiKey) {
+      throw new Error(
+        "ANTHROPIC_API_KEY is required for regeneration. Set the environment variable or pass --api-key."
+      );
+    }
+    const genomeDir = path6.resolve(options.genomeDir);
+    const genomePath = path6.join(genomeDir, "genome.json");
+    if (!await fs7.pathExists(genomePath)) {
+      throw new Error(`genome.json not found in ${genomeDir}`);
+    }
+    const genome = await fs7.readJSON(genomePath);
+    const outputDir = path6.resolve(options.outputDir);
+    const regenerator = new PageRegenerator({
+      apiKey,
+      model: options.model,
+      logger: this.logger
+    });
+    return regenerator.regenerate(
+      genome,
+      genomeDir,
+      options.prompt,
+      outputDir,
+      options.sections
+    );
+  }
+};
+
+export {
+  SiteCloner,
+  GenomeEngine
+};