bertui 0.3.9 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.3.9",
+  "version": "0.4.1",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",

package/src/build/image-optimizer.js

@@ -0,0 +1,216 @@
+// bertui/src/build/image-optimizer.js
+import { join, extname, basename, dirname } from 'path';
+import { existsSync, mkdirSync, readdirSync, statSync, cpSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * Optimize images using Bun's native image processing
+ * This is FAST because it uses native code under the hood
+ */
+export async function optimizeImages(srcDir, outDir) {
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif'];
+  let optimized = 0;
+  let totalSaved = 0;
+
+  logger.info('🖼️  Optimizing images...');
+
+  async function processDirectory(dir, targetDir) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const destPath = join(targetDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!existsSync(destPath)) {
+          mkdirSync(destPath, { recursive: true });
+        }
+        await processDirectory(srcPath, destPath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name).toLowerCase();
+
+        if (imageExtensions.includes(ext)) {
+          try {
+            const result = await optimizeImage(srcPath, destPath);
+            if (result) {
+              optimized++;
+              totalSaved += result.saved;
+              logger.debug(`Optimized: ${entry.name} (saved ${(result.saved / 1024).toFixed(2)}KB)`);
+            }
+          } catch (error) {
+            logger.warn(`Failed to optimize ${entry.name}: ${error.message}`);
+            // Fallback: just copy the file
+            cpSync(srcPath, destPath);
+          }
+        }
+      }
+    }
+  }
+
+  await processDirectory(srcDir, outDir);
+
+  if (optimized > 0) {
+    logger.success(`Optimized ${optimized} images (saved ${(totalSaved / 1024).toFixed(2)}KB)`);
+  }
+
+  return { optimized, saved: totalSaved };
+}
+
+/**
+ * Optimize a single image using Bun's native capabilities
+ * Falls back to direct copy if optimization fails
+ */
+async function optimizeImage(srcPath, destPath) {
+  const ext = extname(srcPath).toLowerCase();
+  const originalFile = Bun.file(srcPath);
+  const originalSize = originalFile.size;
+
+  try {
+    // Read the image
+    const imageBuffer = await originalFile.arrayBuffer();
+
+    // For PNG/JPEG, we can optimize
+    if (ext === '.png' || ext === '.jpg' || ext === '.jpeg') {
+      // Use Bun's native image optimization
+      // This is fast because it uses native C libraries
+      const optimized = await optimizeWithBun(imageBuffer, ext);
+      
+      if (optimized && optimized.byteLength < originalSize) {
+        await Bun.write(destPath, optimized);
+        const saved = originalSize - optimized.byteLength;
+        return { saved, originalSize, newSize: optimized.byteLength };
+      }
+    }
+
+    // For other formats or if optimization didn't help, just copy
+    cpSync(srcPath, destPath);
+    return null;
+  } catch (error) {
+    // If anything fails, just copy the original
+    cpSync(srcPath, destPath);
+    return null;
+  }
+}
+
+/**
+ * Optimize using Bun's native capabilities
+ * This is a placeholder - Bun doesn't have built-in image optimization yet
+ * We'll use a fast external library via Bun's FFI or shell commands
+ */
+async function optimizeWithBun(buffer, ext) {
+  try {
+    // For now, we'll use oxipng and mozjpeg via shell commands
+    // These are the FASTEST available options (Rust-based)
+    const tempInput = `/tmp/bertui_input_${Date.now()}${ext}`;
+    const tempOutput = `/tmp/bertui_output_${Date.now()}${ext}`;
+
+    await Bun.write(tempInput, buffer);
+
+    if (ext === '.png') {
+      // Use oxipng (Rust-based, ultra-fast)
+      const proc = Bun.spawn(['oxipng', '-o', '2', '--strip', 'safe', tempInput, '-o', tempOutput], {
+        stdout: 'ignore',
+        stderr: 'ignore'
+      });
+      await proc.exited;
+
+      if (existsSync(tempOutput)) {
+        const optimized = await Bun.file(tempOutput).arrayBuffer();
+        // Cleanup
+        Bun.spawn(['rm', tempInput, tempOutput]);
+        return optimized;
+      }
+    } else if (ext === '.jpg' || ext === '.jpeg') {
+      // Use mozjpeg (fastest JPEG optimizer)
+      const proc = Bun.spawn(['cjpeg', '-quality', '85', '-optimize', '-outfile', tempOutput, tempInput], {
+        stdout: 'ignore',
+        stderr: 'ignore'
+      });
+      await proc.exited;
+
+      if (existsSync(tempOutput)) {
+        const optimized = await Bun.file(tempOutput).arrayBuffer();
+        // Cleanup
+        Bun.spawn(['rm', tempInput, tempOutput]);
+        return optimized;
+      }
+    }
+
+    // Cleanup on failure
+    if (existsSync(tempInput)) Bun.spawn(['rm', tempInput]);
+    if (existsSync(tempOutput)) Bun.spawn(['rm', tempOutput]);
+
+    return null;
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * Check if optimization tools are installed
+ */
+export async function checkOptimizationTools() {
+  const tools = [];
+
+  try {
+    const oxipng = Bun.spawn(['which', 'oxipng'], { stdout: 'pipe' });
+    await oxipng.exited;
+    if (oxipng.exitCode === 0) {
+      tools.push('oxipng');
+    }
+  } catch (e) {}
+
+  try {
+    const cjpeg = Bun.spawn(['which', 'cjpeg'], { stdout: 'pipe' });
+    await cjpeg.exited;
+    if (cjpeg.exitCode === 0) {
+      tools.push('mozjpeg');
+    }
+  } catch (e) {}
+
+  if (tools.length === 0) {
+    logger.warn('⚠️  No image optimization tools found. Install for better performance:');
+    logger.warn('   macOS:   brew install oxipng mozjpeg');
+    logger.warn('   Ubuntu:  apt install oxipng mozjpeg');
+    logger.warn('   Images will be copied without optimization.');
+  } else {
+    logger.success(`Found optimization tools: ${tools.join(', ')}`);
+  }
+
+  return tools;
+}
+
+/**
+ * Copy images without optimization (fallback)
+ */
+export function copyImages(srcDir, outDir) {
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif'];
+  let copied = 0;
+
+  function processDirectory(dir, targetDir) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const destPath = join(targetDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!existsSync(destPath)) {
+          mkdirSync(destPath, { recursive: true });
+        }
+        processDirectory(srcPath, destPath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name).toLowerCase();
+
+        if (imageExtensions.includes(ext)) {
+          cpSync(srcPath, destPath);
+          copied++;
+        }
+      }
+    }
+  }
+
+  processDirectory(srcDir, outDir);
+  logger.info(`Copied ${copied} images without optimization`);
+  return copied;
+}

