bertui 0.1.4 → 0.1.6

package/index.js

@@ -1,25 +1,23 @@
-// index.js - Main BertUI package exports
+// index.js
 import logger from "./src/logger/logger.js";
 import { defaultConfig } from "./src/config/defaultConfig.js";
+import { loadConfig } from "./src/config/loadConfig.js";
 import { startDev } from "./src/dev.js";
 import { buildProduction } from "./src/build.js";
 import { compileProject } from "./src/client/compiler.js";
+import { buildCSS, copyCSS } from "./src/build/css-builder.js";
 import { program } from "./src/cli.js";
 
-// Router exports - these will be available after compilation
-// Users import these from 'bertui/router'
-// export { Link, navigate, Router } from './src/router/router.js';
-// reason commnedt out is In JavaScript/TypeScript modules, if you define functions/components inside a file, you must explicitly use the export keyword for them to be available to other files that import them.
-
-// Your router.js file contains a function, generateRouterCode(routes), which internally defines the Link, Maps, and Router components/functions as strings within a template
-
-// Named exports for CLI and build tools
+// Named exports
 export { 
     logger,
     defaultConfig,
+    loadConfig,
     startDev,
     buildProduction,
     compileProject,
+    buildCSS,
+    copyCSS,
     program
 };
 
@@ -27,9 +25,12 @@ export {
 export default {
     logger,
     defaultConfig,
+    loadConfig,
     startDev,
     buildProduction,
     compileProject,
+    buildCSS,
+    copyCSS,
     program,
-    version: "0.1.4"
+    version: "0.1.6"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -8,22 +8,17 @@
     "bertui": "./bin/bertui.js"
   },
   "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.js"
-    },
+    ".": "./index.js",
     "./styles": "./src/styles/bertui.css",
     "./logger": "./src/logger/logger.js",
-    "./router": {
-      "import": "./src/router/client-exports.js",
-      "require": "./src/router/client-exports.js"
-    }
+    "./router": "./src/router/Router.jsx"
   },
   "files": [
     "bin",
     "src",
     "index.js",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "dev": "bun bin/bertui.js dev",
@@ -38,10 +33,10 @@
     "elysia",
     "build-tool",
     "bundler",
-    "routing",
-    "file-based-routing"
+    "fast",
+    "hmr"
   ],
-  "author": "Your Name",
+  "author": "Pease Ernest",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -49,11 +44,17 @@
   },
   "dependencies": {
     "elysia": "^1.0.0",
-    "ernest-logger": "latest"
+    "ernest-logger": "latest",
+    "postcss": "^8.4.32",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "bun": ">=1.0.0"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
   }
 }

package/src/build/css-builder.js

@@ -0,0 +1,84 @@
+// src/build/css-builder.js
+import { join } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import logger from '../logger/logger.js';
+
+/**
+ * Build and minify CSS for production
+ * @param {string} srcPath - Source CSS file path
+ * @param {string} destPath - Destination CSS file path
+ */
+export async function buildCSS(srcPath, destPath) {
+  try {
+    logger.info('Processing CSS...');
+    
+    // Ensure destination directory exists
+    const destDir = join(destPath, '..');
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    // Read source CSS
+    const css = await Bun.file(srcPath).text();
+    
+    // Process with PostCSS
+    const result = await postcss([
+      autoprefixer(),
+      cssnano({
+        preset: ['default', {
+          discardComments: { removeAll: true },
+          normalizeWhitespace: true,
+          colormin: true,
+          minifyFontValues: true,
+          minifySelectors: true,
+        }]
+      })
+    ]).process(css, { from: srcPath, to: destPath });
+    
+    // Write minified CSS
+    await Bun.write(destPath, result.css);
+    
+    // Calculate size reduction
+    const originalSize = (Buffer.byteLength(css) / 1024).toFixed(2);
+    const minifiedSize = (Buffer.byteLength(result.css) / 1024).toFixed(2);
+    const reduction = ((1 - Buffer.byteLength(result.css) / Buffer.byteLength(css)) * 100).toFixed(1);
+    
+    logger.success(`CSS minified: ${originalSize}KB → ${minifiedSize}KB (-${reduction}%)`);
+    
+    if (result.warnings().length > 0) {
+      result.warnings().forEach(warn => {
+        logger.warn(warn.toString());
+      });
+    }
+    
+    return { success: true, size: minifiedSize };
+  } catch (error) {
+    logger.error(`CSS build failed: ${error.message}`);
+    throw error;
+  }
+}
+
+/**
+ * Copy CSS without minification (for dev)
+ * @param {string} srcPath - Source CSS file path
+ * @param {string} destPath - Destination CSS file path
+ */
+export async function copyCSS(srcPath, destPath) {
+  try {
+    const destDir = join(destPath, '..');
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    await Bun.write(destPath, Bun.file(srcPath));
+    logger.info('CSS copied for development');
+    
+    return { success: true };
+  } catch (error) {
+    logger.error(`CSS copy failed: ${error.message}`);
+    throw error;
+  }
+}

