extraktor 1.0.0

package/dist/index.js

@@ -0,0 +1,58 @@
+import {
+  AnimationExtractor,
+  BaseExtractor,
+  CSSVarsTransformer,
+  ColorExtractor,
+  EffectsExtractor,
+  ExtractorRegistry,
+  Orchestrator,
+  PageAnalyzer,
+  PlaywrightDriver,
+  SpacingExtractor,
+  TailwindTransformer,
+  TokenTransformer,
+  TypographyExtractor,
+  areColorsSimilar,
+  createDefaultConfig,
+  extractGradientColors,
+  generateColorName,
+  generateColorScale,
+  getContrastRatio,
+  getDefaultConfig,
+  groupSimilarColors,
+  loadConfig,
+  mergeConfig,
+  parseColor,
+  toColorFormat
+} from "./chunk-PHMSK7VD.js";
+import {
+  createLogger
+} from "./chunk-5IH5TLAQ.js";
+export {
+  AnimationExtractor,
+  BaseExtractor,
+  CSSVarsTransformer,
+  ColorExtractor,
+  EffectsExtractor,
+  ExtractorRegistry,
+  Orchestrator,
+  PageAnalyzer,
+  PlaywrightDriver,
+  SpacingExtractor,
+  TailwindTransformer,
+  TokenTransformer,
+  TypographyExtractor,
+  areColorsSimilar,
+  createDefaultConfig,
+  createLogger,
+  extractGradientColors,
+  generateColorName,
+  generateColorScale,
+  getContrastRatio,
+  getDefaultConfig,
+  groupSimilarColors,
+  loadConfig,
+  mergeConfig,
+  parseColor,
+  toColorFormat
+};

package/dist/server-DR7RCM5S.js

