@emberkit/cli 0.6.4 → 0.6.7

package/dist/cli.js

@@ -3,6 +3,7 @@ import { getCliPackageVersion } from "./cli-package-version.js";
 import { dev } from "./commands/dev.js";
 import { build } from "./commands/build.js";
 import { preview } from "./commands/preview.js";
+import { serve } from "./commands/serve.js";
 import { create, TEMPLATES } from "./commands/create.js";
 import { generate } from "./utils/generator.js";
 import { toKebabCase } from "./templates/index.js";
@@ -22,6 +23,10 @@ export async function runCLI(args) {
         case "preview":
             await preview(restArgs);
             break;
+        case "serve":
+        case "start":
+            await serve(restArgs);
+            break;
         case "create":
             await handleCreate(restArgs);
             break;
@@ -51,8 +56,9 @@ Usage: emberkit <command> [options]
 Commands:
   create [name]        Create a new EmberKit project
   dev                  Start development server
-  build                Build for production
-  preview              Preview production build
+  build                Build for production (SSR/hybrid/static/SPA)
+  preview              Preview production build locally
+  serve                Start production server (SSR/hybrid)
   generate <type> <name>  Generate a file from a template
 
 Options:

package/dist/commands/build.js

@@ -1,24 +1,495 @@
-import { spawn } from "child_process";
-import { platform } from "os";
-export async function build(args) {
-    console.log("🔨 Building for production...\n");
-    const isWindows = platform() === "win32";
-    const vite = spawn("vite", ["build", ...args], {
-        stdio: "inherit",
-        shell: isWindows,
+import { build as viteBuild } from "vite";
+import { join } from "path";
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
+import { pathToFileURL } from "url";
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    orange: "\x1b[38;5;208m",
+    ember: "\x1b[38;5;202m",
+    gray: "\x1b[38;5;240m",
+    green: "\x1b[38;5;40m",
+    cyan: "\x1b[38;5;51m",
+    yellow: "\x1b[38;5;220m",
+    red: "\x1b[38;5;196m",
+};
+function log(level, message) {
+    const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
+    const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
+    const levelColors = {
+        info: COLORS.cyan,
+        warn: COLORS.yellow,
+        error: COLORS.red,
+        success: COLORS.green,
+    };
+    const levelLabel = `${levelColors[level]}${level.toUpperCase().padEnd(7)}${COLORS.reset}`;
+    const emberTag = `${COLORS.ember}[emberkit]${COLORS.reset}`;
+    console.log(`${prefix} ${levelLabel} ${emberTag} ${message}`);
+}
+async function loadEmberKitConfig(root) {
+    const configPaths = [
+        join(root, "emberkit.config.ts"),
+        join(root, "emberkit.config.js"),
+        join(root, "emberkit.config.mjs"),
+    ];
+    for (const configPath of configPaths) {
+        if (existsSync(configPath)) {
+            try {
+                const configUrl = pathToFileURL(configPath).href;
+                const mod = await import(configUrl);
+                return mod.default || mod;
+            }
+            catch {
+                continue;
+            }
+        }
+    }
+    return null;
+}
+async function loadViteConfig(root) {
+    const viteConfigPaths = [
+        join(root, "vite.config.ts"),
+        join(root, "vite.config.js"),
+    ];
+    for (const configPath of viteConfigPaths) {
+        if (existsSync(configPath)) {
+            try {
+                const configUrl = pathToFileURL(configPath).href;
+                const mod = await import(configUrl);
+                const config = mod.default || mod;
+                return typeof config === "function"
+                    ? config({ mode: "production", command: "build" })
+                    : config;
+            }
+            catch {
+                continue;
+            }
+        }
+    }
+    return null;
+}
+export async function build(_args) {
+    const root = process.cwd();
+    console.log(`\n${COLORS.orange}🔥 EmberKit Build${COLORS.reset}\n`);
+    const emberkitConfig = await loadEmberKitConfig(root);
+    const viteConfig = await loadViteConfig(root);
+    const mode = emberkitConfig?.mode || "hybrid";
+    const outDir = emberkitConfig?.build?.outDir || "dist";
+    log("info", `Build mode: ${COLORS.ember}${mode}${COLORS.reset}`);
+    log("info", `Output directory: ${COLORS.cyan}${outDir}${COLORS.reset}`);
+    const customLogger = {
+        info: () => { },
+        warn: (msg) => log("warn", msg),
+        error: (msg) => log("error", msg),
+        warnOnce: () => { },
+        clearScreen: () => { },
+        hasWarned: false,
+        hasErrorLogged: () => false,
+    };
+    try {
+        if (mode === "spa") {
+            log("info", "Building SPA (client-only)...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("success", "SPA build complete!");
+        }
+        else if (mode === "ssr" || mode === "hybrid") {
+            log("info", "Building client bundle...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("info", "Building SSR bundle...");
+            await buildSSR(root, outDir, viteConfig, customLogger);
+            log("info", "Generating SSR manifest...");
+            await generateManifest(root, outDir, mode);
+            if (mode === "hybrid") {
+                log("info", "Pre-rendering static routes...");
+                await prerenderStaticRoutes(root, outDir);
+            }
+            log("success", `${mode.toUpperCase()} build complete!`);
+        }
+        else if (mode === "static") {
+            log("info", "Building static site...");
+            await buildClient(root, outDir, viteConfig, customLogger);
+            log("info", "Building SSR bundle for pre-rendering...");
+            await buildSSR(root, outDir, viteConfig, customLogger);
+            log("info", "Generating manifest...");
+            await generateManifest(root, outDir, mode);
+            log("info", "Pre-rendering all routes...");
+            await prerenderStaticRoutes(root, outDir, true);
+            log("success", "Static build complete!");
+        }
+        console.log(`\n${COLORS.green}✨ Build finished successfully!${COLORS.reset}`);
+        console.log(`${COLORS.gray}   Output: ${COLORS.cyan}./${outDir}${COLORS.reset}\n`);
+    }
+    catch (error) {
+        log("error", `Build failed: ${error instanceof Error ? error.message : String(error)}`);
+        process.exit(1);
+    }
+}
+async function buildClient(root, outDir, viteConfig, customLogger) {
+    const clientConfig = {
+        ...viteConfig,
+        root,
+        customLogger,
+        logLevel: "silent",
+        build: {
+            ...(viteConfig?.build || {}),
+            outDir,
+            emptyOutDir: true,
+            rollupOptions: {
+                ...(viteConfig?.build?.rollupOptions || {}),
+                output: {
+                    manualChunks: undefined,
+                },
+            },
+        },
+    };
+    await viteBuild(clientConfig);
+}
+function getServerEntryShim() {
+    return `import { routes } from 'virtual:emberkit-routes';
+import { createElement } from '@emberkit/core';
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const routeToRegex = (routePath) => {
+  const paramNames = [];
+  const regexStr = routePath
+    .replace(/:([^/]+)\\*/g, (_, name) => {
+      paramNames.push(name);
+      return '(.*)';
+    })
+    .replace(/:([^/]+)/g, (_, name) => {
+      paramNames.push(name);
+      return '([^/]+)';
     });
-    return new Promise((resolve, reject) => {
-        vite.on("exit", (code) => {
-            if (code === 0) {
-                console.log("\n✨ Build complete!");
-                resolve();
+  return { regex: new RegExp('^' + regexStr + '$'), paramNames };
+};
+
+const matchRoute = (routeList, pathname) => {
+  const normalizedPath = pathname.replace(/\\/+$/, '') || '/';
+  const sortedRoutes = [...routeList].sort((a, b) => {
+    const aScore = a.path.includes(':') ? 0 : 1;
+    const bScore = b.path.includes(':') ? 0 : 1;
+    return bScore - aScore;
+  });
+  for (const route of sortedRoutes) {
+    const pattern = routeToRegex(route.path);
+    const match = normalizedPath.match(pattern.regex);
+    if (match) {
+      const params = {};
+      pattern.paramNames.forEach((name, i) => { params[name] = match[i + 1]; });
+      return { route, params };
+    }
+  }
+  return null;
+};
+
+const escapeHtml = (str) => {
+  if (typeof str !== 'string') return str;
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const renderToString = (element) => {
+  if (!element && element !== 0) return '';
+  if (typeof element === 'string') return escapeHtml(element);
+  if (typeof element === 'number') return String(element);
+  if (Array.isArray(element)) return element.map(renderToString).join('');
+
+  if (typeof element !== 'object' || !element.type) return '';
+
+  let { type, props } = element;
+  props = props || {};
+
+  let depth = 0;
+  while (typeof type === 'function' && depth < 50) {
+    depth++;
+    try {
+      const result = type(props);
+      if (result && typeof result === 'object' && result.type) {
+        type = result.type;
+        props = result.props || {};
+      } else if (typeof result === 'string' || typeof result === 'number') {
+        return typeof result === 'string' ? escapeHtml(result) : String(result);
+      } else if (Array.isArray(result)) {
+        return result.map(renderToString).join('');
+      } else {
+        return '';
+      }
+    } catch (e) {
+      console.error('[SSR render error]', e);
+      return '';
+    }
+  }
+
+  if (type === 'Fragment' || type === 'React.Fragment') {
+    const children = Array.isArray(props.children) ? props.children : [props.children];
+    return children.filter(Boolean).map(renderToString).join('');
+  }
+
+  const SELF_CLOSING = new Set(['area','base','br','col','embed','hr','img','input','link','meta','source','track','wbr']);
+
+  const children = Array.isArray(props.children) ? props.children : (props.children ? [props.children] : []);
+  let childHtml = children.filter(c => c != null).map(renderToString).join('');
+
+  if (props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html) {
+    childHtml = props.dangerouslySetInnerHTML.__html;
+  }
+
+  const attrs = Object.entries(props)
+    .filter(([k, v]) => k !== 'children' && k !== 'key' && k !== 'dangerouslySetInnerHTML' && v != null && typeof v !== 'function')
+    .map(([k, v]) => {
+      if (k === 'className') k = 'class';
+      if (v === true) return ' ' + k;
+      if (v === false) return '';
+      if (k === 'style' && typeof v === 'object') {
+        const styleStr = Object.entries(v)
+          .filter(([, sv]) => sv != null)
+          .map(([sp, sv]) => sp.replace(/([A-Z])/g, '-$1').toLowerCase() + ': ' + sv)
+          .join('; ');
+        return ' ' + k + '="' + escapeHtml(styleStr) + '"';
+      }
+      return ' ' + k + '="' + escapeHtml(String(v)) + '"';
+    })
+    .join('');
+
+  if (SELF_CLOSING.has(type)) {
+    return '<' + type + attrs + '/>';
+  }
+
+  return '<' + type + attrs + '>' + childHtml + '</' + type + '>';
+};
+
+export async function render(url) {
+  const pathname = url.split('?')[0];
+
+  const match = matchRoute(routes, pathname);
+
+  let appHtml = '';
+  let headContent = '';
+
+  if (match) {
+    try {
+      const mod = await match.route.component();
+      const Component = mod.default || mod;
+
+      if (mod.metadata) {
+        if (mod.metadata.title) {
+          headContent += '<title>' + escapeHtml(mod.metadata.title) + '</title>\\n';
+        }
+        if (mod.metadata.description) {
+          headContent += '<meta name="description" content="' + escapeHtml(mod.metadata.description) + '">\\n';
+        }
+      }
+
+      const element = createElement(Component, { params: match.params });
+      appHtml = renderToString(element);
+    } catch (e) {
+      console.error('[SSR] Failed to render route:', pathname, e);
+      appHtml = '<div style="color: red; padding: 20px;">SSR Error: ' + escapeHtml(String(e)) + '</div>';
+    }
+  } else {
+    appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+  }
+
+  const templatePath = join(__dirname, '..', 'index.html');
+  let template = readFileSync(templatePath, 'utf-8');
+
+  if (template.includes('<body id="app">')) {
+    template = template.replace('<body id="app">', '<body id="app">' + appHtml);
+  } else if (template.includes('<div id="app">')) {
+    template = template.replace('<div id="app"></div>', '<div id="app">' + appHtml + '</div>');
+  } else if (template.includes('<div id="app"/>')) {
+    template = template.replace('<div id="app"/>', '<div id="app">' + appHtml + '</div>');
+  }
+
+  if (headContent && template.includes('</head>')) {
+    template = template.replace('</head>', headContent + '</head>');
+  }
+
+  return template;
+}
+`;
+}
+async function resolveSSREntry(root) {
+    const userEntryTs = join(root, "src", "entry-server.ts");
+    const userEntryTsx = join(root, "src", "entry-server.tsx");
+    if (existsSync(userEntryTs)) {
+        return userEntryTs;
+    }
+    if (existsSync(userEntryTsx)) {
+        return userEntryTsx;
+    }
+    const cacheDir = join(root, "node_modules", ".cache", "emberkit");
+    mkdirSync(cacheDir, { recursive: true });
+    const shimPath = join(cacheDir, "server-entry.js");
+    writeFileSync(shimPath, getServerEntryShim(), "utf-8");
+    return shimPath;
+}
+async function buildSSR(root, outDir, viteConfig, customLogger) {
+    const ssrEntry = await resolveSSREntry(root);
+    const ssrConfig = {
+        ...viteConfig,
+        root,
+        customLogger,
+        logLevel: "silent",
+        build: {
+            ...(viteConfig?.build || {}),
+            outDir: join(outDir, "server"),
+            emptyOutDir: true,
+            ssr: true,
+            rollupOptions: {
+                ...(viteConfig?.build?.rollupOptions || {}),
+                input: ssrEntry,
+                output: {
+                    format: "esm",
+                    entryFileNames: "entry-server.js",
+                },
+            },
+        },
+        ssr: {
+            noExternal: true,
+        },
+    };
+    await viteBuild(ssrConfig);
+}
+async function generateManifest(root, outDir, mode) {
+    const routesDir = join(root, "src", "routes");
+    const routes = [];
+    if (existsSync(routesDir)) {
+        const files = await scanRouteFiles(routesDir);
+        for (const file of files) {
+            const relativePath = file.replace(routesDir, "").replace(/\\/g, "/");
+            if (relativePath.includes("_layout") || relativePath.includes("_error") || relativePath.includes("_loading")) {
+                continue;
+            }
+            if (relativePath.startsWith("/_api/") || relativePath.includes("/_api/")) {
+                continue;
+            }
+            let routePath = relativePath
+                .replace(/\.(tsx|ts|jsx|js|md|mdx)$/, "")
+                .replace(/(^|\/)index$/, "$1")
+                .replace(/\[\.\.\.(\w+)\]/g, ":$1*")
+                .replace(/\[([^\]]+)\]/g, ":$1");
+            if (routePath === "" || routePath === "/") {
+                routePath = "/";
             }
             else {
-                reject(new Error(`Build failed with code ${code}`));
+                routePath = routePath.startsWith("/") ? routePath : "/" + routePath;
             }
-        });
-        vite.on("error", (error) => {
-            reject(error);
-        });
+            const isStatic = !routePath.includes(":");
+            routes.push({
+                path: routePath,
+                file: relativePath,
+                isStatic,
+            });
+        }
+    }
+    routes.sort((a, b) => {
+        const aScore = a.path.includes(":") ? 0 : 1;
+        const bScore = b.path.includes(":") ? 0 : 1;
+        return bScore - aScore;
     });
+    const indexHtmlPath = join(root, outDir, "index.html");
+    let template = "";
+    if (existsSync(indexHtmlPath)) {
+        template = readFileSync(indexHtmlPath, "utf-8");
+    }
+    const manifest = {
+        mode,
+        routes,
+        clientEntry: "/src/index.tsx",
+        template,
+        buildTime: new Date().toISOString(),
+    };
+    const manifestPath = join(root, outDir, "ssr-manifest.json");
+    writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), "utf-8");
+}
+async function scanRouteFiles(dir) {
+    const { readdir, stat } = await import("fs/promises");
+    const files = [];
+    const extensions = new Set(["tsx", "ts", "jsx", "js", "md", "mdx"]);
+    async function walk(currentDir) {
+        let entries;
+        try {
+            entries = await readdir(currentDir);
+        }
+        catch {
+            return;
+        }
+        for (const entry of entries) {
+            const fullPath = join(currentDir, entry);
+            const fileStat = await stat(fullPath);
+            if (fileStat.isDirectory()) {
+                await walk(fullPath);
+            }
+            else {
+                const ext = entry.split(".").pop() ?? "";
+                if (extensions.has(ext)) {
+                    files.push(fullPath);
+                }
+            }
+        }
+    }
+    await walk(dir);
+    return files;
+}
+async function prerenderStaticRoutes(root, outDir, prerenderAll = false) {
+    const manifestPath = join(root, outDir, "ssr-manifest.json");
+    if (!existsSync(manifestPath)) {
+        log("warn", "No SSR manifest found, skipping pre-rendering");
+        return;
+    }
+    const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+    const serverEntryPath = join(root, outDir, "server", "entry-server.js");
+    if (!existsSync(serverEntryPath)) {
+        log("warn", "Server entry not found, skipping pre-rendering");
+        return;
+    }
+    let serverModule;
+    try {
+        const serverUrl = pathToFileURL(serverEntryPath).href;
+        serverModule = await import(serverUrl);
+    }
+    catch (e) {
+        log("warn", `Failed to load server module: ${e}`);
+        return;
+    }
+    const routesToPrerender = manifest.routes.filter((route) => prerenderAll || route.isStatic);
+    for (const route of routesToPrerender) {
+        if (route.path.includes(":")) {
+            continue;
+        }
+        try {
+            let html;
+            if (serverModule.render) {
+                html = await serverModule.render(route.path);
+            }
+            else if (serverModule.default && typeof serverModule.default === "function") {
+                html = "<!DOCTYPE html><html><head></head><body></body></html>";
+            }
+            else {
+                continue;
+            }
+            const outputPath = route.path === "/"
+                ? join(root, outDir, "index.html")
+                : join(root, outDir, route.path, "index.html");
+            const outputDir = outputPath.replace(/\/index\.html$/, "");
+            if (!existsSync(outputDir)) {
+                mkdirSync(outputDir, { recursive: true });
+            }
+            writeFileSync(outputPath, html, "utf-8");
+            console.log(`  ${COLORS.green}✓${COLORS.reset} ${route.path}`);
+        }
+        catch (e) {
+            console.log(`  ${COLORS.red}✗${COLORS.reset} ${route.path} - ${e}`);
+        }
+    }
 }