package/src/build.js

@@ -1,9 +1,8 @@
-import { join, relative, basename } from 'path';
+import { join, relative, basename, extname, dirname } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
-import { extname, dirname } from 'path';
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
-import { loadEnvVariables, replaceEnvInCode } from './utils/env.js'; // ✅ IMPORT THIS!
+import { loadEnvVariables, replaceEnvInCode } from './utils/env.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -26,7 +25,6 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // ✅ LOAD ENV VARS BEFORE COMPILATION!
     logger.info('Step 0: Loading environment variables...');
     const envVars = loadEnvVariables(root);
     if (Object.keys(envVars).length > 0) {
@@ -34,27 +32,15 @@ export async function buildProduction(options = {}) {
     }
     
     logger.info('Step 1: Compiling for production...');
-    const { routes } = await compileForBuild(root, buildDir, envVars); // ✅ PASS ENV VARS!
+    const { routes } = await compileForBuild(root, buildDir, envVars);
     logger.success('Production compilation complete');
     
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    const publicDir = join(root, 'public');
-    if (existsSync(publicDir)) {
-      logger.info('Step 3: Copying public assets...');
-      const publicFiles = readdirSync(publicDir);
-      for (const file of publicFiles) {
-        const srcFile = join(publicDir, file);
-        const destFile = join(outDir, file);
-        if (statSync(srcFile).isFile()) {
-          cpSync(srcFile, destFile);
-        }
-      }
-      logger.success('Public assets copied');
-    } else {
-      logger.info('Step 3: No public directory found, skipping...');
-    }
+    // ✅ FIX: Copy all static assets from src/ and public/
+    logger.info('Step 3: Copying static assets...');
+    await copyAllStaticAssets(root, outDir);
     
     logger.info('Step 4: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
@@ -77,13 +63,11 @@ export async function buildProduction(options = {}) {
         asset: '[name]-[hash].[ext]'
       },
       external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
-      // ✅ CRITICAL: Add define to replace process.env at bundle time!
       define: {
         'process.env.NODE_ENV': '"production"',
         'process.env.PUBLIC_APP_NAME': JSON.stringify(envVars.PUBLIC_APP_NAME || 'BertUI App'),
         'process.env.PUBLIC_API_URL': JSON.stringify(envVars.PUBLIC_API_URL || ''),
         'process.env.PUBLIC_USERNAME': JSON.stringify(envVars.PUBLIC_USERNAME || ''),
-        // Add all other env vars dynamically
         ...Object.fromEntries(
           Object.entries(envVars).map(([key, value]) => [
             `process.env.${key}`,
@@ -137,6 +121,78 @@ export async function buildProduction(options = {}) {
   }
 }
 
+// ✅ NEW FUNCTION: Copy all static assets
+async function copyAllStaticAssets(root, outDir) {
+  const publicDir = join(root, 'public');
+  const srcDir = join(root, 'src');
+  
+  let assetsCopied = 0;
+  
+  // Copy from public/
+  if (existsSync(publicDir)) {
+    assetsCopied += await copyStaticAssetsFromDir(publicDir, outDir, 'public');
+  }
+  
+  // Copy static assets from src/ (images, fonts, etc.)
+  if (existsSync(srcDir)) {
+    const assetsOutDir = join(outDir, 'assets');
+    mkdirSync(assetsOutDir, { recursive: true });
+    assetsCopied += await copyStaticAssetsFromDir(srcDir, assetsOutDir, 'src', true);
+  }
+  
+  logger.success(`Copied ${assetsCopied} static assets`);
+}
+
+// ✅ NEW FUNCTION: Recursively copy static assets
+async function copyStaticAssetsFromDir(sourceDir, targetDir, label, skipStyles = false) {
+  const staticExtensions = [
+    '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif', // Images
+    '.woff', '.woff2', '.ttf', '.otf', '.eot', // Fonts
+    '.mp4', '.webm', '.ogg', '.mp3', '.wav', // Media
+    '.pdf', '.zip', '.json', '.xml', '.txt' // Documents
+  ];
+  
+  let copiedCount = 0;
+  
+  function copyRecursive(dir, targetBase) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const relativePath = relative(sourceDir, srcPath);
+      const destPath = join(targetBase, relativePath);
+      
+      if (entry.isDirectory()) {
+        // Skip node_modules, .bertui, etc.
+        if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
+          continue;
+        }
+        
+        // Skip styles directory if requested
+        if (skipStyles && entry.name === 'styles') {
+          continue;
+        }
+        
+        mkdirSync(destPath, { recursive: true });
+        copyRecursive(srcPath, targetBase);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name);
+        
+        // Copy static assets only
+        if (staticExtensions.includes(ext.toLowerCase())) {
+          mkdirSync(dirname(destPath), { recursive: true });
+          cpSync(srcPath, destPath);
+          logger.debug(`Copied ${label}/${relativePath}`);
+          copiedCount++;
+        }
+      }
+    }
+  }
+  
+  copyRecursive(sourceDir, targetDir);
+  return copiedCount;
+}
+
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
@@ -153,7 +209,6 @@ async function buildAllCSS(root, outDir) {
   }
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileForBuild(root, buildDir, envVars) {
   const srcDir = join(root, 'src');
   const pagesDir = join(srcDir, 'pages');
@@ -168,7 +223,6 @@ async function compileForBuild(root, buildDir, envVars) {
     logger.info(`Found ${routes.length} routes`);
   }
   
-  // ✅ PASS ENV VARS TO COMPILATION
   await compileBuildDirectory(srcDir, buildDir, root, envVars);
   
   if (routes.length > 0) {
@@ -367,7 +421,6 @@ ${routeConfigs}
   await Bun.write(join(buildDir, 'router.js'), routerCode);
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
   const files = readdirSync(srcDir);
   
@@ -378,29 +431,33 @@ async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
     if (stat.isDirectory()) {
       const subBuildDir = join(buildDir, file);
       mkdirSync(subBuildDir, { recursive: true });
-      await compileBuildDirectory(srcPath, subBuildDir, root, envVars); // ✅ PASS IT DOWN
+      await compileBuildDirectory(srcPath, subBuildDir, root, envVars);
     } else {
       const ext = extname(file);
       
       if (ext === '.css') continue;
       
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileBuildFile(srcPath, buildDir, file, root, envVars); // ✅ PASS IT HERE
+        await compileBuildFile(srcPath, buildDir, file, root, envVars);
       } else if (ext === '.js') {
         const outPath = join(buildDir, file);
         let code = await Bun.file(srcPath).text();
         
         code = removeCSSImports(code);
-        code = replaceEnvInCode(code, envVars); // ✅ REPLACE ENV VARS!
+        code = replaceEnvInCode(code, envVars);
         code = fixBuildImports(code, srcPath, outPath, root);
         
+        // ✅ FIX: Add React import if needed
+        if (usesJSX(code) && !code.includes('import React')) {
+          code = `import React from 'react';\n${code}`;
+        }
+        
         await Bun.write(outPath, code);
       }
     }
   }
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
@@ -409,7 +466,7 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     let code = await Bun.file(srcPath).text();
     
     code = removeCSSImports(code);
-    code = replaceEnvInCode(code, envVars); // ✅ REPLACE ENV VARS BEFORE TRANSPILATION!
+    code = replaceEnvInCode(code, envVars);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
     const outPath = join(buildDir, outFilename);
@@ -429,7 +486,8 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     
     let compiled = await transpiler.transform(code);
     
-    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+    // ✅ FIX: Add React import if needed
+    if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
@@ -442,6 +500,14 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
   }
 }
 
