bertui 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Lightning-fast React dev server powered by Bun - Now with Rust image optimization (WASM, no Rust required for users)",
   "type": "module",
   "main": "./index.js",

package/src/build/compiler/file-transpiler.js

@@ -187,11 +187,16 @@ function _usesJSX(code) {
 }
 
 function _removeCSSImports(code) {
+  // Replace CSS module imports with a Proxy so styles.foo = 'foo' at runtime
+  code = code.replace(
+    /import\s+(\w+)\s+from\s+['"][^'"]*\.module\.css['"];?\s*/g,
+    (_, varName) => `const ${varName} = new Proxy({}, { get: (_, k) => k });\n`
+  );
+  // Strip plain CSS imports entirely
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   return code;
 }
-
 function _fixBuildImports(code, srcPath, outPath, root) {
   const buildDir    = join(root, '.bertuibuild');
   const routerPath  = join(buildDir, 'router.js');

package/src/build/compiler/router-generator.js

@@ -14,6 +14,7 @@ export async function generateBuildRouter(routes, buildDir) {
   }).join(',\n');
   
   const routerCode = `import React, { useState, useEffect, createContext, useContext } from 'react';
+import { createRoot } from 'react-dom/client';
 
 const RouterContext = createContext(null);
 
@@ -98,7 +99,19 @@ ${imports}
 
 export const routes = [
 ${routeConfigs}
-];`;
+];
+
+// Guard against double-mount. router.js is imported by main.js — if it ever
+// gets evaluated more than once (e.g. duplicate script tags, HMR quirks),
+// this ensures React never calls createRoot on the same container twice,
+// which causes "Node.removeChild: The node to be removed is not a child" crashes.
+if (!window.__BERTUI_MOUNTED__) {
+  window.__BERTUI_MOUNTED__ = true;
+  const container = document.getElementById('root');
+  const app = React.createElement(Router, { routes });
+  createRoot(container).render(app);
+}
+`;
   
   await Bun.write(join(buildDir, 'router.js'), routerCode);
 }

package/src/build/generators/html-generator.js

@@ -1,54 +1,45 @@
-// bertui/src/build/generators/html-generator.js - FIXED CSS BUILD
+// bertui/src/build/generators/html-generator.js
 import { join, relative } from 'path';
 import { mkdirSync, existsSync, cpSync } from 'fs';
 import logger from '../../logger/logger.js';
 import { extractMetaFromSource } from '../../utils/meta-extractor.js';
 
-export async function generateProductionHTML(root, outDir, buildResult, routes, serverIslands, config) {
-  const mainBundle = buildResult.outputs.find(o => 
+export async function generateProductionHTML(root, outDir, buildDir, buildResult, routes, serverIslands, config) {
+  const mainBundle = buildResult.outputs.find(o =>
     o.path.includes('main') && o.kind === 'entry-point'
   );
-  
+
   if (!mainBundle) {
     logger.error('❌ Could not find main bundle');
     return;
   }
-  
+
   const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
   const defaultMeta = config.meta || {};
-  
+
   const bertuiPackages = await copyBertuiPackagesToProduction(root, outDir);
-  
+
   logger.info(`📄 Generating HTML for ${routes.length} routes...`);
-  
+
   const BATCH_SIZE = 5;
-  
+
   for (let i = 0; i < routes.length; i += BATCH_SIZE) {
     const batch = routes.slice(i, i + BATCH_SIZE);
-    logger.debug(`Processing batch ${Math.floor(i/BATCH_SIZE) + 1}/${Math.ceil(routes.length/BATCH_SIZE)}`);
-    
+    logger.debug(`Processing batch ${Math.floor(i / BATCH_SIZE) + 1}/${Math.ceil(routes.length / BATCH_SIZE)}`);
     for (const route of batch) {
-      await processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir, bertuiPackages);
+      await processSingleRoute(route, config, defaultMeta, bundlePath, outDir, bertuiPackages);
     }
   }
-  
+
   logger.success(`✅ HTML generation complete for ${routes.length} routes`);
 }
 
 async function copyBertuiPackagesToProduction(root, outDir) {
   const nodeModulesDir = join(root, 'node_modules');
-  const packages = {
-    bertuiIcons: false,
-    bertuiAnimate: false,
-    elysiaEden: false
-  };
-  
-  if (!existsSync(nodeModulesDir)) {
-    logger.debug('node_modules not found, skipping package copy');
-    return packages;
-  }
-  
-  // Copy bertui-icons
+  const packages = { bertuiIcons: false, bertuiAnimate: false, elysiaEden: false };
+
+  if (!existsSync(nodeModulesDir)) return packages;
+
   const bertuiIconsSource = join(nodeModulesDir, 'bertui-icons');
   if (existsSync(bertuiIconsSource)) {
     try {
@@ -61,14 +52,12 @@ async function copyBertuiPackagesToProduction(root, outDir) {
       logger.error(`Failed to copy bertui-icons: ${error.message}`);
     }
   }
-  
-  // Copy bertui-animate CSS files
+
   const bertuiAnimateSource = join(nodeModulesDir, 'bertui-animate', 'dist');
   if (existsSync(bertuiAnimateSource)) {
     try {
       const bertuiAnimateDest = join(outDir, 'css');
       mkdirSync(bertuiAnimateDest, { recursive: true });
-      
       const minCSSPath = join(bertuiAnimateSource, 'bertui-animate.min.css');
       if (existsSync(minCSSPath)) {
         cpSync(minCSSPath, join(bertuiAnimateDest, 'bertui-animate.min.css'));
@@ -80,7 +69,6 @@ async function copyBertuiPackagesToProduction(root, outDir) {
     }
   }
 
-  // Copy @elysiajs/eden
   const elysiaEdenSource = join(nodeModulesDir, '@elysiajs', 'eden');
   if (existsSync(elysiaEdenSource)) {
     try {
@@ -93,33 +81,18 @@ async function copyBertuiPackagesToProduction(root, outDir) {
       logger.error(`Failed to copy @elysiajs/eden: ${error.message}`);
     }
   }
-  
+
   return packages;
 }
 
-async function processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir, bertuiPackages) {
+async function processSingleRoute(route, config, defaultMeta, bundlePath, outDir, bertuiPackages) {
   try {
     const sourceCode = await Bun.file(route.path).text();
     const pageMeta = extractMetaFromSource(sourceCode);
     const meta = { ...defaultMeta, ...pageMeta };
-    
-    const isServerIsland = serverIslands.find(si => si.route === route.route);
-    
-    let staticHTML = '';
-    
-    if (isServerIsland) {
-      logger.info(`🏝️  Extracting static content: ${route.route}`);
-      staticHTML = await extractStaticHTMLFromComponent(sourceCode, route.path);
-      
-      if (staticHTML) {
-        logger.success(`✅ Server Island rendered: ${route.route}`);
-      } else {
-        logger.warn(`⚠️  Could not extract HTML, falling back to client-only`);
-      }
-    }
-    
-    const html = generateHTML(meta, route, bundlePath, staticHTML, isServerIsland, bertuiPackages);
-    
+
+    const html = generateHTML(meta, bundlePath, bertuiPackages);
+
     let htmlPath;
     if (route.route === '/') {
       htmlPath = join(outDir, 'index.html');
@@ -128,208 +101,62 @@ async function processSingleRoute(route, serverIslands, config, defaultMeta, bun
       mkdirSync(routeDir, { recursive: true });
       htmlPath = join(routeDir, 'index.html');
     }
-    
+
     await Bun.write(htmlPath, html);
-    
-    if (isServerIsland) {
-      logger.success(`✅ Server Island: ${route.route} (instant content!)`);
-    } else {
-      logger.success(`✅ Client-only: ${route.route}`);
-    }
-    
-  } catch (error) {
-    logger.error(`Failed HTML for ${route.route}: ${error.message}`);
-  }
-}
+    logger.success(`✅ ${route.route}`);
 
-async function extractStaticHTMLFromComponent(sourceCode, filePath) {
-  try {
-    const returnMatch = sourceCode.match(/return\s*\(/);
-    if (!returnMatch) {
-      logger.warn(`⚠️  Could not find return statement in ${filePath}`);
-      return null;
-    }
-    
-    const codeBeforeReturn = sourceCode.substring(0, returnMatch.index);
-    const jsxContent = sourceCode.substring(returnMatch.index);
-    
-    const hookPatterns = [
-      'useState', 'useEffect', 'useContext', 'useReducer',
-      'useCallback', 'useMemo', 'useRef', 'useImperativeHandle',
-      'useLayoutEffect', 'useDebugValue'
-    ];
-    
-    let hasHooks = false;
-    for (const hook of hookPatterns) {
-      const regex = new RegExp(`\\b${hook}\\s*\\(`, 'g');
-      if (regex.test(codeBeforeReturn)) {
-        logger.error(`❌ Server Island at ${filePath} contains React hooks!`);
-        logger.error(`   Server Islands must be pure HTML - no ${hook}, etc.`);
-        hasHooks = true;
-        break;
-      }
-    }
-    
-    if (hasHooks) return null;
-    
-    const importLines = codeBeforeReturn.split('\n')
-      .filter(line => line.trim().startsWith('import'))
-      .join('\n');
-    
-    const hasRouterImport = /from\s+['"]bertui\/router['"]/m.test(importLines);
-    
-    if (hasRouterImport) {
-      logger.error(`❌ Server Island at ${filePath} imports from 'bertui/router'!`);
-      logger.error(`   Server Islands cannot use Link - use <a> tags instead.`);
-      return null;
-    }
-    
-    const eventHandlers = [
-      'onClick=', 'onChange=', 'onSubmit=', 'onInput=', 'onFocus=',
-      'onBlur=', 'onMouseEnter=', 'onMouseLeave=', 'onKeyDown=',
-      'onKeyUp=', 'onScroll='
-    ];
-    
-    for (const handler of eventHandlers) {
-      if (jsxContent.includes(handler)) {
-        logger.error(`❌ Server Island uses event handler: ${handler.replace('=', '')}`);
-        logger.error(`   Server Islands are static HTML - no interactivity allowed`);
-        return null;
-      }
-    }
-    
-    const fullReturnMatch = sourceCode.match(/return\s*\(([\s\S]*?)\);?\s*}/);
-    if (!fullReturnMatch) {
-      logger.warn(`⚠️  Could not extract JSX from ${filePath}`);
-      return null;
-    }
-    
-    let html = fullReturnMatch[1].trim();
-    
-    html = html.replace(/\{\/\*[\s\S]*?\*\/\}/g, '');
-    html = html.replace(/className=/g, 'class=');
-    
-    html = html.replace(/style=\{\{([^}]+)\}\}/g, (match, styleObj) => {
-      const props = [];
-      let currentProp = '';
-      let depth = 0;
-      
-      for (let i = 0; i < styleObj.length; i++) {
-        const char = styleObj[i];
-        if (char === '(') depth++;
-        if (char === ')') depth--;
-        
-        if (char === ',' && depth === 0) {
-          props.push(currentProp.trim());
-          currentProp = '';
-        } else {
-          currentProp += char;
-        }
-      }
-      if (currentProp.trim()) props.push(currentProp.trim());
-      
-      const cssString = props
-        .map(prop => {
-          const colonIndex = prop.indexOf(':');
-          if (colonIndex === -1) return '';
-          
-          const key = prop.substring(0, colonIndex).trim();
-          const value = prop.substring(colonIndex + 1).trim();
-          
-          if (!key || !value) return '';
-          
-          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-          const cssValue = value.replace(/['"]/g, '');
-          
-          return `${cssKey}: ${cssValue}`;
-        })
-        .filter(Boolean)
-        .join('; ');
-      
-      return `style="${cssString}"`;
-    });
-    
-    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 
-                          'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-    
-    html = html.replace(/<(\w+)([^>]*)\s*\/>/g, (match, tag, attrs) => {
-      if (voidElements.includes(tag.toLowerCase())) {
-        return match;
-      } else {
-        return `<${tag}${attrs}></${tag}>`;
-      }
-    });
-    
-    html = html.replace(/\{`([^`]*)`\}/g, '$1');
-    html = html.replace(/\{(['"])(.*?)\1\}/g, '$2');
-    html = html.replace(/\{(\d+)\}/g, '$1');
-    
-    logger.info(`   Extracted ${html.length} chars of static HTML`);
-    return html;
-    
   } catch (error) {
-    logger.error(`Failed to extract HTML: ${error.message}`);
-    return null;
+    logger.error(`Failed HTML for ${route.route}: ${error.message}`);
+    console.error(error);
   }
 }
 
-function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland = false, bertuiPackages = {}) {
-  const rootContent = staticHTML 
-    ? `<div id="root">${staticHTML}</div>` 
-    : '<div id="root"></div>';
-  
-  const comment = isServerIsland 
-    ? '<!-- 🏝️ Server Island: Static content rendered at build time -->'
-    : '<!-- ⚡ Client-only: Content rendered by JavaScript -->';
-  
-  const bertuiIconsImport = bertuiPackages.bertuiIcons 
+function generateHTML(meta, bundlePath, bertuiPackages = {}) {
+  const bertuiIconsImport = bertuiPackages.bertuiIcons
     ? ',\n      "bertui-icons": "/node_modules/bertui-icons/generated/index.js"'
     : '';
-  
+
   const bertuiAnimateCSS = bertuiPackages.bertuiAnimate
     ? '  <link rel="stylesheet" href="/css/bertui-animate.min.css">'
     : '';
 
-  // ✅ NEW: @elysiajs/eden local import map
   const elysiaEdenImport = bertuiPackages.elysiaEden
     ? ',\n      "@elysiajs/eden": "/node_modules/@elysiajs/eden/dist/index.mjs"'
     : '';
-  
+
   return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${meta.title || 'BertUI App'}</title>
-  
   <meta name="description" content="${meta.description || 'Built with BertUI'}">
   ${meta.keywords ? `<meta name="keywords" content="${meta.keywords}">` : ''}
   ${meta.author ? `<meta name="author" content="${meta.author}">` : ''}
   ${meta.themeColor ? `<meta name="theme-color" content="${meta.themeColor}">` : ''}
-  
   <meta property="og:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
   <meta property="og:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
   ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
-  
   <link rel="stylesheet" href="/styles/bertui.min.css">
 ${bertuiAnimateCSS}
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  
   <script type="importmap">
   {
     "imports": {
       "react": "https://esm.sh/react@18.2.0",
       "react-dom": "https://esm.sh/react-dom@18.2.0",
-      "@bunnyx/api": "/bunnyx-api/api-client.js",
       "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
-      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"${bertuiIconsImport}${elysiaEdenImport}
+      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
+      "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime",
+      "@bunnyx/api": "/bunnyx-api/api-client.js",
+      "@elysiajs/eden": "/node_modules/@elysiajs/eden/dist/index.mjs"${bertuiIconsImport}${elysiaEdenImport}
     }
   }
   </script>
+  <script>window.__BERTUI_HYDRATE__ = false;</script>
 </head>
 <body>
-  ${comment}
-  ${rootContent}
+  <div id="root"></div>
   <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;

package/src/build/server-island-validator.js

@@ -12,30 +12,52 @@ import logger from '../logger/logger.js';
 export function validateServerIsland(sourceCode, filePath) {
   const errors = [];
   
-  // Rule 1: No React hooks (FIXED: only match actual function calls)
+  // SUPER AGGRESSIVE STRIPPING: Remove EVERYTHING that could be a false positive
+  
+  // First, remove all JSX prop values that contain code examples
+  let cleanedCode = sourceCode
+    // Remove the entire content of <Code> components (most common culprit)
+    .replace(/<Code[^>]*>[\s\S]*?<\/Code>/g, '')
+    // Remove the entire content of <InlineCode> components
+    .replace(/<InlineCode[^>]*>[\s\S]*?<\/InlineCode>/g, '')
+    // Remove any JSX expression that looks like it contains code
+    .replace(/\{`[\s\S]*?`\}/g, '{}')
+    .replace(/\{[\s\S]*?import[\s\S]*?\}/g, '{}')
+    .replace(/\{[\s\S]*?useState[\s\S]*?\}/g, '{}')
+    .replace(/\{[\s\S]*?useEffect[\s\S]*?\}/g, '{}')
+    .replace(/\{[\s\S]*?fetch\([\s\S]*?\}/g, '{}');
+  
+  // Then strip all string literals
+  cleanedCode = cleanedCode
+    .replace(/`[\s\S]*?`/g, '""')
+    .replace(/"(?:[^"\\]|\\.)*"/g, '""')
+    .replace(/'(?:[^'\\]|\\.)*'/g, "''")
+    // Remove comments
+    .replace(/\/\/.*$/gm, '')
+    .replace(/\/\*[\s\S]*?\*\//g, '');
+  
+  // Rule 1: No React hooks (check the cleaned code only)
   const hookPatterns = [
-    'useState',
-    'useEffect',
-    'useContext',
-    'useReducer',
-    'useCallback',
-    'useMemo',
-    'useRef',
-    'useImperativeHandle',
-    'useLayoutEffect',
-    'useDebugValue',
-    'useId',
-    'useDeferredValue',
-    'useTransition',
-    'useSyncExternalStore'
+    'useState', 'useEffect', 'useContext', 'useReducer',
+    'useCallback', 'useMemo', 'useRef', 'useImperativeHandle',
+    'useLayoutEffect', 'useDebugValue', 'useId', 'useDeferredValue',
+    'useTransition', 'useSyncExternalStore'
   ];
   
   for (const hook of hookPatterns) {
-    // FIXED: Only match hooks as function calls, not in text/comments
-    // Looks for: useState( or const [x] = useState(
+    // Look for the hook as a function call, but only in the cleaned code
     const regex = new RegExp(`\\b${hook}\\s*\\(`, 'g');
-    if (regex.test(sourceCode)) {
-      errors.push(`❌ Uses React hook: ${hook}`);
+    
+    // Also check that it's not preceded by "import" or part of a comment
+    const matches = cleanedCode.match(regex);
+    if (matches) {
+      // Verify this isn't in an import statement by checking context
+      const hookIndex = cleanedCode.indexOf(matches[0]);
+      const contextBefore = cleanedCode.substring(Math.max(0, hookIndex - 50), hookIndex);
+      
+      if (!contextBefore.includes('import')) {
+        errors.push(`❌ Uses React hook: ${hook}`);
+      }
     }
   }
   
@@ -45,26 +67,27 @@ export function validateServerIsland(sourceCode, filePath) {
     errors.push('❌ Imports from \'bertui/router\' (use <a> tags instead of Link)');
   }
   
-  // Rule 3: No browser APIs (FIXED: only match actual usage, not in strings/comments)
+  // Rule 3: No browser APIs (check cleaned code)
   const browserAPIs = [
-    { pattern: 'window\\.', name: 'window' },
-    { pattern: 'document\\.', name: 'document' },
-    { pattern: 'localStorage\\.', name: 'localStorage' },
-    { pattern: 'sessionStorage\\.', name: 'sessionStorage' },
-    { pattern: 'navigator\\.', name: 'navigator' },
-    { pattern: 'location\\.', name: 'location' },
-    { pattern: 'history\\.', name: 'history' },
-    { pattern: '(?<!//.*|/\\*.*|\\*)\\bfetch\\s*\\(', name: 'fetch' },
+    { pattern: '\\bwindow\\.(?!location)', name: 'window' },
+    { pattern: '\\bdocument\\.', name: 'document' },
+    { pattern: '\\blocalStorage\\.', name: 'localStorage' },
+    { pattern: '\\bsessionStorage\\.', name: 'sessionStorage' },
+    { pattern: '\\bnavigator\\.', name: 'navigator' },
+    { pattern: '\\blocation\\.(?!href)', name: 'location' },
+    { pattern: '\\bhistory\\.', name: 'history' },
+    { pattern: '\\bfetch\\s*\\(', name: 'fetch' },
     { pattern: '\\.addEventListener\\s*\\(', name: 'addEventListener' },
     { pattern: '\\.removeEventListener\\s*\\(', name: 'removeEventListener' },
     { pattern: '\\bsetTimeout\\s*\\(', name: 'setTimeout' },
     { pattern: '\\bsetInterval\\s*\\(', name: 'setInterval' },
-    { pattern: '\\brequestAnimationFrame\\s*\\(', name: 'requestAnimationFrame' }
+    { pattern: '\\brequestAnimationFrame\\s*\\(', name: 'requestAnimationFrame' },
+    { pattern: '\\bconsole\\.', name: 'console' }
   ];
   
   for (const api of browserAPIs) {
     const regex = new RegExp(api.pattern, 'g');
-    if (regex.test(sourceCode)) {
+    if (regex.test(cleanedCode)) {
       if (api.name === 'console') {
         logger.warn(`⚠️  ${filePath} uses console.log (will not work in static HTML)`);
       } else {
@@ -73,34 +96,28 @@ export function validateServerIsland(sourceCode, filePath) {
     }
   }
   
-  // Rule 4: No event handlers (these won't work without JS)
+  // Rule 4: No event handlers (check cleaned code)
   const eventHandlers = [
-    'onClick=',
-    'onChange=',
-    'onSubmit=',
-    'onInput=',
-    'onFocus=',
-    'onBlur=',
-    'onMouseEnter=',
-    'onMouseLeave=',
-    'onKeyDown=',
-    'onKeyUp=',
-    'onScroll='
+    'onClick=', 'onChange=', 'onSubmit=', 'onInput=', 'onFocus=',
+    'onBlur=', 'onMouseEnter=', 'onMouseLeave=', 'onKeyDown=',
+    'onKeyUp=', 'onScroll='
   ];
   
   for (const handler of eventHandlers) {
-    if (sourceCode.includes(handler)) {
+    const escapedHandler = handler.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`\\b${escapedHandler}\\s*{`, 'g');
+    if (regex.test(cleanedCode)) {
       errors.push(`❌ Uses event handler: ${handler.replace('=', '')} (Server Islands are static HTML)`);
     }
   }
   
   // Rule 5: Check for dynamic imports
-  if (/import\s*\(/.test(sourceCode)) {
+  if (/import\s*\(/.test(cleanedCode)) {
     errors.push('❌ Uses dynamic import() (not supported in Server Islands)');
   }
   
-  // Rule 6: Check for async/await (usually indicates API calls)
-  if (/async\s+function|async\s*\(|async\s+\w+\s*\(/.test(sourceCode)) {
+  // Rule 6: Check for async/await
+  if (/async\s+function|async\s*\(|async\s+\w+\s*\(/.test(cleanedCode)) {
     errors.push('❌ Uses async/await (Server Islands must be synchronous)');
   }
   
@@ -109,6 +126,8 @@ export function validateServerIsland(sourceCode, filePath) {
   return { valid, errors };
 }
 
+
+
 /**
  * Display validation errors in a clear format
  */

package/src/build.js

@@ -78,15 +78,14 @@ export async function buildProduction(options = {}) {
     // ── Step 8: Bundle JS ────────────────────────────────────────────────────
     logger.step(8, TOTAL_STEPS, 'Bundling JS');
     const buildEntry = join(buildDir, 'main.js');
-    const routerPath = join(buildDir, 'router.js');
     if (!existsSync(buildEntry)) throw new Error('main.js not found in build dir');
-    const result = await bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config);
+    const result = await bundleJavaScript(buildEntry, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config);
     totalKB = (result.outputs.reduce((a, o) => a + (o.size || 0), 0) / 1024).toFixed(1);
     logger.stepDone('Bundling JS', `${totalKB} KB · tree-shaken`);
 
     // ── Step 9: HTML ─────────────────────────────────────────────────────────
     logger.step(9, TOTAL_STEPS, 'Generating HTML');
-    await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
+    await generateProductionHTML(root, outDir, buildDir, result, routes, serverIslands, config);
     logger.stepDone('Generating HTML', `${routes.length} pages`);
 
     // ── Step 10: Sitemap + robots ────────────────────────────────────────────
@@ -95,10 +94,15 @@ export async function buildProduction(options = {}) {
     await generateRobots(config, outDir, routes);
     logger.stepDone('Sitemap & robots');
 
+    // Delete build dir AFTER HTML generation
     if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
 
-    // Fire-and-forget — don't let the report generator block process exit
-    analyzeBuild(outDir, { outputFile: join(outDir, 'bundle-report.html') }).catch(() => {});
+    // Generate bundle report
+    try {
+      await analyzeBuild(outDir, { outputFile: join(outDir, 'bundle-report.html') });
+    } catch (reportErr) {
+      logger.debug(`Bundle report generation skipped: ${reportErr.message}`);
+    }
 
     // ── Summary ──────────────────────────────────────────────────────────────
     logger.printSummary({
@@ -110,6 +114,8 @@ export async function buildProduction(options = {}) {
       outDir:        'dist/',
     });
 
+    logger.cleanup();
+
     return { success: true };
 
   } catch (error) {
@@ -173,13 +179,15 @@ async function copyNodeModulesToDist(root, outDir, importMap) {
   }
 }
 
-async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config) {
+async function bundleJavaScript(buildEntry, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config) {
   const originalCwd = process.cwd();
   process.chdir(buildDir);
 
   try {
+    // Only main.js as entrypoint — router.js is imported by main.js already.
+    // Adding router.js as a second entrypoint causes it to mount twice on
+    // the same #root which triggers "Node.removeChild" DOM crashes in React.
     const entrypoints = [buildEntry];
-    if (existsSync(routerPath)) entrypoints.push(routerPath);
 
     const importMap = await generateProductionImportMap(root, config);
     await Bun.write(join(outDir, 'import-map.json'), JSON.stringify({ imports: importMap }, null, 2));
@@ -192,11 +200,26 @@ async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDi
       await Bun.write(join(outDir, 'bunnyx-api', 'api-client.js'), Bun.file(bunnyxSrc));
     }
 
+    const cssModulePlugin = {
+      name: 'css-modules',
+      setup(build) {
+        build.onLoad({ filter: /\.module\.css$/ }, () => ({
+          contents: 'export default new Proxy({}, { get: (_, k) => k });',
+          loader: 'js',
+        }));
+        build.onLoad({ filter: /\.css$/ }, () => ({
+          contents: '',
+          loader: 'js',
+        }));
+      },
+    };
+
     const result = await Bun.build({
       entrypoints,
       outdir:  join(outDir, 'assets'),
       target:  'browser',
       format:  'esm',
+      plugins: [cssModulePlugin],
       minify: {
         whitespace:  true,
         syntax:      true,
@@ -237,9 +260,9 @@ async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDi
 export async function build(options = {}) {
   try {
     await buildProduction(options);
+    process.exit(0);
   } catch (error) {
     console.error(error);
     process.exit(1);
   }
-  process.exit(0);
 }

package/src/logger/logger.js

@@ -3,6 +3,7 @@
 
 import { createWriteStream } from 'fs';
 import { join } from 'path';
+import { mkdirSync, existsSync } from 'fs';
 
 // ── ANSI helpers ─────────────────────────────────────────────────────────────
 const C = {
@@ -121,12 +122,10 @@ export function fileProgress(current, total, filename) {
 
 // ── Simple log levels (used internally, suppressed in compact mode) ───────────
 export function info(msg) {
-  // In compact mode swallow routine info — only pass through to debug log
   _debugLog('INFO', msg);
 }
 
 export function success(msg) {
-  // Swallow — stepDone() is the visual replacement
   _debugLog('SUCCESS', msg);
 }
 
@@ -185,6 +184,9 @@ export function bigLog(title, opts = {}) {
 // ── Build/Dev summary ─────────────────────────────────────────────────────────
 export function printSummary(stats = {}) {
   _stopSpinner();
+  // Close the log stream before printing summary
+  _closeLogStream();
+  
   process.stdout.write('\n');
 
   const dur = _startTime ? `${((Date.now() - _startTime) / 1000).toFixed(2)}s` : '';
@@ -268,17 +270,38 @@ let _logStream = null;
 function _debugLog(level, msg) {
   if (!_logStream) {
     try {
+      const logDir = join(process.cwd(), '.bertui');
+      if (!existsSync(logDir)) {
+        mkdirSync(logDir, { recursive: true });
+      }
+      
       _logStream = createWriteStream(
-        join(process.cwd(), '.bertui', 'dev.log'),
+        join(logDir, 'dev.log'),
         { flags: 'a' }
       );
-    } catch { return; }
+    } catch (err) {
+      return;
+    }
   }
   const ts = new Date().toISOString().substring(11, 23);
   _logStream.write(`[${ts}] [${level}] ${msg}\n`);
 }
 
-// ── Default export (matches existing logger.method() call sites) ──────────────
+// NEW: Function to close the log stream
+function _closeLogStream() {
+  if (_logStream) {
+    _logStream.end();
+    _logStream = null;
+  }
+}
+
+// NEW: Cleanup function to be called when done
+export function cleanup() {
+  _stopSpinner();
+  _closeLogStream();
+}
+
+// ── Default export ────────────────────────────────────────────────────────────
 export default {
   printHeader,
   step,
@@ -293,4 +316,5 @@ export default {
   table,
   bigLog,
   printSummary,
+  cleanup,  // Export cleanup function
 };

package/src/serve.js

@@ -42,10 +42,8 @@ export async function startPreviewServer(options = {}) {
     process.exit(1);
   }
   
-  logger.bigLog(`🚀 PREVIEW SERVER`, { color: 'green' });
-  logger.info(`📁 Serving: ${publicPath}`);
-  logger.info(`🌐 URL: http://localhost:${port}`);
-  logger.info(`⚡ Press Ctrl+C to stop`);
+console.log(`\n  🚀 Preview running at http://localhost:${port}`);
+console.log(`  Press Ctrl+C to stop\n`);
   
   // Track connections for graceful shutdown
   const connections = new Set();

package/src/server/dev-server-utils.js

@@ -72,14 +72,17 @@ export async function buildDevImportMap(root) {
 
   logger.info('🔄 Rebuilding dev import map (new packages detected)...');
 
+  // Initialize importMap with default mappings
   const importMap = {
-    'react':             'https://esm.sh/react@18.2.0',
-    'react-dom':         'https://esm.sh/react-dom@18.2.0',
-    'react-dom/client':  'https://esm.sh/react-dom@18.2.0/client',
-    'react/jsx-runtime': 'https://esm.sh/react@18.2.0/jsx-runtime',
-  '@bunnyx/api': '/bunnyx-api/api-client.js', 
-    '@elysiajs/eden':    '/node_modules/@elysiajs/eden/dist/index.mjs',
+    'react':                  'https://esm.sh/react@18.2.0',
+    'react-dom':              'https://esm.sh/react-dom@18.2.0',
+    'react-dom/client':       'https://esm.sh/react-dom@18.2.0/client',
+    'react/jsx-runtime':      'https://esm.sh/react@18.2.0/jsx-runtime',
+    'react/jsx-dev-runtime':  'https://esm.sh/react@18.2.0/jsx-dev-runtime',
+    '@bunnyx/api':            '/bunnyx-api/api-client.js',
+    '@elysiajs/eden':         '/node_modules/@elysiajs/eden/dist/index.mjs',
   };
+  
   const SKIP = new Set(['react', 'react-dom', '.bin', '.cache', '.package-lock.json', '.yarn']);
 
   if (existsSync(nodeModulesDir)) {