package/src/build.js

@@ -1,7 +1,8 @@
 // src/build.js
 import { join } from 'path';
-import { existsSync, mkdirSync, rmSync } from 'fs';
+import { existsSync, mkdirSync, rmSync, cpSync } from 'fs';
 import logger from './logger/logger.js';
+import { buildCSS } from './build/css-builder.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -19,10 +20,34 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // Build with Bun's bundler
+    // Step 1: Build CSS from BertUI library
+    logger.info('Step 1: Building CSS...');
+    const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
+    const bertuiCssDest = join(outDir, 'styles/bertui.min.css');
+    await buildCSS(bertuiCssSource, bertuiCssDest);
+    
+    // Step 2: Copy public assets if they exist
+    const publicDir = join(root, 'public');
+    if (existsSync(publicDir)) {
+      logger.info('Step 2: Copying public assets...');
+      cpSync(publicDir, outDir, { recursive: true });
+      logger.success('Public assets copied');
+    } else {
+      logger.info('Step 2: No public directory found, skipping...');
+    }
+    
+    // Step 3: Build JavaScript with Bun's bundler
+    logger.info('Step 3: Bundling JavaScript...');
+    const mainEntry = join(root, 'src/main.jsx');
+    
+    if (!existsSync(mainEntry)) {
+      logger.error('Entry point not found: src/main.jsx');
+      process.exit(1);
+    }
+    
     const result = await Bun.build({
-      entrypoints: [join(root, 'src/main.jsx')],
-      outdir: outDir,
+      entrypoints: [mainEntry],
+      outdir: join(outDir, 'assets'),
       target: 'browser',
       minify: true,
       splitting: true,
@@ -30,35 +55,38 @@ export async function buildProduction(options = {}) {
       naming: {
         entry: '[name]-[hash].js',
         chunk: 'chunks/[name]-[hash].js',
-        asset: 'assets/[name]-[hash].[ext]'
-      }
+        asset: '[name]-[hash].[ext]'
+      },
+      external: [] // Don't externalize anything for browser builds
     });
     
     if (!result.success) {
-      logger.error('Build failed!');
+      logger.error('JavaScript build failed!');
       result.logs.forEach(log => logger.error(log.message));
       process.exit(1);
     }
     
-    // Copy BertUI CSS to dist
-    const bertuiCss = join(import.meta.dir, 'styles/bertui.css');
-    const destCss = join(outDir, 'bertui.css');
-    await Bun.write(destCss, Bun.file(bertuiCss));
-    logger.info('Copied BertUI CSS');
+    logger.success('JavaScript bundled');
     
-    // Generate index.html
+    // Step 4: Generate index.html
+    logger.info('Step 4: Generating index.html...');
     await generateProductionHTML(root, outDir, result);
     
     const duration = Date.now() - startTime;
-    logger.success(`Build complete in ${duration}ms`);
-    logger.info(`Output: ${outDir}`);
+    logger.success(`✨ Build complete in ${duration}ms`);
+    logger.info(`📦 Output: ${outDir}`);
+    
+    // Display build stats
     logger.table(result.outputs.map(o => ({
-      file: o.path,
+      file: o.path.replace(outDir, ''),
       size: `${(o.size / 1024).toFixed(2)} KB`
     })));
     
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
+    if (error.stack) {
+      logger.error(error.stack);
+    }
     process.exit(1);
   }
 }
@@ -70,25 +98,26 @@ async function generateProductionHTML(root, outDir, buildResult) {
   );
   
   if (!mainBundle) {
-    throw new Error('Could not find main bundle');
+    throw new Error('Could not find main bundle in build output');
   }
   
-  const bundleName = mainBundle.path.split('/').pop();
+  const bundlePath = mainBundle.path.replace(outDir, '').replace(/^\//, '');
   
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Built with BertUI - Lightning fast React development">
   <title>BertUI App</title>
-  <link rel="stylesheet" href="/bertui.css">
+  <link rel="stylesheet" href="/styles/bertui.min.css">
 </head>
 <body>
   <div id="root"></div>
-  <script type="module" src="/${bundleName}"></script>
+  <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;
   
   await Bun.write(join(outDir, 'index.html'), html);
-  logger.info('Generated index.html');
+  logger.success('Generated index.html');
 }

