vibetachyon 1.5.8 → 1.6.0

package/dist/mcp-server.js

@@ -173,37 +173,46 @@ async function validateTokenAtStartup() {
 async function startMcpServer() {
     await validateTokenAtStartup();
     const server = new mcp_js_1.McpServer({
-        name: "VibeTachyon MCP",
-        version: "1.5.0"
+        name: "VibeTachyon MCP — Animmaster Engine",
+        version: "1.6.0"
     });
     /**
-     * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer
+     * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer (Animmaster Engine)
      *
-     * You are a Senior Frontend Designer with 10 years of experience building SaaS products.
-     * You have strong opinions and you enforce them. You do NOT generate generic code.
+     * You are a Senior Frontend Designer powered by the Animmaster component system.
+     * Animmaster is a curated set of 42 premium vanilla JS/SCSS/GSAP components that work
+     * as a unified system — not as isolated snippets. You do NOT generate generic code.
      *
      * YOUR MANDATORY WORKFLOW — follow this EXACT sequence for every page/section request:
-     * 1. vibe_project_dna      — read the project first, always
-     * 2. vibe_design_brief     — if no brief exists, ASK the user before touching any code
+     * 1. vibe_project_dna       — read the project first, always
+     * 2. vibe_design_brief      — if no brief exists, ASK the user before touching any code
      * 3. vibe_read_design_brief — read active brief before each new section
-     * 4. vibe_search_snippets  — search with use_case and style filters from the brief
-     * 5. Generate code         — only after steps 1-4 are complete
+     * 4. vibe_search_snippets   — search Animmaster components by use_case and visual_tone
+     * 5. vibe_get_component     — get the complete bundle (JS+HTML+SCSS) for chosen components
+     * 6. Generate code          — only after steps 1-5 are complete
+     *
+     * ANIMMASTER SYSTEM RULES:
+     * - Components must be initialized in init_order sequence (0→6): preloader first, then cursor/header, then effects
+     * - Always respect compatible_with: do NOT combine components that aren't listed as compatible
+     * - animation_budget is 1-5: total page budget should not exceed 10. Hero can have budget 4-5, rest 1-2.
+     * - Each component comes with standalone JS (no build system needed), HTML template, and SCSS
+     * - CDN deps: GSAP (gsap.min.js), SplitType, Swiper, Chart.js — load only what's needed
+     * - data-attributes activate Animmaster components: always include them in the HTML
      *
      * YOUR NON-NEGOTIABLE RULES:
      * - NEVER mix more than 2 animation styles on a single page
      * - NEVER use more than 3 brand colors (primary, secondary, accent)
-     * - NEVER hardcode hex/rgb — always use CSS variables or Tailwind semantic classes
+     * - NEVER hardcode hex/rgb — always use CSS variables
      * - NEVER generate a section without first checking the active design brief
      * - ALWAYS explain WHY you chose each component (1 sentence per component)
-     * - ALWAYS build sections in the order defined in the brief
+     * - ALWAYS build sections in init_order (preloader → cursor → header → effects)
      * - ALWAYS reject components that violate the brief's avoid list
-     * - If a component from vibe_search_snippets conflicts with the brief, search again with different terms
      *
      * VISUAL COHERENCE RULES:
      * - Dark brief → all sections dark. No random light cards in a dark page.
-     * - Minimal brief → no particle effects, no glassmorphism overuse, no rainbow gradients
-     * - Aceternity brief → immersive, full-viewport, animated — but still coherent
-     * - Max 1 heavy-animation section per page (usually the hero). Rest = subtle or static.
+     * - Minimal brief → animation_budget max 2 per section, no heavy GSAP timelines
+     * - Immersive brief → use parallax + mouse tracking + splittype for full effect
+     * - Max 1 heavy-animation section per page (hero). Rest = subtle or static.
      *
      * CONVERSION RULES (SaaS pages):
      * - Section order: hero → social-proof → features → how-it-works → pricing → faq → cta
@@ -211,17 +220,17 @@ async function startMcpServer() {
      * - Social proof (logos/testimonials) before pricing — builds trust first
      * - Every section must have ONE clear action or message. Not two.
      */
-    // Tool: Searching Snippets
-    server.tool("vibe_search_snippets", "Search for UI components in the VibeCodes repository. Automatically loads the active design brief to filter components by style, use_case and complexity. Always call vibe_project_dna and vibe_design_brief before this tool.", {
-        query: zod_1.z.string().describe("Search query for the UI component (e.g. 'hero section dark', 'animated button')"),
+    // Tool: Searching Snippets (Animmaster Engine)
+    server.tool("vibe_search_snippets", "Search for Animmaster UI components. Returns standalone JS + HTML + SCSS bundles ready to use. Automatically loads the active design brief to filter by visual_tone and use_case. Always call vibe_project_dna and vibe_design_brief before this tool.", {
+        query: zod_1.z.string().describe("Search query for the UI component (e.g. 'hero section', 'text animation', 'parallax scroll')"),
         limit: zod_1.z.number().optional().describe("Max number of results to return (default: 5)"),
         projectDir: zod_1.z.string().optional().describe("Absolute path to the user's project root."),
-        useCaseFilter: zod_1.z.string().optional().describe("Filter by use case: 'hero', 'cta', 'feature-section', 'navigation', 'footer', 'pricing', 'social-proof', 'background-effect', 'text-effect', 'modal', 'form'"),
-        styleFilter: zod_1.z.array(zod_1.z.string()).optional().describe("Filter by style tags: 'dark', 'light', 'animated', 'glassmorphism', 'gradient', 'minimal', 'modern'"),
-        complexityFilter: zod_1.z.enum(['simple', 'medium', 'complex']).optional().describe("Filter by code complexity")
+        useCaseFilter: zod_1.z.string().optional().describe("Filter by use case: 'hero', 'cta', 'feature-section', 'navigation', 'footer', 'pricing', 'social-proof', 'background-effect', 'text-effect', 'modal', 'form', 'preloader', 'cursor'"),
+        styleFilter: zod_1.z.array(zod_1.z.string()).optional().describe("Filter by visual tone: 'dark', 'light', 'animated', 'minimal', 'modern', 'immersive'"),
+        complexityFilter: zod_1.z.enum(['simple', 'medium', 'complex']).optional().describe("Filter by animation budget: simple=1-2, medium=3, complex=4-5")
     }, async ({ query, limit = 5, projectDir, useCaseFilter, styleFilter, complexityFilter }) => {
         await checkSanity();
-        console.error(`[VibeTachyon] Searching DB for: ${query}`);
+        console.error(`[VibeTachyon] Searching Animmaster DB for: ${query}`);
         const rawRoot = projectDir || process.cwd();
         const root = await findProjectRoot(rawRoot);
         // Auto-load design brief to enrich filters
@@ -259,107 +268,191 @@ async function startMcpServer() {
                 resolvedStyleFilter = derivedTags;
         }
         try {
-            const rpcParams = {
-                search_query: query,
-                max_limit: limit
-            };
-            if (resolvedUseCaseFilter)
-                rpcParams.filter_use_case = resolvedUseCaseFilter;
-            if (resolvedStyleFilter && resolvedStyleFilter.length > 0)
-                rpcParams.filter_style_tags = resolvedStyleFilter;
-            if (resolvedComplexity)
-                rpcParams.filter_complexity = resolvedComplexity;
-            const { data: allResults, error } = await supabase
-                .rpc('search_vibecodes_mcp', rpcParams);
+            // Build Animmaster query
+            let queryBuilder = supabase
+                .from('animmaster_components')
+                .select('name, category, description, html_template, js_standalone, scss_styles, npm_deps, core_deps, init_order, compatible_with, animation_budget, visual_tone, use_cases, data_attributes')
+                .eq('is_active', true);
+            // Text search across name and description
+            if (query) {
+                queryBuilder = queryBuilder.or(`name.ilike.%${query}%,description.ilike.%${query}%`);
+            }
+            // Use case filter
+            if (resolvedUseCaseFilter) {
+                queryBuilder = queryBuilder.contains('use_cases', [resolvedUseCaseFilter]);
+            }
+            // Visual tone / style filter
+            if (resolvedStyleFilter && resolvedStyleFilter.length > 0) {
+                queryBuilder = queryBuilder.overlaps('visual_tone', resolvedStyleFilter);
+            }
+            // Animation budget filter (complexity mapping)
+            if (resolvedComplexity) {
+                if (resolvedComplexity === 'simple')
+                    queryBuilder = queryBuilder.lte('animation_budget', 2);
+                else if (resolvedComplexity === 'medium')
+                    queryBuilder = queryBuilder.eq('animation_budget', 3);
+                else if (resolvedComplexity === 'complex')
+                    queryBuilder = queryBuilder.gte('animation_budget', 4);
+            }
+            queryBuilder = queryBuilder.order('animation_budget').limit(limit);
+            const { data: allResults, error } = await queryBuilder;
             if (error) {
-                console.error("[VibeTachyon] Supabase RPC Error:", error);
+                console.error("[VibeTachyon] Supabase Error:", error);
                 throw error;
             }
-            // If filtered search returns nothing, fallback to unfiltered
+            // If filtered search returns nothing, fallback to unfiltered text search
             let results = allResults;
             let fallbackNote = '';
             if ((!results || results.length === 0) && (resolvedStyleFilter || resolvedUseCaseFilter)) {
                 console.error(`[VibeTachyon] No filtered results, falling back to unfiltered search`);
-                const { data: fallback } = await supabase.rpc('search_vibecodes_mcp', {
-                    search_query: query,
-                    max_limit: limit
-                });
-                results = fallback;
-                fallbackNote = `\n⚠️ No components matched the style filters. Showing best semantic matches instead — review fit with design brief.\n`;
+                const { data: fallback } = await supabase
+                    .from('animmaster_components')
+                    .select('name, category, description, html_template, js_standalone, scss_styles, npm_deps, core_deps, init_order, compatible_with, animation_budget, visual_tone, use_cases, data_attributes')
+                    .eq('is_active', true)
+                    .or(`name.ilike.%${query}%,description.ilike.%${query}%`)
+                    .order('animation_budget')
+                    .limit(limit);
+                results = fallback ?? [];
+                fallbackNote = `\n⚠️ No components matched the style/use-case filters. Showing best text matches instead — review fit with design brief.\n`;
             }
             if (!results || results.length === 0) {
                 return {
-                    content: [{ type: "text", text: `No VibeCodes components found for "${query}". Try different search terms.` }]
+                    content: [{ type: "text", text: `No Animmaster components found for "${query}". Try terms like: parallax, marquee, cursor, preloader, splittype, ripple, accordion, digcounter, slider, gallery.` }]
                 };
             }
             // Coherence check — flag components that might break brief rules
             const briefAvoid = brief?.rules?.mustAvoid || [];
             const formattedResults = results.map((item) => {
-                const srcInfo = item.source_table === 'Aceternity UI' ? '[⭐ ACETERNITY]'
-                    : item.source_table === 'Magic UI' ? '[✨ MAGIC UI]'
-                        : item.source_table === '21st.dev' ? '[🌐 21ST.DEV]'
-                            : `[📦 ${item.source_table?.toUpperCase() || 'VIBECODES'}]`;
-                const styleLine = item.style_tags?.length
-                    ? `Style: ${item.style_tags.join(', ')}`
-                    : '';
-                const useCaseLine = item.use_case?.length
-                    ? `Use case: ${item.use_case.join(', ')}`
-                    : '';
-                const complexityLine = item.complexity ? `Complexity: ${item.complexity}` : '';
+                const budgetLabel = item.animation_budget <= 2 ? 'subtle' : item.animation_budget === 3 ? 'medium' : 'heavy';
+                const toneLine = item.visual_tone?.length ? `Tone: ${item.visual_tone.join(', ')}` : '';
+                const useCaseLine = item.use_cases?.length ? `Use cases: ${item.use_cases.join(', ')}` : '';
+                const budgetLine = `Animation budget: ${item.animation_budget}/5 (${budgetLabel})`;
+                const initLine = `Init order: ${item.init_order}`;
+                const compatLine = item.compatible_with?.length ? `Compatible with: ${item.compatible_with.join(', ')}` : '';
+                const depsLine = item.npm_deps?.length ? `CDN deps: ${item.npm_deps.join(', ')}` : '';
                 // Coherence warning
-                const codeStr = (item.code || '').toLowerCase();
-                const violations = briefAvoid.filter((rule) => {
-                    const ruleKey = rule.toLowerCase();
-                    return codeStr.includes(ruleKey) || (item.title || '').toLowerCase().includes(ruleKey);
-                });
+                const violations = briefAvoid.filter((rule) => (item.name || '').toLowerCase().includes(rule.toLowerCase()) ||
+                    (item.description || '').toLowerCase().includes(rule.toLowerCase()));
                 const coherenceNote = violations.length > 0
-                    ? `\n🚨 BRIEF CONFLICT: This component may contain "${violations.join(', ')}" which is in the avoid list. Review before using.\n`
+                    ? `\n🚨 BRIEF CONFLICT: This component may conflict with "${violations.join(', ')}" in the avoid list. Review before using.\n`
                     : '';
-                const minifiedCode = minifySnippet(item.code);
-                return `### ${item.title} ${srcInfo}\n${[styleLine, useCaseLine, complexityLine].filter(Boolean).join(' | ')}\n${item.description || ''}${coherenceNote}\n\`\`\`tsx\n${minifiedCode}\n\`\`\``;
+                const minifiedJs = minifySnippet(item.js_standalone || '');
+                const htmlSnippet = (item.html_template || '').split('\n').slice(0, 15).join('\n');
+                const scssSnippet = (item.scss_styles || '').split('\n').slice(0, 10).join('\n');
+                return [
+                    `### ${item.name} [🎬 ANIMMASTER | ${item.category?.toUpperCase()}]`,
+                    [toneLine, useCaseLine, budgetLine, initLine].filter(Boolean).join(' | '),
+                    item.description || '',
+                    compatLine,
+                    depsLine,
+                    coherenceNote,
+                    `**HTML template:**\n\`\`\`html\n${htmlSnippet}\n\`\`\``,
+                    `**JS standalone:**\n\`\`\`js\n${minifiedJs}\n\`\`\``,
+                    scssSnippet ? `**SCSS (preview):**\n\`\`\`scss\n${scssSnippet}\n...\n\`\`\`` : '',
+                    `→ Call vibe_get_component("${item.name}") for the complete SCSS and full metadata.`
+                ].filter(Boolean).join('\n');
             }).join('\n\n---\n\n');
-            // Framework guardrails
-            let frameworkContext = "";
-            try {
-                const pkgPath = path_1.default.join(root, 'package.json');
-                if (await fs_extra_1.default.pathExists(pkgPath)) {
-                    const pkg = await fs_extra_1.default.readJson(pkgPath);
-                    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-                    const isVite = !!deps['vite'];
-                    const isNext = !!deps['next'];
-                    frameworkContext += `\n[FRAMEWORK: ${isNext ? 'Next.js' : isVite ? 'Vite/React' : 'React'}]\n`;
-                    if (isVite)
-                        frameworkContext += `- Remove "use client", replace next/image with <img>, replace next/link with <a>\n`;
-                    if (isNext)
-                        frameworkContext += `- Add "use client" if component uses hooks or event handlers\n`;
-                }
-            }
-            catch { /* silent */ }
-            // Peer dep audit
-            const standardDeps = { "framer-motion": "11.0.0", "lucide-react": "0.400.0" };
-            const audit = await auditPeerDeps(root, standardDeps);
-            const auditPrefix = audit.warnings.length > 0
-                ? `⚠️ [VIBESHIELD]\n${audit.warnings.join('\n')}\n\n`
-                : '';
             const briefSummary = brief
                 ? `[Active Brief: ${brief.referenceStyle} | ${brief.rules?.visualTone} | max ${brief.rules?.maxAnimationTypes} animations]\n`
                 : '';
             return {
                 content: [{
                         type: "text",
-                        text: `${auditPrefix}${briefWarning}${fallbackNote}${briefSummary}` +
-                            `🧠 VibeTachyon found ${results.length} components for "${query}"` +
-                            (resolvedStyleFilter ? ` [style: ${resolvedStyleFilter.join(', ')}]` : '') +
+                        text: `${briefWarning}${fallbackNote}${briefSummary}` +
+                            `🎬 VibeTachyon Animmaster found ${results.length} components for "${query}"` +
+                            (resolvedStyleFilter ? ` [tone: ${resolvedStyleFilter.join(', ')}]` : '') +
                             (resolvedUseCaseFilter ? ` [use: ${resolvedUseCaseFilter}]` : '') +
-                            `:\n\n${formattedResults}\n\n${frameworkContext}` +
-                            `\nINSTRUCTION FOR AI: Cross-check each component against the active design brief before using. Reject any that violate the brief rules.`
+                            `:\n\n${formattedResults}\n\n` +
+                            `INSTRUCTION FOR AI:\n` +
+                            `- Initialize components in init_order sequence (lower = first)\n` +
+                            `- Check compatible_with before combining components on one page\n` +
+                            `- Use vibe_get_component(name) to get the complete SCSS bundle\n` +
+                            `- Respect animation_budget: page total should not exceed 10`
                     }]
             };
         }
         catch (error) {
             console.error("[VibeTachyon] Search Error:", error);
             return {
-                content: [{ type: "text", text: `Error searching VibeCodes repository: ${error instanceof Error ? error.message : String(error)}` }]
+                content: [{ type: "text", text: `Error searching Animmaster repository: ${error instanceof Error ? error.message : String(error)}` }]
+            };
+        }
+    });
+    // Tool: Get Complete Animmaster Component Bundle
+    server.tool("vibe_get_component", "Fetch the complete Animmaster component bundle by name: full JS (standalone), complete SCSS, HTML template, CDN deps list, init order, and compatible components. Call this after vibe_search_snippets to get the full implementation code.", {
+        name: zod_1.z.string().describe("Animmaster component name (e.g. 'parallax', 'cursor', 'marquee', 'splittype', 'preloader', 'ripple')")
+    }, async ({ name }) => {
+        await checkSanity();
+        try {
+            const { data, error } = await supabase
+                .from('animmaster_components')
+                .select('name, category, description, html_template, js_standalone, scss_styles, npm_deps, core_deps, init_order, init_trigger, compatible_with, incompatible_with, animation_budget, visual_tone, use_cases, data_attributes')
+                .eq('name', name)
+                .single();
+            if (error || !data) {
+                // Try partial match
+                const { data: partial } = await supabase
+                    .from('animmaster_components')
+                    .select('name, category, description, html_template, js_standalone, scss_styles, npm_deps, core_deps, init_order, compatible_with, animation_budget, visual_tone, use_cases')
+                    .ilike('name', `%${name}%`)
+                    .eq('is_active', true)
+                    .limit(1)
+                    .single();
+                if (!partial) {
+                    return { content: [{ type: "text", text: `Component "${name}" not found in Animmaster. Use vibe_search_snippets to find available components.` }] };
+                }
+                return buildComponentResponse(partial);
+            }
+            return buildComponentResponse(data);
+        }
+        catch (err) {
+            return { content: [{ type: "text", text: `Error fetching component: ${err}` }] };
+        }
+        function buildComponentResponse(item) {
+            const budgetLabel = item.animation_budget <= 2 ? 'subtle' : item.animation_budget === 3 ? 'medium' : 'heavy';
+            const dataAttrsStr = item.data_attributes
+                ? Object.entries(item.data_attributes).map(([k, v]) => `  ${k}: ${JSON.stringify(v)}`).join('\n')
+                : 'none';
+            return {
+                content: [{
+                        type: "text",
+                        text: [
+                            `# ${item.name} [🎬 ANIMMASTER | ${item.category?.toUpperCase()}]`,
+                            `**Description:** ${item.description || 'No description'}`,
+                            `**Animation budget:** ${item.animation_budget}/5 (${budgetLabel})`,
+                            `**Init order:** ${item.init_order} (initialize in this sequence on page)`,
+                            `**Init trigger:** ${item.init_trigger || 'load'}`,
+                            `**Visual tone:** ${item.visual_tone?.join(', ') || 'universal'}`,
+                            `**Use cases:** ${item.use_cases?.join(', ') || 'general'}`,
+                            `**CDN dependencies:** ${item.npm_deps?.length ? item.npm_deps.join(', ') : 'none'}`,
+                            `**Core deps (Animmaster):** ${item.core_deps?.length ? item.core_deps.join(', ') : 'none'}`,
+                            `**Compatible with:** ${item.compatible_with?.length ? item.compatible_with.join(', ') : 'all'}`,
+                            `**Incompatible with:** ${item.incompatible_with?.length ? item.incompatible_with.join(', ') : 'none'}`,
+                            `**Data attributes:**\n${dataAttrsStr}`,
+                            '',
+                            `## HTML Template`,
+                            `\`\`\`html`,
+                            item.html_template || '<!-- No HTML template -->',
+                            `\`\`\``,
+                            '',
+                            `## JS Standalone (no imports needed)`,
+                            `\`\`\`js`,
+                            item.js_standalone || '// No standalone JS',
+                            `\`\`\``,
+                            '',
+                            `## SCSS Styles`,
+                            `\`\`\`scss`,
+                            item.scss_styles || '/* No SCSS */',
+                            `\`\`\``,
+                            '',
+                            `INSTRUCTION FOR AI:`,
+                            `- Include the HTML template in the page structure`,
+                            `- Add the JS standalone code in a <script> tag (after DOM ready)`,
+                            `- Include the SCSS/CSS in your stylesheet`,
+                            `- Install CDN deps: ${item.npm_deps?.join(', ') || 'none required'}`,
+                            `- This component initializes at order ${item.init_order} — load after lower-order components`
+                        ].join('\n')
+                    }]
             };
         }
     });
@@ -981,21 +1074,28 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         await checkSanity();
         try {
             let allResults = [];
-            for (const query of componentNames) {
-                const { data, error } = await supabase
-                    .rpc('search_vibecodes_mcp', { search_query: query, max_limit: 1 });
-                if (!error && data && data.length > 0) {
+            for (const compName of componentNames) {
+                const { data } = await supabase
+                    .from('animmaster_components')
+                    .select('name, category, description, html_template, js_standalone, scss_styles, npm_deps, init_order, compatible_with, animation_budget')
+                    .or(`name.eq.${compName},name.ilike.%${compName}%`)
+                    .eq('is_active', true)
+                    .limit(1);
+                if (data && data.length > 0) {
                     allResults.push(data[0]);
                 }
             }
             if (allResults.length === 0) {
-                return { content: [{ type: "text", text: `Could not find any of the requested components in the VibeCodes registry.` }] };
+                return { content: [{ type: "text", text: `Could not find any of the requested components in the Animmaster registry.` }] };
             }
+            // Sort by init_order so they're listed in initialization sequence
+            allResults.sort((a, b) => (a.init_order || 5) - (b.init_order || 5));
             const formattedResults = allResults.map((item) => {
-                return `### Sub-Component: ${item.title}\n\`\`\`tsx\n${item.code}\n\`\`\``;
+                const minifiedJs = minifySnippet(item.js_standalone || '');
+                return `### ${item.name} [🎬 ANIMMASTER | init_order: ${item.init_order}]\nCategory: ${item.category} | Budget: ${item.animation_budget}/5\nDeps: ${item.npm_deps?.join(', ') || 'none'}\n\n**HTML:**\n\`\`\`html\n${item.html_template || ''}\n\`\`\`\n\n**JS:**\n\`\`\`js\n${minifiedJs}\n\`\`\``;
             }).join('\n\n---\n\n');
             return {
-                content: [{ type: "text", text: `[DEPENDENCY MATRIX RESOLVED]\n\nINSTRUCTION FOR AI: The following sub-components are required. Create their files in the appropriate UI folder before integrating the main component.\n\n${formattedResults}` }]
+                content: [{ type: "text", text: `[ANIMMASTER BUNDLE RESOLVED — ${allResults.length} components, sorted by init_order]\n\nINSTRUCTION FOR AI: Initialize these components in the order listed (lowest init_order first).\n\n${formattedResults}` }]
             };
         }
         catch (err) {
@@ -1032,16 +1132,51 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
     }, async ({ themeOrIndustry }) => {
         await checkSanity();
         try {
-            const sections = ['navbar', 'hero section', 'features grid', 'pricing table', 'footer'];
-            let combinedPage = `[VIBEPAGE COMPOSER: ${themeOrIndustry}]\n\nINSTRUCTION FOR AI: Assemble a complete page using the following 5 elite components.\n\n`;
-            for (const section of sections) {
-                const query = `${themeOrIndustry} ${section}`;
-                const { data, error } = await supabase
-                    .rpc('search_vibecodes_mcp', { search_query: query, max_limit: 1 });
-                if (!error && data && data.length > 0) {
-                    combinedPage += `### === ${section.toUpperCase()} ===\n**Title:** ${data[0].title}\n\`\`\`tsx\n${data[0].code}\n\`\`\`\n\n`;
+            // Map sections to Animmaster use cases and search terms
+            const sectionMap = [
+                { section: 'preloader', query: 'preloader', useCase: 'preloader' },
+                { section: 'cursor', query: 'cursor', useCase: 'cursor' },
+                { section: 'navbar', query: 'header navigation', useCase: 'navigation' },
+                { section: 'hero', query: `hero ${themeOrIndustry}`, useCase: 'hero' },
+                { section: 'features', query: 'features section', useCase: 'feature-section' },
+                { section: 'footer', query: 'footer', useCase: 'footer' }
+            ];
+            let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n\n`;
+            const allComponents = [];
+            for (const { section, query, useCase } of sectionMap) {
+                const { data } = await supabase
+                    .from('animmaster_components')
+                    .select('name, category, description, html_template, js_standalone, npm_deps, init_order, animation_budget, compatible_with')
+                    .eq('is_active', true)
+                    .contains('use_cases', [useCase])
+                    .limit(1);
+                if (data && data.length > 0) {
+                    allComponents.push({ section, ...data[0] });
+                }
+                else {
+                    // Fallback: text search
+                    const { data: fallback } = await supabase
+                        .from('animmaster_components')
+                        .select('name, category, description, html_template, js_standalone, npm_deps, init_order, animation_budget, compatible_with')
+                        .eq('is_active', true)
+                        .or(`name.ilike.%${query}%,description.ilike.%${query}%`)
+                        .limit(1);
+                    if (fallback && fallback.length > 0)
+                        allComponents.push({ section, ...fallback[0] });
                 }
             }
+            // Sort by init_order
+            allComponents.sort((a, b) => (a.init_order || 5) - (b.init_order || 5));
+            for (const item of allComponents) {
+                const minifiedJs = minifySnippet(item.js_standalone || '');
+                combinedPage += `### === ${item.section.toUpperCase()} → ${item.name} [init_order: ${item.init_order}] ===\n`;
+                combinedPage += `Budget: ${item.animation_budget}/5 | Deps: ${item.npm_deps?.join(', ') || 'none'}\n\n`;
+                combinedPage += `**HTML:**\n\`\`\`html\n${item.html_template || ''}\n\`\`\`\n\n`;
+                combinedPage += `**JS:**\n\`\`\`js\n${minifiedJs}\n\`\`\`\n\n`;
+            }
+            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).`;
             return { content: [{ type: "text", text: combinedPage }] };
         }
         catch (err) {
@@ -3898,6 +4033,210 @@ ${consequences.length > 0 ? consequences.map(c => `- ${c}`).join('\n') : '- (non
             return { content: [{ type: "text", text: `[VIBE REFACTOR ERROR] ${err.message || err}` }] };
         }
     });
+    // Tool: Page Composer — Full Page Orchestration
+    server.tool("vibe_compose_page", "Orchestrates a complete page build: reads the design brief, plans section rhythm, searches components per section with coherence rules, and returns a full page assembly plan with component assignments and visual rhythm. Call this instead of manually building section by section.", {
+        projectDir: zod_1.z.string().describe("Absolute path to the project root."),
+        overrideSections: zod_1.z.array(zod_1.z.string()).optional().describe("Override section list. If omitted, uses sections from the active design brief.")
+    }, async ({ projectDir, overrideSections }) => {
+        await checkSanity();
+        const root = await findProjectRoot(projectDir || process.cwd());
+        // 1. Load design brief
+        const sessionPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
+        if (!(await fs_extra_1.default.pathExists(sessionPath))) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `[VibeTachyon Page Composer] No design brief found.\n\n` +
+                            `INSTRUCTION FOR AI: Stop and call vibe_design_brief first. Ask the user:\n` +
+                            `1. What is the goal of this page?\n` +
+                            `2. What is the niche/product?\n` +
+                            `3. Who is the target audience?\n` +
+                            `4. Which visual style? (linear / vercel / stripe / aceternity / apple / notion)\n` +
+                            `5. Which sections are needed?`
+                    }]
+            };
+        }
+        const brief = await fs_extra_1.default.readJson(sessionPath);
+        const sections = overrideSections || brief.sectionsNeeded || ['hero', 'features', 'cta'];
+        const tone = brief.rules?.visualTone || 'dark';
+        const refStyle = brief.referenceStyle || 'custom';
+        const maxAnimations = brief.rules?.maxAnimationTypes ?? 2;
+        const avoid = brief.rules?.mustAvoid || [];
+        // 2. Visual rhythm — alternate animated/static to avoid visual fatigue
+        const rhythmMap = {
+            hero: 'animated',
+            'social-proof': 'static',
+            features: 'subtle',
+            'how-it-works': 'subtle',
+            pricing: 'static',
+            testimonials: 'static',
+            faq: 'static',
+            cta: 'animated',
+            footer: 'static',
+            'background-effect': 'animated',
+            navigation: 'subtle',
+            modal: 'subtle',
+            form: 'static'
+        };
+        // Enforce max animation budget
+        let animationBudget = maxAnimations;
+        const sectionRhythm = {};
+        for (const section of sections) {
+            const natural = rhythmMap[section] || 'subtle';
+            if (natural === 'animated' && animationBudget > 0) {
+                sectionRhythm[section] = 'animated';
+                animationBudget--;
+            }
+            else if (natural === 'animated' && animationBudget === 0) {
+                sectionRhythm[section] = 'subtle'; // downgrade — budget exhausted
+            }
+            else {
+                sectionRhythm[section] = natural;
+            }
+        }
+        // 3. Style filters per section
+        const styleForSection = (section) => {
+            const base = tone === 'dark' ? ['dark'] : tone === 'light' ? ['light'] : [];
+            const rhythm = sectionRhythm[section];
+            if (rhythm === 'animated')
+                return [...base, 'animated'];
+            if (rhythm === 'subtle')
+                return [...base, 'modern'];
+            return base;
+        };
+        // 4. Search queries per section
+        const sectionQueries = {
+            hero: `hero section ${refStyle} ${tone}`,
+            'social-proof': `testimonials logos social proof ${tone}`,
+            features: `features grid cards ${tone}`,
+            'how-it-works': `steps process how it works ${tone}`,
+            pricing: `pricing table plans ${tone}`,
+            testimonials: `testimonials review cards ${tone}`,
+            faq: `faq accordion ${tone}`,
+            cta: `call to action banner ${tone}`,
+            footer: `footer links ${tone}`,
+            navigation: `navbar navigation ${tone}`,
+            'background-effect': `background effect ${refStyle}`,
+            modal: `modal dialog ${tone}`,
+            form: `form input ${tone}`
+        };
+        // 5. Build section plan (search each section)
+        const sectionResults = [];
+        let totalAnimationsUsed = 0;
+        for (const section of sections) {
+            const query = sectionQueries[section] || `${section} ${tone}`;
+            const styleFilter = styleForSection(section);
+            const rhythm = sectionRhythm[section];
+            if (rhythm === 'animated')
+                totalAnimationsUsed++;
+            let amQueryBuilder = supabase
+                .from('animmaster_components')
+                .select('name, category, description, use_cases, visual_tone, animation_budget, init_order, compatible_with, npm_deps')
+                .eq('is_active', true)
+                .contains('use_cases', [section])
+                .limit(2);
+            if (styleFilter.length > 0) {
+                amQueryBuilder = amQueryBuilder.overlaps('visual_tone', styleFilter);
+            }
+            const { data: results } = await amQueryBuilder;
+            const found = results && results.length > 0;
+            const topMatch = found ? results[0] : null;
+            // Coherence check
+            let coherenceFlag = '';
+            if (topMatch && avoid.length > 0) {
+                const violations = avoid.filter((rule) => (topMatch.name || '').toLowerCase().includes(rule.toLowerCase()) ||
+                    (topMatch.description || '').toLowerCase().includes(rule.toLowerCase()));
+                if (violations.length > 0) {
+                    coherenceFlag = ` ⚠️ BRIEF CONFLICT (${violations.join(', ')})`;
+                }
+            }
+            sectionResults.push(`## Section ${sections.indexOf(section) + 1}: ${section.toUpperCase()}\n` +
+                `Rhythm: ${rhythm} | Tone filters: ${styleFilter.join(', ') || 'none'}\n` +
+                (found && topMatch
+                    ? `✅ Best match: "${topMatch.name}" [🎬 ANIMMASTER | init_order: ${topMatch.init_order}]${coherenceFlag}\n` +
+                        `   Tone: ${topMatch.visual_tone?.join(', ') || 'universal'} | Budget: ${topMatch.animation_budget}/5\n` +
+                        `   Compatible with: ${topMatch.compatible_with?.join(', ') || 'all'}\n` +
+                        `   Search query used: "${query}"`
+                    : `⚠️ No Animmaster component found for "${query}" with filters [${styleFilter.join(', ')}]\n` +
+                        `   → Run: vibe_search_snippets(query="${section}", useCaseFilter="${section}") with broader terms`));
+        }
+        // 6. Save page state to .vibetachyon/page-state.json
+        const pageState = {
+            createdAt: new Date().toISOString(),
+            brief: { goal: brief.pageGoal, style: refStyle, tone },
+            sections: sections.map((s, i) => ({
+                name: s,
+                order: i + 1,
+                rhythm: sectionRhythm[s],
+                status: 'planned'
+            })),
+            animationsUsed: totalAnimationsUsed,
+            animationBudget: maxAnimations,
+            coherenceScore: Math.round((1 - avoid.length / 10) * 100)
+        };
+        await fs_extra_1.default.writeJson(path_1.default.join(root, '.vibetachyon', 'page-state.json'), pageState, { spaces: 2 });
+        // 7. Final coherence report
+        const budgetWarning = totalAnimationsUsed > maxAnimations
+            ? `\n🚨 ANIMATION BUDGET EXCEEDED: ${totalAnimationsUsed} animated sections (max: ${maxAnimations}). Downgraded automatically.\n`
+            : `\n✅ Animation budget respected: ${totalAnimationsUsed}/${maxAnimations} animated sections.\n`;
+        return {
+            content: [{
+                    type: "text",
+                    text: `[VibeTachyon Page Composer]\n\n` +
+                        `PAGE: ${brief.pageGoal || 'Landing page'}\n` +
+                        `STYLE: ${refStyle} | TONE: ${tone} | SECTIONS: ${sections.length}\n` +
+                        `${budgetWarning}\n` +
+                        `SECTION PLAN:\n${sectionResults.join('\n\n')}\n\n` +
+                        `STATE SAVED: .vibetachyon/page-state.json\n\n` +
+                        `INSTRUCTION FOR AI — EXECUTION ORDER:\n` +
+                        sections.map((s, i) => `  ${i + 1}. Build "${s}" section (${sectionRhythm[s]}) — call vibe_search_snippets(query="${sectionQueries[s] || s}", useCaseFilter="${s}", styleFilter=${JSON.stringify(styleForSection(s))})`).join('\n') +
+                        `\n\nRULES:\n` +
+                        `- Build sections in THIS exact order\n` +
+                        `- For each section: search → review coherence → generate → move to next\n` +
+                        `- Do NOT skip sections or reorder them\n` +
+                        `- If a component violates the brief, search again before using it`
+                }]
+        };
+    });
+    // Tool: Mark Section Complete
+    server.tool("vibe_section_done", "Marks a page section as complete in the page state. Call this after finishing each section to track progress and maintain build momentum.", {
+        projectDir: zod_1.z.string().describe("Absolute path to the project root."),
+        sectionName: zod_1.z.string().describe("The section name that was just completed. e.g. 'hero', 'features', 'cta'"),
+        componentUsed: zod_1.z.string().optional().describe("Name of the component that was used for this section.")
+    }, async ({ projectDir, sectionName, componentUsed }) => {
+        await checkSanity();
+        const root = await findProjectRoot(projectDir || process.cwd());
+        const statePath = path_1.default.join(root, '.vibetachyon', 'page-state.json');
+        if (!(await fs_extra_1.default.pathExists(statePath))) {
+            return {
+                content: [{ type: "text", text: `No page state found. Run vibe_compose_page first.` }]
+            };
+        }
+        const state = await fs_extra_1.default.readJson(statePath);
+        const section = state.sections?.find((s) => s.name === sectionName);
+        if (section) {
+            section.status = 'done';
+            if (componentUsed)
+                section.componentUsed = componentUsed;
+            section.completedAt = new Date().toISOString();
+            await fs_extra_1.default.writeJson(statePath, state, { spaces: 2 });
+        }
+        const done = state.sections?.filter((s) => s.status === 'done') || [];
+        const planned = state.sections?.filter((s) => s.status === 'planned') || [];
+        const next = planned[0];
+        return {
+            content: [{
+                    type: "text",
+                    text: `✅ Section "${sectionName}" marked as done.\n` +
+                        `Progress: ${done.length}/${state.sections?.length || 0} sections complete.\n` +
+                        (next
+                            ? `\nNext section: "${next.name}" (${next.rhythm})\n` +
+                                `INSTRUCTION FOR AI: Call vibe_read_design_brief then build the "${next.name}" section.`
+                            : `\n🎉 ALL SECTIONS COMPLETE! Page is ready.\n` +
+                                `INSTRUCTION FOR AI: Run a final coherence review — check that all sections share the same visual tone and no animation budget was exceeded.`)
+                }]
+        };
+    });
     // Connect via stdio
     const transport = new stdio_js_1.StdioServerTransport();
     await server.connect(transport);

package/package.json

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