@emberkit/cli 0.6.7 → 0.6.9

package/dist/brand.js

@@ -0,0 +1,21 @@
+/**
+ * ANSI terminal brand marks (no emoji) for consistent CLI branding.
+ */
+export const cliBrand = {
+    orange: "\x1b[38;5;208m",
+    cyan: "\x1b[38;5;51m",
+    red: "\x1b[38;5;196m",
+    reset: "\x1b[0m",
+    /** EmberKit logo mark in terminal output */
+    logo() {
+        return `${cliBrand.orange}◆${cliBrand.reset}`;
+    },
+    /** Success / highlight accent */
+    spark() {
+        return `${cliBrand.cyan}✦${cliBrand.reset}`;
+    },
+    /** Error line prefix */
+    fail() {
+        return `${cliBrand.red}◆${cliBrand.reset}`;
+    },
+};

package/dist/cli.js

@@ -7,6 +7,7 @@ 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";
+import { cliBrand } from "./brand.js";
 export async function runCLI(args) {
     const [command, ...restArgs] = args.slice(2);
     if (!command) {
@@ -49,7 +50,7 @@ export async function runCLI(args) {
 }
 function showHelp() {
     console.log(`
-🔥 EmberKit CLI v${getCliPackageVersion()}
+${cliBrand.logo()} EmberKit CLI v${getCliPackageVersion()}
 
 Usage: emberkit <command> [options]
 
@@ -134,7 +135,7 @@ async function handleCreate(args) {
 }
 function showCreateHelp() {
     console.log(`
-🔥 EmberKit — Create a new project
+${cliBrand.logo()} EmberKit — Create a new project
 
 Usage: emberkit create [name] [options]
 
@@ -206,10 +207,10 @@ async function runGenerate(args) {
         `${typeConfig.dir}/${toKebabCase(name)}${typeConfig.ext}`;
     const result = await generate({ name, path: filePath, template: type });
     if (result.success) {
-        console.log(`✓ Generated ${type}: ${result.path}`);
+        console.log(`${cliBrand.spark()} Generated ${type}: ${result.path}`);
     }
     else {
-        console.error(`✗ ${result.error}`);
+        console.error(`${cliBrand.fail()} ${result.error}`);
         process.exit(1);
     }
 }

package/dist/commands/build.js

@@ -2,6 +2,9 @@ import { build as viteBuild } from "vite";
 import { join } from "path";
 import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
 import { pathToFileURL } from "url";
+import { cliBrand } from "../brand.js";
+import { mergeEmberkitViteConfig } from "../utils/merge-emberkit-vite.js";
+import { loadEmberKitConfig, loadViteConfig } from "../utils/load-config.js";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -27,53 +30,12 @@ function log(level, message) {
     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`);
+    console.log(`\n${cliBrand.logo()} ${COLORS.orange}EmberKit Build${COLORS.reset}\n`);
     const emberkitConfig = await loadEmberKitConfig(root);
-    const viteConfig = await loadViteConfig(root);
+    const viteFileConfig = await loadViteConfig(root);
+    const viteConfig = mergeEmberkitViteConfig(emberkitConfig, viteFileConfig);
     const mode = emberkitConfig?.mode || "hybrid";
     const outDir = emberkitConfig?.build?.outDir || "dist";
     log("info", `Build mode: ${COLORS.ember}${mode}${COLORS.reset}`);
@@ -117,7 +79,7 @@ export async function build(_args) {
             await prerenderStaticRoutes(root, outDir, true);
             log("success", "Static build complete!");
         }
-        console.log(`\n${COLORS.green}✨ Build finished successfully!${COLORS.reset}`);
+        console.log(`\n${cliBrand.spark()} ${COLORS.green}Build finished successfully!${COLORS.reset}\n`);
         console.log(`${COLORS.gray}   Output: ${COLORS.cyan}./${outDir}${COLORS.reset}\n`);
     }
     catch (error) {
@@ -126,11 +88,16 @@ export async function build(_args) {
     }
 }
 async function buildClient(root, outDir, viteConfig, customLogger) {
+    // Always ensure plugins are properly normalized as an array
+    const plugins = (viteConfig?.plugins && Array.isArray(viteConfig.plugins))
+        ? viteConfig.plugins
+        : (viteConfig?.plugins ? [viteConfig.plugins] : []);
     const clientConfig = {
         ...viteConfig,
         root,
         customLogger,
         logLevel: "silent",
+        plugins,
         build: {
             ...(viteConfig?.build || {}),
             outDir,
@@ -142,11 +109,12 @@ async function buildClient(root, outDir, viteConfig, customLogger) {
                 },
             },
         },
+        ssr: undefined,
     };
     await viteBuild(clientConfig);
 }
 function getServerEntryShim() {
-    return `import { routes } from 'virtual:emberkit-routes';
+    return `import { routes, notFoundRoute, errorRoute } from 'virtual:emberkit-routes';
 import { createElement } from '@emberkit/core';
 import { readFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
@@ -165,7 +133,7 @@ const routeToRegex = (routePath) => {
       paramNames.push(name);
       return '([^/]+)';
     });
-  return { regex: new RegExp('^' + regexStr + '$'), paramNames };
+  return { regex: new RegExp('^' + regexStr.replace(/\\/$/, '/?') + '$'), paramNames };
 };
 
 const matchRoute = (routeList, pathname) => {
@@ -274,6 +242,7 @@ export async function render(url) {
 
   let appHtml = '';
   let headContent = '';
+  let status = 200;
 
   if (match) {
     try {
@@ -293,10 +262,42 @@ export async function render(url) {
       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>';
+      if (errorRoute) {
+        try {
+          status = 500;
+          const mod = await errorRoute();
+          const Component = mod.default || mod;
+          const errorInfo = {
+            status: 500,
+            message: e instanceof Error ? e.message : 'Internal Server Error',
+            error: e,
+          };
+          const element = createElement(Component, { error: errorInfo });
+          appHtml = renderToString(element);
+        } catch (fallbackError) {
+          console.error('[SSR] Failed to render 500 page:', fallbackError);
+          appHtml = '<div style="color: red; padding: 20px;">Internal Server Error</div>';
+        }
+      } else {
+        appHtml = '<div style="color: red; padding: 20px;">SSR Error: ' + escapeHtml(String(e)) + '</div>';
+        status = 500;
+      }
     }
   } else {
-    appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+    status = 404;
+    if (notFoundRoute) {
+      try {
+        const mod = await notFoundRoute();
+        const Component = mod.default || mod;
+        const element = createElement(Component, {});
+        appHtml = renderToString(element);
+      } catch (e) {
+        console.error('[SSR] Failed to render 404 page:', e);
+        appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+      }
+    } else {
+      appHtml = '<div style="padding: 20px;">404 - Page not found</div>';
+    }
   }
 
   const templatePath = join(__dirname, '..', 'index.html');
@@ -314,7 +315,7 @@ export async function render(url) {
     template = template.replace('</head>', headContent + '</head>');
   }
 
-  return template;
+  return { html: template, status };
 }
 `;
 }
@@ -355,7 +356,7 @@ async function buildSSR(root, outDir, viteConfig, customLogger) {
             },
         },
         ssr: {
-            noExternal: true,
+            noExternal: ['virtual:emberkit-routes'],
         },
     };
     await viteBuild(ssrConfig);
@@ -486,10 +487,10 @@ async function prerenderStaticRoutes(root, outDir, prerenderAll = false) {
                 mkdirSync(outputDir, { recursive: true });
             }
             writeFileSync(outputPath, html, "utf-8");
-            console.log(`  ${COLORS.green}✓${COLORS.reset} ${route.path}`);
+            console.log(`  ${cliBrand.spark()} ${COLORS.green}${route.path}${COLORS.reset}`);
         }
         catch (e) {
-            console.log(`  ${COLORS.red}✗${COLORS.reset} ${route.path} - ${e}`);
+            console.log(`  ${COLORS.red}◆${COLORS.reset} ${COLORS.red}${route.path} - ${e}${COLORS.reset}`);
         }
     }
 }