package/src/client/compiler.js

@@ -1,92 +1,226 @@
 // src/client/compiler.js
-import { join } from 'path';
-import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { join, extname, relative, sep } from 'path';
 import logger from '../logger/logger.js';
-import { generateRoutes, generateRouterCode, generateMainWithRouter, logRoutes } from '../router/router.js';
 
 export async function compileProject(root) {
-  const compiledDir = join(root, '.bertui', 'compiled');
-  const routerDir = join(root, '.bertui');
+  logger.bigLog('COMPILING PROJECT', { color: 'blue' });
   
-  // Ensure compiled directory exists
-  if (!existsSync(compiledDir)) {
-    mkdirSync(compiledDir, { recursive: true });
+  const srcDir = join(root, 'src');
+  const pagesDir = join(srcDir, 'pages');
+  const outDir = join(root, '.bertui', 'compiled');
+  
+  // Check if src exists
+  if (!existsSync(srcDir)) {
+    logger.error('src/ directory not found!');
+    process.exit(1);
   }
   
-  const startTime = Date.now();
+  // Create output directory
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+    logger.info('Created .bertui/compiled/');
+  }
   
-  try {
-    // Check if routing is enabled (pages directory exists)
-    const pagesDir = join(root, 'src', 'pages');
-    const useRouting = existsSync(pagesDir);
+  // Discover routes if pages directory exists
+  let routes = [];
+  if (existsSync(pagesDir)) {
+    routes = await discoverRoutes(pagesDir);
+    logger.info(`Discovered ${routes.length} routes`);
     
-    let entryPoint;
-    let routes = [];
-    
-    if (useRouting) {
-      logger.info('📁 File-based routing enabled');
-      
-      // Generate routes
-      routes = generateRoutes(root);
-      logRoutes(routes);
+    // Display routes table
+    if (routes.length > 0) {
+      logger.bigLog('ROUTES DISCOVERED', { color: 'blue' });
+      logger.table(routes.map((r, i) => ({
+        '': i,
+        route: r.route,
+        file: r.file,
+        type: r.type
+      })));
       
-      // Generate router code
-      const routerCode = generateRouterCode(routes);
-      const routerPath = join(routerDir, 'router.js');
-      writeFileSync(routerPath, routerCode);
+      // Generate router file
+      await generateRouter(routes, outDir);
       logger.info('Generated router.js');
+    }
+  }
+  
+  // Compile all files
+  const startTime = Date.now();
+  const stats = await compileDirectory(srcDir, outDir, root);
+  const duration = Date.now() - startTime;
+  
+  logger.success(`Compiled ${stats.files} files in ${duration}ms`);
+  logger.info(`Output: ${outDir}`);
+  
+  return { outDir, stats, routes };
+}
+
+async function discoverRoutes(pagesDir) {
+  const routes = [];
+  
+  async function scanDirectory(dir, basePath = '') {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      const relativePath = join(basePath, entry.name);
       
-      // Generate main entry with router
-      const mainCode = generateMainWithRouter(routes);
-      const mainPath = join(routerDir, 'main-entry.js');
-      writeFileSync(mainPath, mainCode);
-      
-      entryPoint = mainPath;
-    } else {
-      // Use regular main.jsx if no pages directory
-      entryPoint = join(root, 'src/main.jsx');
-      
-      if (!existsSync(entryPoint)) {
-        throw new Error('src/main.jsx not found. Create either src/main.jsx or src/pages/ directory.');
+      if (entry.isDirectory()) {
+        // Recursively scan subdirectories
+        await scanDirectory(fullPath, relativePath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name);
+        if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
+          const fileName = entry.name.replace(ext, '');
+          
+          // Generate route path
+          let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
+          
+          // Handle index files
+          if (fileName === 'index') {
+            route = route.replace('/index', '') || '/';
+          }
+          
+          // Determine route type
+          const isDynamic = fileName.includes('[') && fileName.includes(']');
+          const type = isDynamic ? 'dynamic' : 'static';
+          
+          routes.push({
+            route: route === '' ? '/' : route,
+            file: relativePath,
+            path: fullPath,
+            type
+          });
+        }
       }
     }
-    
-    // Transpile with Bun
-    const result = await Bun.build({
-      entrypoints: [entryPoint],
-      outdir: compiledDir,
-      target: 'browser',
-      format: 'esm',
-      splitting: true,
-      naming: {
-        entry: '[name].js',
-        chunk: 'chunks/[name]-[hash].js'
-      },
-      external: ['react', 'react-dom'],
-      define: {
-        'process.env.NODE_ENV': '"development"'
+  }
+  
+  await scanDirectory(pagesDir);
+  
+  // Sort routes: static routes first, then dynamic
+  routes.sort((a, b) => {
+    if (a.type === b.type) {
+      return a.route.localeCompare(b.route);
+    }
+    return a.type === 'static' ? -1 : 1;
+  });
+  
+  return routes;
+}
+
+async function generateRouter(routes, outDir) {
+  const imports = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    const importPath = `./pages/${route.file.replace(/\\/g, '/')}`;
+    return `import ${componentName} from '${importPath}';`;
+  }).join('\n');
+  
+  const routeConfigs = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
+  }).join(',\n');
+  
+  const routerCode = `// Auto-generated router - DO NOT EDIT
+${imports}
+
+export const routes = [
+${routeConfigs}
+];
+
+export function matchRoute(pathname) {
+  // Try exact match first
+  for (const route of routes) {
+    if (route.type === 'static' && route.path === pathname) {
+      return route;
+    }
+  }
+  
+  // Try dynamic routes
+  for (const route of routes) {
+    if (route.type === 'dynamic') {
+      const pattern = route.path.replace(/\\[([^\\]]+)\\]/g, '([^/]+)');
+      const regex = new RegExp('^' + pattern + '$');
+      const match = pathname.match(regex);
+      
+      if (match) {
+        // Extract params
+        const paramNames = [...route.path.matchAll(/\\[([^\\]]+)\\]/g)].map(m => m[1]);
+        const params = {};
+        paramNames.forEach((name, i) => {
+          params[name] = match[i + 1];
+        });
+        
+        return { ...route, params };
       }
-    });
-    
-    if (!result.success) {
-      logger.error('Compilation failed!');
-      result.logs.forEach(log => logger.error(log.message));
-      throw new Error('Build failed');
     }
+  }
+  
+  return null;
+}
+`;
+  
+  const routerPath = join(outDir, 'router.js');
+  await Bun.write(routerPath, routerCode);
+}
+
+async function compileDirectory(srcDir, outDir, root) {
+  const stats = { files: 0, skipped: 0 };
+  
+  const files = readdirSync(srcDir);
+  
+  for (const file of files) {
+    const srcPath = join(srcDir, file);
+    const stat = statSync(srcPath);
     
-    // Copy BertUI CSS
-    const bertuiCss = join(import.meta.dir, '../styles/bertui.css');
-    if (existsSync(bertuiCss)) {
-      await Bun.write(join(compiledDir, 'bertui.css'), Bun.file(bertuiCss));
+    if (stat.isDirectory()) {
+      // Recursively compile subdirectories
+      const subOutDir = join(outDir, file);
+      mkdirSync(subOutDir, { recursive: true });
+      const subStats = await compileDirectory(srcPath, subOutDir, root);
+      stats.files += subStats.files;
+      stats.skipped += subStats.skipped;
+    } else {
+      // Compile file
+      const ext = extname(file);
+      const relativePath = relative(join(root, 'src'), srcPath);
+      
+      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+        await compileFile(srcPath, outDir, file, relativePath);
+        stats.files++;
+      } else if (ext === '.js' || ext === '.css') {
+        // Copy as-is
+        const outPath = join(outDir, file);
+        await Bun.write(outPath, Bun.file(srcPath));
+        logger.debug(`Copied: ${relativePath}`);
+        stats.files++;
+      } else {
+        logger.debug(`Skipped: ${relativePath}`);
+        stats.skipped++;
+      }
     }
+  }
+  
+  return stats;
+}
+
+async function compileFile(srcPath, outDir, filename, relativePath) {
+  const ext = extname(filename);
+  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+  
+  try {
+    const transpiler = new Bun.Transpiler({ loader });
+    const code = await Bun.file(srcPath).text();
+    const compiled = await transpiler.transform(code);
     
-    const duration = Date.now() - startTime;
-    logger.success(`Compiled in ${duration}ms`);
-    
-    return { success: true, routes };
+    // Change extension to .js
+    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
+    const outPath = join(outDir, outFilename);
     
+    await Bun.write(outPath, compiled);
+    logger.debug(`Compiled: ${relativePath} → ${outFilename}`);
   } catch (error) {
-    logger.error(`Compilation error: ${error.message}`);
+    logger.error(`Failed to compile ${relativePath}: ${error.message}`);
     throw error;
   }
 }

