bertui 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "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",
@@ -45,6 +45,8 @@
   "scripts": {
     "dev": "bun bin/bertui.js dev",
     "build": "bun bin/bertui.js build",
+    "serve": "bun bin/bertui.js serve",
+    "preview": "bun bin/bertui.js serve --port 5000",
     "build:wasm": "cd src/image-optimizer-rust && wasm-pack build --target web --out-dir ../../dist/image-optimizer/wasm && bun run fix:wasm",
     "fix:wasm": "node scripts/fix-wasm-exports.js",
     "prepublishOnly": "echo 'Note: Ensure WASM is built via build:wasm before publishing'",
@@ -69,7 +71,8 @@
   },
   "optionalDependencies": {
     "@bertui/image-optimizer-wasm": "0.1.0",
-    "oxipng": "^8.0.0"
+    "oxipng": "^8.0.0",
+    "sass": "^1.69.5"
   },
   "keywords": [
     "react",

package/src/build/processors/css-builder.js

@@ -1,102 +1,138 @@
-// bertui/src/build/processors/css-builder.js - SAFE VERSION
+// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING
 import { join } from 'path';
 import { existsSync, readdirSync, mkdirSync } from 'fs';
 import logger from '../../logger/logger.js';
+import { globalCache } from '../../utils/cache.js';
+import { minifyCSS, processSCSS } from '../../css/processor.js';
 
 export async function buildAllCSS(root, outDir) {
+  const startTime = process.hrtime.bigint();
+  
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
   
   mkdirSync(stylesOutDir, { recursive: true });
   
-  if (existsSync(srcStylesDir)) {
-    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-    
-    if (cssFiles.length === 0) {
-      await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
-      return;
-    }
-    
-    logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
-    
-    let combinedCSS = '';
-    for (const cssFile of cssFiles) {
-      const srcPath = join(srcStylesDir, cssFile);
-      const file = Bun.file(srcPath);
-      const cssContent = await file.text();
-      combinedCSS += `/* ${cssFile} */\n${cssContent}\n\n`;
-    }
-    
-    const combinedPath = join(stylesOutDir, 'bertui.min.css');
-    
-    // ✅ SAFE: Try Lightning CSS, fallback to simple minification
-    try {
-      const minified = await minifyCSSSafe(combinedCSS);
-      await Bun.write(combinedPath, minified);
-      
-      const originalSize = Buffer.byteLength(combinedCSS);
-      const minifiedSize = Buffer.byteLength(minified);
-      const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
-      
-      logger.success(`CSS minified: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
-    } catch (error) {
-      logger.warn(`CSS minification failed: ${error.message}`);
-      logger.info('Falling back to unminified CSS...');
-      await Bun.write(combinedPath, combinedCSS);
-    }
-    
-    logger.success(`✅ Combined ${cssFiles.length} CSS files`);
-  } else {
-    // No styles directory, create empty CSS
+  // Check cache for entire CSS build
+  const cacheKey = `css-build:${root}:${Date.now()}`;
+  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache
+  
+  if (cached) {
+    logger.info(`⚡ Using cached CSS (${cached.files} files)`);
+    await Bun.write(join(stylesOutDir, 'bertui.min.css'), cached.content);
+    return;
+  }
+  
+  if (!existsSync(srcStylesDir)) {
     await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No custom styles */');
     logger.info('No styles directory found, created empty CSS');
+    return;
+  }
+  
+  // Process SCSS files first
+  await processSCSSDirectory(srcStylesDir, root);
+  
+  // Read all CSS files (including compiled SCSS)
+  const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+  
+  if (cssFiles.length === 0) {
+    await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
+    return;
   }
+  
+  logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
+  
+  let combinedCSS = '';
+  const fileContents = [];
+  
+  for (const cssFile of cssFiles) {
+    const srcPath = join(srcStylesDir, cssFile);
+    
+    // Use file cache
+    const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
+    if (fileBuffer) {
+      const content = fileBuffer.toString('utf-8');
+      fileContents.push({ filename: cssFile, content });
+      combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
+    }
+  }
+  
+  const combinedPath = join(stylesOutDir, 'bertui.min.css');
+  
+  // Minify with caching
+  const minifyCacheKey = `minify:${Buffer.from(combinedCSS).length}:${combinedCSS.substring(0, 100)}`;
+  let minified = globalCache.get(minifyCacheKey);
+  
+  if (!minified) {
+    minified = await minifyCSS(combinedCSS, {
+      filename: 'bertui.min.css',
+      sourceMap: false
+    });
+    globalCache.set(minifyCacheKey, minified, { ttl: 60000 }); // Cache for 60 seconds
+  }
+  
+  await Bun.write(combinedPath, minified);
+  
+  const originalSize = Buffer.byteLength(combinedCSS);
+  const minifiedSize = Buffer.byteLength(minified);
+  const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
+  
+  const endTime = process.hrtime.bigint();
+  const duration = Number(endTime - startTime) / 1000; // Microseconds
+  
+  logger.success(`CSS optimized: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
+  logger.info(`⚡ Processing time: ${duration.toFixed(3)}µs`);
+  
+  // Cache the final result
+  globalCache.set(cacheKey, {
+    files: cssFiles.length,
+    content: minified,
+    size: minifiedSize
+  }, { ttl: 5000 });
 }
 
-/**
- * Safe CSS minification with fallback
- */
-async function minifyCSSSafe(css) {
-  // Try Lightning CSS first
+// NEW: Process SCSS directory
+async function processSCSSDirectory(stylesDir, root) {
   try {
-    const { transform } = await import('lightningcss');
+    // Check if sass is installed
+    const sass = await import('sass').catch(() => null);
+    if (!sass) return;
     
-    const { code } = transform({
-      filename: 'styles.css',
-      code: Buffer.from(css),
-      minify: true,
-      sourceMap: false,
-      targets: {
-        chrome: 90 << 16,
-        firefox: 88 << 16,
-        safari: 14 << 16,
-        edge: 90 << 16
-      }
-    });
+    const files = readdirSync(stylesDir);
+    const scssFiles = files.filter(f => f.endsWith('.scss') || f.endsWith('.sass'));
     
-    return code.toString();
+    if (scssFiles.length === 0) return;
     
-  } catch (lightningError) {
-    logger.warn('Lightning CSS failed, using simple minification');
+    logger.info(`📝 Compiling ${scssFiles.length} SCSS files...`);
     
-    // Fallback: Simple manual minification
-    return simpleMinifyCSS(css);
+    for (const file of scssFiles) {
+      const srcPath = join(stylesDir, file);
+      const cssPath = join(stylesDir, file.replace(/\.(scss|sass)$/, '.css'));
+      
+      // Check cache
+      const fileBuffer = await globalCache.getFile(srcPath);
+      const cacheKey = `scss:${file}:${Buffer.from(fileBuffer).length}`;
+      const cached = globalCache.get(cacheKey);
+      
+      if (cached && existsSync(cssPath)) {
+        logger.debug(`⚡ Cached SCSS: ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
+        continue;
+      }
+      
+      const result = sass.compile(srcPath, {
+        style: 'expanded',
+        sourceMap: false,
+        loadPaths: [stylesDir, join(root, 'node_modules')]
+      });
+      
+      await Bun.write(cssPath, result.css);
+      globalCache.set(cacheKey, true, { ttl: 30000 });
+      
+      logger.debug(`   ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
+    }
+    
+    logger.success(`✅ SCSS compilation complete`);
+  } catch (error) {
+    logger.warn(`SCSS processing skipped: ${error.message}`);
   }
-}
-
-/**
- * Simple CSS minification without dependencies
- */
-function simpleMinifyCSS(css) {
-  return css
-    // Remove comments
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    // Remove extra whitespace
-    .replace(/\s+/g, ' ')
-    // Remove space around { } : ; ,
-    .replace(/\s*([{}:;,])\s*/g, '$1')
-    // Remove trailing semicolons before }
-    .replace(/;}/g, '}')
-    // Remove leading/trailing whitespace
-    .trim();
 }

package/src/build.js

@@ -1,8 +1,9 @@
-// bertui/src/build.js - CLEANED (No PageBuilder)
+// bertui/src/build.js - COMPLETE FIXED VERSION WITH PROPER EXIT
 import { join } from 'path';
 import { existsSync, mkdirSync, rmSync } from 'fs';
 import logger from './logger/logger.js';
 import { loadEnvVariables } from './utils/env.js';
+import { globalCache } from './utils/cache.js';
 
 import { compileForBuild } from './build/compiler/index.js';
 import { buildAllCSS } from './build/processors/css-builder.js';
@@ -22,12 +23,12 @@ export async function buildProduction(options = {}) {
   logger.bigLog('BUILDING WITH SERVER ISLANDS 🏝️', { color: 'green' });
   logger.info('🔥 OPTIONAL SERVER CONTENT - THE GAME CHANGER');
   
-  if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
-  if (existsSync(outDir)) rmSync(outDir, { recursive: true });
+  if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+  if (existsSync(outDir)) rmSync(outDir, { recursive: true, force: true });
   mkdirSync(buildDir, { recursive: true });
   mkdirSync(outDir, { recursive: true });
   
-  const startTime = Date.now();
+  const startTime = process.hrtime.bigint(); // Microsecond precision
   
   try {
     logger.info('Step 0: Loading environment variables...');
@@ -48,53 +49,82 @@ export async function buildProduction(options = {}) {
       })));
     }
     
-    logger.info('Step 2: Combining CSS...');
+    logger.info('Step 2: Processing SCSS/SASS...');
+    await processSCSS(root, buildDir);
+    
+    logger.info('Step 3: Combining CSS...');
     await buildAllCSS(root, outDir);
     
-    logger.info('Step 3: Copying static assets...');
+    logger.info('Step 4: Copying static assets...');
     await copyAllStaticAssets(root, outDir);
     
-    logger.info('Step 4: Bundling JavaScript...');
+    logger.info('Step 5: Bundling JavaScript with Router...');
     const buildEntry = join(buildDir, 'main.js');
+    const routerPath = join(buildDir, 'router.js');
     
     if (!existsSync(buildEntry)) {
       logger.error('❌ main.js not found in build directory!');
       throw new Error('Build entry point missing');
     }
     
-    const result = await bundleJavaScript(buildEntry, outDir, envVars, buildDir);
+    const result = await bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir);
     
-    logger.info('Step 5: Generating HTML with Server Islands...');
+    logger.info('Step 6: Generating HTML with Server Islands...');
     await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
     
-    logger.info('Step 6: Generating sitemap.xml...');
+    logger.info('Step 7: Generating sitemap.xml...');
     await generateSitemap(routes, config, outDir);
     
-    logger.info('Step 7: Generating robots.txt...');
+    logger.info('Step 8: Generating robots.txt...');
     await generateRobots(config, outDir, routes);
     
-    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
+    // Clean up build directory
+    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+    
+    const endTime = process.hrtime.bigint();
+    const durationMicro = Number(endTime - startTime) / 1000;
+    const durationMs = durationMicro / 1000;
     
-    const duration = Date.now() - startTime;
-    showBuildSummary(routes, serverIslands, clientRoutes, duration);
+    showBuildSummary(routes, serverIslands, clientRoutes, durationMs, durationMicro);
+    
+    // ✅ FIX: Force exit after successful build
+    // Small delay to ensure all logs are flushed
+    setTimeout(() => {
+      logger.info('✅ Build process complete, exiting...');
+      process.exit(0);
+    }, 100);
     
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
     if (error.stack) logger.error(error.stack);
-    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
-    process.exit(1);
+    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+    
+    // ✅ FIX: Force exit with error code
+    setTimeout(() => {
+      process.exit(1);
+    }, 100);
   }
 }
 
-async function bundleJavaScript(buildEntry, outDir, envVars, buildDir) {
+async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir) {
   try {
+    const hasRouter = existsSync(routerPath);
+    
     const originalCwd = process.cwd();
     process.chdir(buildDir);
     
     logger.info('🔧 Bundling with production JSX...');
     
+    const entrypoints = [buildEntry];
+    if (hasRouter) {
+      entrypoints.push(routerPath);
+      logger.success('✅ Router included in bundle');
+    }
+    
+    logger.info(`📦 Entry points: ${entrypoints.map(e => e.split('/').pop()).join(', ')}`);
+    
     const result = await Bun.build({
-      entrypoints: [buildEntry],
+      entrypoints,
       outdir: join(outDir, 'assets'),
       target: 'browser',
       minify: true,
@@ -129,16 +159,38 @@ async function bundleJavaScript(buildEntry, outDir, envVars, buildDir) {
           if (log.position) {
             logger.error(`   File: ${log.position.file || 'unknown'}`);
             logger.error(`   Line: ${log.position.line || 'unknown'}`);
+            logger.error(`   Column: ${log.position.column || 'unknown'}`);
+          }
+          if (log.position && log.position.file && existsSync(log.position.file)) {
+            try {
+              const fileContent = Bun.file(log.position.file).text();
+              const lines = fileContent.split('\n');
+              const line = lines[log.position.line - 1];
+              if (line) {
+                logger.error(`   Code: ${line.trim()}`);
+                logger.error(`         ${' '.repeat(log.position.column - 1)}^`);
+              }
+            } catch (e) {}
           }
         });
+      } else {
+        logger.error('No detailed logs available');
       }
       
       throw new Error('JavaScript bundling failed');
     }
     
+    const entryPoints = result.outputs.filter(o => o.kind === 'entry-point');
+    const chunks = result.outputs.filter(o => o.kind === 'chunk');
+    
     logger.success('✅ JavaScript bundled successfully');
-    logger.info(`   Entry points: ${result.outputs.filter(o => o.kind === 'entry-point').length}`);
-    logger.info(`   Chunks: ${result.outputs.filter(o => o.kind === 'chunk').length}`);
+    logger.info(`   Entry points: ${entryPoints.length}`);
+    logger.info(`   Chunks: ${chunks.length}`);
+    
+    result.outputs.forEach(output => {
+      const size = (output.size / 1024).toFixed(2);
+      logger.debug(`   📄 ${output.path.split('/').pop()} (${size} KB)`);
+    });
     
     const totalSize = result.outputs.reduce((sum, o) => sum + (o.size || 0), 0);
     logger.info(`   Total size: ${(totalSize / 1024).toFixed(2)} KB`);
@@ -147,12 +199,59 @@ async function bundleJavaScript(buildEntry, outDir, envVars, buildDir) {
     
   } catch (error) {
     logger.error('❌ Bundling error: ' + error.message);
+    if (error.stack) {
+      logger.error('Stack trace:');
+      logger.error(error.stack);
+    }
     throw error;
   }
 }
 
-function showBuildSummary(routes, serverIslands, clientRoutes, duration) {
-  logger.success(`✨ Build complete in ${duration}ms`);
+async function processSCSS(root, buildDir) {
+  const srcStylesDir = join(root, 'src', 'styles');
+  if (!existsSync(srcStylesDir)) return;
+  
+  try {
+    const sass = await import('sass').catch(() => {
+      logger.warn('⚠️  sass package not installed. Install with: bun add sass');
+      return null;
+    });
+    
+    if (!sass) return;
+    
+    const { readdirSync } = await import('fs');
+    const scssFiles = readdirSync(srcStylesDir).filter(f => 
+      f.endsWith('.scss') || f.endsWith('.sass')
+    );
+    
+    if (scssFiles.length === 0) return;
+    
+    logger.info(`📝 Processing ${scssFiles.length} SCSS/SASS files...`);
+    
+    for (const file of scssFiles) {
+      const srcPath = join(srcStylesDir, file);
+      const cssPath = join(buildDir, 'styles', file.replace(/\.(scss|sass)$/, '.css'));
+      
+      mkdirSync(join(buildDir, 'styles'), { recursive: true });
+      
+      const result = sass.compile(srcPath, {
+        style: 'compressed',
+        sourceMap: false,
+        loadPaths: [srcStylesDir, join(root, 'node_modules')]
+      });
+      
+      await Bun.write(cssPath, result.css);
+      logger.debug(`   ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
+    }
+    
+    logger.success(`✅ Processed ${scssFiles.length} SCSS files`);
+  } catch (error) {
+    logger.error(`SCSS processing failed: ${error.message}`);
+  }
+}
+
+function showBuildSummary(routes, serverIslands, clientRoutes, durationMs, durationMicro) {
+  logger.success(`✨ Build complete in ${durationMs.toFixed(3)}ms (${durationMicro.toFixed(0)}µs)`);
   logger.bigLog('BUILD SUMMARY', { color: 'green' });
   logger.info(`📄 Total routes: ${routes.length}`);
   logger.info(`🏝️  Server Islands (SSG): ${serverIslands.length}`);
@@ -160,9 +259,15 @@ function showBuildSummary(routes, serverIslands, clientRoutes, duration) {
   logger.info(`🗺️  Sitemap: dist/sitemap.xml`);
   logger.info(`🤖 robots.txt: dist/robots.txt`);
   
+  const cacheStats = globalCache.getStats();
+  logger.info(`📊 Cache: ${cacheStats.hitRate} hit rate (${cacheStats.hits}/${cacheStats.hits + cacheStats.misses})`);
+  
   if (serverIslands.length > 0) {
     logger.success('✅ Server Islands enabled - INSTANT content delivery!');
   }
   
   logger.bigLog('READY TO DEPLOY 🚀', { color: 'green' });
+  
+  // ✅ Force log flush
+  logger.debug('Build complete, exiting...');
 }

package/src/cli.js

@@ -1,6 +1,7 @@
-// src/cli.js
+// bertui/src/cli.js - WITH SERVE COMMAND
 import { startDev } from './dev.js';
 import { buildProduction } from './build.js';
+import { startPreviewServer } from './serve.js'; // NEW
 import logger from './logger/logger.js';
 
 export function program() {
@@ -22,9 +23,20 @@ export function program() {
       });
       break;
     
+    // ✅ NEW: Serve command for production preview
+    case 'serve':
+    case 'preview':
+      const previewPort = getArg('--port', '-p') || 5000;
+      startPreviewServer({
+        port: parseInt(previewPort),
+        root: process.cwd(),
+        dir: 'dist' // Default to dist folder
+      });
+      break;
+    
     case '--version':
     case '-v':
-      console.log('bertui v0.1.0');
+      console.log('bertui v1.1.9');
       break;
     
     case '--help':
@@ -50,17 +62,20 @@ function showHelp() {
   logger.bigLog('BERTUI CLI', { color: 'blue' });
   console.log(`
 Commands:
-  bertui dev              Start development server
+  bertui dev [--port]     Start development server (default: 3000)
   bertui build            Build for production
+  bertui serve [--port]   Preview production build (default: 5000)
   bertui --version        Show version
   bertui --help           Show help
 
 Options:
-  --port, -p <number>     Port for dev server (default: 3000)
+  --port, -p <number>     Port for server (dev: 3000, serve: 5000)
 
 Examples:
   bertui dev
   bertui dev --port 8080
   bertui build
+  bertui serve
+  bertui serve --port 4000
   `);
 }

package/src/css/processor.js

@@ -124,4 +124,49 @@ export function extractCSSImports(code) {
  */
 export function isCSSFile(filename) {
   return filename.toLowerCase().endsWith('.css');
-}
+}
+
+// ============================================
+// OPTIONAL SCSS SUPPORT - COMMENTED OUT BY DEFAULT
+// Uncomment only if you install 'sass' package
+// ============================================
+
+
+export async function processSCSS(scssCode, options = {}) {
+  try {
+    // Dynamic import so it doesn't fail if sass isn't installed
+    const sass = await import('sass').catch(() => {
+      throw new Error('sass package not installed. Run: bun add sass');
+    });
+    
+    const result = sass.compileString(scssCode, {
+      style: options.compressed ? 'compressed' : 'expanded',
+      sourceMap: false,
+      loadPaths: options.loadPaths || []
+    });
+    
+    return result.css;
+  } catch (error) {
+    logger.error(`SCSS compilation failed: ${error.message}`);
+    throw error;
+  }
+}
+
+export async function compileSCSSFile(filePath, options = {}) {
+  try {
+    const sass = await import('sass').catch(() => {
+      throw new Error('sass package not installed. Run: bun add sass');
+    });
+    
+    const result = sass.compile(filePath, {
+      style: options.compressed ? 'compressed' : 'expanded',
+      sourceMap: false,
+      loadPaths: options.loadPaths || [require('path').dirname(filePath)]
+    });
+    
+    return result.css;
+  } catch (error) {
+    logger.error(`SCSS file compilation failed: ${error.message}`);
+    throw error;
+  }
+}

package/src/serve.js

@@ -0,0 +1,195 @@
+// bertui/src/serve.js - ULTRA-FAST PRODUCTION PREVIEW SERVER
+import { join, extname } from 'path';
+import { existsSync } from 'fs';
+import logger from './logger/logger.js';
+import { globalCache } from './utils/cache.js';
+
+// MIME types for fast serving
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.txt': 'text/plain',
+  '.xml': 'application/xml',
+  '.pdf': 'application/pdf',
+  '.map': 'application/json'
+};
+
+export async function startPreviewServer(options = {}) {
+  const root = options.root || process.cwd();
+  const port = options.port || 5000;
+  const distDir = options.dir || 'dist';
+  const publicPath = join(root, distDir);
+  
+  // Check if dist folder exists
+  if (!existsSync(publicPath)) {
+    logger.error(`❌ ${distDir}/ folder not found!`);
+    logger.info(`   Run 'bertui build' first to generate production files.`);
+    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`);
+  
+  // Track connections for graceful shutdown
+  const connections = new Set();
+  
+  // Create ultra-fast static server
+  const server = Bun.serve({
+    port,
+    async fetch(req) {
+      const url = new URL(req.url);
+      let filePath = join(publicPath, url.pathname);
+      
+      // Handle root path - serve index.html
+      if (url.pathname === '/') {
+        filePath = join(publicPath, 'index.html');
+      }
+      
+      // Handle directory requests - serve index.html
+      if (!extname(filePath)) {
+        const indexPath = join(filePath, 'index.html');
+        if (existsSync(indexPath)) {
+          filePath = indexPath;
+        }
+      }
+      
+      // Check if file exists
+      if (!existsSync(filePath)) {
+        // Try fallback to index.html for SPA routing
+        if (!url.pathname.includes('.')) {
+          const spaPath = join(publicPath, 'index.html');
+          if (existsSync(spaPath)) {
+            const file = Bun.file(spaPath);
+            return new Response(file, {
+              headers: {
+                'Content-Type': 'text/html',
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+                'X-BertUI-Preview': 'spa-fallback'
+              }
+            });
+          }
+        }
+        
+        return new Response('Not Found', { status: 404 });
+      }
+      
+      // Get file stats for caching
+      const stats = await Bun.file(filePath).stat();
+      const ext = extname(filePath).toLowerCase();
+      const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+      
+      // Set cache headers based on file type
+      const isStaticAsset = ['.js', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif', '.ico'].includes(ext);
+      const cacheControl = isStaticAsset 
+        ? 'public, max-age=31536000, immutable' // 1 year for assets with hash in name
+        : 'no-cache, no-store, must-revalidate'; // No cache for HTML
+      
+      // Serve file with proper headers
+      const file = Bun.file(filePath);
+      
+      return new Response(file, {
+        headers: {
+          'Content-Type': contentType,
+          'Content-Length': stats.size,
+          'Cache-Control': cacheControl,
+          'X-BertUI-Preview': 'static'
+        }
+      });
+    },
+    
+    // Track connections for graceful shutdown
+    websocket: {
+      open(ws) {
+        connections.add(ws);
+      },
+      close(ws) {
+        connections.delete(ws);
+      }
+    }
+  });
+  
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    logger.info('\n👋 Shutting down preview server...');
+    
+    // Close all WebSocket connections
+    for (const ws of connections) {
+      try {
+        ws.close();
+      } catch (e) {}
+    }
+    
+    server.stop();
+    process.exit(0);
+  });
+  
+  return server;
+}
+
+// FAST FILE LISTING FOR DEBUGGING
+export async function listDistContents(distPath) {
+  try {
+    const { readdirSync, statSync } = await import('fs');
+    const { join, relative } = await import('path');
+    
+    function scan(dir, level = 0) {
+      const files = readdirSync(dir);
+      const result = [];
+      
+      for (const file of files) {
+        const fullPath = join(dir, file);
+        const stat = statSync(fullPath);
+        const relPath = relative(distPath, fullPath);
+        
+        if (stat.isDirectory()) {
+          result.push({
+            name: file,
+            path: relPath,
+            type: 'directory',
+            children: scan(fullPath, level + 1)
+          });
+        } else {
+          result.push({
+            name: file,
+            path: relPath,
+            type: 'file',
+            size: stat.size,
+            sizeFormatted: formatBytes(stat.size)
+          });
+        }
+      }
+      
+      return result;
+    }
+    
+    return scan(distPath);
+  } catch (error) {
+    logger.error(`Failed to list dist contents: ${error.message}`);
+    return [];
+  }
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}

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

@@ -1,10 +1,9 @@
-// bertui/src/server/dev-server-utils.js - NEW FILE
-// Shared utilities for dev server (extracted from dev-server.js)
-
+// bertui/src/server/dev-server-utils.js - WITH CACHE IMPORT
 import { join, extname } from 'path';
 import { existsSync, readdirSync, watch } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
+import { globalCache } from '../utils/cache.js'; // ✅ Now this works!
 
 // Image content type mapping
 export function getImageContentType(ext) {
@@ -48,8 +47,17 @@ export function getContentType(ext) {
   return types[ext] || 'text/plain';
 }
 
-// HTML generator
+// HTML generator with caching
 export async function serveHTML(root, hasRouter, config, port) {
+  const cacheKey = `html:${root}:${port}`;
+  
+  // Try cache first
+  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache during dev
+  if (cached) {
+    logger.debug('⚡ Serving cached HTML');
+    return cached;
+  }
+  
   const meta = config.meta || {};
   
   const srcStylesDir = join(root, 'src', 'styles');
@@ -203,10 +211,13 @@ ${bertuiAnimateStylesheet}
 </body>
 </html>`;
   
+  // Cache the HTML
+  globalCache.set(cacheKey, html, { ttl: 1000 });
+  
   return html;
 }
 
-// File watcher setup
+// File watcher setup (unchanged)
 export function setupFileWatcher(root, compiledDir, clients, onRecompile) {
   const srcDir = join(root, 'src');
   const configPath = join(root, 'bertui.config.js');

package/src/utils/cache.js

@@ -0,0 +1,297 @@
+// bertui/src/utils/cache.js - ULTRA FAST CACHING (Microsecond precision)
+import { createHash } from 'crypto';
+import logger from '../logger/logger.js';
+
+export class BertuiCache {
+  constructor(options = {}) {
+    this.maxSize = options.maxSize || 5000;
+    this.ttl = options.ttl || 30000; // 30 seconds default
+    this.stats = { hits: 0, misses: 0, sets: 0, evictions: 0 };
+    
+    // Main cache store
+    this.store = new Map();
+    
+    // File content cache with timestamps
+    this.fileCache = new Map();
+    this.fileTimestamps = new Map();
+    
+    // Compiled code cache (keyed by content hash)
+    this.codeCache = new Map();
+    
+    // CSS processing cache
+    this.cssCache = new Map();
+    
+    // Image optimization cache
+    this.imageCache = new Map();
+    
+    // Weak reference cache for DOM objects (if in browser)
+    if (typeof WeakRef !== 'undefined') {
+      this.weakCache = new Map();
+    }
+    
+    // Start periodic cleanup
+    this.cleanupInterval = setInterval(() => this.cleanup(), 60000);
+  }
+
+  // ULTRA FAST GET with microsecond timing
+  get(key, options = {}) {
+    const start = process.hrtime.bigint();
+    
+    const item = this.store.get(key);
+    if (!item) {
+      this.stats.misses++;
+      return null;
+    }
+    
+    // Check TTL
+    const ttl = options.ttl || item.ttl || this.ttl;
+    if (Date.now() - item.timestamp > ttl) {
+      this.store.delete(key);
+      this.stats.misses++;
+      this.stats.evictions++;
+      return null;
+    }
+    
+    this.stats.hits++;
+    
+    // Update access time for LRU
+    item.lastAccessed = Date.now();
+    
+    if (options.logSpeed) {
+      const end = process.hrtime.bigint();
+      const duration = Number(end - start) / 1000; // Microseconds
+      logger.debug(`⚡ Cache hit: ${duration.toFixed(3)}µs for ${key.substring(0, 30)}...`);
+    }
+    
+    return item.value;
+  }
+
+  set(key, value, options = {}) {
+    // Generate hash for large values to save memory
+    const valueHash = typeof value === 'string' && value.length > 10000
+      ? createHash('md5').update(value).digest('hex')
+      : null;
+    
+    this.store.set(key, {
+      value: valueHash ? { __hash: valueHash, __original: null } : value,
+      valueHash,
+      timestamp: Date.now(),
+      lastAccessed: Date.now(),
+      ttl: options.ttl || this.ttl,
+      size: this.getSize(value)
+    });
+    
+    this.stats.sets++;
+    
+    // Store original separately if hashed
+    if (valueHash) {
+      this.codeCache.set(valueHash, value);
+    }
+    
+    // LRU cleanup if needed
+    if (this.store.size > this.maxSize) {
+      this.evictLRU();
+    }
+  }
+
+  // FILE CACHE: Zero-copy file reading with mtime validation
+  async getFile(filePath, options = {}) {
+    const cacheKey = `file:${filePath}`;
+    
+    try {
+      const file = Bun.file(filePath);
+      const exists = await file.exists();
+      if (!exists) return null;
+      
+      const stats = await file.stat();
+      const mtimeMs = stats.mtimeMs;
+      
+      // Check cache
+      const cached = this.fileCache.get(cacheKey);
+      const cachedTime = this.fileTimestamps.get(cacheKey);
+      
+      if (cached && cachedTime === mtimeMs) {
+        if (options.logSpeed) {
+          logger.debug(`📄 File cache hit: ${filePath.split('/').pop()}`);
+        }
+        return cached;
+      }
+      
+      // Read file (single operation)
+      const start = process.hrtime.bigint();
+      const content = await file.arrayBuffer();
+      const buffer = Buffer.from(content);
+      const end = process.hrtime.bigint();
+      
+      // Store in cache
+      this.fileCache.set(cacheKey, buffer);
+      this.fileTimestamps.set(cacheKey, mtimeMs);
+      
+      if (options.logSpeed) {
+        const duration = Number(end - start) / 1000;
+        logger.debug(`📄 File read: ${duration.toFixed(3)}µs - ${filePath.split('/').pop()}`);
+      }
+      
+      return buffer;
+      
+    } catch (error) {
+      logger.error(`File cache error: ${filePath} - ${error.message}`);
+      return null;
+    }
+  }
+
+  // CODE TRANSFORMATION CACHE
+  getTransformed(sourceCode, options = {}) {
+    const hash = createHash('md5')
+      .update(sourceCode)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    const cacheKey = `transform:${hash}`;
+    return this.get(cacheKey, options);
+  }
+
+  setTransformed(sourceCode, result, options = {}) {
+    const hash = createHash('md5')
+      .update(sourceCode)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    const cacheKey = `transform:${hash}`;
+    this.set(cacheKey, result, options);
+  }
+
+  // CSS PROCESSING CACHE
+  getCSS(css, options = {}) {
+    const hash = createHash('md5')
+      .update(css)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    return this.cssCache.get(hash);
+  }
+
+  setCSS(css, result, options = {}) {
+    const hash = createHash('md5')
+      .update(css)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    this.cssCache.set(hash, result);
+  }
+
+  // BATCH OPERATIONS
+  mget(keys) {
+    const results = [];
+    for (const key of keys) {
+      results.push(this.get(key));
+    }
+    return results;
+  }
+
+  mset(entries) {
+    for (const [key, value] of entries) {
+      this.set(key, value);
+    }
+  }
+
+  // STATS with microsecond precision
+  getStats() {
+    const total = this.stats.hits + this.stats.misses;
+    const hitRate = total > 0 ? (this.stats.hits / total * 100).toFixed(2) : 0;
+    
+    // Memory usage
+    const memUsage = process.memoryUsage();
+    
+    return {
+      hits: this.stats.hits,
+      misses: this.stats.misses,
+      sets: this.stats.sets,
+      evictions: this.stats.evictions,
+      hitRate: `${hitRate}%`,
+      size: this.store.size,
+      fileCacheSize: this.fileCache.size,
+      codeCacheSize: this.codeCache.size,
+      cssCacheSize: this.cssCache.size,
+      imageCacheSize: this.imageCache.size,
+      memory: {
+        heapUsed: `${(memUsage.heapUsed / 1024 / 1024).toFixed(2)} MB`,
+        heapTotal: `${(memUsage.heapTotal / 1024 / 1024).toFixed(2)} MB`,
+        rss: `${(memUsage.rss / 1024 / 1024).toFixed(2)} MB`
+      }
+    };
+  }
+
+  // PRIVATE METHODS
+  getSize(value) {
+    if (typeof value === 'string') return value.length;
+    if (Buffer.isBuffer(value)) return value.length;
+    if (typeof value === 'object') return JSON.stringify(value).length;
+    return 0;
+  }
+
+  evictLRU() {
+    const entries = Array.from(this.store.entries());
+    entries.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
+    
+    const removeCount = Math.floor(this.maxSize * 0.2); // Remove 20%
+    for (let i = 0; i < removeCount && i < entries.length; i++) {
+      this.store.delete(entries[i][0]);
+      this.stats.evictions++;
+    }
+  }
+
+  cleanup() {
+    const now = Date.now();
+    let evicted = 0;
+    
+    for (const [key, item] of this.store.entries()) {
+      if (now - item.timestamp > item.ttl) {
+        this.store.delete(key);
+        evicted++;
+      }
+    }
+    
+    if (evicted > 0) {
+      logger.debug(`🧹 Cache cleanup: removed ${evicted} expired items`);
+      this.stats.evictions += evicted;
+    }
+  }
+
+  dispose() {
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval);
+    }
+    this.store.clear();
+    this.fileCache.clear();
+    this.fileTimestamps.clear();
+    this.codeCache.clear();
+    this.cssCache.clear();
+    this.imageCache.clear();
+  }
+}
+
+// Singleton instance
+export const globalCache = new BertuiCache();
+
+// Decorator for automatic caching of async functions
+export function cached(options = {}) {
+  return function(target, propertyKey, descriptor) {
+    const originalMethod = descriptor.value;
+    
+    descriptor.value = async function(...args) {
+      const cacheKey = `${propertyKey}:${JSON.stringify(args)}`;
+      const cached = globalCache.get(cacheKey, options);
+      
+      if (cached !== null) {
+        return cached;
+      }
+      
+      const result = await originalMethod.apply(this, args);
+      globalCache.set(cacheKey, result, options);
+      return result;
+    };
+    
+    return descriptor;
+  };
+}