+function usesJSX(code) {
+  return code.includes('React.createElement') || 
+         code.includes('React.Fragment') ||
+         /<[A-Z]/.test(code) ||
+         code.includes('jsx(') ||
+         code.includes('jsxs(');
+}
+
 function removeCSSImports(code) {
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');

package/src/client/compiler.js

@@ -20,13 +20,11 @@ export async function compileProject(root) {
     logger.info('Created .bertui/compiled/');
   }
   
-  // Load environment variables
   const envVars = loadEnvVariables(root);
   if (Object.keys(envVars).length > 0) {
     logger.info(`Loaded ${Object.keys(envVars).length} environment variables`);
   }
   
-  // Generate env.js file
   const envCode = generateEnvCode(envVars);
   await Bun.write(join(outDir, 'env.js'), envCode);
   
@@ -285,13 +283,15 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        // Remove ALL CSS imports
         code = removeCSSImports(code);
-        // Inject environment variables
         code = replaceEnvInCode(code, envVars);
-        // Fix router imports
         code = fixRouterImports(code, outPath, root);
         
+        // ✅ CRITICAL FIX: Ensure React import for .js files with JSX
+        if (usesJSX(code) && !code.includes('import React')) {
+          code = `import React from 'react';\n${code}`;
+        }
+        
         await Bun.write(outPath, code);
         logger.debug(`Copied: ${relativePath}`);
         stats.files++;
@@ -312,13 +312,8 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   try {
     let code = await Bun.file(srcPath).text();
     
-    // CRITICAL FIX: Remove ALL CSS imports before transpilation
     code = removeCSSImports(code);
-    
-    // Remove dotenv imports (not needed in browser)
     code = removeDotenvImports(code);
-    
-    // Inject environment variables
     code = replaceEnvInCode(code, envVars);
     
     const outPath = join(outDir, filename.replace(/\.(jsx|tsx|ts)$/, '.js'));
@@ -336,7 +331,8 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
     });
     let compiled = await transpiler.transform(code);
     