package/dist/commands/dev.js

@@ -1,23 +1,203 @@
-import { spawn } from "child_process";
-import { platform } from "os";
-export async function dev(args) {
-    console.log("🔥 Starting EmberKit dev server...\n");
-    const isWindows = platform() === "win32";
-    const vite = spawn("vite", args, {
-        stdio: "inherit",
-        shell: isWindows,
-    });
-    return new Promise((resolve, reject) => {
-        vite.on("exit", (code) => {
-            if (code === 0) {
-                resolve();
+import { createServer } from "vite";
+import { join } from "path";
+import { existsSync } from "fs";
+import { pathToFileURL } from "url";
+const EMBERKIT_ASCII = `
+    ╔═══════════════════════════════════════╗
+    ║                                       ║
+    ║     🔥  E M B E R K I T  🔥           ║
+    ║                                       ║
+    ║        ░▒▓█ DEV SERVER █▓▒░           ║
+    ║                                       ║
+    ╚═══════════════════════════════════════╝
+`;
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    orange: "\x1b[38;5;208m",
+    ember: "\x1b[38;5;202m",
+    gray: "\x1b[38;5;240m",
+    green: "\x1b[38;5;40m",
+    cyan: "\x1b[38;5;51m",
+    yellow: "\x1b[38;5;220m",
+    red: "\x1b[38;5;196m",
+};
+function log(level, message, meta) {
+    const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
+    const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
+    const levelColors = {
+        info: COLORS.cyan,
+        warn: COLORS.yellow,
+        error: COLORS.red,
+        success: COLORS.green,
+        debug: COLORS.gray,
+    };
+    const levelLabel = `${levelColors[level]}${level.toUpperCase().padEnd(7)}${COLORS.reset}`;
+    const emberTag = `${COLORS.ember}[emberkit]${COLORS.reset}`;
+    let output = `${prefix} ${levelLabel} ${emberTag} ${message}`;
+    if (meta && Object.keys(meta).length > 0) {
+        const metaStr = Object.entries(meta)
+            .map(([k, v]) => `${COLORS.gray}${k}=${COLORS.reset}${COLORS.dim}${v}${COLORS.reset}`)
+            .join(" ");
+        output += ` ${metaStr}`;
+    }
+    console.log(output);
+}
+async function loadEmberKitConfig(root) {
+    const configPath = join(root, "emberkit.config.ts");
+    const configPathJs = join(root, "emberkit.config.js");
+    const finalPath = existsSync(configPath) ? configPath : existsSync(configPathJs) ? configPathJs : null;
+    if (!finalPath) {
+        return null;
+    }
+    try {
+        const configUrl = pathToFileURL(finalPath).href;
+        const mod = await import(configUrl);
+        return mod.default || mod;
+    }
+    catch {
+        return null;
+    }
+}
+async function loadViteConfig(root) {
+    const viteConfigPath = join(root, "vite.config.ts");
+    const viteConfigPathJs = join(root, "vite.config.js");
+    const finalPath = existsSync(viteConfigPath) ? viteConfigPath : existsSync(viteConfigPathJs) ? viteConfigPathJs : null;
+    if (!finalPath) {
+        return null;
+    }
+    try {
+        const configUrl = pathToFileURL(finalPath).href;
+        const mod = await import(configUrl);
+        const config = mod.default || mod;
+        return typeof config === "function" ? config({ mode: "development", command: "serve" }) : config;
+    }
+    catch {
+        return null;
+    }
+}
+export async function dev(_args) {
+    const root = process.cwd();
+    console.clear();
+    console.log(`${COLORS.orange}${EMBERKIT_ASCII}${COLORS.reset}`);
+    log("info", "Initializing development server...");
+    const emberkitConfig = await loadEmberKitConfig(root);
+    const viteConfig = await loadViteConfig(root);
+    if (emberkitConfig) {
+        log("debug", "Loaded emberkit.config", { mode: emberkitConfig.mode || "hybrid" });
+    }
+    const serverPort = emberkitConfig?.server?.port
+        || viteConfig?.server?.port
+        || 3000;
+    const serverHost = emberkitConfig?.server?.host
+        || viteConfig?.server?.host
+        || "localhost";
+    const customLogger = {
+        info: (msg) => {
+            if (!msg.includes("VITE") && !msg.includes("vite")) {
+                log("info", msg);
             }
-            else {
-                reject(new Error(`Vite exited with code ${code}`));
+        },
+        warn: (msg) => log("warn", msg),
+        error: (msg) => log("error", msg),
+        warnOnce: (msg) => log("warn", msg),
+        clearScreen: () => { },
+        hasWarned: false,
+        hasErrorLogged: (_error) => false,
+    };
+    try {
+        const mergedConfig = {
+            ...viteConfig,
+            root,
+            customLogger,
+            clearScreen: false,
+            server: {
+                ...(viteConfig?.server || {}),
+                port: serverPort,
+                host: serverHost,
+            },
+            logLevel: "silent",
+        };
+        const server = await createServer(mergedConfig);
+        await server.listen();
+        const info = server.config.server;
+        const protocol = info.https ? "https" : "http";
+        const host = typeof info.host === "string" ? info.host : "localhost";
+        const port = info.port || serverPort;
+        const address = `${protocol}://${host}:${port}`;
+        console.log("");
+        log("success", "Server is running!");
+        console.log("");
+        console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.bright}Local:${COLORS.reset}   ${COLORS.cyan}${address}${COLORS.reset}`);
+        if (host === "0.0.0.0" || host === "::") {
+            const os = await import("os");
+            const interfaces = os.networkInterfaces();
+            for (const name of Object.keys(interfaces)) {
+                for (const iface of interfaces[name] || []) {
+                    if (iface.family === "IPv4" && !iface.internal) {
+                        console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.bright}Network:${COLORS.reset} ${COLORS.cyan}${protocol}://${iface.address}:${port}${COLORS.reset}`);
+                    }
+                }
             }
+        }
+        const mode = emberkitConfig?.mode || "hybrid";
+        console.log("");
+        console.log(`   ${COLORS.gray}Mode:${COLORS.reset}    ${COLORS.ember}${mode}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Press${COLORS.reset}    ${COLORS.dim}h + enter${COLORS.reset} ${COLORS.gray}to show help${COLORS.reset}`);
+        console.log("");
+        server.watcher.on("change", (file) => {
+            const relativePath = file.replace(root, "").replace(/^\//, "");
+            log("info", `File changed: ${COLORS.cyan}${relativePath}${COLORS.reset}`);
         });
-        vite.on("error", (error) => {
-            reject(error);
+        process.stdin.setRawMode?.(false);
+        process.stdin.resume();
+        process.stdin.setEncoding("utf8");
+        let inputBuffer = "";
+        process.stdin.on("data", async (key) => {
+            if (key === "\u0003") {
+                log("info", "Shutting down...");
+                await server.close();
+                process.exit(0);
+            }
+            if (key === "\r" || key === "\n") {
+                const cmd = inputBuffer.trim().toLowerCase();
+                inputBuffer = "";
+                if (cmd === "h" || cmd === "help") {
+                    console.log("");
+                    console.log(`   ${COLORS.bright}${COLORS.orange}EmberKit Dev Server Commands${COLORS.reset}`);
+                    console.log(`   ${COLORS.gray}─────────────────────────────${COLORS.reset}`);
+                    console.log(`   ${COLORS.cyan}r${COLORS.reset}     Restart server`);
+                    console.log(`   ${COLORS.cyan}u${COLORS.reset}     Show server URL`);
+                    console.log(`   ${COLORS.cyan}c${COLORS.reset}     Clear console`);
+                    console.log(`   ${COLORS.cyan}q${COLORS.reset}     Quit`);
+                    console.log("");
+                }
+                else if (cmd === "r" || cmd === "restart") {
+                    log("info", "Restarting server...");
+                    await server.restart();
+                    log("success", "Server restarted!");
+                }
+                else if (cmd === "u" || cmd === "url") {
+                    console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.cyan}${address}${COLORS.reset}`);
+                }
+                else if (cmd === "c" || cmd === "clear") {
+                    console.clear();
+                    console.log(`${COLORS.orange}${EMBERKIT_ASCII}${COLORS.reset}`);
+                }
+                else if (cmd === "q" || cmd === "quit") {
+                    log("info", "Shutting down...");
+                    await server.close();
+                    process.exit(0);
+                }
+            }
+            else {
+                inputBuffer += key;
+            }
         });
-    });
+    }
+    catch (error) {
+        log("error", `Failed to start server: ${error instanceof Error ? error.message : String(error)}`);
+        process.exit(1);
+    }
 }

package/dist/commands/preview.js

@@ -1,23 +1,180 @@
-import { spawn } from "child_process";
-import { platform } from "os";
-export async function preview(args) {
-    console.log("👀 Previewing production build...\n");
-    const isWindows = platform() === "win32";
-    const vite = spawn("vite", ["preview", ...args], {
-        stdio: "inherit",
-        shell: isWindows,
-    });
-    return new Promise((resolve, reject) => {
-        vite.on("exit", (code) => {
-            if (code === 0) {
-                resolve();
+import { createServer as createHttpServer } from "http";
+import { join, extname } from "path";
+import { existsSync, readFileSync, statSync } from "fs";
+import { pathToFileURL } from "url";
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    orange: "\x1b[38;5;208m",
+    ember: "\x1b[38;5;202m",
+    gray: "\x1b[38;5;240m",
+    green: "\x1b[38;5;40m",
+    cyan: "\x1b[38;5;51m",
+    yellow: "\x1b[38;5;220m",
+    red: "\x1b[38;5;196m",
+};
+const EMBERKIT_ASCII = `
+    ╔═══════════════════════════════════════╗
+    ║                                       ║
+    ║     🔥  E M B E R K I T  🔥           ║
+    ║                                       ║
+    ║       ░▒▓█ PREVIEW SERVER █▓▒░        ║
+    ║                                       ║
+    ╚═══════════════════════════════════════╝
+`;
+function log(level, message) {
+    const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
+    const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
+    const levelColors = {
+        info: COLORS.cyan,
+        warn: COLORS.yellow,
+        error: COLORS.red,
+        success: COLORS.green,
+        request: COLORS.dim,
+    };
+    const levelLabel = `${levelColors[level]}${level.toUpperCase().padEnd(7)}${COLORS.reset}`;
+    const emberTag = `${COLORS.ember}[emberkit]${COLORS.reset}`;
+    console.log(`${prefix} ${levelLabel} ${emberTag} ${message}`);
+}
+const MIME_TYPES = {
+    ".html": "text/html",
+    ".js": "application/javascript",
+    ".mjs": "application/javascript",
+    ".css": "text/css",
+    ".json": "application/json",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".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",
+    ".otf": "font/otf",
+    ".webp": "image/webp",
+    ".webm": "video/webm",
+    ".mp4": "video/mp4",
+    ".txt": "text/plain",
+    ".xml": "application/xml",
+};
+async function loadEmberKitConfig(root) {
+    const configPaths = [
+        join(root, "emberkit.config.ts"),
+        join(root, "emberkit.config.js"),
+        join(root, "emberkit.config.mjs"),
+    ];
+    for (const configPath of configPaths) {
+        if (existsSync(configPath)) {
+            try {
+                const configUrl = pathToFileURL(configPath).href;
+                const mod = await import(configUrl);
+                return mod.default || mod;
             }
-            else {
-                reject(new Error(`Preview exited with code ${code}`));
+            catch {
+                continue;
+            }
+        }
+    }
+    return null;
+}
+export async function preview(_args) {
+    const root = process.cwd();
+    console.clear();
+    console.log(`${COLORS.orange}${EMBERKIT_ASCII}${COLORS.reset}`);
+    const emberkitConfig = await loadEmberKitConfig(root);
+    const mode = emberkitConfig?.mode || "hybrid";
+    const outDir = emberkitConfig?.build?.outDir || "dist";
+    const distPath = join(root, outDir);
+    if (!existsSync(distPath)) {
+        log("error", `Build directory not found: ${distPath}`);
+        log("info", "Run 'emberkit build' first to create a production build.");
+        process.exit(1);
+    }
+    const manifestPath = join(distPath, "ssr-manifest.json");
+    let manifest = null;
+    if (existsSync(manifestPath)) {
+        manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+        log("info", `Loaded SSR manifest (mode: ${manifest?.mode || mode})`);
+    }
+    const serverEntryPath = join(distPath, "server", "entry-server.js");
+    let serverModule = null;
+    if ((mode === "ssr" || mode === "hybrid") && existsSync(serverEntryPath)) {
+        try {
+            const serverUrl = pathToFileURL(serverEntryPath).href;
+            serverModule = await import(serverUrl);
+            log("info", "Loaded SSR server module");
+        }
+        catch (e) {
+            log("warn", `Could not load SSR module: ${e}`);
+        }
+    }
+    const port = emberkitConfig?.server?.port || 4173;
+    const host = emberkitConfig?.server?.host || "localhost";
+    const server = createHttpServer(async (req, res) => {
+        const url = req.url ?? "/";
+        const urlObj = new URL(url, `http://${req.headers.host || "localhost"}`);
+        const pathname = urlObj.pathname;
+        const serveStaticFile = (filePath) => {
+            if (existsSync(filePath) && statSync(filePath).isFile()) {
+                const ext = extname(filePath);
+                const mimeType = MIME_TYPES[ext] || "application/octet-stream";
+                res.setHeader("Content-Type", mimeType);
+                res.setHeader("Cache-Control", "public, max-age=31536000");
+                res.end(readFileSync(filePath));
+                return true;
             }
-        });
-        vite.on("error", (error) => {
-            reject(error);
-        });
+            return false;
+        };
+        const staticPath = join(distPath, pathname);
+        if (serveStaticFile(staticPath)) {
+            log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(static)${COLORS.reset}`);
+            return;
+        }
+        if (pathname !== "/" && !pathname.includes(".")) {
+            const htmlPath = join(distPath, pathname, "index.html");
+            if (serveStaticFile(htmlPath)) {
+                log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(prerendered)${COLORS.reset}`);
+                return;
+            }
+        }
+        if ((mode === "ssr" || mode === "hybrid") && serverModule) {
+            if (req.headers.accept?.includes("text/html")) {
+                try {
+                    const html = await serverModule.render(url);
+                    res.setHeader("Content-Type", "text/html; charset=utf-8");
+                    res.end(html);
+                    log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(ssr)${COLORS.reset}`);
+                    return;
+                }
+                catch (e) {
+                    log("error", `SSR render failed: ${e}`);
+                }
+            }
+        }
+        const indexPath = join(distPath, "index.html");
+        if (existsSync(indexPath)) {
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.end(readFileSync(indexPath));
+            log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(fallback)${COLORS.reset}`);
+            return;
+        }
+        res.statusCode = 404;
+        res.setHeader("Content-Type", "text/html");
+        res.end("<h1>404 - Not Found</h1>");
+        log("request", `${COLORS.yellow}404${COLORS.reset} ${pathname}`);
+    });
+    server.listen(port, host, () => {
+        log("success", "Preview server is running!");
+        console.log("");
+        console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.bright}Local:${COLORS.reset}   ${COLORS.cyan}http://${host}:${port}${COLORS.reset}`);
+        console.log("");
+        console.log(`   ${COLORS.gray}Mode:${COLORS.reset}    ${COLORS.ember}${manifest?.mode || mode}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Dir:${COLORS.reset}     ${COLORS.dim}${outDir}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Press${COLORS.reset}    ${COLORS.dim}Ctrl+C${COLORS.reset} ${COLORS.gray}to stop${COLORS.reset}`);
+        console.log("");
     });
+    return new Promise(() => { });
 }

package/dist/commands/serve.js

@@ -0,0 +1,242 @@
+import { createServer as createHttpServer } from "http";
+import { join, extname } from "path";
+import { existsSync, readFileSync, statSync } from "fs";
+import { pathToFileURL } from "url";
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    orange: "\x1b[38;5;208m",
+    ember: "\x1b[38;5;202m",
+    gray: "\x1b[38;5;240m",
+    green: "\x1b[38;5;40m",
+    cyan: "\x1b[38;5;51m",
+    yellow: "\x1b[38;5;220m",
+    red: "\x1b[38;5;196m",
+};
+const EMBERKIT_ASCII = `
+    ╔═══════════════════════════════════════╗
+    ║                                       ║
+    ║     🔥  E M B E R K I T  🔥           ║
+    ║                                       ║
+    ║      ░▒▓█ PRODUCTION SERVER █▓▒░      ║
+    ║                                       ║
+    ╚═══════════════════════════════════════╝
+`;
+function log(level, message) {
+    const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
+    const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
+    const levelColors = {
+        info: COLORS.cyan,
+        warn: COLORS.yellow,
+        error: COLORS.red,
+        success: COLORS.green,
+        request: COLORS.dim,
+    };
+    const levelLabel = `${levelColors[level]}${level.toUpperCase().padEnd(7)}${COLORS.reset}`;
+    const emberTag = `${COLORS.ember}[emberkit]${COLORS.reset}`;
+    console.log(`${prefix} ${levelLabel} ${emberTag} ${message}`);
+}
+const MIME_TYPES = {
+    ".html": "text/html",
+    ".js": "application/javascript",
+    ".mjs": "application/javascript",
+    ".css": "text/css",
+    ".json": "application/json",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".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",
+    ".otf": "font/otf",
+    ".webp": "image/webp",
+    ".webm": "video/webm",
+    ".mp4": "video/mp4",
+    ".txt": "text/plain",
+    ".xml": "application/xml",
+    ".map": "application/json",
+};
+function routeToRegex(routePath) {
+    const paramNames = [];
+    const regexStr = routePath
+        .replace(/:([^/]+)\*/g, (_, name) => {
+        paramNames.push(name);
+        return "(.*)";
+    })
+        .replace(/:([^/]+)/g, (_, name) => {
+        paramNames.push(name);
+        return "([^/]+)";
+    });
+    return { regex: new RegExp("^" + regexStr + "$"), paramNames };
+}
+function matchRoute(routes, pathname) {
+    const normalizedPath = pathname.replace(/\/+$/, "") || "/";
+    const sortedRoutes = [...routes].sort((a, b) => {
+        const aScore = a.path.includes(":") ? 0 : 1;
+        const bScore = b.path.includes(":") ? 0 : 1;
+        return bScore - aScore;
+    });
+    for (const route of sortedRoutes) {
+        const pattern = routeToRegex(route.path);
+        const match = normalizedPath.match(pattern.regex);
+        if (match) {
+            const params = {};
+            pattern.paramNames.forEach((name, i) => {
+                params[name] = match[i + 1];
+            });
+            return { route, params };
+        }
+    }
+    return null;
+}
+export async function serve(args) {
+    const portArg = args.find((a) => a.startsWith("--port="));
+    const hostArg = args.find((a) => a.startsWith("--host="));
+    const dirArg = args.find((a) => a.startsWith("--dir="));
+    const root = process.cwd();
+    const outDir = dirArg?.split("=")[1] || "dist";
+    const distPath = join(root, outDir);
+    console.log(`${COLORS.orange}${EMBERKIT_ASCII}${COLORS.reset}`);
+    if (!existsSync(distPath)) {
+        log("error", `Build directory not found: ${distPath}`);
+        log("info", "Run 'emberkit build' first to create a production build.");
+        process.exit(1);
+    }
+    const manifestPath = join(distPath, "ssr-manifest.json");
+    let manifest = null;
+    if (existsSync(manifestPath)) {
+        manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+        log("info", `Loaded SSR manifest (mode: ${manifest?.mode})`);
+    }
+    else {
+        log("warn", "No SSR manifest found, serving as static site");
+    }
+    const serverEntryPath = join(distPath, "server", "entry-server.js");
+    let serverModule = null;
+    if (manifest && (manifest.mode === "ssr" || manifest.mode === "hybrid") && existsSync(serverEntryPath)) {
+        try {
+            const serverUrl = pathToFileURL(serverEntryPath).href;
+            serverModule = await import(serverUrl);
+            log("info", "Loaded SSR server module");
+        }
+        catch (e) {
+            log("warn", `Could not load SSR module: ${e}`);
+        }
+    }
+    const port = parseInt(portArg?.split("=")[1] || "3000", 10);
+    const host = hostArg?.split("=")[1] || "0.0.0.0";
+    let requestCount = 0;
+    const startTime = Date.now();
+    const server = createHttpServer(async (req, res) => {
+        requestCount++;
+        const reqStart = Date.now();
+        const url = req.url ?? "/";
+        const urlObj = new URL(url, `http://${req.headers.host || "localhost"}`);
+        const pathname = urlObj.pathname;
+        res.setHeader("X-Powered-By", "EmberKit");
+        const serveStaticFile = (filePath) => {
+            if (existsSync(filePath) && statSync(filePath).isFile()) {
+                const ext = extname(filePath);
+                const mimeType = MIME_TYPES[ext] || "application/octet-stream";
+                res.setHeader("Content-Type", mimeType);
+                if (ext === ".html") {
+                    res.setHeader("Cache-Control", "no-cache");
+                }
+                else if (pathname.includes("/assets/")) {
+                    res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+                }
+                else {
+                    res.setHeader("Cache-Control", "public, max-age=86400");
+                }
+                res.end(readFileSync(filePath));
+                return true;
+            }
+            return false;
+        };
+        const staticPath = join(distPath, pathname);
+        if (serveStaticFile(staticPath)) {
+            const ms = Date.now() - reqStart;
+            log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(static, ${ms}ms)${COLORS.reset}`);
+            return;
+        }
+        if (pathname !== "/" && !pathname.includes(".")) {
+            const htmlPath = join(distPath, pathname, "index.html");
+            if (serveStaticFile(htmlPath)) {
+                const ms = Date.now() - reqStart;
+                log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(prerendered, ${ms}ms)${COLORS.reset}`);
+                return;
+            }
+        }
+        if (manifest && (manifest.mode === "ssr" || manifest.mode === "hybrid") && serverModule) {
+            if (req.headers.accept?.includes("text/html")) {
+                const routeMatch = matchRoute(manifest.routes, pathname);
+                if (routeMatch && (manifest.mode === "ssr" || !routeMatch.route.isStatic)) {
+                    try {
+                        if (serverModule.render) {
+                            const html = await serverModule.render(url, routeMatch.params);
+                            res.setHeader("Content-Type", "text/html; charset=utf-8");
+                            res.setHeader("Cache-Control", "no-cache");
+                            res.end(typeof html === "string" ? html : html?.html ?? "");
+                            const ms = Date.now() - reqStart;
+                            log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(ssr, ${ms}ms)${COLORS.reset}`);
+                            return;
+                        }
+                    }
+                    catch (e) {
+                        log("error", `SSR render failed for ${pathname}: ${e}`);
+                    }
+                }
+            }
+        }
+        const indexPath = join(distPath, "index.html");
+        if (existsSync(indexPath)) {
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(readFileSync(indexPath));
+            const ms = Date.now() - reqStart;
+            log("request", `${COLORS.green}200${COLORS.reset} ${pathname} ${COLORS.dim}(spa fallback, ${ms}ms)${COLORS.reset}`);
+            return;
+        }
+        res.statusCode = 404;
+        res.setHeader("Content-Type", "text/html");
+        res.end("<h1>404 - Not Found</h1>");
+        const ms = Date.now() - reqStart;
+        log("request", `${COLORS.yellow}404${COLORS.reset} ${pathname} ${COLORS.dim}(${ms}ms)${COLORS.reset}`);
+    });
+    server.listen(port, host, () => {
+        log("success", "Production server is running!");
+        console.log("");
+        console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.bright}Local:${COLORS.reset}   ${COLORS.cyan}http://localhost:${port}${COLORS.reset}`);
+        if (host === "0.0.0.0" || host === "::") {
+            import("os").then((os) => {
+                const interfaces = os.networkInterfaces();
+                for (const name of Object.keys(interfaces)) {
+                    for (const iface of interfaces[name] || []) {
+                        if (iface.family === "IPv4" && !iface.internal) {
+                            console.log(`   ${COLORS.bright}${COLORS.orange}➜${COLORS.reset}  ${COLORS.bright}Network:${COLORS.reset} ${COLORS.cyan}http://${iface.address}:${port}${COLORS.reset}`);
+                        }
+                    }
+                }
+            });
+        }
+        console.log("");
+        console.log(`   ${COLORS.gray}Mode:${COLORS.reset}    ${COLORS.ember}${manifest?.mode || "static"}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Dir:${COLORS.reset}     ${COLORS.dim}${outDir}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Routes:${COLORS.reset}  ${COLORS.dim}${manifest?.routes.length || 0}${COLORS.reset}`);
+        console.log(`   ${COLORS.gray}Press${COLORS.reset}    ${COLORS.dim}Ctrl+C${COLORS.reset} ${COLORS.gray}to stop${COLORS.reset}`);
+        console.log("");
+    });
+    process.on("SIGINT", () => {
+        const uptime = Math.round((Date.now() - startTime) / 1000);
+        console.log("");
+        log("info", `Shutting down... (served ${requestCount} requests in ${uptime}s)`);
+        server.close();
+        process.exit(0);
+    });
+    return new Promise(() => { });
+}

package/dist/emberkit-package-versions.js

@@ -1,11 +1,10 @@
 // Semver ranges for @emberkit/* packages written into generated projects.
-// Regenerated by scripts/sync-cli-template-versions.mjs from packages/*/package.json.
-// That script also sets packages/ui workspace:^ deps for @emberkit/core and @emberkit/icons.
+// When releasing libraries, bump these to match packages/*/package.json "version".
 export const EMBERKIT_PACKAGE_VERSIONS = {
-    core: "^0.2.8",
-    ui: "^0.3.4",
-    icons: "^0.2.6",
-    cli: "^0.6.4",
-    edge: "^0.2.3",
+    core: "^0.3.5",
+    ui: "^1.0.0",
+    icons: "^1.0.5",
+    cli: "^0.6.7",
+    edge: "^0.2.4",
     tsconfig: "^0.2.1",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emberkit/cli",
-  "version": "0.6.4",
+  "version": "0.6.7",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",
@@ -37,7 +37,16 @@
     }
   },
   "dependencies": {
-    "inquirer": "^9.2.0"
+    "inquirer": "^9.2.0",
+    "vite": "^6.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": false
+    }
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",