@emberkit/cli 0.6.5 → 0.6.8

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.2.8",
-    ui: "^0.3.4",
-    icons: "^0.2.6",
-    cli: "^0.6.5",
+    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.5",
+  "version": "0.6.8",
   "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",