@emberkit/cli 0.6.7 → 0.6.8

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,8 @@ 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";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -71,9 +73,10 @@ async function loadViteConfig(root) {
 }
 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 +120,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) {
@@ -165,7 +168,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) => {
@@ -486,10 +489,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

@@ -2,15 +2,7 @@ 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";
 const COLORS = {
     reset: "\x1b[0m",
     bright: "\x1b[1m",
@@ -23,6 +15,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}`;
@@ -83,7 +84,8 @@ export async function dev(_args) {
     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);
+    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.3.8",
+    ui: "^1.0.1",
+    icons: "^1.0.8",
+    cli: "^0.6.8",
     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/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.8",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",