vibetachyon 2.0.0 → 2.1.0

package/dist/mcp-server.js

@@ -178,6 +178,12 @@ const STYLE_PALETTES = {
 };
 // --- Changelog (per version) ---
 const CHANGELOG = {
+    '2.1.0': [
+        'Fix: vibe_compose_landing_page detecta framework (Next.js/Vite) automaticamente',
+        'Fix: output sempre .tsx React, nunca index.html',
+        'Instruções explícitas de conversão HTML→JSX (class→className, useEffect)',
+        'Detecta src/app vs app para outputTarget correto',
+    ],
     '2.0.0': [
         '8 presets visuais reais: linear, vercel, stripe, bold-dark, agency...',
         'Paletas CSS aplicadas automaticamente — sem mais neon hardcoded',
@@ -1709,7 +1715,7 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Compose Landing Page
-    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer). ALWAYS call vibe_design_brief first — this tool reads the saved brief to apply the correct color palette.", {
+    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer). ALWAYS call vibe_design_brief first — this tool reads the saved brief to apply the correct color palette. OUTPUT: Always generates Next.js TSX React components (never index.html). For Next.js projects, saves to src/app/page.tsx or app/page.tsx. Convert all HTML templates to JSX (class→className, style={{}} etc).", {
         themeOrIndustry: zod_1.z.string().describe("The theme, industry, or style of the page (e.g., 'SaaS Finance', 'Dental Clinic', 'Developer Tool')"),
         projectDir: zod_1.z.string().optional().describe("Absolute path to the project root. Used to read the design brief.")
     }, async ({ themeOrIndustry, projectDir }) => {
@@ -1722,6 +1728,36 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             let briefAvoid = [];
             const cwd = projectDir || process.cwd();
             const root = await findProjectRoot(cwd);
+            // Detect framework for output instructions
+            let framework = 'unknown';
+            let outputTarget = '';
+            const pkgPath = path_1.default.join(root, 'package.json');
+            if (await fs_extra_1.default.pathExists(pkgPath)) {
+                try {
+                    const pkg = await fs_extra_1.default.readJson(pkgPath);
+                    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+                    if (deps['next']) {
+                        framework = 'nextjs';
+                        const hasAppSrc = await fs_extra_1.default.pathExists(path_1.default.join(root, 'src', 'app'));
+                        const hasApp = await fs_extra_1.default.pathExists(path_1.default.join(root, 'app'));
+                        if (hasAppSrc)
+                            outputTarget = 'src/app/page.tsx';
+                        else if (hasApp)
+                            outputTarget = 'app/page.tsx';
+                        else
+                            outputTarget = 'src/app/page.tsx';
+                    }
+                    else if (deps['vite'] || deps['react']) {
+                        framework = 'vite';
+                        outputTarget = 'src/App.tsx';
+                    }
+                    else if (deps['nuxt']) {
+                        framework = 'nuxt';
+                        outputTarget = 'pages/index.vue';
+                    }
+                }
+                catch { /* ignore */ }
+            }
             const briefPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
             if (await fs_extra_1.default.pathExists(briefPath)) {
                 try {
@@ -1753,12 +1789,35 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             ];
             let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n`;
             combinedPage += `Style: ${briefStyle} | Tone: ${briefTone}\n\n`;
-            combinedPage += `⚠️ MANDATORY COLOR RULES — INJECT THIS PALETTE FIRST IN <style>:\n\`\`\`css\n${paletteCSS}\n\`\`\`\n\n`;
+            // Framework-aware output instructions
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
+            combinedPage += `📁 OUTPUT TARGET: ${outputTarget || 'src/app/page.tsx'}\n`;
+            combinedPage += `🚨 NEVER create index.html — this is a ${framework === 'nextjs' ? 'Next.js' : framework === 'vite' ? 'React/Vite' : 'React'} project\n`;
+            combinedPage += `🚨 ALL output MUST be .tsx React components, NOT plain HTML files\n`;
+            if (framework === 'nextjs') {
+                combinedPage += `\n📋 NEXTJS TSX RULES:\n`;
+                combinedPage += `  • Convert all HTML → JSX: class→className, for→htmlFor, style={{}}\n`;
+                combinedPage += `  • Add "use client" directive at top if using animations/events\n`;
+                combinedPage += `  • Inline scripts → useEffect(() => { /* JS here */ }, [])\n`;
+                combinedPage += `  • External CDN scripts → use next/script: <Script src="..." strategy="afterInteractive" />\n`;
+                combinedPage += `  • Self-closing tags: <img />, <br />, <input />\n`;
+                combinedPage += `  • Create each section as a separate component in src/components/\n`;
+                combinedPage += `  • Page file: export default function Page() { return (<main>...</main>) }\n`;
+            }
+            else if (framework === 'vite') {
+                combinedPage += `\n📋 VITE/REACT TSX RULES:\n`;
+                combinedPage += `  • Convert HTML → JSX: class→className, for→htmlFor\n`;
+                combinedPage += `  • Inline scripts → useEffect with cleanup\n`;
+                combinedPage += `  • Add React imports at top\n`;
+            }
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n`;
+            combinedPage += `⚠️ MANDATORY COLOR RULES — INJECT THIS PALETTE IN globals.css:\n\`\`\`css\n${paletteCSS}\n\`\`\`\n\n`;
             combinedPage += `CRITICAL: Use ONLY var(--background), var(--primary), var(--foreground), var(--border), var(--card) etc.\n`;
             combinedPage += `NEVER hardcode hex colors. NEVER use purple/neon unless --primary IS purple in the palette above.\n`;
             if (briefAvoid.length > 0)
                 combinedPage += `AVOID: ${briefAvoid.join(', ')}\n`;
-            combinedPage += `\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n\n`;
+            combinedPage += `\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n`;
+            combinedPage += `Convert ALL HTML templates below to JSX. Initialize JS in useEffect hooks.\n\n`;
             const allComponents = [];
             for (const { section, query, useCase } of sectionMap) {
                 const { data } = await supabase
@@ -1793,7 +1852,13 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             }
             const totalBudget = allComponents.reduce((sum, c) => sum + (c.animation_budget || 0), 0);
             combinedPage += `\n---\nTotal animation budget: ${totalBudget}/30 | Components: ${allComponents.length}\n`;
-            combinedPage += `\nINSTRUCTION FOR AI: Initialize scripts in the order listed above (preloader → cursor → header → effects).`;
+            combinedPage += `\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
+            combinedPage += `FINAL INSTRUCTION:\n`;
+            combinedPage += `1. Initialize components in init_order sequence (preloader → cursor → header → effects)\n`;
+            combinedPage += `2. Save the page to: ${outputTarget || 'src/app/page.tsx'}\n`;
+            combinedPage += `3. ${framework === 'nextjs' ? 'Add "use client" at top, convert all HTML to JSX (class→className)' : 'Convert HTML to JSX React components'}\n`;
+            combinedPage += `4. NEVER create index.html — always .tsx files only\n`;
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
             return { content: [{ type: "text", text: combinedPage }] };
         }
         catch (err) {

package/package.json

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