@@ -0,0 +1,328 @@
+#!/usr/bin/env node
+import {
+  GenomeEngine,
+  SiteCloner
+} from "./chunk-VLLFGYUN.js";
+import {
+  Orchestrator,
+  PlaywrightDriver,
+  getDefaultConfig
+} from "./chunk-PHMSK7VD.js";
+import {
+  createLogger
+} from "./chunk-5IH5TLAQ.js";
+
+// src/mcp/server.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import path from "path";
+import fs from "fs-extra";
+var logger = createLogger({ level: "error" });
+async function startMcpServer() {
+  const server = new McpServer({
+    name: "extraktor",
+    version: "1.0.0"
+  });
+  server.tool(
+    "extract_design_tokens",
+    "Extract design tokens (colors, typography, spacing, animations, effects) from any URL. Returns Tailwind config, CSS variables, and DTCG tokens. No API key required.",
+    {
+      url: z.string().describe("URL to extract from"),
+      format: z.enum(["tailwind", "css-variables", "design-tokens", "all"]).default("all").describe("Output format")
+    },
+    async ({ url, format }) => {
+      const outputDir = path.join("/tmp", `extraktor-mcp-${Date.now()}`);
+      await fs.ensureDir(outputDir);
+      try {
+        const config = getDefaultConfig();
+        config.browser.headless = true;
+        config.browser.timeout = 3e4;
+        config.output.formats = format === "all" ? ["tailwind", "css-variables", "design-tokens"] : [format === "css-variables" ? "css-variables" : format === "design-tokens" ? "design-tokens" : "tailwind"];
+        const orchestrator = new Orchestrator({ config, logger });
+        const result = await orchestrator.extract(url, outputDir);
+        const output = {};
+        const tailwindPath = path.join(outputDir, "tailwind.config.ts");
+        if (await fs.pathExists(tailwindPath)) {
+          output.tailwindConfig = await fs.readFile(tailwindPath, "utf-8");
+        }
+        const cssPath = path.join(outputDir, "variables.css");
+        if (await fs.pathExists(cssPath)) {
+          output.cssVariables = await fs.readFile(cssPath, "utf-8");
+        }
+        const tokensPath = path.join(outputDir, "tokens.json");
+        if (await fs.pathExists(tokensPath)) {
+          output.designTokens = await fs.readFile(tokensPath, "utf-8");
+        }
+        const summary = {
+          url: result.metadata.url,
+          title: result.metadata.title,
+          colors: result.colors.palette.length,
+          fonts: result.typography.fontFamilies.length,
+          fontSizes: result.typography.fontSizes.length,
+          spacingValues: result.spacing.scale.length,
+          shadows: result.effects.shadows.length,
+          animations: result.animations.keyframes.length,
+          ...output
+        };
+        return { content: [{ type: "text", text: JSON.stringify(summary, null, 2) }] };
+      } finally {
+        await fs.remove(outputDir);
+      }
+    }
+  );
+  server.tool(
+    "analyze_site",
+    "Quick analysis of a website - colors, fonts, spacing, layout patterns, SPA framework detection. No files generated, no API key needed.",
+    {
+      url: z.string().describe("URL to analyze")
+    },
+    async ({ url }) => {
+      const config = getDefaultConfig();
+      config.browser.headless = true;
+      config.browser.timeout = 3e4;
+      const orchestrator = new Orchestrator({ config, logger });
+      const result = await orchestrator.analyze(url);
+      const analysis = {
+        url: result.metadata.url,
+        title: result.metadata.title,
+        spaFramework: result.metadata.spaFramework,
+        elementsAnalyzed: result.metadata.elementsAnalyzed,
+        colors: {
+          count: result.colors.palette.length,
+          top5: result.colors.palette.slice(0, 5).map((c) => ({ name: c.name, value: c.value })),
+          gradients: result.colors.gradients.length
+        },
+        typography: {
+          fonts: result.typography.fontFamilies.map((f) => f.name),
+          sizeCount: result.typography.fontSizes.length,
+          sizes: result.typography.fontSizes.slice(0, 8).map((s) => s.value)
+        },
+        spacing: {
+          scaleCount: result.spacing.scale.length,
+          values: result.spacing.scale.slice(0, 10).map((s) => s.value)
+        },
+        effects: {
+          shadows: result.effects.shadows.length,
+          borderRadii: result.effects.borderRadii.length
+        },
+        animations: {
+          keyframes: result.animations.keyframes.length,
+          transitions: result.animations.transitions.length
+        },
+        layout: {
+          containers: result.layout.containers.length,
+          gridPatterns: result.layout.gridPatterns.length,
+          flexPatterns: result.layout.flexPatterns.length,
+          breakpoints: result.layout.breakpoints.length
+        },
+        cssVariables: Object.keys(result.cssVariables).length
+      };
+      return { content: [{ type: "text", text: JSON.stringify(analysis, null, 2) }] };
+    }
+  );
+  server.tool(
+    "clone_site",
+    "Clone a website into a working Next.js project with all assets (images, fonts, videos). Downloads and localizes everything. No API key needed.",
+    {
+      url: z.string().describe("URL to clone"),
+      outputDir: z.string().describe("Directory to save the project"),
+      projectName: z.string().optional().describe("Project name (defaults to domain)")
+    },
+    async ({ url, outputDir, projectName }) => {
+      const resolvedOutput = path.resolve(outputDir);
+      await fs.ensureDir(resolvedOutput);
+      const config = getDefaultConfig();
+      config.browser.timeout = 6e4;
+      const driver = new PlaywrightDriver({
+        browserConfig: config.browser,
+        spaConfig: config.spa,
+        logger
+      });
+      await driver.initialize();
+      const navResult = await driver.navigate(url);
+      if (!navResult.success) {
+        await driver.close();
+        return { content: [{ type: "text", text: `Navigation failed: ${navResult.error}` }] };
+      }
+      const page = driver.getPage();
+      if (!page) {
+        await driver.close();
+        return { content: [{ type: "text", text: "Failed to get page" }] };
+      }
+      const name = projectName || new URL(url).hostname.replace(/\./g, "-");
+      const cloner = new SiteCloner();
+      const result = await cloner.clone(page, {
+        url,
+        outputDir: resolvedOutput,
+        projectName: name,
+        downloadAssets: true,
+        inlineStyles: true
+      });
+      await driver.close();
+      return {
+        content: [{
+          type: "text",
+          text: JSON.stringify({
+            projectDir: result.projectDir,
+            platform: result.platform,
+            assets: result.assets,
+            pagesCloned: result.pagesCloned,
+            nextSteps: `cd ${result.projectDir} && npm install && npm run dev`
+          }, null, 2)
+        }]
+      };
+    }
+  );
+  server.tool(
+    "extract_genome",
+    "Vision-AI design system extraction. Identifies components visually using Claude Vision, generates clean React/Tailwind components, Storybook, and a portable genome.json. Uses your ANTHROPIC_API_KEY.",
+    {
+      url: z.string().describe("URL to extract genome from"),
+      outputDir: z.string().describe("Directory to save the genome"),
+      maxComponents: z.number().default(20).describe("Max components to synthesize"),
+      skipStorybook: z.boolean().default(false).describe("Skip Storybook generation")
+    },
+    async ({ url, outputDir, maxComponents, skipStorybook }) => {
+      const apiKey = process.env.ANTHROPIC_API_KEY;
+      if (!apiKey) {
+        return {
+          content: [{
+            type: "text",
+            text: "ANTHROPIC_API_KEY not found in environment. genome requires Claude Vision API access. Set the environment variable and restart."
+          }]
+        };
+      }
+      const resolvedOutput = path.resolve(outputDir);
+      const engine = new GenomeEngine({ logger });
+      const genome = await engine.genome({
+        url,
+        outputDir: resolvedOutput,
+        apiKey,
+        maxComponents,
+        skipStorybook,
+        headless: true
+      });
+      return {
+        content: [{
+          type: "text",
+          text: JSON.stringify({
+            sourceUrl: genome.meta.sourceUrl,
+            componentCount: genome.meta.componentCount,
+            components: genome.components.map((c) => ({ name: c.name, type: c.type, description: c.description })),
+            sectionOrder: genome.layout.sectionOrder,
+            outputDir: resolvedOutput,
+            colorCount: Object.keys(genome.theme.colors).length,
+            styleNarrative: genome.styleNarrative.slice(0, 300) + "..."
+          }, null, 2)
+        }]
+      };
+    }
+  );
+  server.tool(
+    "regen_page",
+    "Generate a new page from a previously extracted genome. Creates a Next.js page using the genome's components and design language with original content. Uses your ANTHROPIC_API_KEY.",
+    {
+      genomeDir: z.string().describe("Path to genome directory (containing genome.json)"),
+      prompt: z.string().describe("Description of the page to generate"),
+      outputDir: z.string().describe("Directory to save the generated page")
+    },
+    async ({ genomeDir, prompt, outputDir }) => {
+      const apiKey = process.env.ANTHROPIC_API_KEY;
+      if (!apiKey) {
+        return {
+          content: [{
+            type: "text",
+            text: "ANTHROPIC_API_KEY not found in environment. regen requires Claude API access."
+          }]
+        };
+      }
+      const engine = new GenomeEngine({ logger });
+      const result = await engine.regen({
+        genomeDir: path.resolve(genomeDir),
+        prompt,
+        outputDir: path.resolve(outputDir),
+        apiKey
+      });
+      return {
+        content: [{
+          type: "text",
+          text: JSON.stringify({
+            outputDir: result,
+            prompt,
+            nextSteps: `cd ${result} && npm install && npm run dev`
+          }, null, 2)
+        }]
+      };
+    }
+  );
+  server.tool(
+    "extract_colors",
+    "Extract just the color palette from a URL. Returns colors with names, hex values, and usage categories. No API key needed.",
+    {
+      url: z.string().describe("URL to extract colors from")
+    },
+    async ({ url }) => {
+      const config = getDefaultConfig();
+      config.browser.headless = true;
+      config.browser.timeout = 2e4;
+      config.output.formats = [];
+      const orchestrator = new Orchestrator({ config, logger });
+      const result = await orchestrator.analyze(url);
+      const colors = {
+        palette: result.colors.palette.map((c) => ({
+          name: c.name,
+          value: c.value,
+          usage: c.usage,
+          frequency: c.frequency
+        })),
+        gradients: result.colors.gradients.map((g) => ({
+          value: g.value,
+          type: g.type
+        }))
+      };
+      return { content: [{ type: "text", text: JSON.stringify(colors, null, 2) }] };
+    }
+  );
+  server.tool(
+    "extract_typography",
+    "Extract typography system from a URL. Returns font families, sizes, weights, line heights. No API key needed.",
+    {
+      url: z.string().describe("URL to extract typography from")
+    },
+    async ({ url }) => {
+      const config = getDefaultConfig();
+      config.browser.headless = true;
+      config.browser.timeout = 2e4;
+      config.output.formats = [];
+      const orchestrator = new Orchestrator({ config, logger });
+      const result = await orchestrator.analyze(url);
+      const typography = {
+        families: result.typography.fontFamilies.map((f) => ({
+          name: f.name,
+          category: f.category,
+          source: f.source
+        })),
+        sizes: result.typography.fontSizes.map((s) => ({
+          name: s.name,
+          value: s.value,
+          pxValue: s.pxValue
+        })),
+        weights: result.typography.fontWeights.map((w) => ({
+          name: w.name,
+          value: w.value
+        })),
+        lineHeights: result.typography.lineHeights.map((l) => ({
+          name: l.name,
+          value: l.value
+        }))
+      };
+      return { content: [{ type: "text", text: JSON.stringify(typography, null, 2) }] };
+    }
+  );
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+export {
+  startMcpServer
+};