vibetachyon 1.8.0 → 1.9.0

package/dist/mcp-server.js

@@ -49,10 +49,14 @@ async function checkSanity() {
 }
 // --- Changelog (per version) ---
 const CHANGELOG = {
+    '1.9.0': [
+        'vibe_clone_design — clone design system de qualquer URL',
+        'Detecta cores, tipografia, radius e sombras automaticamente',
+        'Gera globals.css pronto para usar no projeto',
+    ],
     '1.8.0': [
         'vibe_session_recap — resumo completo da sessão',
         'Update check automático no startup com changelog',
-        'vibe_clone_design — clone de design system por URL',
     ],
     '1.7.0': [
         'vibe_launchpad — MISSION BRIEFING automático antes de qualquer código',
@@ -199,7 +203,7 @@ async function validateTokenAtStartup() {
     }
     // --- Update Check ---
     try {
-        const CURRENT_VERSION = '1.8.0'; // keep in sync with package.json
+        const CURRENT_VERSION = '1.9.0'; // keep in sync with package.json
         const npmRes = await fetch('https://registry.npmjs.org/vibetachyon/latest', {
             signal: AbortSignal.timeout(4000)
         });
@@ -228,7 +232,7 @@ async function startMcpServer() {
     await validateTokenAtStartup();
     const server = new mcp_js_1.McpServer({
         name: "VibeTachyon MCP — Animmaster Engine",
-        version: "1.8.0"
+        version: "1.9.0"
     });
     /**
      * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer (Animmaster Engine)
@@ -1188,6 +1192,221 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Enforce Vibe Style (Consistency Guard)
+    // ── Tool: Clone Design ───────────────────────────────────────────────────
+    server.tool("vibe_clone_design", "🎨 Give a URL (e.g. linear.app, stripe.com, vercel.com) and get its complete design system cloned: colors, typography, border radius, spacing, shadows — all mapped to standard CSS variables and saved as globals.css. Use when the user says 'I want my site to look like X'.", {
+        url: zod_1.z.string().describe("Full URL of the site to clone the design system from (e.g. 'https://linear.app')"),
+        outputPath: zod_1.z.string().optional().describe("Absolute path where globals.css should be saved. If omitted, returns the CSS as text only."),
+        mode: zod_1.z.enum(['full', 'colors-only', 'typography-only']).optional().describe("What to extract. Default: 'full'")
+    }, async ({ url, outputPath, mode = 'full' }) => {
+        await checkSanity();
+        const lines = [];
+        const sep = '═'.repeat(50);
+        lines.push(`╔${sep}╗`);
+        lines.push(`║  🎨 DESIGN CLONE: ${new URL(url).hostname.padEnd(31)}║`);
+        lines.push(`╠${sep}╣`);
+        try {
+            // Fetch HTML
+            const htmlRes = await fetch(url, {
+                headers: { 'User-Agent': 'Mozilla/5.0 (compatible; VibeTachyon/1.0)' },
+                signal: AbortSignal.timeout(10000)
+            });
+            const html = await htmlRes.text();
+            const baseUrl = new URL(url).origin;
+            // Collect CSS sources: <style> tags + <link rel="stylesheet">
+            let allCss = '';
+            // Inline styles
+            const styleMatches = html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+            for (const m of styleMatches)
+                allCss += m[1] + '\n';
+            // External stylesheets (fetch first 3 to stay fast)
+            const linkMatches = [...html.matchAll(/<link[^>]+rel=["']stylesheet["'][^>]*href=["']([^"']+)["']/gi)];
+            const cssUrls = linkMatches.map(m => {
+                const href = m[1];
+                if (href.startsWith('http'))
+                    return href;
+                if (href.startsWith('//'))
+                    return 'https:' + href;
+                return baseUrl + (href.startsWith('/') ? href : '/' + href);
+            }).slice(0, 4);
+            await Promise.allSettled(cssUrls.map(async (cssUrl) => {
+                try {
+                    const r = await fetch(cssUrl, { signal: AbortSignal.timeout(5000) });
+                    allCss += await r.text() + '\n';
+                }
+                catch { /* skip failed CSS */ }
+            }));
+            // ── Extract design tokens ──────────────────────────────────
+            // 1. CSS Custom Properties from :root
+            const rootVars = {};
+            const rootBlocks = allCss.matchAll(/:root\s*\{([^}]+)\}/g);
+            for (const block of rootBlocks) {
+                const varMatches = block[1].matchAll(/--([\w-]+)\s*:\s*([^;]+);/g);
+                for (const v of varMatches)
+                    rootVars[v[1]] = v[2].trim();
+            }
+            // 2. Font families
+            const fontMatches = allCss.matchAll(/font-family\s*:\s*([^;}{]+)/g);
+            const fonts = [];
+            for (const m of fontMatches) {
+                const f = m[1].trim().split(',')[0].replace(/['"]/g, '').trim();
+                if (f && !fonts.includes(f) && f !== 'inherit' && f !== 'sans-serif')
+                    fonts.push(f);
+            }
+            // Also check Google Fonts links
+            const gFontMatch = html.match(/fonts\.googleapis\.com[^"']*family=([^&"']+)/);
+            if (gFontMatch) {
+                const gFont = decodeURIComponent(gFontMatch[1]).split(':')[0].replace(/\+/g, ' ');
+                if (!fonts.includes(gFont))
+                    fonts.unshift(gFont);
+            }
+            // 3. Border radius (from buttons/cards)
+            const radiusMatches = allCss.matchAll(/border-radius\s*:\s*([\d.]+(?:px|rem|em))/g);
+            const radii = [];
+            for (const m of radiusMatches) {
+                const val = parseFloat(m[1]);
+                if (val > 0 && val <= 32)
+                    radii.push(val);
+            }
+            const medianRadius = radii.length > 0
+                ? radii.sort((a, b) => a - b)[Math.floor(radii.length / 2)]
+                : 6;
+            const radiusUnit = allCss.includes('rem') ? 'rem' : 'px';
+            const radiusVal = radiusUnit === 'rem' ? `${(medianRadius / 16).toFixed(3)}rem` : `${medianRadius}px`;
+            // 4. Colors — find dominant non-white/black hex colors
+            const hexColors = [...new Set([...allCss.matchAll(/#([0-9a-fA-F]{6})\b/g)].map(m => '#' + m[1].toLowerCase()))];
+            const isNeutral = (hex) => {
+                const r = parseInt(hex.slice(1, 3), 16);
+                const g = parseInt(hex.slice(3, 5), 16);
+                const b = parseInt(hex.slice(5, 7), 16);
+                const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                return (max - min) < 30; // low saturation = neutral
+            };
+            const brandColors = hexColors.filter(h => !isNeutral(h)).slice(0, 5);
+            const darkColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r < 30 && isNeutral(h);
+            });
+            const lightColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r > 225 && isNeutral(h);
+            });
+            // 5. Detect dark/light theme from background
+            const bgColorMatch = allCss.match(/body\s*\{[^}]*background(?:-color)?\s*:\s*(#[0-9a-fA-F]{6}|[a-z]+)/);
+            const bgHex = bgColorMatch?.[1] || (darkColors[0] ?? '#ffffff');
+            const isDark = bgHex.startsWith('#') ? parseInt(bgHex.slice(1, 3), 16) < 100 : bgHex === 'black';
+            // 6. Detect shadow style
+            const hasShadow = allCss.includes('box-shadow');
+            const shadowVal = hasShadow
+                ? (isDark ? '0 1px 3px rgba(0,0,0,0.4)' : '0 1px 3px rgba(0,0,0,0.1)')
+                : 'none';
+            // ── Map to standard tokens ─────────────────────────────────
+            const primary = brandColors[0] || (isDark ? '#6366f1' : '#3b82f6');
+            const primaryFg = '#ffffff';
+            const background = isDark ? (darkColors[0] || '#0a0a0a') : (lightColors[0] || '#ffffff');
+            const foreground = isDark ? '#f4f4f5' : '#09090b';
+            const muted = isDark ? '#27272a' : '#f4f4f5';
+            const mutedFg = isDark ? '#a1a1aa' : '#71717a';
+            const border = isDark ? '#3f3f46' : '#e4e4e7';
+            const card = isDark ? (darkColors[1] || '#18181b') : '#ffffff';
+            const primaryFont = fonts[0] || (isDark ? 'Inter' : 'Inter');
+            const monoFont = fonts.find(f => f.toLowerCase().includes('mono') || f.toLowerCase().includes('code')) || 'JetBrains Mono';
+            // ── Detect visual style for Animmaster brief ──────────────
+            const hasGradients = allCss.includes('linear-gradient') || allCss.includes('radial-gradient');
+            const hasBlur = allCss.includes('backdrop-filter') || allCss.includes('blur(');
+            const visualTone = isDark && hasBlur ? 'glassmorphism' :
+                isDark && hasGradients ? 'dark-gradient' :
+                    isDark ? 'dark-minimal' :
+                        hasGradients ? 'light-gradient' : 'light-minimal';
+            // ── Use existing root vars if abundant ────────────────────
+            const hasRichVars = Object.keys(rootVars).length > 8;
+            // ── Generate globals.css ───────────────────────────────────
+            const cssOutput = [
+                `/* ─────────────────────────────────────────────────────`,
+                ` * Design System cloned from: ${new URL(url).hostname}`,
+                ` * Generated by VibeTachyon vibe_clone_design`,
+                ` * Visual tone: ${visualTone}`,
+                ` * ──────────────────────────────────────────────────── */`,
+                '',
+                hasRichVars
+                    ? `/* Original CSS variables preserved from source */\n:root {\n${Object.entries(rootVars).slice(0, 30).map(([k, v]) => `  --${k}: ${v};`).join('\n')}\n}`
+                    : '',
+                '',
+                `/* VibeTachyon Standard Tokens */`,
+                `:root {`,
+                `  /* Colors */`,
+                `  --background:    ${background};`,
+                `  --foreground:    ${foreground};`,
+                `  --card:          ${card};`,
+                `  --card-fg:       ${foreground};`,
+                `  --primary:       ${primary};`,
+                `  --primary-fg:    ${primaryFg};`,
+                `  --muted:         ${muted};`,
+                `  --muted-fg:      ${mutedFg};`,
+                `  --border:        ${border};`,
+                `  --input:         ${border};`,
+                `  --ring:          ${primary};`,
+                ...(brandColors.slice(1).map((c, i) => `  --accent-${i + 1}:     ${c};`)),
+                '',
+                `  /* Typography */`,
+                `  --font-sans:     '${primaryFont}', system-ui, sans-serif;`,
+                `  --font-mono:     '${monoFont}', monospace;`,
+                '',
+                `  /* Shape */`,
+                `  --radius:        ${radiusVal};`,
+                `  --radius-sm:     calc(var(--radius) * 0.5);`,
+                `  --radius-lg:     calc(var(--radius) * 1.5);`,
+                '',
+                `  /* Shadows */`,
+                `  --shadow-sm:     ${shadowVal};`,
+                `  --shadow:        ${shadowVal.replace('3px', '8px').replace('0.1', '0.12').replace('0.4', '0.5')};`,
+                `}`,
+                '',
+                isDark ? [
+                    `.dark {`,
+                    `  color-scheme: dark;`,
+                    `}`,
+                ].join('\n') : '',
+            ].filter(Boolean).join('\n');
+            // Save to file if requested
+            if (outputPath) {
+                await fs_extra_1.default.ensureDir(path_1.default.dirname(outputPath));
+                await fs_extra_1.default.writeFile(outputPath, cssOutput, 'utf-8');
+            }
+            // Build briefing output
+            lines.push(`  Theme    : ${isDark ? '🌑 Dark' : '☀️  Light'} (${visualTone})`);
+            lines.push(`  Primary  : ${primary}`);
+            lines.push(`  BG       : ${background}`);
+            lines.push(`  FG       : ${foreground}`);
+            lines.push(`  Border   : ${border}`);
+            lines.push(`  Radius   : ${radiusVal}`);
+            lines.push(`  Font     : ${primaryFont}`);
+            if (fonts[1])
+                lines.push(`  Font 2   : ${fonts[1]}`);
+            if (brandColors.length > 1)
+                lines.push(`  Accents  : ${brandColors.slice(1, 4).join(', ')}`);
+            lines.push(`  Vars src : ${hasRichVars ? `✅ ${Object.keys(rootVars).length} CSS vars found` : '⚙️  Generated from computed styles'}`);
+            lines.push(`╠${sep}╣`);
+            lines.push(`  Animmaster tone: ${visualTone}`);
+            lines.push(`  Use in brief  : visualTone: "${visualTone}"`);
+            lines.push(`╠${sep}╣`);
+            if (outputPath) {
+                lines.push(`  ✅ globals.css saved to:`);
+                lines.push(`     ${outputPath}`);
+            }
+            else {
+                lines.push(`  💡 Pass outputPath to save globals.css automatically`);
+            }
+            lines.push(`╚${sep}╝`);
+            const fullOutput = lines.join('\n') + '\n\n' + '```css\n' + cssOutput + '\n```';
+            return { content: [{ type: "text", text: fullOutput }] };
+        }
+        catch (err) {
+            lines.push(`  ❌ Erro: ${err.message}`);
+            lines.push(`  Verifique se a URL está acessível e tente novamente.`);
+            lines.push(`╚${sep}╝`);
+            return { content: [{ type: "text", text: lines.join('\n') }] };
+        }
+    });
     server.tool("vibe_enforce_style", "Passive audit tool that scan a code snippet and automatically patches 'off-theme' Tailwind classes (like bg-blue-500) with project-specific design tokens (--primary, --background) extracted from the CSS.", {
         code: zod_1.z.string().describe("The TSX/JSX code snippet to audit and fix."),
         cssFilePath: zod_1.z.string().describe("Absolute path to the user's globals.css.")

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vibetachyon",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "VibeCodes MCP CLI Installer and Server",
     "main": "dist/index.js",
     "bin": {