codemeld 2.1.0

package/dist/generators/html-generator.js

@@ -0,0 +1,772 @@
+// ─── Main Generator ─────────────────────────────────────────────────
+export function generateStaticSite(project) {
+    const componentMap = new Map();
+    for (const comp of project.components) {
+        componentMap.set(comp.name, comp);
+        // Also map by lowercase / kebab variants
+        componentMap.set(comp.name.toLowerCase(), comp);
+    }
+    const isMultiPage = project.routes.length > 1;
+    // Collect all CSS
+    const cssBlocks = [...project.globalCSS];
+    for (const comp of project.components) {
+        if (comp.css)
+            cssBlocks.push(comp.css);
+    }
+    const mergedCSS = cssBlocks.join('\n\n');
+    // Generate JavaScript
+    const jsBlocks = [];
+    if (isMultiPage) {
+        // Generate hash-based SPA routing
+        jsBlocks.push(generateHashRouter(project.routes, componentMap));
+    }
+    // Generate vanilla JS for interactive components (with deduplication)
+    const globalStateVars = new Map();
+    const globalHandlers = new Map();
+    const globalEffects = [];
+    for (const comp of project.components) {
+        if (comp.isInteractive) {
+            // Merge state vars (deduplicate by name)
+            for (const [name, initial] of comp.stateVars) {
+                if (!globalStateVars.has(name)) {
+                    globalStateVars.set(name, initial);
+                }
+            }
+            // Merge handlers (deduplicate by name)
+            for (const [name, body] of comp.eventHandlers) {
+                if (!globalHandlers.has(name)) {
+                    globalHandlers.set(name, body);
+                }
+            }
+            // Collect effects
+            for (const effect of comp.effects) {
+                globalEffects.push(effect);
+            }
+        }
+    }
+    // Resolve the body HTML first so we can detect interactive patterns
+    let bodyHtml = '';
+    const comp = project.routes.length > 0
+        ? componentMap.get(project.routes[0].componentName) || project.components[0]
+        : project.components[0];
+    if (comp) {
+        bodyHtml = resolveTemplate(comp, componentMap);
+    }
+    // Auto-detect interactive patterns from HTML/CSS and generate proper vanilla JS
+    // This replaces the broken React-to-vanilla handler conversion for detected patterns
+    const autoJS = generateInteractiveJS(bodyHtml, mergedCSS);
+    if (autoJS) {
+        jsBlocks.push(autoJS);
+    }
+    // Build consolidated JS from React state/handlers, but skip names
+    // that are already defined in the auto-detected JS to avoid duplicates
+    if (globalStateVars.size > 0 || globalHandlers.size > 0 || globalEffects.length > 0) {
+        // Extract variable and function names declared in auto-detected JS
+        const autoJSNames = new Set();
+        if (autoJS) {
+            // Match: let/const/var name, function name(
+            const declPattern = /(?:let|const|var)\s+(\w+)|function\s+(\w+)\s*\(/g;
+            let m;
+            while ((m = declPattern.exec(autoJS)) !== null) {
+                autoJSNames.add(m[1] || m[2]);
+            }
+        }
+        // Filter out conflicting names from consolidated JS inputs
+        const filteredVars = new Map();
+        for (const [name, val] of globalStateVars) {
+            if (!autoJSNames.has(name))
+                filteredVars.set(name, val);
+        }
+        const filteredHandlers = new Map();
+        for (const [name, body] of globalHandlers) {
+            if (!autoJSNames.has(name))
+                filteredHandlers.set(name, body);
+        }
+        if (filteredVars.size > 0 || filteredHandlers.size > 0 || globalEffects.length > 0) {
+            jsBlocks.push(generateConsolidatedJS(filteredVars, filteredHandlers, globalEffects));
+        }
+    }
+    const mergedJS = jsBlocks.join('\n\n');
+    // Generate pages
+    const pages = [];
+    if (isMultiPage) {
+        // Single HTML file with hash routing
+        const mainHtml = generateSPAPage(project, componentMap, mergedCSS, mergedJS);
+        pages.push({
+            fileName: 'index.html',
+            html: mainHtml,
+            routePath: '/',
+        });
+    }
+    else {
+        if (comp) {
+            const html = generateSinglePage(project, comp, componentMap, mergedCSS, mergedJS);
+            pages.push({
+                fileName: 'index.html',
+                html,
+                routePath: '/',
+            });
+        }
+    }
+    return { pages, css: mergedCSS, js: mergedJS, assets: [] };
+}
+// ─── Single Page Generation ─────────────────────────────────────────
+function generateSinglePage(project, mainComponent, componentMap, css, js) {
+    const bodyContent = resolveTemplate(mainComponent, componentMap);
+    return buildHTMLDocument({
+        title: project.title || project.projectName,
+        externalStyles: project.externalStyles,
+        externalScripts: project.externalScripts,
+        preconnectLinks: project.preconnectLinks || [],
+        css,
+        body: bodyContent,
+        js,
+    });
+}
+// ─── SPA (Multi-Page with Hash Router) ──────────────────────────────
+function generateSPAPage(project, componentMap, css, js) {
+    // Find the index/shell component (usually has navbar + footer)
+    const indexRoute = project.routes.find(r => r.isIndex);
+    const shellComponent = indexRoute ? componentMap.get(indexRoute.componentName) : project.components[0];
+    // Build the shell HTML with a content container
+    let shellHtml = '';
+    if (shellComponent) {
+        shellHtml = resolveTemplate(shellComponent, componentMap);
+        // Try to find a main content area to inject the router outlet
+        if (!shellHtml.includes('id="app-content"')) {
+            // Wrap the shell content to add a router outlet marker
+            shellHtml = shellHtml.replace(/(<main[^>]*>)([\s\S]*?)(<\/main>)/i, '$1<div id="app-content">$2</div>$3');
+            if (!shellHtml.includes('id="app-content"')) {
+                // No <main> found, append content div
+                shellHtml += '\n<div id="app-content"></div>';
+            }
+        }
+    }
+    // Build page template objects for the router
+    const pageTemplates = [];
+    for (const route of project.routes) {
+        if (route.isIndex)
+            continue;
+        const comp = componentMap.get(route.componentName);
+        if (!comp)
+            continue;
+        const pageHtml = resolveTemplate(comp, componentMap);
+        const escapedHtml = pageHtml.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        pageTemplates.push(`  '${route.path}': \`${escapedHtml}\``);
+    }
+    // Generate the full hash router JS
+    const routerJS = `
+// ─── Hash-Based SPA Router ─────────────────────────────────────────
+const routes = {
+${pageTemplates.join(',\n')}
+};
+
+function navigateTo(path) {
+  window.location.hash = '#' + path;
+}
+
+function handleRoute() {
+  const hash = window.location.hash.slice(1) || '/';
+  const content = document.getElementById('app-content');
+  if (!content) return;
+
+  if (routes[hash]) {
+    content.innerHTML = routes[hash];
+  }
+  // Re-initialize interactive elements after route change
+  if (typeof initInteractive === 'function') initInteractive();
+  // Re-initialize Lucide icons for new content
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+window.addEventListener('hashchange', handleRoute);
+window.addEventListener('DOMContentLoaded', handleRoute);
+`;
+    // Auto-initialize Lucide icons if used
+    const usesLucide = shellHtml.includes('data-lucide');
+    const lucideInit = usesLucide ? `
+// Initialize Lucide icons
+if (typeof lucide !== 'undefined') {
+  lucide.createIcons();
+}
+` : '';
+    const fullJS = routerJS + '\n' + js + '\n' + lucideInit;
+    return buildHTMLDocument({
+        title: project.title || project.projectName,
+        externalStyles: project.externalStyles,
+        externalScripts: project.externalScripts,
+        preconnectLinks: project.preconnectLinks || [],
+        css,
+        body: shellHtml,
+        js: fullJS,
+    });
+}
+// ─── Template Resolution ────────────────────────────────────────────
+/**
+ * Convert framework template to plain HTML and inline child components.
+ */
+function resolveTemplate(component, componentMap, depth = 0) {
+    if (depth > 10)
+        return '<!-- max depth reached -->';
+    let html = component.template;
+    // Convert framework-specific template syntax to HTML
+    html = frameworkTemplateToHTML(html, component.framework);
+    // Inline child components (resolve <ChildComponent /> tags)
+    // Skip framework wrapper components that should be stripped, not resolved
+    const skipComponents = new Set(['ErrorBoundary', 'Suspense', 'Provider', 'StrictMode']);
+    for (const childName of component.childComponents) {
+        if (skipComponents.has(childName))
+            continue;
+        const child = componentMap.get(childName) || componentMap.get(childName.toLowerCase());
+        if (child) {
+            const childHtml = resolveTemplate(child, componentMap, depth + 1);
+            // Replace both self-closing and paired tags
+            html = html.replace(new RegExp(`<${childName}\\s*\\/?>`, 'g'), childHtml);
+            html = html.replace(new RegExp(`<${childName}[^>]*>[\\s\\S]*?<\\/${childName}>`, 'g'), childHtml);
+            // Also try kebab-case (Vue/Angular)
+            const kebab = childName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+            html = html.replace(new RegExp(`<${kebab}\\s*\\/?>`, 'g'), childHtml);
+            html = html.replace(new RegExp(`<${kebab}[^>]*>[\\s\\S]*?<\\/${kebab}>`, 'g'), childHtml);
+            // Angular selector: app-kebab
+            html = html.replace(new RegExp(`<app-${kebab}\\s*\\/?>`, 'g'), childHtml);
+            html = html.replace(new RegExp(`<app-${kebab}[^>]*>[\\s\\S]*?<\\/app-${kebab}>`, 'g'), childHtml);
+        }
+    }
+    return html;
+}
+/**
+ * Convert framework-specific template syntax back to standard HTML.
+ */
+function frameworkTemplateToHTML(template, framework) {
+    let html = template;
+    switch (framework) {
+        case 'react':
+        case 'nextjs':
+            html = jsxToHTML(html);
+            break;
+        case 'vue':
+            html = vueTemplateToHTML(html);
+            break;
+        case 'svelte':
+            html = svelteTemplateToHTML(html);
+            break;
+        case 'angular':
+            html = angularTemplateToHTML(html);
+            break;
+    }
+    // Remove ErrorBoundary wrapper (React-specific error handling)
+    html = html.replace(/<ErrorBoundary[^>]*>([\s\S]*?)<\/ErrorBoundary>/g, '$1');
+    html = html.replace(/<ErrorBoundary[^>]*\/>/g, '');
+    // Remove Suspense wrapper
+    html = html.replace(/<Suspense[^>]*>([\s\S]*?)<\/Suspense>/g, '$1');
+    // Common: convert router links back to hash links
+    // <Link to="/path"> → <a href="#/path">
+    html = html.replace(/<Link\s+(?:to|href)="([^"]*)"([^>]*)>([\s\S]*?)<\/Link>/g, '<a href="#$1"$2>$3</a>');
+    // <router-link to="/path"> → <a href="#/path">
+    html = html.replace(/<router-link\s+to="([^"]*)"([^>]*)>([\s\S]*?)<\/router-link>/g, '<a href="#$1"$2>$3</a>');
+    // routerLink="/path" → href="#/path"
+    html = html.replace(/routerLink="([^"]*)"/g, 'href="#$1"');
+    return html;
+}
+// ─── JSX → HTML ─────────────────────────────────────────────────────
+function jsxToHTML(jsx) {
+    let html = jsx;
+    // className → class
+    html = html.replace(/\bclassName=/g, 'class=');
+    // htmlFor → for
+    html = html.replace(/\bhtmlFor=/g, 'for=');
+    // tabIndex → tabindex
+    html = html.replace(/\btabIndex=/g, 'tabindex=');
+    // style={{...}} → style="..." (handle nested braces carefully)
+    html = html.replace(/style=\{\{([\s\S]*?)\}\}/g, (_, styles) => {
+        const cssProps = styles.split(',').map((p) => {
+            const colonIdx = p.indexOf(':');
+            if (colonIdx === -1)
+                return '';
+            const key = p.slice(0, colonIdx).trim().replace(/['"]/g, '');
+            const val = p.slice(colonIdx + 1).trim().replace(/['"]/g, '');
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            return `${cssKey}: ${val}`;
+        }).filter(Boolean).join('; ');
+        return `style="${cssProps}"`;
+    });
+    // {/* comment */} → <!-- comment -->
+    html = html.replace(/\{\/\*\s*([\s\S]*?)\s*\*\/\}/g, '<!-- $1 -->');
+    // Remove JSX string expressions: {' '} → space, {'\n'} → newline
+    html = html.replace(/\{'\\n'\}/g, '\n');
+    html = html.replace(/\{' '\}/g, ' ');
+    html = html.replace(/\{"([^"]*)"\}/g, '$1');
+    html = html.replace(/\{'([^']*)'\}/g, '$1');
+    // Remove JSX template literal expressions: {`text`} → text
+    html = html.replace(/\{`([^`]*)`\}/g, '$1');
+    // Remove JSX ternary placeholders: {condition ? 'a' : 'b'} → remove
+    html = html.replace(/\{[^{}]*\?[^{}]*:[^{}]*\}/g, '');
+    // onInput={(e) => ...} → oninput="..."
+    html = html.replace(/onInput=\{[^}]*\}/g, '');
+    // onChange={(e) => ...} → onchange="..."
+    html = html.replace(/onChange=\{[^}]*\}/g, '');
+    // onSubmit={(e) => { e.preventDefault(); ... }} → onsubmit="..."
+    html = html.replace(/onSubmit=\{\([^)]*\)\s*=>\s*\{\s*[^}]*\}\}/g, '');
+    // onClick={(e) => e.preventDefault()} → onclick="event.preventDefault()"
+    html = html.replace(/onClick=\{\(e\)\s*=>\s*e\.preventDefault\(\)\}/g, 'onclick="event.preventDefault()"');
+    // Complex onClick with scrollIntoView → onclick
+    html = html.replace(/onClick=\{\(e\)\s*=>\s*\{\s*e\.preventDefault\(\);\s*document\.getElementById\('([^']+)'\)\?\.scrollIntoView\(\{[^}]*\}\);\s*\}\}/g, 'onclick="event.preventDefault(); document.getElementById(\'$1\')?.scrollIntoView({behavior:\'smooth\'})"');
+    // onClick={() => { handler(); }} → onclick="handler()"
+    html = html.replace(/onClick=\{\(\)\s*=>\s*\{\s*(\w+)\(([^)]*)\);?\s*\}\}/g, 'onclick="$1($2)"');
+    // onClick={() => handler()} → onclick="handler()"
+    html = html.replace(/onClick=\{\(\)\s*=>\s*(\w+)\(([^)]*)\)\s*\}/g, 'onclick="$1($2)"');
+    // onClick={handler} → onclick="handler()"
+    html = html.replace(/onClick=\{(\w+)\}/g, 'onclick="$1()"');
+    // Generic: onClick={(e) => { ... }} → onclick="..."
+    html = html.replace(/onClick=\{\([^)]*\)\s*=>\s*\{([^}]*)\}\}/g, (_, body) => `onclick="${body.trim().replace(/"/g, "'")}"`);
+    // Remove any remaining JSX event handler bindings: onXxx={...}
+    html = html.replace(/\bon[A-Z]\w+=\{[^}]*\}/g, '');
+    // Remove key={...} and key="..." props (React internal)
+    html = html.replace(/\s+key=\{[^}]*\}/g, '');
+    html = html.replace(/\s+key="[^"]*"/g, '');
+    // Remove ref={...} props
+    html = html.replace(/\s+ref=\{[^}]*\}/g, '');
+    // Remove dangerouslySetInnerHTML
+    html = html.replace(/\s+dangerouslySetInnerHTML=\{[^}]*\}/g, '');
+    // Remove remaining JSX expression wrappers {expr} → expr (for text content)
+    // Be careful not to break HTML attributes
+    html = html.replace(/>(\s*)\{([^{}]+)\}(\s*)</g, '>$1$2$3<');
+    // Fix double-encoded HTML entities: &amp;amp; → &amp;, &amp;aspect → &aspect
+    html = html.replace(/&amp;(amp;|lt;|gt;|quot;|apos;|#\d+;|#x[\da-fA-F]+;)/g, '&$1');
+    // Also handle cases where & in URLs was encoded to &amp;
+    html = html.replace(/&amp;(?=\w+=)/g, '&');
+    // Remove (as HTMLInputElement) type assertions in text
+    html = html.replace(/\(([^)]+)\s+as\s+\w+\)/g, '$1');
+    html = html.replace(/\bas\s+HTML\w+Element\b/g, '');
+    // Remove JSX attribute bindings: value={expr}, src={expr}, etc.
+    html = html.replace(/\b(value|src|alt|href|id|name|placeholder|type|disabled|checked|readOnly)=\{([^}]*)\}/g, (_, attr, val) => {
+        // If it's a simple string or variable, use as attribute value
+        const clean = val.replace(/['"]/g, '').trim();
+        if (/^[a-zA-Z_$][\w.]*$/.test(clean) || /^['"]/.test(val)) {
+            return `${attr}="${clean}"`;
+        }
+        return `${attr}=""`;
+    });
+    // Remove stray JSX fragment tags and export statements leaked from parsing
+    html = html.replace(/\s*<\/>\s*\)\s*;?\s*/g, '');
+    html = html.replace(/^\s*<>\s*/gm, '');
+    html = html.replace(/\s*export\s+default\s+\w+;?\s*/g, '');
+    // Remove utility function TODO comment blocks
+    html = html.replace(/\/\*[\s\S]*?\*\//g, '');
+    // Remove any remaining JSX expression attributes: attr={...}
+    html = html.replace(/\s+\w+=\{[^}]*\}/g, '');
+    // Clean up orphaned closing braces on their own line (from removed JSX expressions)
+    html = html.replace(/^\s*\}\s*$/gm, '');
+    // Clean up extra blank lines
+    html = html.replace(/\n{3,}/g, '\n\n');
+    // Clean up empty attribute values from removed bindings
+    html = html.replace(/\s{2,}>/g, '>');
+    return html;
+}
+// ─── Vue Template → HTML ────────────────────────────────────────────
+function vueTemplateToHTML(template) {
+    let html = template;
+    // @click="handler" → onclick="handler()"
+    html = html.replace(/@click="(\w+)\(([^)]*)\)"/g, 'onclick="$1($2)"');
+    html = html.replace(/@click="(\w+)"/g, 'onclick="$1()"');
+    // @change, @submit, etc.
+    html = html.replace(/@(\w+)(?:\.prevent)?="([^"]+)"/g, 'on$1="$2"');
+    // :class="..." → class="..."  (simplified — strips binding)
+    html = html.replace(/:class="'([^']+)'"/g, 'class="$1"');
+    html = html.replace(/:class="([^"]+)"/g, 'class="$1"');
+    // :style="{ ... }" → style="..."
+    html = html.replace(/:style="\{([^}]*)\}"/g, (_, styles) => {
+        const cssProps = styles.split(',').map((p) => {
+            const colonIdx = p.indexOf(':');
+            if (colonIdx === -1)
+                return '';
+            const key = p.slice(0, colonIdx).trim();
+            const val = p.slice(colonIdx + 1).trim().replace(/['"]/g, '');
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            return `${cssKey}: ${val}`;
+        }).filter(Boolean).join('; ');
+        return `style="${cssProps}"`;
+    });
+    // {{ expr }} → (removed, or kept as text)
+    html = html.replace(/\{\{\s*([^}]+)\s*\}\}/g, '');
+    // v-if, v-for, v-show → removed (static HTML)
+    html = html.replace(/\s*v-if="[^"]*"/g, '');
+    html = html.replace(/\s*v-else/g, '');
+    html = html.replace(/\s*v-show="[^"]*"/g, '');
+    html = html.replace(/\s*v-for="[^"]*"/g, '');
+    html = html.replace(/\s*:key="[^"]*"/g, '');
+    html = html.replace(/\s*v-html="[^"]*"/g, '');
+    html = html.replace(/\s*v-model="[^"]*"/g, '');
+    return html;
+}
+// ─── Svelte Template → HTML ─────────────────────────────────────────
+function svelteTemplateToHTML(template) {
+    let html = template;
+    // onclick={handler} → onclick="handler()"
+    html = html.replace(/onclick=\{(\w+)\}/g, 'onclick="$1()"');
+    html = html.replace(/onclick=\{\(\)\s*=>\s*(\w+)\(([^)]*)\)\}/g, 'onclick="$1($2)"');
+    html = html.replace(/onchange=\{([^}]+)\}/g, 'onchange="$1"');
+    // {#if ...} ... {/if} → keep content (static)
+    html = html.replace(/\{#if\s+[^}]+\}/g, '');
+    html = html.replace(/\{:else(?:\s+if\s+[^}]+)?\}/g, '');
+    html = html.replace(/\{\/if\}/g, '');
+    // {#each ...} ... {/each} → keep content
+    html = html.replace(/\{#each\s+[^}]+\}/g, '');
+    html = html.replace(/\{\/each\}/g, '');
+    // {expr} in text → removed
+    html = html.replace(/>(\s*)\{([^{}]+)\}(\s*)</g, '>$1$3<');
+    return html;
+}
+// ─── Angular Template → HTML ────────────────────────────────────────
+function angularTemplateToHTML(template) {
+    let html = template;
+    // (click)="handler()" → onclick="handler()"
+    html = html.replace(/\(click\)="([^"]+)"/g, 'onclick="$1"');
+    html = html.replace(/\(change\)="([^"]+)"/g, 'onchange="$1"');
+    html = html.replace(/\(submit\)="([^"]+)"/g, 'onsubmit="$1"');
+    html = html.replace(/\(keydown\)="([^"]+)"/g, 'onkeydown="$1"');
+    // [class]="..." → class="..."
+    html = html.replace(/\[class\]="([^"]+)"/g, 'class="$1"');
+    // [ngStyle]="..." → style="..."
+    html = html.replace(/\[ngStyle\]="\{([^}]*)\}"/g, (_, styles) => {
+        const cssProps = styles.split(',').map((p) => {
+            const colonIdx = p.indexOf(':');
+            if (colonIdx === -1)
+                return '';
+            const key = p.slice(0, colonIdx).trim();
+            const val = p.slice(colonIdx + 1).trim().replace(/['"]/g, '');
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            return `${cssKey}: ${val}`;
+        }).filter(Boolean).join('; ');
+        return `style="${cssProps}"`;
+    });
+    // {{ expr }} → removed
+    html = html.replace(/\{\{\s*[^}]+\s*\}\}/g, '');
+    // *ngIf, *ngFor → removed
+    html = html.replace(/\s*\*ngIf="[^"]*"/g, '');
+    html = html.replace(/\s*\*ngFor="[^"]*"/g, '');
+    html = html.replace(/\s*\[value\]="[^"]*"/g, '');
+    return html;
+}
+// ─── Auto-Detect Interactive Patterns ───────────────────────────────
+/**
+ * Detect common interactive patterns in the resolved HTML and CSS,
+ * and generate proper vanilla JS to make them work.
+ */
+function generateInteractiveJS(bodyHtml, css) {
+    const blocks = [];
+    // 1. Scroll-reveal animations: .reveal with animation-play-state:paused in CSS
+    if (css.includes('animation-play-state') && (bodyHtml.includes('class="') || bodyHtml.includes("class='"))) {
+        const hasRevealCSS = /\.reveal\s*\{[^}]*animation-play-state\s*:\s*paused/s.test(css);
+        const hasRevealClass = /\bclass="[^"]*\breveal\b/.test(bodyHtml) || /\bclass='[^']*\breveal\b/.test(bodyHtml);
+        if (hasRevealCSS && hasRevealClass) {
+            blocks.push(`// Intersection observer reveals
+const revealObserver = new IntersectionObserver((entries) => {
+  entries.forEach(e => {
+    if (e.isIntersecting) {
+      e.target.style.animationPlayState = 'running';
+      revealObserver.unobserve(e.target);
+    }
+  });
+}, { threshold: 0.08 });
+document.querySelectorAll('.reveal').forEach(el => {
+  el.style.animationPlayState = 'paused';
+  revealObserver.observe(el);
+});`);
+        }
+    }
+    // 2. Nav scroll class toggle (fixed nav that adds class on scroll)
+    if (bodyHtml.includes('id="nav"') || bodyHtml.match(/<nav[^>]*id="[^"]*"/)) {
+        const navId = bodyHtml.match(/<nav[^>]*id="([^"]*)"/)?.[1] || 'nav';
+        if (css.includes('.scrolled') || css.includes('nav.scrolled')) {
+            blocks.push(`// Nav scroll effect
+window.addEventListener('scroll', () => {
+  document.getElementById('${navId}')?.classList.toggle('scrolled', window.scrollY > 20);
+}, { passive: true });`);
+        }
+    }
+    // 3. Mobile menu toggle (hamburger + mobile menu)
+    if (bodyHtml.includes('id="ham"') && bodyHtml.includes('id="mob"')) {
+        blocks.push(`// Mobile menu toggle
+const ham = document.getElementById('ham');
+const mob = document.getElementById('mob');
+if (ham && mob) {
+  ham.addEventListener('click', () => {
+    ham.classList.toggle('open');
+    mob.classList.toggle('open');
+    document.body.style.overflow = mob.classList.contains('open') ? 'hidden' : '';
+  });
+}
+function closeMob() {
+  const ham = document.getElementById('ham');
+  const mob = document.getElementById('mob');
+  if (ham) ham.classList.remove('open');
+  if (mob) mob.classList.remove('open');
+  document.body.style.overflow = '';
+}`);
+    }
+    // 4. Tab switching (demo-tab / tab panels)
+    if (bodyHtml.includes('demo-tab') || bodyHtml.includes('data-tab')) {
+        blocks.push(`// Tab switching
+document.querySelectorAll('[data-tab]').forEach(tab => {
+  tab.addEventListener('click', () => {
+    const id = tab.dataset.tab;
+    const parent = tab.closest('.demo-tabs, .tabs, .tab-container')?.parentElement || document;
+    parent.querySelectorAll('[data-tab]').forEach(t => t.classList.remove('active'));
+    parent.querySelectorAll('.demo-panel, .tab-panel').forEach(p => p.classList.remove('active'));
+    tab.classList.add('active');
+    const panel = document.getElementById('tab-' + id);
+    if (panel) panel.classList.add('active');
+  });
+});`);
+    }
+    // 5. FAQ accordion
+    if (bodyHtml.includes('faq-item') && bodyHtml.includes('faq-q')) {
+        blocks.push(`// FAQ accordion
+document.querySelectorAll('.faq-q').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const item = btn.closest('.faq-item');
+    const isOpen = item?.classList.contains('open');
+    document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
+    if (!isOpen && item) item.classList.add('open');
+  });
+});`);
+    }
+    // 6. Billing toggle (pricing section)
+    if (bodyHtml.includes('id="btog"') || bodyHtml.includes('billing-toggle')) {
+        blocks.push(`// Billing toggle
+let annual = false;
+function toggleBilling() {
+  annual = !annual;
+  const btog = document.getElementById('btog');
+  if (btog) btog.classList.toggle('on', annual);
+  document.querySelectorAll('.pval[data-m]').forEach(el => {
+    el.textContent = annual ? (el.dataset.a || '') : (el.dataset.m || '');
+  });
+  const proPer = document.getElementById('proPer');
+  const teamPer = document.getElementById('teamPer');
+  if (proPer) proPer.textContent = annual ? 'per month · billed annually' : 'per month · billed monthly';
+  if (teamPer) teamPer.textContent = annual ? 'per month · billed annually' : 'per month · up to 10 devs';
+}`);
+    }
+    // 7. CTA email form
+    if (bodyHtml.includes('input-group') || bodyHtml.includes('handleCta') || bodyHtml.includes('id="ctaEmail"')) {
+        blocks.push(`// CTA email form
+function handleCta() {
+  const input = document.getElementById('ctaEmail') || document.querySelector('.input-group input');
+  if (!input) return;
+  const btn = input.nextElementSibling;
+  if (input.value && input.value.includes('@')) {
+    if (btn) { btn.textContent = "You're on the list ✓"; btn.style.background = '#3ecf6e'; }
+    input.value = '';
+    input.placeholder = "We'll be in touch soon.";
+    setTimeout(() => { if (btn) { btn.textContent = 'Get early access'; btn.style.background = ''; } }, 4000);
+  } else {
+    input.style.outline = '1px solid #e74c3c';
+    input.focus();
+    setTimeout(() => input.style.outline = '', 2000);
+  }
+}
+document.querySelector('.input-group input')?.addEventListener('keydown', e => {
+  if (e.key === 'Enter') handleCta();
+});`);
+    }
+    // 8. Counter animation (data-target number counting)
+    if (bodyHtml.includes('data-target')) {
+        blocks.push(`// Counter animation
+const counterObserver = new IntersectionObserver((entries) => {
+  entries.forEach(e => {
+    if (e.isIntersecting) {
+      const target = +e.target.dataset.target;
+      let count = 0;
+      const step = target / 40;
+      const timer = setInterval(() => {
+        count = Math.min(count + step, target);
+        e.target.textContent = Math.floor(count);
+        if (count >= target) clearInterval(timer);
+      }, 28);
+      counterObserver.unobserve(e.target);
+    }
+  });
+}, { threshold: 0.5 });
+document.querySelectorAll('[data-target]').forEach(c => counterObserver.observe(c));`);
+    }
+    // 9. Ripple button effects
+    if (css.includes('@keyframes ripple') || bodyHtml.includes('btn-primary') || bodyHtml.includes('plan-btn')) {
+        blocks.push(`// Ripple button effect
+document.querySelectorAll('.btn-primary, .plan-btn, .nav-install').forEach(btn => {
+  btn.addEventListener('click', function(e) {
+    const r = document.createElement('span');
+    const rect = this.getBoundingClientRect();
+    r.style.cssText = 'position:absolute;border-radius:50%;background:rgba(255,255,255,0.18);width:80px;height:80px;pointer-events:none;transform:scale(0);animation:ripple 0.6s ease forwards;left:' + (e.clientX - rect.left - 40) + 'px;top:' + (e.clientY - rect.top - 40) + 'px';
+    this.style.position = 'relative';
+    this.style.overflow = 'hidden';
+    this.appendChild(r);
+    setTimeout(() => r.remove(), 600);
+  });
+});`);
+    }
+    // 10. Smooth scroll for anchor links
+    if (bodyHtml.includes('scrollIntoView') || bodyHtml.includes('href="#')) {
+        blocks.push(`// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(link => {
+  link.addEventListener('click', (e) => {
+    const href = link.getAttribute('href');
+    if (href && href.length > 1) {
+      const target = document.querySelector(href);
+      if (target) {
+        e.preventDefault();
+        target.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  });
+});`);
+    }
+    if (blocks.length === 0)
+        return '';
+    return '// ─── Auto-detected Interactive Patterns ───\n\n' + blocks.join('\n\n');
+}
+// ─── JavaScript Generation ──────────────────────────────────────────
+function cleanHandlerBody(body) {
+    let cleanBody = body;
+    // React: setX(prev => !prev) → x = !x
+    cleanBody = cleanBody.replace(/set(\w+)\(\s*(?:prev|p)\s*=>\s*!(?:prev|p)\s*\)/g, (_, varName) => {
+        const v = varName.charAt(0).toLowerCase() + varName.slice(1);
+        return `${v} = !${v}`;
+    });
+    // React: setX(value) → x = value (but not if value contains =>)
+    cleanBody = cleanBody.replace(/set(\w+)\(([^)=]+)\)/g, (_, varName, val) => {
+        if (val.includes('=>'))
+            return `set${varName}(${val})`; // skip complex setters
+        const v = varName.charAt(0).toLowerCase() + varName.slice(1);
+        return `${v} = ${val}`;
+    });
+    // Vue: x.value = y → x = y
+    cleanBody = cleanBody.replace(/(\w+)\.value\s*=/g, '$1 =');
+    cleanBody = cleanBody.replace(/(\w+)\.value\b/g, '$1');
+    // Angular: this.x.update(v => !v) → x = !x
+    cleanBody = cleanBody.replace(/this\.(\w+)\.update\(v\s*=>\s*!v\)/g, '$1 = !$1');
+    cleanBody = cleanBody.replace(/this\.(\w+)\.set\(([^)]+)\)/g, '$1 = $2');
+    // Angular: this.x() → x (signal read)
+    cleanBody = cleanBody.replace(/this\.(\w+)\(\)/g, '$1');
+    // Remove TODO comments
+    cleanBody = cleanBody.replace(/\/\/\s*TODO:.*$/gm, '');
+    // Remove React-specific patterns
+    cleanBody = cleanBody.replace(/e\.currentTarget\b/g, 'event.currentTarget');
+    cleanBody = cleanBody.replace(/e\.target\b/g, 'event.target');
+    cleanBody = cleanBody.replace(/e\.preventDefault\(\)/g, 'event.preventDefault()');
+    // Fix broken arrow in setTimeout: timeout = ( => expr) → setTimeout(() => expr)
+    cleanBody = cleanBody.replace(/timeout\s*=\s*\(\s*=>\s*(.+?),\s*(\d+)\)/g, 'setTimeout(() => $1, $2)');
+    // Fix: (prev => !prev) without setState wrapper → just toggle
+    cleanBody = cleanBody.replace(/\(\s*prev\s*=>\s*!prev\s*\)/g, '!value');
+    // Remove return () => { cleanup } patterns (React effect cleanup)
+    cleanBody = cleanBody.replace(/return\s*\(\)\s*=>\s*\{[\s\S]*?\};?/g, '');
+    return cleanBody;
+}
+function generateConsolidatedJS(stateVars, handlers, effects) {
+    const lines = [];
+    lines.push('// ─── Application State & Handlers ───');
+    // State variables
+    for (const [name, initial] of stateVars) {
+        // Clean up initial values
+        let cleanInitial = initial;
+        // Remove type annotations
+        cleanInitial = cleanInitial.replace(/<[^>]+>/g, '');
+        lines.push(`let ${name} = ${cleanInitial};`);
+    }
+    if (stateVars.size > 0)
+        lines.push('');
+    // Event handlers
+    for (const [name, body] of handlers) {
+        const cleanBody = cleanHandlerBody(body);
+        const cleanLines = cleanBody.split('\n').filter(l => l.trim());
+        if (cleanLines.length === 0) {
+            lines.push(`function ${name}() { /* TODO: implement */ }`);
+        }
+        else {
+            lines.push(`function ${name}(event) {`);
+            for (const line of cleanLines) {
+                lines.push(`  ${line.trim()}`);
+            }
+            lines.push('}');
+        }
+        lines.push('');
+    }
+    // Effects → DOMContentLoaded
+    if (effects.length > 0) {
+        const cleanEffects = effects.map(e => cleanHandlerBody(e)).filter(e => e.trim());
+        if (cleanEffects.length > 0) {
+            lines.push(`document.addEventListener('DOMContentLoaded', function() {`);
+            for (const effect of cleanEffects) {
+                for (const line of effect.split('\n')) {
+                    if (line.trim())
+                        lines.push(`  ${line.trim()}`);
+                }
+            }
+            lines.push('});');
+        }
+    }
+    return lines.join('\n');
+}
+function generateHashRouter(routes, componentMap) {
+    // The hash router is generated inline in the SPA page
+    // This function generates the init function that wires up link clicks
+    return `
+function initInteractive() {
+  // Wire up hash navigation links
+  document.querySelectorAll('a[href^="#/"]').forEach(function(link) {
+    link.addEventListener('click', function(e) {
+      e.preventDefault();
+      var path = this.getAttribute('href');
+      if (path) window.location.hash = path.slice(1);
+    });
+  });
+}
+`;
+}
+function buildHTMLDocument(options) {
+    const headParts = [];
+    const bodyEndParts = [];
+    // Separate head scripts (Tailwind config, etc.) from body scripts
+    for (const src of options.externalScripts) {
+        if (src.includes('tailwindcss') || src.includes('tailwind')) {
+            // Tailwind CDN goes in head
+            headParts.push(`  <script src="${src}"></script>`);
+        }
+        else {
+            bodyEndParts.push(`  <script src="${src}"></script>`);
+        }
+    }
+    // Output preconnect hints before stylesheets (for font loading optimization)
+    const preconnectTags = (options.preconnectLinks || [])
+        .map(tag => `  ${tag}`)
+        .join('\n');
+    const extStyleLinks = options.externalStyles
+        .map(href => `  <link rel="stylesheet" href="${href}" />`)
+        .join('\n');
+    // Check if the project uses Tailwind (by looking at CSS for @tailwind directives)
+    const usesTailwind = options.css.includes('@tailwind') || headParts.length > 0;
+    // If using Tailwind but no CDN script found, add it
+    if (usesTailwind && headParts.length === 0) {
+        headParts.push('  <script src="https://cdn.tailwindcss.com"></script>');
+    }
+    const headScripts = headParts.length > 0 ? '\n' + headParts.join('\n') : '';
+    const bodyScripts = bodyEndParts.length > 0 ? '\n' + bodyEndParts.join('\n') : '';
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${options.title}</title>${headScripts}
+${preconnectTags ? preconnectTags + '\n' : ''}${extStyleLinks}
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+${options.body}
+${bodyScripts}
+  <script src="app.js"></script>
+</body>
+</html>
+`;
+}
+//# sourceMappingURL=html-generator.js.map