-    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+    // ✅ CRITICAL FIX: Always add React import if JSX is present
+    if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
@@ -350,29 +346,25 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   }
 }
 
-// NEW FUNCTION: Remove all CSS imports
+// ✅ NEW: Detect if code uses JSX
+function usesJSX(code) {
+  return code.includes('React.createElement') || 
+         code.includes('React.Fragment') ||
+         /<[A-Z]/.test(code) || // Detects JSX tags like <Component>
+         code.includes('jsx(') || // Runtime JSX
+         code.includes('jsxs('); // Runtime JSX
+}
+
 function removeCSSImports(code) {
-  // Remove CSS imports (with or without quotes, single or double)
-  // Matches: import './styles.css', import "./styles.css", import "styles.css", import 'styles.css'
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
-  
-  // Also remove bertui/styles imports
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
-  
   return code;
 }
 
-// NEW FUNCTION: Remove dotenv imports and dotenv.config() calls
 function removeDotenvImports(code) {
-  // Remove: import dotenv from 'dotenv'
   code = code.replace(/import\s+\w+\s+from\s+['"]dotenv['"]\s*;?\s*/g, '');
-  
-  // Remove: import { config } from 'dotenv'
   code = code.replace(/import\s+\{[^}]+\}\s+from\s+['"]dotenv['"]\s*;?\s*/g, '');
-  
-  // Remove: dotenv.config()
   code = code.replace(/\w+\.config\(\s*\)\s*;?\s*/g, '');
-  
   return code;
 }
 

package/src/server/dev-server.js

@@ -1,7 +1,8 @@
+// src/server/dev-server.js - FIXED VERSION
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
-import { existsSync, readdirSync } from 'fs'; // ✅ FIXED: Import properly
+import { existsSync, readdirSync } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
 import { loadConfig } from '../config/loadConfig.js';
@@ -11,6 +12,7 @@ export async function startDevServer(options = {}) {
   const root = options.root || process.cwd();
   const compiledDir = join(root, '.bertui', 'compiled');
   const stylesDir = join(root, '.bertui', 'styles');
+  const srcDir = join(root, 'src');
   
   const config = await loadConfig(root);
   
@@ -28,11 +30,53 @@ export async function startDevServer(options = {}) {
       return serveHTML(root, hasRouter, config);
     })
     
+    // ✅ NEW: Serve images from src/images/
+    .get('/images/*', async ({ params, set }) => {
+      const imagesDir = join(srcDir, 'images');
+      const filepath = join(imagesDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'Image not found';
+      }
+      
+      const ext = extname(filepath).toLowerCase();
+      const contentType = getImageContentType(ext);
+      
+      return new Response(file, {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=31536000'
+        }
+      });
+    })
+    
+    // ✅ NEW: Serve any static asset from src/ (fonts, videos, etc.)
+    .get('/assets/*', async ({ params, set }) => {
+      const filepath = join(srcDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'Asset not found';
+      }
+      
+      const ext = extname(filepath).toLowerCase();
+      const contentType = getContentType(ext);
+      
+      return new Response(file, {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=31536000'
+        }
+      });
+    })
+    
     .get('/*', async ({ params, set }) => {
       const path = params['*'];
       
       if (path.includes('.')) {
-        // Handle compiled directory files
         if (path.startsWith('compiled/')) {
           const filePath = join(compiledDir, path.replace('compiled/', ''));
           const file = Bun.file(filePath);
@@ -50,7 +94,6 @@ export async function startDevServer(options = {}) {
           }
         }
         
-        // Handle CSS files from .bertui/styles
         if (path.startsWith('styles/') && path.endsWith('.css')) {
           const cssPath = join(stylesDir, path.replace('styles/', ''));
           const file = Bun.file(cssPath);
@@ -101,6 +144,14 @@ ws.onmessage = (event) => {
   if (data.type === 'recompiling') {
     console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
   }
+
+  if (data.type === 'compilation-error') {
+    console.error('%c❌ Compilation Error', 'color: #ef4444; font-weight: bold');
+    console.error(data.message);
+    if (window.__BERTUI_SHOW_ERROR__) {
+      window.__BERTUI_SHOW_ERROR__(data);
+    }
+  }
 };
 
 ws.onerror = (error) => {
@@ -116,6 +167,226 @@ ws.onclose = () => {
         headers: { 'Content-Type': 'application/javascript' }
       });
     })
+
+    .get('/error-overlay.js', () => {
+      const errorOverlayScript = `
+(function() {
+  'use strict';
+
+  let overlayElement = null;
+
+  function createOverlay() {
+    if (overlayElement) return overlayElement;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'bertui-error-overlay';
+    overlay.style.cssText = \`
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.95);
+      color: #fff;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+      font-size: 14px;
+      line-height: 1.5;
+      z-index: 9999999;
+      overflow: auto;
+      padding: 20px;
+      box-sizing: border-box;
+      display: none;
+    \`;
+    document.body.appendChild(overlay);
+    overlayElement = overlay;
+    return overlay;
+  }
+
+  function showError(error) {
+    const overlay = createOverlay();
+    
+    const errorType = error.type || 'Runtime Error';
+    const errorMessage = error.message || 'Unknown error';
+    const errorStack = error.stack || '';
+    const errorFile = error.file || 'Unknown file';
+    const errorLine = error.line || '';
+    const errorColumn = error.column || '';
+
+    overlay.innerHTML = \`
+      <div style="max-width: 1200px; margin: 0 auto;">
+        <div style="display: flex; align-items: center; margin-bottom: 30px;">
+          <div style="
+            background: #ef4444;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            margin-right: 15px;
+          ">❌</div>
+          <div>
+            <h1 style="margin: 0; font-size: 28px; font-weight: bold; color: #ef4444;">
+              \${errorType}
+            </h1>
+            <p style="margin: 5px 0 0 0; color: #a0a0a0; font-size: 14px;">
+              BertUI detected an error in your application
+            </p>
+          </div>
+        </div>
+
+        <div style="
+          background: #1a1a1a;
+          border: 1px solid #333;
+          border-radius: 8px;
+          padding: 20px;
+          margin-bottom: 20px;
+        ">
+          <div style="color: #fbbf24; font-weight: bold; margin-bottom: 10px;">
+            \${errorFile}\${errorLine ? ':' + errorLine : ''}\${errorColumn ? ':' + errorColumn : ''}
+          </div>
+          <div style="color: #fff; white-space: pre-wrap; word-break: break-word;">
+            \${escapeHtml(errorMessage)}
+          </div>
+        </div>
+
+        \${errorStack ? \`
+          <div style="
+            background: #0a0a0a;
+            border: 1px solid #222;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+          ">
+            <div style="color: #a0a0a0; font-weight: bold; margin-bottom: 10px;">
+              Stack Trace:
+            </div>
+            <pre style="
+              margin: 0;
+              color: #d0d0d0;
+              white-space: pre-wrap;
+              word-break: break-word;
+              font-size: 12px;
+            ">\${escapeHtml(errorStack)}</pre>
+          </div>
+        \` : ''}
+
+        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+          <button onclick="window.__BERTUI_HIDE_ERROR__()" style="
+            background: #3b82f6;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+          ">Dismiss (Esc)</button>
+          <button onclick="window.location.reload()" style="
+            background: #10b981;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+          ">Reload Page</button>
+        </div>
+
+        <div style="
+          margin-top: 30px;
+          padding-top: 20px;
+          border-top: 1px solid #333;
+          color: #666;
+          font-size: 12px;
+        ">
+          💡 <strong>Tip:</strong> Fix the error in your code, and the page will automatically reload with HMR.
+        </div>
+      </div>
+    \`;
+
+    overlay.style.display = 'block';
+  }
+
+  function hideError() {
+    if (overlayElement) {
+      overlayElement.style.display = 'none';
+    }
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  function parseErrorStack(error) {
+    const stack = error.stack || '';
+    const lines = stack.split('\\n');
+    
+    for (const line of lines) {
+      const match = line.match(/\\((.+):(\\d+):(\\d+)\\)/) || 
+                    line.match(/at (.+):(\\d+):(\\d+)/) ||
+                    line.match(/(.+):(\\d+):(\\d+)/);
+      
+      if (match) {
+        return {
+          file: match[1].trim(),
+          line: match[2],
+          column: match[3]
+        };
+      }
+    }
+    
+    return { file: null, line: null, column: null };
+  }
+
+  window.addEventListener('error', function(event) {
+    const { file, line, column } = parseErrorStack(event.error || {});
+    
+    showError({
+      type: 'Runtime Error',
+      message: event.message,
+      stack: event.error ? event.error.stack : null,
+      file: event.filename || file,
+      line: event.lineno || line,
+      column: event.colno || column
+    });
+  });
+
+  window.addEventListener('unhandledrejection', function(event) {
+    const error = event.reason;
+    const { file, line, column } = parseErrorStack(error);
+    
+    showError({
+      type: 'Unhandled Promise Rejection',
+      message: error?.message || String(event.reason),
+      stack: error?.stack,
+      file,
+      line,
+      column
+    });
+  });
+
+  window.__BERTUI_SHOW_ERROR__ = showError;
+  window.__BERTUI_HIDE_ERROR__ = hideError;
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      hideError();
+    }
+  });
+
+  console.log('%c🔥 BertUI Error Overlay Active', 'color: #10b981; font-weight: bold; font-size: 14px');
+})();
+`;
+      
+      return new Response(errorOverlayScript, {
+        headers: { 'Content-Type': 'application/javascript' }
+      });
+    })
     
     .ws('/hmr', {
       open(ws) {
@@ -187,6 +458,7 @@ ws.onclose = () => {
   
   logger.success(`🚀 Server running at http://localhost:${port}`);
   logger.info(`📁 Serving: ${root}`);
+  logger.info(`🖼️  Images available at: /images/*`);
   
   setupWatcher(root, compiledDir, clients, async () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
@@ -198,7 +470,6 @@ ws.onclose = () => {
 function serveHTML(root, hasRouter, config) {
   const meta = config.meta || {};
   
-  // ✅ FIXED: Proper ESM import for fs
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
   
@@ -254,6 +525,7 @@ ${userStylesheets}
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="/error-overlay.js"></script>
   <script type="module" src="/hmr-client.js"></script>
   <script type="module" src="/compiled/main.js"></script>
 </body>
@@ -264,6 +536,22 @@ ${userStylesheets}
   });
 }
 
+// ✅ NEW: Helper for image content types
+function getImageContentType(ext) {
+  const types = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon'
+  };
+  
+  return types[ext] || 'application/octet-stream';
+}
+
 function getContentType(ext) {
   const types = {
     '.js': 'application/javascript',
@@ -276,7 +564,16 @@ function getContentType(ext) {
     '.jpeg': 'image/jpeg',
     '.gif': 'image/gif',
     '.svg': 'image/svg+xml',
-    '.ico': 'image/x-icon'
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.otf': 'font/otf',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mp3': 'audio/mpeg'
   };
   
   return types[ext] || 'text/plain';
@@ -297,9 +594,26 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
     if (!filename) return;
     
     const ext = extname(filename);
-    if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
+    
+    // ✅ Watch image changes too
+    const watchedExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'];
+    
+    if (watchedExtensions.includes(ext)) {
       logger.info(`📝 File changed: ${filename}`);
       
+      // For images, just reload without recompiling
+      if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'].includes(ext)) {
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({ type: 'reload', file: filename }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
+        return;
+      }
+      
+      // For code/CSS, recompile
       for (const client of clients) {
         try {
           client.send(JSON.stringify({ type: 'recompiling' }));
@@ -324,6 +638,19 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
         }
       } catch (error) {
         logger.error(`Recompilation failed: ${error.message}`);
+        
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({
+              type: 'compilation-error',
+              message: error.message,
+              stack: error.stack,
+              file: filename
+            }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
       }
     }
   });