kilatjs 0.1.0 → 0.1.2

package/dist/index.js

@@ -2,18 +2,138 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import React from "react";
 
+// src/server/live-reload.ts
+var clients = new Set;
+var liveReloadServer = null;
+function startLiveReload(port = 35729) {
+  if (liveReloadServer)
+    return;
+  liveReloadServer = Bun.serve({
+    port,
+    fetch(req, server) {
+      if (server.upgrade(req, { data: {} })) {
+        return;
+      }
+      return new Response("Live Reload Server", { status: 200 });
+    },
+    websocket: {
+      open(ws) {
+        clients.add(ws);
+      },
+      close(ws) {
+        clients.delete(ws);
+      },
+      message() {}
+    }
+  });
+}
+function notifyReload() {
+  const message = JSON.stringify({ type: "reload" });
+  for (const client of clients) {
+    try {
+      client.send(message);
+    } catch {
+      clients.delete(client);
+    }
+  }
+}
+function getLiveReloadScript(port = 35729) {
+  return `
+<script>
+(function() {
+    const ws = new WebSocket('ws://localhost:${port}');
+    ws.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'reload') {
+            console.log('[KilatJS] Reloading...');
+            location.reload();
+        }
+    };
+    ws.onclose = function() {
+        console.log('[KilatJS] Live reload disconnected. Reconnecting...');
+        setTimeout(function() { location.reload(); }, 1000);
+    };
+})();
+</script>`;
+}
+async function watchDirectory(dir, onChange) {
+  const fileTimestamps = new Map;
+  let timeout = null;
+  let lastChange = 0;
+  const triggerChange = (filename) => {
+    const now = Date.now();
+    if (now - lastChange < 100)
+      return;
+    lastChange = now;
+    if (timeout)
+      clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      onChange();
+    }, 50);
+  };
+  async function scanFiles() {
+    const timestamps = new Map;
+    try {
+      const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css}");
+      for await (const file of glob.scan({ cwd: dir, absolute: true })) {
+        try {
+          const stat = Bun.file(file);
+          const lastModified = (await stat.stat())?.mtime?.getTime() || 0;
+          timestamps.set(file, lastModified);
+        } catch {}
+      }
+    } catch (error) {
+      console.warn(`⚠️ Could not scan directory ${dir}:`, error);
+    }
+    return timestamps;
+  }
+  const initialFiles = await scanFiles();
+  for (const [file, time] of initialFiles) {
+    fileTimestamps.set(file, time);
+  }
+  const pollInterval = setInterval(async () => {
+    const currentFiles = await scanFiles();
+    for (const [file, time] of currentFiles) {
+      const previousTime = fileTimestamps.get(file);
+      if (previousTime === undefined || previousTime < time) {
+        fileTimestamps.set(file, time);
+        if (previousTime !== undefined) {
+          const relativePath = file.replace(dir + "/", "");
+          triggerChange(relativePath);
+        }
+      }
+    }
+    for (const file of fileTimestamps.keys()) {
+      if (!currentFiles.has(file)) {
+        fileTimestamps.delete(file);
+        const relativePath = file.replace(dir + "/", "");
+        triggerChange(relativePath);
+      }
+    }
+  }, 500);
+  globalThis.__kilatWatchIntervals = globalThis.__kilatWatchIntervals || [];
+  globalThis.__kilatWatchIntervals.push(pollInterval);
+}
+function stopLiveReload() {
+  if (liveReloadServer) {
+    liveReloadServer.stop();
+    liveReloadServer = null;
+  }
+  clients.clear();
+}
+
+// src/adapters/react.ts
 class ReactAdapter {
   static async renderToString(component, props) {
     try {
       const element = React.createElement(component, props);
-      const html = renderToStaticMarkup(element);
-      return html;
+      return renderToStaticMarkup(element);
     } catch (error) {
       console.error("Error rendering React component:", error);
       throw error;
     }
   }
-  static createDocument(html, meta = {}, config) {
+  static createDocument(html, meta = {}, config, options = {}) {
     const title = meta.title || "KilatJS App";
     const description = meta.description || "";
     const robots = meta.robots || "index,follow";
@@ -70,6 +190,8 @@ class ReactAdapter {
     `;
     metaTags += `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
     `;
+    const liveReloadScript = config?.dev ? getLiveReloadScript() : "";
+    const clientScriptTag = options.clientScript ? `<script>(${options.clientScript.toString()})()</script>` : "";
     return `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -80,34 +202,8 @@ class ReactAdapter {
     <div id="root">
       ${html}
     </div>
-    ${config?.dev ? `<script>
-      (function() {
-        let currentServerId = null;
-        let isReconnecting = false;
-        
-        function connect() {
-            const source = new EventSource('/_kilat/live-reload');
-            
-            source.onmessage = (event) => {
-                const newServerId = event.data;
-                if (currentServerId === null) {
-                    currentServerId = newServerId;
-                } else if (currentServerId !== newServerId) {
-                    // Server ID changed, reload!
-                    location.reload();
-                }
-            };
-
-            source.onerror = () => {
-                source.close();
-                // Try to reconnect in 1s
-                setTimeout(connect, 1000);
-            };
-        }
-        
-        connect();
-      })();
-    </script>` : ""}
+    ${liveReloadScript}
+    ${clientScriptTag}
   </body>
 </html>`;
   }
@@ -260,6 +356,7 @@ class HTMXAdapter {
     <div id="root">
       ${html}
     </div>
+    ${config?.dev ? getLiveReloadScript() : ""}
   </body>
 </html>`;
   }
@@ -273,23 +370,19 @@ class Router {
   routes = new Map;
   config;
   staticPaths = new Map;
-  serverId = Date.now().toString();
   fsRouter;
   routeCache = new Map;
   preloadedRoutes = new Map;
   routePatterns = [];
   apiRoutes = new Map;
-  staticApiResponses = new Map;
   static NOT_FOUND_RESPONSE = new Response("404 Not Found", { status: 404 });
   static METHOD_NOT_ALLOWED_RESPONSE = new Response(JSON.stringify({ error: "Method Not Allowed" }), { status: 405, headers: { "Content-Type": "application/json" } });
   static INTERNAL_ERROR_RESPONSE = new Response(JSON.stringify({ error: "Internal Server Error" }), { status: 500, headers: { "Content-Type": "application/json" } });
   contextPool = [];
-  poolIndex = 0;
   constructor(config) {
     this.config = config;
-    const routesDir = config.routesDir.startsWith("/") ? config.routesDir : `${process.cwd()}/${config.routesDir}`;
     this.fsRouter = new Bun.FileSystemRouter({
-      dir: routesDir,
+      dir: config.routesDir,
       style: "nextjs",
       origin: `http://${config.hostname || "localhost"}:${config.port || 3000}`
     });
@@ -300,33 +393,25 @@ class Router {
   getStaticPaths() {
     return this.staticPaths;
   }
-  async loadRoutes() {
-    if (this.config.dev) {
-      this.fsRouter.reload();
-      this.routeCache.clear();
-      this.preloadedRoutes.clear();
-      this.routePatterns.length = 0;
-    }
-    await this.preloadAllRoutes();
-    console.log("\uD83D\uDD04 FileSystemRouter initialized with", this.preloadedRoutes.size, "preloaded routes");
-    if (this.config.dev) {
-      console.log("\uD83D\uDCCB Preloaded routes:");
-      for (const [route, exports] of this.preloadedRoutes.entries()) {
-        console.log(`   ${route} (${route.includes("[") ? "dynamic" : "static"})`);
-      }
-      console.log("\uD83D\uDCCB Dynamic route patterns:", this.routePatterns.length);
-      for (const pattern of this.routePatterns) {
-        console.log(`   ${pattern.pattern} -> ${pattern.filePath}`);
-      }
+  async loadRoutes(silent = false) {
+    this.fsRouter.reload();
+    this.routeCache.clear();
+    this.preloadedRoutes.clear();
+    this.routePatterns.length = 0;
+    this.apiRoutes.clear();
+    this.staticHtmlFiles.clear();
+    await this.preloadAllRoutes(silent);
+    if (!silent) {
+      console.log("\uD83D\uDD04 FileSystemRouter initialized with", this.preloadedRoutes.size, "routes");
     }
   }
-  async preloadAllRoutes() {
-    const routesDir = this.config.routesDir.startsWith("/") ? this.config.routesDir : `${process.cwd()}/${this.config.routesDir}`;
-    await this.scanAndPreloadRoutes(routesDir, "");
+  async preloadAllRoutes(silent = false) {
+    await this.scanAndPreloadRoutes(this.config.routesDir, "", silent);
   }
-  async scanAndPreloadRoutes(dir, basePath) {
+  staticHtmlFiles = new Map;
+  async scanAndPreloadRoutes(dir, _basePath, _silent = false) {
     try {
-      const proc = Bun.spawn(["find", dir, "-name", "*.ts", "-o", "-name", "*.tsx", "-o", "-name", "*.js", "-o", "-name", "*.jsx"], {
+      const proc = Bun.spawn(["find", dir, "-name", "*.ts", "-o", "-name", "*.tsx", "-o", "-name", "*.js", "-o", "-name", "*.jsx", "-o", "-name", "*.html"], {
         stdout: "pipe"
       });
       const output = await new Response(proc.stdout).text();
@@ -334,13 +419,18 @@ class Router {
 `).filter(Boolean);
       for (const filePath of files) {
         const relativePath = filePath.replace(dir, "");
-        let routePath = relativePath.replace(/\.(tsx?|jsx?)$/, "");
+        const isHtml = filePath.endsWith(".html");
+        let routePath = relativePath.replace(/\.(tsx?|jsx?|html)$/, "");
         if (routePath.endsWith("/index")) {
           routePath = routePath.slice(0, -6) || "/";
         }
         if (!routePath.startsWith("/")) {
           routePath = "/" + routePath;
         }
+        if (isHtml) {
+          this.staticHtmlFiles.set(routePath, filePath);
+          continue;
+        }
         const routeType = this.getRouteType(routePath);
         try {
           const routeExports = await import(filePath);
@@ -367,32 +457,29 @@ class Router {
       console.warn("Failed to scan routes:", error);
     }
   }
+  getStaticHtmlFile(path) {
+    return this.staticHtmlFiles.get(path);
+  }
   createRoutePattern(routePath) {
     const paramNames = [];
     let pattern = routePath.replace(/[.*+?^${}|\\]/g, "\\$&");
-    pattern = pattern.replace(/\\?\[([^\]]+)\\?\]/g, (match, paramName) => {
+    pattern = pattern.replace(/\\?\[([^\]]+)\\?\]/g, (_match, paramName) => {
       paramNames.push(paramName);
       return "([^/]+)";
     });
     try {
       const regex = new RegExp(`^${pattern}$`);
-      console.log(`Created pattern for ${routePath}: ${regex} (params: ${paramNames.join(", ")})`);
-      return {
-        regex,
-        paramNames
-      };
+      return { regex, paramNames };
     } catch (error) {
       console.warn(`Failed to create pattern for ${routePath}:`, error);
       return null;
     }
   }
   getRouteType(pathname) {
-    if (pathname.startsWith("/api")) {
+    if (pathname.startsWith("/api"))
       return "api";
-    }
-    if (pathname.includes("[") || pathname.includes(":")) {
+    if (pathname.includes("[") || pathname.includes(":"))
       return "dynamic";
-    }
     return "static";
   }
   matchRoute(path) {
@@ -416,8 +503,7 @@ class Router {
           routePattern.paramNames.forEach((name, index) => {
             params[name] = regexMatch[index + 1];
           });
-          const routesDir = this.config.routesDir.startsWith("/") ? this.config.routesDir : `${process.cwd()}/${this.config.routesDir}`;
-          let routePath = routePattern.filePath.replace(routesDir, "").replace(/\.(tsx?|jsx?)$/, "");
+          let routePath = routePattern.filePath.replace(this.config.routesDir, "").replace(/\.(tsx?|jsx?)$/, "");
           if (!routePath.startsWith("/")) {
             routePath = "/" + routePath;
           }
@@ -437,21 +523,6 @@ class Router {
     this.routeCache.set(path, match);
     return match;
   }
-  pathMatchesPattern(pattern, path) {
-    const patternParts = pattern.split("/").filter(Boolean);
-    const pathParts = path.split("/").filter(Boolean);
-    if (patternParts.length !== pathParts.length) {
-      return false;
-    }
-    for (let i = 0;i < patternParts.length; i++) {
-      const patternPart = patternParts[i];
-      const pathPart = pathParts[i];
-      if (!patternPart.startsWith("[") && patternPart !== pathPart) {
-        return false;
-      }
-    }
-    return true;
-  }
   async handleRequest(request) {
     const url = request.url;
     const pathStart = url.indexOf("/", 8);
@@ -460,11 +531,10 @@ class Router {
     if (path.startsWith("/api/")) {
       return this.handleApiRouteFast(request, path);
     }
-    if (path.endsWith(".css") || path === "/favicon.ico" || path === "/_kilat/live-reload") {
+    if (path.endsWith(".css") || path === "/favicon.ico") {
       const staticResponse = await this.handleStaticFile(path);
-      if (staticResponse) {
+      if (staticResponse)
         return staticResponse;
-      }
     }
     if (!this.config.dev) {
       const outDir = this.config.outDir || "./dist";
@@ -473,11 +543,17 @@ class Router {
       if (await file.exists()) {
         return new Response(file);
       }
-      if (!path.endsWith(".html")) {
-        const indexFile = Bun.file(`${filePath}/index.html`);
-        if (await indexFile.exists()) {
-          return new Response(indexFile);
-        }
+    }
+    const htmlFilePath = this.staticHtmlFiles.get(path);
+    if (htmlFilePath) {
+      const file = Bun.file(htmlFilePath);
+      if (await file.exists()) {
+        return new Response(file, {
+          headers: {
+            "Content-Type": "text/html; charset=utf-8",
+            "Cache-Control": this.config.dev ? "no-cache" : "public, max-age=3600"
+          }
+        });
       }
     }
     const match = this.matchRoute(path);
@@ -509,7 +585,7 @@ class Router {
         return data;
       }
       const meta = exports.meta || {};
-      const html = await this.renderPage(exports.default, { data, params, state: context.state }, exports.ui, meta);
+      const html = await this.renderPage(exports.default, { data, params, state: context.state }, exports.ui, meta, { clientScript: exports.clientScript });
       const cacheControl = routeType === "dynamic" ? "no-cache" : "public, max-age=3600";
       this.returnContextToPool(context);
       return new Response(html, {
@@ -520,9 +596,8 @@ class Router {
       });
     } catch (error) {
       this.returnContextToPool(context);
-      if (error instanceof Response) {
+      if (error instanceof Response)
         return error;
-      }
       console.error("Error rendering page:", error);
       return Router.INTERNAL_ERROR_RESPONSE;
     }
@@ -539,7 +614,7 @@ class Router {
               params[name] = regexMatch[index + 1];
             });
             for (const [preloadedPath, preloadedExports] of this.preloadedRoutes.entries()) {
-              if (preloadedPath.includes("[") && preloadedPath.startsWith("/api/") && this.pathMatchesPattern(preloadedPath, path)) {
+              if (preloadedPath.includes("[") && preloadedPath.startsWith("/api/")) {
                 exports = preloadedExports;
                 break;
               }
@@ -550,25 +625,22 @@ class Router {
         }
       }
     }
-    if (!exports) {
+    if (!exports)
       return Router.NOT_FOUND_RESPONSE;
-    }
-    const method = request.method;
-    const handler = exports[method] || exports.default;
+    const handler = exports[request.method] || exports.default;
     if (!handler || typeof handler !== "function") {
       return Router.METHOD_NOT_ALLOWED_RESPONSE;
     }
     try {
-      const context = this.getMinimalApiContext(request, path, params);
+      const context = this.getMinimalApiContext(request, params);
       const response = await handler(context);
-      if (response instanceof Response) {
+      if (response instanceof Response)
         return response;
-      }
       return new Response(JSON.stringify(response), {
         headers: { "Content-Type": "application/json" }
       });
     } catch (error) {
-      console.error(`API Error [${method} ${path}]:`, error);
+      console.error(`API Error [${request.method} ${path}]:`, error);
       return Router.INTERNAL_ERROR_RESPONSE;
     }
   }
@@ -593,7 +665,7 @@ class Router {
       this.contextPool.push(context);
     }
   }
-  getMinimalApiContext(request, path, params = {}) {
+  getMinimalApiContext(request, params = {}) {
     return {
       request,
       params,
@@ -610,62 +682,24 @@ class Router {
           return new Response(cssFile, {
             headers: {
               "Content-Type": "text/css",
-              "Cache-Control": "public, max-age=3600"
+              "Cache-Control": this.config.dev ? "no-cache" : "public, max-age=3600"
             }
           });
         }
-      } catch (error) {}
+      } catch {}
     }
     if (path === "/favicon.ico") {
       return new Response(null, { status: 204 });
     }
-    if (path === "/_kilat/live-reload") {
-      const serverId = this.serverId;
-      return new Response(new ReadableStream({
-        start(controller) {
-          controller.enqueue(`data: ${serverId}
-
-`);
-        }
-      }), {
-        headers: {
-          "Content-Type": "text/event-stream",
-          "Cache-Control": "no-cache",
-          Connection: "keep-alive"
-        }
-      });
-    }
     return null;
   }
-  create404Response() {
-    const html = `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>404 - Page Not Found</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="/styles.css" />
-  </head>
-  <body>
-    <div id="root">
-      <div class="container">
-        <h1>404 - Page Not Found</h1>
-        <p>The page you're looking for doesn't exist.</p>
-        <a href="/">Go back home</a>
-      </div>
-    </div>
-  </body>
-</html>`;
-    return new Response(html, {
-      status: 404,
-      headers: { "Content-Type": "text/html; charset=utf-8" }
-    });
-  }
-  async renderPage(PageComponent, props, uiFramework = "react", meta = {}) {
+  async renderPage(PageComponent, props, uiFramework = "react", meta = {}, options = {}) {
     switch (uiFramework) {
       case "react":
         const reactContent = await ReactAdapter.renderToString(PageComponent, props);
-        return ReactAdapter.createDocument(reactContent, meta, this.config);
+        return ReactAdapter.createDocument(reactContent, meta, this.config, {
+          clientScript: options.clientScript
+        });
       case "htmx":
         const htmxContent = await HTMXAdapter.renderToString(PageComponent, props);
         return HTMXAdapter.createDocument(htmxContent, meta, this.config);
@@ -678,71 +712,172 @@ class Router {
 class KilatServer {
   router;
   config;
+  appDir;
+  routesDir;
   constructor(config) {
     this.config = config;
-    this.router = new Router(config);
+    const { appDir, routesDir } = this.resolvePaths(config);
+    this.appDir = appDir;
+    this.routesDir = routesDir;
+    this.router = new Router({ ...config, routesDir: this.routesDir });
+  }
+  resolvePaths(config) {
+    const cwd = process.cwd();
+    const appDir = config.appDir.startsWith("/") ? config.appDir : `${cwd}/${config.appDir}`;
+    const routesPath = `${appDir}/routes`;
+    const pagesPath = `${appDir}/pages`;
+    const checkRoutes = Bun.spawnSync(["test", "-d", routesPath]);
+    if (checkRoutes.exitCode === 0) {
+      return { appDir, routesDir: routesPath };
+    }
+    const checkPages = Bun.spawnSync(["test", "-d", pagesPath]);
+    if (checkPages.exitCode === 0) {
+      return { appDir, routesDir: pagesPath };
+    }
+    console.warn(`⚠️ No routes/ or pages/ folder found in ${appDir}, defaulting to routes/`);
+    return { appDir, routesDir: routesPath };
   }
   async start() {
-    if (this.config.tailwind?.enabled) {
-      console.log("\uD83C\uDFA8 Building Tailwind CSS...");
-      await this.runTailwind(false);
-      if (this.config.dev) {
-        this.runTailwind(true);
+    const config = this.config;
+    const router = this.router;
+    if (config.tailwind?.enabled) {
+      await this.runTailwind(false, config.dev);
+      if (config.dev) {
+        this.runTailwind(true, true);
       }
     }
-    await this.router.loadRoutes();
-    const router = this.router;
-    const config = this.config;
+    await router.loadRoutes(config.dev);
+    const routes = {};
+    const cssPath = config.tailwind?.cssPath || "./styles.css";
+    routes["/styles.css"] = async () => {
+      const file = Bun.file(cssPath);
+      if (await file.exists()) {
+        return new Response(file, {
+          headers: { "Content-Type": "text/css" }
+        });
+      }
+      return new Response("", { headers: { "Content-Type": "text/css" } });
+    };
     const server = Bun.serve({
       port: config.port || 3000,
       hostname: config.hostname || "localhost",
+      development: config.dev ? {
+        hmr: true,
+        console: true
+      } : false,
+      routes,
       async fetch(request) {
         return router.handleRequest(request);
       }
     });
-    console.log(`
-\uD83D\uDE80 KilatJS Server Running!
-━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   Local:   http://${server.hostname}:${server.port}
-   Mode:    ${config.dev ? "Development" : "Production"}
-━━━━━━━━━━━━━━━━━━━━━━━━━━━
-`);
     if (config.dev) {
-      console.log("\uD83D\uDCC1 Using FileSystemRouter for dynamic route discovery");
-      console.log("");
+      console.log(`
+⚡ KilatJS Dev Server
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ➜ http://${server.hostname}:${server.port}
+  ➜ HMR + Live Reload enabled
+  ➜ Edit files and see changes instantly
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`);
+      startLiveReload();
+      watchDirectory(this.routesDir, async () => {
+        await router.loadRoutes(true);
+        notifyReload();
+      });
+      const componentsDir = `${this.appDir}/components`;
+      const checkComponents = Bun.spawnSync(["test", "-d", componentsDir]);
+      if (checkComponents.exitCode === 0) {
+        watchDirectory(componentsDir, async () => {
+          await router.loadRoutes(true);
+          notifyReload();
+        });
+      }
+    } else {
+      console.log(`
+\uD83D\uDE80 KilatJS Production Server
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ➜ http://${server.hostname}:${server.port}
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`);
     }
     return server;
   }
   async buildStatic() {
+    console.log(`
+\uD83D\uDD28 KilatJS Production Build
+`);
     if (this.config.tailwind?.enabled) {
-      await this.runTailwind(false);
+      await this.runTailwind(false, false);
     }
-    await this.router.loadRoutes();
-    console.log(`\uD83D\uDD28 Building for hybrid deployment...
-`);
+    await this.router.loadRoutes(true);
     await this.ensureDir(this.config.outDir);
-    console.log("\uD83D\uDCC4 Static build with FileSystemRouter:");
-    console.log("─────────────────────────────────────");
-    console.log("   Using Bun's built-in FileSystemRouter for dynamic routing");
-    console.log("   Static assets will be copied to output directory");
+    await this.displayRouteAnalysis();
     await this.copyStaticAssets();
     await this.generateProductionServer();
     console.log(`
-✅ Hybrid Build Complete!
+✅ Build Complete!
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   Using Bun FileSystemRouter for all routes
-   Output: ${import.meta.dir}/../${this.config.outDir}
+   Output: ${this.config.outDir}
    
-   Run 'bun dist/server.js' to start the server.
+   Start: bun ${this.config.outDir}/server.js
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`);
+  }
+  async displayRouteAnalysis() {
+    console.log("\uD83D\uDCC4 Routes Analysis:");
+    console.log("─────────────────────────────────────────────────────────");
+    const routes = [];
+    try {
+      const proc = Bun.spawn(["find", this.routesDir, "-name", "*.ts", "-o", "-name", "*.tsx", "-o", "-name", "*.js", "-o", "-name", "*.jsx"], {
+        stdout: "pipe"
+      });
+      const output = await new Response(proc.stdout).text();
+      const files = output.trim().split(`
+`).filter(Boolean);
+      for (const filePath of files) {
+        const relativePath = filePath.replace(this.routesDir, "");
+        let routePath = relativePath.replace(/\.(tsx?|jsx?)$/, "");
+        if (routePath.endsWith("/index")) {
+          routePath = routePath.slice(0, -6) || "/";
+        }
+        if (!routePath.startsWith("/")) {
+          routePath = "/" + routePath;
+        }
+        let type;
+        if (routePath.startsWith("/api")) {
+          type = "API";
+        } else if (routePath.includes("[")) {
+          type = "Dynamic SSR";
+        } else {
+          type = "SSR";
+        }
+        const shortFile = relativePath.replace(/^\//, "");
+        routes.push({ path: routePath, type, file: shortFile });
+      }
+    } catch (error) {
+      console.warn("Failed to analyze routes:", error);
+    }
+    routes.sort((a, b) => a.path.localeCompare(b.path));
+    const maxPathLen = Math.max(...routes.map((r) => r.path.length), 10);
+    const maxTypeLen = Math.max(...routes.map((r) => r.type.length), 6);
+    for (const route of routes) {
+      const typeIcon = route.type === "API" ? "⚡" : route.type === "Dynamic SSR" ? "\uD83D\uDD04" : "\uD83D\uDCC4";
+      const paddedPath = route.path.padEnd(maxPathLen);
+      const paddedType = route.type.padEnd(maxTypeLen);
+      console.log(`   ${typeIcon} ${paddedPath}  ${paddedType}  ${route.file}`);
+    }
+    console.log("─────────────────────────────────────────────────────────");
+    const apiCount = routes.filter((r) => r.type === "API").length;
+    const dynamicCount = routes.filter((r) => r.type === "Dynamic SSR").length;
+    const ssrCount = routes.filter((r) => r.type === "SSR").length;
+    console.log(`   Total: ${routes.length} routes (${ssrCount} SSR, ${dynamicCount} Dynamic, ${apiCount} API)
 `);
   }
   async generateProductionServer() {
     console.log(`
 ⚙️  Generating production server with FileSystemRouter...`);
-    const srcDir = this.config.routesDir.replace("/routes", "");
     const srcOutDir = `${this.config.outDir}/src`;
-    await this.copyDir(srcDir, srcOutDir);
+    await this.copyDir(this.appDir, srcOutDir);
     console.log(`   ✓ src/ (copied with all components and routes)`);
     const serverCode = `#!/usr/bin/env bun
 /**
@@ -833,7 +968,9 @@ Bun.serve({
             return new Response("404 Not Found", { status: 404 });
         }
         
-        console.log(\`Route matched: \${path} -> \${match.filePath}\`);
+        // Use relative path for cleaner logs
+        const relativePath = match.filePath.replace(ROOT + "/", "");
+        console.log(\`Route matched: \${path} -> \${relativePath}\`);
         
         try {
             // Dynamically import the route
@@ -903,17 +1040,11 @@ Bun.serve({
     await Bun.write(serverPath, serverCode);
     console.log(`   ✓ server.js (FileSystemRouter-based)`);
   }
-  formatSize(bytes) {
-    if (bytes < 1024)
-      return `${bytes} B`;
-    if (bytes < 1024 * 1024)
-      return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-  async runTailwind(watch) {
+  async runTailwind(watch, silent = false) {
     const { inputPath, cssPath } = this.config.tailwind || {};
     if (!inputPath || !cssPath) {
-      console.warn("⚠️ Tailwind enabled but inputPath or cssPath missing");
+      if (!silent)
+        console.warn("⚠️ Tailwind enabled but inputPath or cssPath missing");
       return;
     }
     const resolvedInputPath = inputPath.startsWith("/") ? inputPath : `${process.cwd()}/${inputPath}`;
@@ -922,18 +1053,21 @@ Bun.serve({
     if (watch) {
       args.push("--watch");
     }
-    console.log(`\uD83C\uDFA8 ${watch ? "Watching" : "Building"} Tailwind CSS...`);
+    if (!silent) {
+      console.log(`\uD83C\uDFA8 ${watch ? "Watching" : "Building"} Tailwind CSS...`);
+    }
     try {
       const proc = Bun.spawn(args, {
-        stdout: "inherit",
-        stderr: "inherit",
+        stdout: silent ? "pipe" : "inherit",
+        stderr: silent ? "pipe" : "inherit",
         cwd: process.cwd()
       });
       if (!watch) {
         await proc.exited;
       }
     } catch (error) {
-      console.error("Failed to run Tailwind:", error);
+      if (!silent)
+        console.error("Failed to run Tailwind:", error);
     }
   }
   async copyStaticAssets() {
@@ -979,7 +1113,7 @@ Bun.serve({
 }
 // src/index.ts
 var defaultConfig = {
-  routesDir: "./routes",
+  appDir: "./src",
   outDir: "./dist",
   port: 3000,
   hostname: "localhost",
@@ -1020,6 +1154,93 @@ function defineConfig(config) {
 function defineMeta(meta) {
   return meta;
 }
+async function runCLI(args = process.argv.slice(2)) {
+  const command = args[0];
+  if (!command) {
+    console.error("Please specify a command: dev or build");
+    process.exit(1);
+  }
+  async function loadConfig() {
+    const configPath = `${process.cwd()}/kilat.config.ts`;
+    const file = Bun.file(configPath);
+    if (!await file.exists()) {
+      console.warn("⚠️ No kilat.config.ts found, using defaults");
+      return {};
+    }
+    try {
+      const configModule = await import(configPath);
+      return configModule.default || configModule;
+    } catch (error) {
+      console.error("Failed to load config:", error);
+      return {};
+    }
+  }
+  const config = await loadConfig();
+  switch (command) {
+    case "dev":
+      const isProduction = args.includes("--production");
+      const devServer = createKilat({ ...config, dev: !isProduction });
+      await devServer.start();
+      break;
+    case "build":
+      await buildStatic(config);
+      break;
+    case "serve":
+      const serveOutDir = config.outDir || "./dist";
+      const serverPath = `${process.cwd()}/${serveOutDir}/server.js`;
+      const serverFile = Bun.file(serverPath);
+      if (!await serverFile.exists()) {
+        console.error(`❌ Production server not found at ${serveOutDir}/server.js`);
+        console.error(`   Run 'kilat build' first to generate the production build.`);
+        process.exit(1);
+      }
+      const serveProc = Bun.spawn(["bun", serverPath], {
+        stdio: ["inherit", "inherit", "inherit"],
+        cwd: process.cwd()
+      });
+      await serveProc.exited;
+      break;
+    case "preview":
+      const outDir = config.outDir || "./dist";
+      const port = config.port || 3000;
+      const hostname = config.hostname || "localhost";
+      const root = `${process.cwd()}/${outDir}`;
+      console.log(`
+\uD83D\uDD0D Preview server running:`);
+      console.log(`   ➜ http://${hostname}:${port}`);
+      console.log(`   Serving: ${outDir}
+`);
+      Bun.serve({
+        port,
+        hostname,
+        async fetch(req) {
+          const url = new URL(req.url);
+          let path = url.pathname;
+          const filePath = `${root}${path}`;
+          let file = Bun.file(filePath);
+          if (await file.exists()) {
+            return new Response(file);
+          }
+          const indexHtml = `${filePath}/index.html`;
+          file = Bun.file(indexHtml);
+          if (await file.exists()) {
+            return new Response(file);
+          }
+          const rootIndex = `${root}/index.html`;
+          file = Bun.file(rootIndex);
+          if (await file.exists()) {
+            return new Response(file);
+          }
+          return new Response("404 Not Found", { status: 404 });
+        }
+      });
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      console.log("Available commands: dev, build, serve, preview");
+      process.exit(1);
+  }
+}
 var Kilat = {
   createKilat,
   startDevServer,
@@ -1027,11 +1248,16 @@ var Kilat = {
   defineConfig,
   defineLoader,
   defineMeta,
+  runCLI,
   defaultConfig
 };
 var src_default = Kilat;
 export {
+  stopLiveReload,
+  startLiveReload,
   startDevServer,
+  runCLI,
+  notifyReload,
   defineMeta,
   defineLoader,
   defineConfig,