package/dist/commands/create.js

@@ -10,6 +10,7 @@ import { blogTemplate } from "../templates/project-templates/blog/blog.js";
 import { saasTemplate } from "../templates/project-templates/saas/saas.js";
 import { dashboardTemplate } from "../templates/project-templates/dashboard/dashboard.js";
 import { apiTemplate } from "../templates/project-templates/api/api.js";
+import { cliBrand } from "../brand.js";
 const RESET = "\x1b[0m";
 const BOLD = "\x1b[1m";
 const DIM = "\x1b[2m";
@@ -45,7 +46,7 @@ function printTemplateList() {
 function printHeader() {
     const header = `
 ${BRIGHT_BLACK}╭─────────────────────────────────────────────────────╮${RESET}
-${BRIGHT_BLACK}│${RESET}   ${ORANGE_BG}${BRIGHT_BLACK} EmberKit ${RESET}                                         ${BRIGHT_BLACK}│${RESET}
+${BRIGHT_BLACK}│${RESET}   ${cliBrand.logo()} ${ORANGE_BG}${BRIGHT_BLACK} EmberKit ${RESET}                                         ${BRIGHT_BLACK}│${RESET}
 ${BRIGHT_BLACK}│${RESET}   ${DIM}A minimalist TypeScript-first JSX framework${RESET}     ${BRIGHT_BLACK}│${RESET}
 ${BRIGHT_BLACK}╰─────────────────────────────────────────────────────╯${RESET}
 `;
@@ -58,11 +59,11 @@ function printStep(step, total, message) {
     console.log(`  ${numStr} ${BRIGHT_WHITE + message + RESET} ${bar}`);
 }
 function printSuccess(message) {
-    const check = BRIGHT_GREEN + "✓" + RESET;
+    const check = cliBrand.spark();
     console.log(`\n  ${check} ${BRIGHT_GREEN + message + RESET}\n`);
 }
 function printError(message) {
-    const err = BRIGHT_RED + "✗" + RESET;
+    const err = `${BRIGHT_RED}◆${RESET}`;
     console.log(`\n  ${err} ${BRIGHT_RED + message + RESET}\n`);
 }
 function printInfo(message) {

package/dist/commands/dev.js

@@ -1,16 +1,6 @@
 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 █▓▒░           ║
-    ║                                       ║
-    ╚═══════════════════════════════════════╝
-`;
+import { mergeEmberkitViteConfig } from "../utils/merge-emberkit-vite.js";
+import { loadEmberKitConfig, loadViteConfig } from "../utils/load-config.js";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -23,6 +13,15 @@ const COLORS = {
     yellow: "\x1b[38;5;220m",
     red: "\x1b[38;5;196m",
 };
+const EMBERKIT_ASCII = `
+    ╔═══════════════════════════════════════╗
+    ║                                       ║
+    ║     ${COLORS.orange}◆${COLORS.reset}  E M B E R K I T  ${COLORS.orange}◆${COLORS.reset}           ║
+    ║                                       ║
+    ║        ░▒▓█ DEV SERVER █▓▒░           ║
+    ║                                       ║
+    ╚═══════════════════════════════════════╝
+`;
 function log(level, message, meta) {
     const timestamp = new Date().toLocaleTimeString("en-US", { hour12: false });
     const prefix = `${COLORS.gray}[${timestamp}]${COLORS.reset}`;
@@ -44,46 +43,14 @@ function log(level, message, meta) {
     }
     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);
+    const viteFileConfig = await loadViteConfig(root, "serve");
+    const viteConfig = mergeEmberkitViteConfig(emberkitConfig, viteFileConfig);
     if (emberkitConfig) {
         log("debug", "Loaded emberkit.config", { mode: emberkitConfig.mode || "hybrid" });
     }

package/dist/commands/preview.js

@@ -17,7 +17,7 @@ const COLORS = {
 const EMBERKIT_ASCII = `
     ╔═══════════════════════════════════════╗
     ║                                       ║
-    ║     🔥  E M B E R K I T  🔥           ║
+    ║     ${COLORS.orange}◆${COLORS.reset}  E M B E R K I T  ${COLORS.orange}◆${COLORS.reset}           ║
     ║                                       ║
     ║       ░▒▓█ PREVIEW SERVER █▓▒░        ║
     ║                                       ║

package/dist/commands/serve.js

@@ -17,7 +17,7 @@ const COLORS = {
 const EMBERKIT_ASCII = `
     ╔═══════════════════════════════════════╗
     ║                                       ║
-    ║     🔥  E M B E R K I T  🔥           ║
+    ║     ${COLORS.orange}◆${COLORS.reset}  E M B E R K I T  ${COLORS.orange}◆${COLORS.reset}           ║
     ║                                       ║
     ║      ░▒▓█ PRODUCTION SERVER █▓▒░      ║
     ║                                       ║

package/dist/emberkit-package-versions.js

@@ -1,10 +1,10 @@
 // Semver ranges for @emberkit/* packages written into generated projects.
 // When releasing libraries, bump these to match packages/*/package.json "version".
 export const EMBERKIT_PACKAGE_VERSIONS = {
-    core: "^0.3.5",
-    ui: "^1.0.0",
-    icons: "^1.0.5",
-    cli: "^0.6.7",
+    core: "^0.4.0",
+    ui: "^2.0.0",
+    icons: "^2.0.0",
+    cli: "^0.6.9",
     edge: "^0.2.4",
     tsconfig: "^0.2.1",
 };

package/dist/templates/project-templates/starter-kit/with-ui.js

@@ -119,9 +119,9 @@ const HomePage: RouteComponent = () => {
   const [activeTab, setActiveTab] = createSignal('features');
 
   const features = [
-    { icon: '⚡', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
-    { icon: '📘', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
-    { icon: '📁', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
+    { icon: 'zap' as const, title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
+    { icon: 'book' as const, title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
+    { icon: 'folder' as const, title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
   ];
 
   const components = [
@@ -139,8 +139,9 @@ const HomePage: RouteComponent = () => {
       <section className="relative text-center py-20">
         <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[400px] rounded-full bg-ember-500/15 blur-[150px] animate-pulse-glow" />
         <div className="relative z-10 space-y-6 animate-fade-in-down">
-          <Badge variant="primary" className="inline-block">
-            ✨ Welcome to {{name}}
+          <Badge variant="primary" className="inline-flex items-center gap-2">
+            <Icon name="emberkit" size={14} className="text-amber-400 shrink-0 drop-shadow-[0_0_6px_rgba(251,191,36,0.45)]" />
+            Welcome to {{name}}
           </Badge>
           <Heading level="h1" size="4xl" weight="bold">
             Built with EmberKit <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">UI System</span>
@@ -172,7 +173,9 @@ const HomePage: RouteComponent = () => {
             <Card key={feature.title} padding="lg" className="relative group hover:border-ember-500/50 transition-all hover:-translate-y-1 cursor-pointer">
               <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-ember-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
               <div className="relative space-y-3">
-                <div className="text-3xl">{feature.icon}</div>
+                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-ember-400/20 via-fuchsia-500/10 to-cyan-500/10 text-ember-300 ring-1 ring-ember-400/25 shadow-[0_0_24px_rgba(236,72,153,0.12)]">
+                  <Icon name={feature.icon} size={28} className="drop-shadow-[0_0_10px_rgba(249,115,22,0.35)]" />
+                </div>
                 <Heading level="h3" size="md" weight="semibold">
                   {feature.title}
                 </Heading>
@@ -230,10 +233,16 @@ const HomePage: RouteComponent = () => {
                 </div>
               </div>
               <Alert variant="success">
-                ✓ This is a success alert message. Use it to confirm important actions.
+                <span className="inline-flex items-start gap-2">
+                  <Icon name="check" size={18} className="text-emerald-400 shrink-0 mt-0.5" />
+                  <span>This is a success alert message. Use it to confirm important actions.</span>
+                </span>
               </Alert>
               <Alert variant="info">
-                ℹ This is an info alert. Useful for displaying helpful information.
+                <span className="inline-flex items-start gap-2">
+                  <Icon name="info" size={18} className="text-sky-400 shrink-0 mt-0.5" />
+                  <span>This is an info alert. Useful for displaying helpful information.</span>
+                </span>
               </Alert>
             </div>
           </Card>
@@ -284,14 +293,14 @@ const HomePage: RouteComponent = () => {
 export default HomePage;`,
     "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
-import { Heading, Text, Button, Card, Badge, Alert } from '@emberkit/ui';
+import { Heading, Text, Button, Card, Badge, Alert, Icon } from '@emberkit/ui';
 
 const AboutPage: RouteComponent = () => {
   const features = [
-    { icon: '⚙️', title: 'TypeScript-first', desc: 'Full type safety with intelligent autocomplete' },
-    { icon: '🎨', title: 'UI Components', desc: 'Pre-built design system components' },
-    { icon: '🎯', title: 'Tailwind CSS', desc: 'Utility-first styling framework' },
-    { icon: '📁', title: 'File Routing', desc: 'Automatic routes from file structure' },
+    { icon: 'type' as const, title: 'TypeScript-first', desc: 'Full type safety with intelligent autocomplete' },
+    { icon: 'grid' as const, title: 'UI Components', desc: 'Pre-built design system components' },
+    { icon: 'zap' as const, title: 'Tailwind CSS', desc: 'Utility-first styling framework' },
+    { icon: 'folder' as const, title: 'File Routing', desc: 'Automatic routes from file structure' },
   ];
 
   const techStack = ['EmberKit', 'TypeScript', 'Tailwind CSS', 'Vite', 'JSX', 'Design System'];
@@ -331,7 +340,9 @@ const AboutPage: RouteComponent = () => {
           <div className="grid sm:grid-cols-2 gap-4">
             {features.map((f) => (
               <Card key={f.title} padding="lg" className="hover:border-ember-500/50 transition-all hover:-translate-y-0.5">
-                <div className="text-2xl mb-3">{f.icon}</div>
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-ember-400/20 via-fuchsia-500/10 to-cyan-500/10 text-ember-300 ring-1 ring-ember-400/25 mb-3">
+                  <Icon name={f.icon} size={24} className="drop-shadow-[0_0_8px_rgba(249,115,22,0.35)]" />
+                </div>
                 <Heading level="h3" size="md" weight="semibold" className="mb-1">
                   {f.title}
                 </Heading>
@@ -359,7 +370,10 @@ const AboutPage: RouteComponent = () => {
 
         {/* Benefits Alert */}
         <Alert variant="success">
-          ✨ <strong>Pro Tip:</strong> This template uses the EmberKit design system components. Check the component library documentation to learn about all available components and their capabilities.
+          <span className="inline-flex items-start gap-2">
+            <Icon name="emberkit" size={18} className="text-amber-400 shrink-0 mt-0.5 drop-shadow-[0_0_8px_rgba(251,191,36,0.4)]" />
+            <span><strong>Pro Tip:</strong> This template uses the EmberKit design system components. Check the component library documentation to learn about all available components and their capabilities.</span>
+          </span>
         </Alert>
 
         {/* Back Button */}

package/dist/utils/load-config.js

@@ -0,0 +1,107 @@
+import { existsSync, mkdirSync } from "fs";
+import { join } from "path";
+import { pathToFileURL } from "url";
+/**
+ * Loads a TypeScript or JavaScript config file in any Node environment.
+ *
+ * Direct `import()` of `.ts` files only works on runtimes with TypeScript
+ * support (e.g. tsx, ts-node, Node ≥ 22 with --experimental-strip-types).
+ * Cloudflare Pages CI runs plain Node 18/20, so `.ts` imports silently fail.
+ *
+ * We use esbuild (a transitive dep of Vite, always present) to bundle the
+ * config to a temporary `.mjs` file and import that instead.
+ */
+async function transpileAndImport(filePath, root) {
+    // Use a cache dir that survives across the two viteBuild calls
+    const cacheDir = join(root, "node_modules", ".cache", "emberkit");
+    mkdirSync(cacheDir, { recursive: true });
+    const outFile = join(cacheDir, `config-${Date.now()}-${Math.random().toString(36).slice(2)}.mjs`);
+    try {
+        // esbuild is always available as a transitive dependency of Vite
+        const { build: esbuild } = await import("esbuild");
+        await esbuild({
+            entryPoints: [filePath],
+            bundle: true,
+            format: "esm",
+            platform: "node",
+            outfile: outFile,
+            // Preserve all package imports so they resolve from node_modules at runtime
+            packages: "external",
+            logLevel: "silent",
+        });
+        const mod = await import(pathToFileURL(outFile).href);
+        return (mod.default ?? mod);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Loads the `emberkit.config.ts` (or `.js` / `.mjs`) for a project root.
+ * Returns `null` when no config file is found or loading fails.
+ */
+export async function loadEmberKitConfig(root) {
+    const candidates = [
+        join(root, "emberkit.config.ts"),
+        join(root, "emberkit.config.js"),
+        join(root, "emberkit.config.mjs"),
+    ];
+    for (const filePath of candidates) {
+        if (!existsSync(filePath))
+            continue;
+        const ext = filePath.split(".").pop();
+        // Plain JS/MJS files can be imported directly
+        if (ext === "js" || ext === "mjs") {
+            try {
+                const mod = await import(pathToFileURL(filePath).href);
+                return (mod.default ?? mod);
+            }
+            catch {
+                continue;
+            }
+        }
+        // TypeScript files need transpilation
+        const result = await transpileAndImport(filePath, root);
+        if (result !== null)
+            return result;
+    }
+    return null;
+}
+/**
+ * Loads the `vite.config.ts` (or `.js`) for a project root.
+ * Returns `null` when no config file is found or loading fails.
+ */
+export async function loadViteConfig(root, command = "build") {
+    const candidates = [
+        join(root, "vite.config.ts"),
+        join(root, "vite.config.js"),
+    ];
+    for (const filePath of candidates) {
+        if (!existsSync(filePath))
+            continue;
+        const ext = filePath.split(".").pop();
+        let raw = null;
+        if (ext === "js") {
+            try {
+                const mod = await import(pathToFileURL(filePath).href);
+                raw = mod.default ?? mod;
+            }
+            catch {
+                continue;
+            }
+        }
+        else {
+            raw = await transpileAndImport(filePath, root);
+        }
+        if (raw === null)
+            continue;
+        const resolved = typeof raw === "function"
+            ? raw({
+                mode: command === "serve" ? "development" : "production",
+                command,
+            })
+            : raw;
+        return resolved;
+    }
+    return null;
+}

package/dist/utils/merge-emberkit-vite.js

@@ -0,0 +1,35 @@
+function pluginsToArray(plugins) {
+    if (plugins == null)
+        return [];
+    return Array.isArray(plugins) ? plugins : [plugins];
+}
+/**
+ * Merges `emberkit.config` `vite` block with optional `vite.config.*` (file wins on top-level keys;
+ * `plugins` from both are concatenated in order).
+ */
+export function mergeEmberkitViteConfig(emberkitConfig, viteFileConfig) {
+    const fromEmber = emberkitConfig?.vite ?? {};
+    const fromFile = viteFileConfig ?? {};
+    return {
+        ...fromEmber,
+        ...fromFile,
+        plugins: [...pluginsToArray(fromEmber.plugins), ...pluginsToArray(fromFile.plugins)],
+        server: { ...fromEmber.server, ...fromFile.server },
+        define: {
+            ...fromEmber.define,
+            ...fromFile.define,
+        },
+        css: { ...fromEmber.css, ...fromFile.css },
+        optimizeDeps: { ...fromEmber.optimizeDeps, ...fromFile.optimizeDeps },
+        resolve: { ...fromEmber.resolve, ...fromFile.resolve },
+        esbuild: { ...fromEmber.esbuild, ...fromFile.esbuild },
+        build: {
+            ...fromEmber.build,
+            ...fromFile.build,
+            rollupOptions: {
+                ...(fromEmber.build?.rollupOptions ?? {}),
+                ...(fromFile.build?.rollupOptions ?? {}),
+            },
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emberkit/cli",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/inquirer": "^9.0.3",
+    "esbuild": "^0.28.0",
     "eslint": "^10.0.0",
     "eslint-plugin-perfectionist": "^5.9.0",
     "typescript-eslint": "^8.59.3"