package/src/config/loadConfig.js

@@ -1,7 +1,8 @@
+// src/config/loadConfig.js
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { defaultConfig } from './defaultConfig.js';
-import logger from '../utils/logger.js';
+import logger from '../logger/logger.js';
 
 export async function loadConfig(root) {
   const configPath = join(root, 'bertui.config.js');
@@ -15,7 +16,7 @@ export async function loadConfig(root) {
       // Merge user config with defaults
       return mergeConfig(defaultConfig, userConfig.default || userConfig);
     } catch (error) {
-      logger.error(`Failed to load config make sure the file bertui.config.js is in the root directory of the app if not create it : ${error.message}`);
+      logger.error(`Failed to load config. Make sure bertui.config.js is in the root directory: ${error.message}`);
       return defaultConfig;
     }
   }
@@ -26,7 +27,7 @@ export async function loadConfig(root) {
 
 function mergeConfig(defaults, user) {
   return {
-    meta: { ...defaults.meta, ...user.meta },
-    appShell: { ...defaults.appShell, ...user.appShell }
+    meta: { ...defaults.meta, ...(user.meta || {}) },
+    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
   };
 }

package/src/router/router.js

@@ -1,216 +1,129 @@
-// src/router/router.js
-import { join, relative, parse } from 'path';
-import { readdirSync, statSync, existsSync } from 'fs';
-import logger from 'ernest-logger'; // Assuming Ernest Logger is used
-
-/**
- * Scans the pages directory and generates route definitions
- */
-export function generateRoutes(root) {
-  const pagesDir = join(root, 'src', 'pages');
-  
-  if (!existsSync(pagesDir)) {
-    return [];
-  }
-  
-  const routes = [];
-  
-  function scanDirectory(dir, basePath = '') {
-    const entries = readdirSync(dir);
-    
-    for (const entry of entries) {
-      const fullPath = join(dir, entry);
-      const stat = statSync(fullPath);
-      
-      if (stat.isDirectory()) {
-        // Recursively scan subdirectories
-        scanDirectory(fullPath, join(basePath, entry));
-      } else if (stat.isFile() && /\.(jsx?|tsx?)$/.test(entry)) {
-        const parsed = parse(entry);
-        let fileName = parsed.name;
-        
-        // Skip non-page files (e.g., those starting with a dot)
-        if (fileName.startsWith('.') || fileName.startsWith('~')) {
-          continue;
-        }
-        
-        // --- ROUTE PATH GENERATION ---
-        
-        // Handle dynamic routes: _filename -> :filename
-        let isDynamic = false;
-        if (fileName.startsWith('_')) {
-          fileName = fileName.slice(1); // Remove the underscore
-          isDynamic = true;
-        }
+// src/router/Router.jsx
+import { useState, useEffect, createContext, useContext } from 'react';
 
-        // Generate route path
-        let routePath = join(basePath, fileName === 'index' ? '' : fileName);
-        routePath = '/' + routePath.replace(/\\/g, '/'); // Use forward slashes
-        
-        // Apply dynamic parameter if detected
-        if (isDynamic) {
-            // Replace the last part of the route path with the dynamic parameter (e.g., /blog/slug -> /blog/:slug)
-            routePath = routePath.replace(new RegExp(`/${fileName}$`), `/:${fileName}`);
-        }
-        
-        // Handle the root path, ensuring it's just '/'
-        if (routePath === '//') {
-            routePath = '/';
-        }
+// Router context
+const RouterContext = createContext(null);
 
-        // Get relative path from pages dir (used for imports in generated code)
-        const relativePath = relative(pagesDir, fullPath);
-        
-        routes.push({
-          path: routePath,
-          file: relativePath,
-          component: fullPath,
-          isDynamic: isDynamic || routePath.includes(':') 
-        });
-      }
-    }
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a Router component');
   }
-  
-  scanDirectory(pagesDir);
-  
-  // Sort routes: Root path first, then static, then dynamic
-  routes.sort((a, b) => {
-    if (a.path === '/') return -1; 
-    if (b.path === '/') return 1;
-    if (a.isDynamic && !b.isDynamic) return 1;
-    if (!a.isDynamic && b.isDynamic) return -1;
-    return a.path.localeCompare(b.path);
-  });
-  
-  return routes;
+  return context;
 }
 
-/**
- * Generates the router client code
- */
-export function generateRouterCode(routes) {
-  const imports = routes.map((route, index) => 
-    `import Page${index} from '../src/pages/${route.file.replace(/\\/g, '/')}';`
-  ).join('\n');
-  
-  const routeConfigs = routes.map((route, index) => ({
-    path: route.path,
-    component: `Page${index}`
-  }));
-  
-  return `
-// Auto-generated router code - DO NOT EDIT MANUALLY
-import React, { useState, useEffect } from 'react';
-${imports}
-
-const routes = ${JSON.stringify(routeConfigs, null, 2).replace(/"Page(\d+)"/g, 'Page$1')};
-
-export function Router() {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
-  
+export function useParams() {
+  const { params } = useRouter();
+  return params;
+}
+
+export function Router({ routes, children }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+
   useEffect(() => {
+    // Match initial route
+    matchAndSetRoute(window.location.pathname);
+
+    // Handle browser navigation
     const handlePopState = () => {
-      setCurrentPath(window.location.pathname);
+      matchAndSetRoute(window.location.pathname);
     };
-    
+
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
-  
-  // Match current path to route
-  const matchedRoute = routes.find(route => {
-    if (route.path === currentPath) return true;
-    
-    // Handle dynamic routes (simple static matching for now)
-    const routeParts = route.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    if (routeParts.length !== pathParts.length) return false;
-    
-    return routeParts.every((part, i) => {
-      if (part.startsWith(':')) return true; // Match any value for dynamic part
-      return part === pathParts[i];
-    });
-  });
-  
-  if (!matchedRoute) {
-    return <div style={{ padding: '2rem', textAlign: 'center' }}>
-      <h1>404 - Page Not Found</h1>
-      <p>The page "{currentPath}" does not exist.</p>
-      <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Go Home</a>
-    </div>;
-  }
-  
-  // Extract params from dynamic routes
-  const params = {};
-  if (matchedRoute.path.includes(':')) {
-    const routeParts = matchedRoute.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    routeParts.forEach((part, i) => {
-      if (part.startsWith(':')) {
-        const paramName = part.slice(1);
-        params[paramName] = pathParts[i];
+
+  function matchAndSetRoute(pathname) {
+    // Try exact match first (static routes)
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+
+    // Try dynamic routes
+    for (const route of routes) {
+      if (route.type === 'dynamic') {
+        const pattern = route.path.replace(/\[([^\]]+)\]/g, '([^/]+)');
+        const regex = new RegExp('^' + pattern + '$');
+        const match = pathname.match(regex);
+
+        if (match) {
+          // Extract params
+          const paramNames = [...route.path.matchAll(/\[([^\]]+)\]/g)].map(m => m[1]);
+          const extractedParams = {};
+          paramNames.forEach((name, i) => {
+            extractedParams[name] = match[i + 1];
+          });
+
+          setCurrentRoute(route);
+          setParams(extractedParams);
+          return;
+        }
       }
-    });
+    }
+
+    // No match found - 404
+    setCurrentRoute(null);
+    setParams({});
+  }
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
   }
-  
-  const Component = matchedRoute.component;
-  return <Component params={params} />;
-}
 
-// Client-side navigation
-export function navigate(path) {
-  window.history.pushState({}, '', path);
-  window.dispatchEvent(new PopStateEvent('popstate'));
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: window.location.pathname
+  };
+
+  return (
+    <RouterContext.Provider value={routerValue}>
+      {currentRoute ? (
+        <currentRoute.component />
+      ) : (
+        children || <NotFound />
+      )}
+    </RouterContext.Provider>
+  );
 }
 
-// Link component for navigation
-export function Link({ href, children, ...props }) {
-  const handleClick = (e) => {
+export function Link({ to, children, className, ...props }) {
+  const { navigate } = useRouter();
+
+  function handleClick(e) {
     e.preventDefault();
-    navigate(href);
-  };
-  
+    navigate(to);
+  }
+
   return (
-    <a href={href} onClick={handleClick} {...props}>
+    <a href={to} onClick={handleClick} className={className} {...props}>
       {children}
     </a>
   );
 }
-`;
-}
 
-/**
- * Generates the main entry point with router
- */
-export function generateMainWithRouter(routes) {
-  return `
-import 'bertui/styles';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { Router } from './.bertui/router.js';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <Router />
-);
-`;
-}
-
-export function logRoutes(routes) {
-  if (routes.length === 0) {
-    logger.warn('No routes found in src/pages/');
-    logger.info('Create files in src/pages/ to define routes:');
-    logger.info('  src/pages/index.jsx     → /');
-    logger.info('  src/pages/about.jsx     → /about');
-    logger.info('  src/pages/user/_id.jsx  → /user/:id'); // Updated tip
-    return;
-  }
-  
-  logger.bigLog('ROUTES DISCOVERED', { color: 'cyan' });
-  logger.table(routes.map(r => ({
-    route: r.path,
-    file: r.file,
-    type: r.isDynamic ? 'dynamic' : 'static'
-  })));
+function NotFound() {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100vh',
+      fontFamily: 'system-ui, sans-serif'
+    }}>
+      <h1 style={{ fontSize: '6rem', margin: 0 }}>404</h1>
+      <p style={{ fontSize: '1.5rem', color: '#666' }}>Page not found</p>
+      <a href="/" style={{ color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' }}>
+        Go home
+      </a>
+    </div>
+  );
 }

package/src/server/dev-server.js

@@ -12,46 +12,49 @@ export async function startDevServer(options = {}) {
   const compiledDir = join(root, '.bertui', 'compiled');
   
   const clients = new Set();
-  let currentRoutes = [];
+  let hasRouter = false;
+  
+  // Check if router exists
+  const routerPath = join(compiledDir, 'router.js');
+  if (existsSync(routerPath)) {
+    hasRouter = true;
+    logger.info('Router-based routing enabled');
+  }
   
   const app = new Elysia()
-    // Serve index.html for all routes (SPA mode)
-    .get('/*', async ({ params }) => {
-      // Check if it's requesting a file
-      const path = params['*'] || '';
+    // Main HTML route - serves all pages
+    .get('/', async () => {
+      return serveHTML(root, hasRouter);
+    })
+    
+    // Catch-all route for SPA routing
+    .get('/*', async ({ params, set }) => {
+      const path = params['*'];
       
+      // Check if it's a file request
       if (path.includes('.')) {
-        // It's a file request, handle it separately
-        return await serveFile(compiledDir, path);
+        // Try to serve as static file
+        const filePath = join(compiledDir, path);
+        const file = Bun.file(filePath);
+        
+        if (await file.exists()) {
+          const ext = extname(path);
+          const contentType = getContentType(ext);
+          
+          return new Response(await file.text(), {
+            headers: { 
+              'Content-Type': contentType,
+              'Cache-Control': 'no-store'
+            }
+          });
+        }
+        
+        set.status = 404;
+        return 'File not found';
       }
       
-      // Serve the SPA HTML for all routes
-      const html = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BertUI App</title>
-  <link rel="stylesheet" href="/compiled/bertui.css">
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/hmr-client.js"></script>
-  <script type="module">
-    // Provide React and ReactDOM from CDN for dev
-    import React from 'https://esm.sh/react@18.2.0';
-    import ReactDOM from 'https://esm.sh/react-dom@18.2.0';
-    window.React = React;
-    window.ReactDOM = ReactDOM;
-  </script>
-  <script type="module" src="/compiled/main-entry.js"></script>
-</body>
-</html>`;
-      
-      return new Response(html, {
-        headers: { 'Content-Type': 'text/html' }
-      });
+      // For non-file routes, serve the main HTML (SPA mode)
+      return serveHTML(root, hasRouter);
     })
     
     .get('/hmr-client.js', () => {
@@ -66,28 +69,21 @@ ws.onmessage = (event) => {
   const data = JSON.parse(event.data);
   
   if (data.type === 'reload') {
-    console.log('%c🔄 Hot reloading...', 'color: #f59e0b');
+    console.log('%c🔄 Reloading...', 'color: #f59e0b');
     window.location.reload();
   }
   
   if (data.type === 'recompiling') {
     console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
   }
-  
-  if (data.type === 'routes-updated') {
-    console.log('%c📍 Routes updated:', 'color: #8b5cf6; font-weight: bold');
-    data.routes.forEach(r => {
-      console.log(\`  \${r.path} → \${r.file}\`);
-    });
-  }
 };
 
 ws.onerror = (error) => {
-  console.error('HMR connection error:', error);
+  console.error('%c❌ HMR connection error', 'color: #ef4444', error);
 };
 
 ws.onclose = () => {
-  console.log('%c❌ HMR disconnected. Refresh to reconnect.', 'color: #ef4444');
+  console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
 };
 `;
       
@@ -100,20 +96,31 @@ ws.onclose = () => {
       open(ws) {
         clients.add(ws);
         logger.info('Client connected to HMR');
-        
-        // Send current routes on connection
-        if (currentRoutes.length > 0) {
-          ws.send(JSON.stringify({ 
-            type: 'routes-updated', 
-            routes: currentRoutes 
-          }));
-        }
       },
       close(ws) {
         clients.delete(ws);
+        logger.info('Client disconnected from HMR');
       }
     })
     
+    // Serve BertUI CSS
+    .get('/styles/bertui.css', async ({ set }) => {
+      const cssPath = join(import.meta.dir, '../styles/bertui.css');
+      const file = Bun.file(cssPath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'CSS file not found';
+      }
+      
+      return new Response(await file.text(), {
+        headers: { 
+          'Content-Type': 'text/css',
+          'Cache-Control': 'no-store'
+        }
+      });
+    })
+    
     // Serve compiled files
     .get('/compiled/*', async ({ params, set }) => {
       const filepath = join(compiledDir, params['*']);
@@ -135,6 +142,20 @@ ws.onclose = () => {
       });
     })
     
+    // Serve public assets
+    .get('/public/*', async ({ params, set }) => {
+      const publicDir = join(root, 'public');
+      const filepath = join(publicDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'File not found';
+      }
+      
+      return new Response(file);
+    })
+    
     .listen(port);
   
   if (!app.server) {
@@ -142,33 +163,41 @@ ws.onclose = () => {
     process.exit(1);
   }
   
-  logger.success(`Server running at http://localhost:${port}`);
-  logger.info('Press Ctrl+C to stop');
+  logger.success(`🚀 Server running at http://localhost:${port}`);
+  logger.info(`📁 Serving: ${root}`);
   
   // Watch for file changes
-  setupWatcher(root, clients, (routes) => {
-    currentRoutes = routes;
+  setupWatcher(root, compiledDir, clients, () => {
+    // Check router status on recompile
+    hasRouter = existsSync(join(compiledDir, 'router.js'));
   });
   
   return app;
 }
 
-async function serveFile(compiledDir, path) {
-  const filepath = join(compiledDir, path);
-  const file = Bun.file(filepath);
-  
-  if (!await file.exists()) {
-    return new Response('File not found', { status: 404 });
+function serveHTML(root, hasRouter) {
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BertUI App - Dev</title>
+  <link rel="stylesheet" href="/styles/bertui.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/hmr-client.js"></script>
+  ${hasRouter 
+    ? '<script type="module" src="/compiled/router.js"></script>' 
+    : ''
   }
+  <script type="module" src="/compiled/main.js"></script>
+</body>
+</html>`;
   
-  const ext = extname(filepath);
-  const contentType = getContentType(ext);
-  
-  return new Response(await file.text(), {
-    headers: { 
-      'Content-Type': contentType,
-      'Cache-Control': 'no-store'
-    }
+  return new Response(html, {
+    headers: { 'Content-Type': 'text/html' }
   });
 }
 
@@ -180,12 +209,20 @@ function getContentType(ext) {
     '.json': 'application/json',
     '.png': 'image/png',
     '.jpg': 'image/jpeg',
-    '.svg': 'image/svg+xml'
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.eot': 'application/vnd.ms-fontobject'
   };
+  
   return types[ext] || 'text/plain';
 }
 
-function setupWatcher(root, clients, onRoutesUpdate) {
+function setupWatcher(root, compiledDir, clients, onRecompile) {
   const srcDir = join(root, 'src');
   
   if (!existsSync(srcDir)) {
@@ -195,15 +232,11 @@ function setupWatcher(root, clients, onRoutesUpdate) {
   
   logger.info(`👀 Watching: ${srcDir}`);
   
-  let isRecompiling = false;
-  
   watch(srcDir, { recursive: true }, async (eventType, filename) => {
-    if (!filename || isRecompiling) return;
+    if (!filename) return;
     
     const ext = extname(filename);
     if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
-      isRecompiling = true;
-      
       logger.info(`📝 File changed: ${filename}`);
       
       // Notify clients that recompilation is starting
@@ -217,22 +250,11 @@ function setupWatcher(root, clients, onRoutesUpdate) {
       
       // Recompile the project
       try {
-        const result = await compileProject(root);
+        await compileProject(root);
         
-        // Notify about route changes
-        if (result.routes && result.routes.length > 0) {
-          onRoutesUpdate(result.routes);
-          
-          for (const client of clients) {
-            try {
-              client.send(JSON.stringify({ 
-                type: 'routes-updated', 
-                routes: result.routes 
-              }));
-            } catch (e) {
-              clients.delete(client);
-            }
-          }
+        // Call callback to update router status
+        if (onRecompile) {
+          onRecompile();
         }
         
         // Notify clients to reload
@@ -245,8 +267,6 @@ function setupWatcher(root, clients, onRoutesUpdate) {
         }
       } catch (error) {
         logger.error(`Recompilation failed: ${error.message}`);
-      } finally {
-        isRecompiling = false;
       }
     }
   });