@emberkit/cli 0.6.1-alpha.1 → 0.6.1-alpha.11

package/dist/templates/project-templates/blog/blog.js

@@ -85,7 +85,7 @@ const Layout: RouteComponent = ({ children }) => {
         </header>
         <main className="flex-1">{children}</main>
         <footer className="border-t border-gray-200 py-8 text-center text-sm text-gray-500">
-          <p>Built with <a href="https://emberkit.dev" className="text-gray-700 hover:underline">EmberKit</a></p>
+          <p>Built with <a href="https://emberkit.orangeember.com" className="text-gray-700 hover:underline">EmberKit</a></p>
         </footer>
       </div>
     </>
@@ -137,7 +137,7 @@ const HomePage: RouteComponent = () => {
       <div className="space-y-10">
         {posts.map((post) => (
           <article key={post.slug} className="group">
-            <a href={\`/posts/\${post.slug}\`} className="block">
+            <a href={post.slug} className="block">
               <h2 className="text-xl font-semibold font-serif mb-2 group-hover:text-blue-600 transition-colors">
                 {post.title}
               </h2>
@@ -156,7 +156,7 @@ const HomePage: RouteComponent = () => {
 };
 
 export default HomePage;`,
-    "src/routes/[slug].tsx": `import type { RouteComponent, RouteParams } from '@emberkit/core';
+    "src/routes/[slug].tsx": `import type { RouteParams } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 
 interface PostData {
@@ -190,11 +190,11 @@ const posts: Record<string, PostData> = {
     content: \`
       <p>Signals are the reactive primitive at the core of EmberKit.</p>
       <h2>Creating Signals</h2>
-      <pre><code>const count = signal(0);</code></pre>
+      <pre><code>const [count, setCount] = createSignal(0);</code></pre>
       <h2>Computed Values</h2>
-      <pre><code>const doubled = computed(() => count.value * 2);</code></pre>
+      <pre><code>const doubled = createMemo(() => count() * 2);</code></pre>
       <h2>Side Effects</h2>
-      <pre><code>effect(() => console.log(count.value));</code></pre>
+      <pre><code>createEffect(() => console.log(count()));</code></pre>
     \`,
   },
   'file-based-routing': {
@@ -212,11 +212,7 @@ const posts: Record<string, PostData> = {
   },
 };
 
-interface Params {
-  slug: string;
-}
-
-const PostPage: RouteComponent<Params> = ({ params }: RouteParams<Params>) => {
+export default function PostPage({ params }: RouteParams<{ slug: string }>) {
   const post = posts[params.slug];
 
   if (!post) {
@@ -250,9 +246,7 @@ const PostPage: RouteComponent<Params> = ({ params }: RouteParams<Params>) => {
       </article>
     </>
   );
-};
-
-export default PostPage;`,
+}`,
     "src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 
@@ -266,7 +260,7 @@ const AboutPage: RouteComponent = () => {
         <h1 className="text-4xl font-bold font-serif mb-6">About</h1>
         <div className="prose">
           <p>Hi, I'm the author of this blog. I write about web development, frameworks, and building fast user interfaces.</p>
-          <p>This blog is built with <a href="https://emberkit.dev">EmberKit</a>, a minimalist TypeScript-first JSX framework.</p>
+          <p>This blog is built with <a href="https://emberkit.orangeember.com">EmberKit</a>, a minimalist TypeScript-first JSX framework.</p>
           <h2>Tech Stack</h2>
           <ul>
             <li>EmberKit for routing and rendering</li>

package/dist/templates/project-templates/dashboard/dashboard.js

@@ -28,11 +28,11 @@ body {
   @apply bg-gray-50 text-gray-900 font-sans;
 }`,
     "src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 import { Sidebar, Header } from '@emberkit/ui';
 
 const Layout: RouteComponent = ({ children }) => {
-  const sidebarOpen = signal(true);
+  const [sidebarOpen, setSidebarOpen] = createSignal(true);
 
   const sidebarItems = [
     { label: 'Dashboard', href: '/dashboard', icon: 'grid' },
@@ -47,15 +47,15 @@ const Layout: RouteComponent = ({ children }) => {
       <Sidebar
         logo={<span className="font-bold text-lg">&#9889; {{name}}</span>}
         items={sidebarItems}
-        collapsed={!sidebarOpen.value}
-        onToggle={() => { sidebarOpen.value = !sidebarOpen.value; }}
+        collapsed={!sidebarOpen()}
+        onToggle={() => { setSidebarOpen(!sidebarOpen()); }}
         className="w-64"
       />
       <div className="flex-1 flex flex-col min-w-0">
         <Header
           title="Dashboard"
           user={{ name: 'User', avatar: '' }}
-          onMenuClick={() => { sidebarOpen.value = !sidebarOpen.value; }}
+          onMenuClick={() => { setSidebarOpen(!sidebarOpen()); }}
         />
         <main className="flex-1 p-6 overflow-auto">
           {children}
@@ -162,7 +162,7 @@ const DashboardPage: RouteComponent = () => {
 export default DashboardPage;`,
     "src/routes/users.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Card, Badge, Button, Input } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 interface User {
   id: number;
@@ -182,12 +182,12 @@ const users: User[] = [
 ];
 
 const UsersPage: RouteComponent = () => {
-  const search = signal('');
+  const [search, setSearch] = createSignal('');
 
   const filteredUsers = users.filter(
     (u) =>
-      u.name.toLowerCase().includes(search.value.toLowerCase()) ||
-      u.email.toLowerCase().includes(search.value.toLowerCase())
+      u.name.toLowerCase().includes(search().toLowerCase()) ||
+      u.email.toLowerCase().includes(search().toLowerCase())
   );
 
   const statusVariant = (status: User['status']) => {
@@ -212,8 +212,8 @@ const UsersPage: RouteComponent = () => {
         <div className="mb-4">
           <Input
             placeholder="Search users..."
-            value={search.value}
-            onInput={(e) => { search.value = e.currentTarget.value; }}
+            value={search()}
+            onInput={(e) => { setSearch(e.currentTarget.value); }}
             className="max-w-sm"
           />
         </div>
@@ -260,17 +260,17 @@ const UsersPage: RouteComponent = () => {
 export default UsersPage;`,
     "src/routes/settings.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Card, Input, Button, Alert } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const SettingsPage: RouteComponent = () => {
-  const name = signal('John Doe');
-  const email = signal('john@example.com');
-  const saved = signal(false);
+  const [name, setName] = createSignal('John Doe');
+  const [email, setEmail] = createSignal('john@example.com');
+  const [saved, setSaved] = createSignal(false);
 
   const handleSave = (e: Event) => {
     e.preventDefault();
-    saved.value = true;
-    setTimeout(() => { saved.value = false; }, 3000);
+    setSaved(true);
+    setTimeout(() => { setSaved(false); }, 3000);
   };
 
   return (
@@ -280,7 +280,7 @@ const SettingsPage: RouteComponent = () => {
         <p className="text-gray-600 mt-1">Manage your account preferences.</p>
       </div>
 
-      {saved.value && (
+      {saved() && (
         <Alert variant="success">Settings saved successfully!</Alert>
       )}
 
@@ -289,14 +289,14 @@ const SettingsPage: RouteComponent = () => {
         <form onSubmit={handleSave} className="space-y-4">
           <Input
             label="Full Name"
-            value={name.value}
-            onInput={(e) => { name.value = e.currentTarget.value; }}
+            value={name()}
+            onInput={(e) => { setName(e.currentTarget.value); }}
           />
           <Input
             label="Email"
             type="email"
-            value={email.value}
-            onInput={(e) => { email.value = e.currentTarget.value; }}
+            value={email()}
+            onInput={(e) => { setEmail(e.currentTarget.value); }}
           />
           <div className="flex justify-end">
             <Button variant="primary" type="submit">Save Changes</Button>

package/dist/templates/project-templates/saas/saas.js

@@ -103,11 +103,11 @@ const Layout: RouteComponent = ({ children }) => {
 
 export default Layout;`,
     "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 import { Button, Card, Badge } from '@emberkit/ui';
 
 const HomePage: RouteComponent = () => {
-  const annual = signal(false);
+  const [annual, setAnnual] = createSignal(false);
 
   const features = [
     { icon: '⚡', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
@@ -121,8 +121,8 @@ const HomePage: RouteComponent = () => {
   const plans = [
     {
       name: 'Starter',
-      price: annual.value ? '$0' : '$0',
-      period: annual.value ? '/year' : '/month',
+      price: annual() ? '$0' : '$0',
+      period: annual() ? '/year' : '/month',
       desc: 'Perfect for side projects',
       features: ['1 user', '5 projects', '1GB storage', 'Community support'],
       cta: 'Get Started Free',
@@ -130,8 +130,8 @@ const HomePage: RouteComponent = () => {
     },
     {
       name: 'Pro',
-      price: annual.value ? '$199' : '$19',
-      period: annual.value ? '/year' : '/month',
+      price: annual() ? '$199' : '$19',
+      period: annual() ? '/year' : '/month',
       desc: 'For growing teams',
       features: ['10 users', 'Unlimited projects', '50GB storage', 'Priority support', 'Analytics', 'API access'],
       cta: 'Start Free Trial',
@@ -211,14 +211,14 @@ const HomePage: RouteComponent = () => {
             <p className="text-lg text-slate-600 mb-8">Choose the plan that works for your team</p>
             <div className="inline-flex items-center gap-3 p-1 bg-white rounded-lg border border-slate-200">
               <button
-                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${!annual.value ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
-                onClick={() => { annual.value = false; }}
+                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${!annual() ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
+                onClick={() => { setAnnual(false); }}
               >
                 Monthly
               </button>
               <button
-                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${annual.value ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
-                onClick={() => { annual.value = true; }}
+                className={\`px-4 py-2 text-sm font-medium rounded-md transition-colors \${annual() ? 'bg-brand-600 text-white' : 'text-slate-600'}\`}
+                onClick={() => { setAnnual(true); }}
               >
                 Annual <span className="text-brand-600 ml-1 font-semibold">-20%</span>
               </button>
@@ -280,19 +280,19 @@ export default HomePage;`,
     "src/routes/login.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 import { Button, Input, Card } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const LoginPage: RouteComponent = () => {
-  const email = signal('');
-  const password = signal('');
-  const error = signal<string | null>(null);
+  const [email, setEmail] = createSignal('');
+  const [password, setPassword] = createSignal('');
+  const [error, setError] = createSignal<string | null>(null);
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    error.value = null;
+    setError(null);
 
-    if (!email.value || !password.value) {
-      error.value = 'Please fill in all fields';
+    if (!email() || !password()) {
+      setError('Please fill in all fields');
       return;
     }
 
@@ -315,18 +315,18 @@ const LoginPage: RouteComponent = () => {
               label="Email"
               type="email"
               placeholder="you@example.com"
-              value={email.value}
-              onInput={(e) => { email.value = e.currentTarget.value; }}
+              value={email()}
+              onInput={(e) => { setEmail(e.currentTarget.value); }}
             />
             <Input
               label="Password"
               type="password"
               placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
-              value={password.value}
-              onInput={(e) => { password.value = e.currentTarget.value; }}
+              value={password()}
+              onInput={(e) => { setPassword(e.currentTarget.value); }}
             />
-            {error.value && (
-              <p className="text-red-500 text-sm">{error.value}</p>
+            {error() && (
+              <p className="text-red-500 text-sm">{error()}</p>
             )}
             <div className="flex items-center justify-between text-sm">
               <label className="flex items-center gap-2">
@@ -350,20 +350,20 @@ export default LoginPage;`,
     "src/routes/signup.tsx": `import type { RouteComponent } from '@emberkit/core';
 import { Head } from '@emberkit/core';
 import { Button, Input, Card } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const SignupPage: RouteComponent = () => {
-  const name = signal('');
-  const email = signal('');
-  const password = signal('');
-  const error = signal<string | null>(null);
+  const [name, setName] = createSignal('');
+  const [email, setEmail] = createSignal('');
+  const [password, setPassword] = createSignal('');
+  const [error, setError] = createSignal<string | null>(null);
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    error.value = null;
+    setError(null);
 
-    if (!name.value || !email.value || !password.value) {
-      error.value = 'Please fill in all fields';
+    if (!name() || !email() || !password()) {
+      setError('Please fill in all fields');
       return;
     }
 
@@ -385,25 +385,25 @@ const SignupPage: RouteComponent = () => {
             <Input
               label="Full Name"
               placeholder="John Doe"
-              value={name.value}
-              onInput={(e) => { name.value = e.currentTarget.value; }}
+              value={name()}
+              onInput={(e) => { setName(e.currentTarget.value); }}
             />
             <Input
               label="Email"
               type="email"
               placeholder="you@example.com"
-              value={email.value}
-              onInput={(e) => { email.value = e.currentTarget.value; }}
+              value={email()}
+              onInput={(e) => { setEmail(e.currentTarget.value); }}
             />
             <Input
               label="Password"
               type="password"
               placeholder="8+ characters"
-              value={password.value}
-              onInput={(e) => { password.value = e.currentTarget.value; }}
+              value={password()}
+              onInput={(e) => { setPassword(e.currentTarget.value); }}
             />
-            {error.value && (
-              <p className="text-red-500 text-sm">{error.value}</p>
+            {error() && (
+              <p className="text-red-500 text-sm">{error()}</p>
             )}
             <p className="text-xs text-slate-500">
               By signing up, you agree to our {' '}

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

@@ -77,7 +77,7 @@ const Layout: RouteComponent = ({ children }) => {
             <nav className="flex items-center gap-6">
               <a href="/" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">Home</a>
               <a href="/about" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">About</a>
-              <a href="https://emberkit.dev/docs" target="_blank" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
+              <a href="https://emberkit.orangeember.com" target="_blank" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
                 Docs <span className="text-xs">&#8599;</span>
               </a>
             </nav>
@@ -85,7 +85,7 @@ const Layout: RouteComponent = ({ children }) => {
         </header>
         <main className="relative z-10 flex-1">{children}</main>
         <footer className="relative z-10 border-t border-slate-800/50 py-8 text-center text-sm text-slate-500">
-          <p>Built with <a href="https://emberkit.dev" className="text-ember-500 hover:underline">EmberKit</a></p>
+          <p>Built with <a href="https://emberkit.orangeember.com" className="text-ember-500 hover:underline">EmberKit</a></p>
         </footer>
       </div>
     </>
@@ -94,10 +94,10 @@ const Layout: RouteComponent = ({ children }) => {
 
 export default Layout;`,
     "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
 
 const HomePage: RouteComponent = () => {
-  const count = signal(0);
+  const [count, setCount] = createSignal(0);
 
   return (
     <div className="relative max-w-6xl mx-auto px-6 py-16 space-y-24">
@@ -115,7 +115,7 @@ const HomePage: RouteComponent = () => {
           <a href="/about" className="px-6 py-3 bg-ember-500 hover:bg-ember-600 text-white font-semibold rounded-lg transition-all hover:scale-105 shadow-lg shadow-ember-500/20">
             Learn More
           </a>
-          <a href="https://emberkit.dev/docs" target="_blank" className="px-6 py-3 border border-slate-700 hover:border-ember-500 text-slate-300 hover:text-ember-500 font-semibold rounded-lg transition-all">
+          <a href="https://emberkit.orangeember.com" target="_blank" className="px-6 py-3 border border-slate-700 hover:border-ember-500 text-slate-300 hover:text-ember-500 font-semibold rounded-lg transition-all">
             Read Docs &#8594;
           </a>
         </div>
@@ -142,14 +142,14 @@ const HomePage: RouteComponent = () => {
         <div className="flex items-center justify-center gap-6">
           <button
             className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
-            onClick={() => count.value--}
+            onClick={() => setCount(c => c - 1)}
           >
             &#8722;
           </button>
-          <span className="text-5xl font-bold tabular-nums min-w-[80px] bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-400">{count}</span>
+          <span className="text-5xl font-bold tabular-nums min-w-[80px] text-amber-400" data-ek-bind={count}>{count()}</span>
           <button
             className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all hover:scale-110"
-            onClick={() => count.value++}
+            onClick={() => setCount(c => c + 1)}
           >
             +
           </button>

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

@@ -80,7 +80,7 @@ const Layout: RouteComponent = ({ children }) => {
             <nav className="flex items-center gap-8">
               <a href="/" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">Home</a>
               <a href="/about" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">About</a>
-              <a href="https://emberkit.dev/docs" target="_blank" rel="noopener noreferrer" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
+              <a href="https://emberkit.orangeember.com" target="_blank" rel="noopener noreferrer" className="text-slate-400 hover:text-ember-500 font-medium transition-colors">
                 Docs <span className="text-xs">&#8599;</span>
               </a>
             </nav>
@@ -94,7 +94,7 @@ const Layout: RouteComponent = ({ children }) => {
         </main>
 
         <footer className="relative z-10 border-t border-slate-800/50 py-8 text-center text-sm text-slate-500">
-          <p>Built with <a href="https://emberkit.dev" className="text-ember-500 hover:underline">EmberKit</a></p>
+          <p>Built with <a href="https://emberkit.orangeember.com" className="text-ember-500 hover:underline">EmberKit</a></p>
         </footer>
       </div>
     </>
@@ -103,196 +103,179 @@ const Layout: RouteComponent = ({ children }) => {
 
 export default Layout;`,
     "src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
-import { Button, Card, Heading, Text, Badge, Input } from '@emberkit/ui';
-import { signal } from '@emberkit/core';
+import { createSignal } from '@emberkit/core';
+import {
+  Button,
+  Card,
+  Heading,
+  Text,
+  Badge,
+  Tabs,
+  Alert,
+  Icon,
+} from '@emberkit/ui';
 
 const HomePage: RouteComponent = () => {
-  const email = signal('');
-  const activeTab = signal('buttons');
+  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' },
+  ];
+
+  const components = [
+    { name: 'Button', desc: 'Multiple variants and sizes for all use cases' },
+    { name: 'Card', desc: 'Flexible container component with padding options' },
+    { name: 'Badge', desc: 'Status indicators with different variants' },
+    { name: 'Alert', desc: 'Notification component for important messages' },
+    { name: 'Tabs', desc: 'Organized content switching interface' },
+    { name: 'Input', desc: 'Styled form input with validation support' },
+  ];
 
   return (
     <div className="relative space-y-24">
-      {/* Hero */}
+      {/* Hero Section */}
       <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 animate-fade-in-down">
-          <Badge variant="primary" className="mb-6 inline-flex">
-            &#10024; Built with EmberKit UI
+        <div className="relative z-10 space-y-6 animate-fade-in-down">
+          <Badge variant="primary" className="inline-block">
+            ✨ Welcome to {{name}}
           </Badge>
-          <Heading level="h1" size="4xl" weight="bold" className="mb-6">
-            Welcome to{' '}
-            <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">
-              {{name}}
-            </span>
+          <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>
           </Heading>
-          <Text size="xl" color="muted" className="max-w-2xl mx-auto mb-10">
-            A modern starter template with EmberKit UI components and Tailwind CSS.
-            Build beautiful interfaces with our pre-built component library.
+          <Text size="xl" color="muted" className="max-w-2xl mx-auto">
+            A modern, component-driven template using the EmberKit design system. Beautiful, accessible, and production-ready.
           </Text>
-          <div className="flex gap-4 justify-center flex-wrap">
-            <Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/20 hover:shadow-ember-500/40 transition-shadow">
+          <div className="flex gap-4 justify-center flex-wrap pt-4">
+            <Button variant="primary" size="lg">
               Get Started
             </Button>
             <Button variant="secondary" size="lg">
-              View Docs &#8594;
+              View Docs →
             </Button>
           </div>
         </div>
       </section>
 
-      {/* Features Grid */}
+      {/* Features Grid using Cards */}
       <section>
-        <Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
+        <Heading level="h2" size="2xl" weight="semibold" className="text-center mb-2">
           Why EmberKit?
         </Heading>
-        <Text color="muted" className="text-center mb-10 max-w-lg mx-auto">
+        <Text color="muted" className="text-center mb-12 max-w-lg mx-auto">
           Everything you need to build fast, beautiful web applications.
         </Text>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {[
-            { icon: '&#9889;', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
-            { icon: '&#128303;', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
-            { icon: '&#128726;', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
-          ].map((f, i) => (
-            <Card key={f.title} padding="lg" className="relative group hover:border-ember-500/50 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
+          {features.map((feature) => (
+            <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">
-                <div className="w-12 h-12 rounded-xl bg-ember-500/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
-                  {f.icon}
-                </div>
-                <Heading level="h3" size="lg" weight="semibold" className="mb-2">
-                  {f.title}
+              <div className="relative space-y-3">
+                <div className="text-3xl">{feature.icon}</div>
+                <Heading level="h3" size="md" weight="semibold">
+                  {feature.title}
                 </Heading>
-                <Text color="muted">{f.desc}</Text>
+                <Text color="muted" size="sm">
+                  {feature.desc}
+                </Text>
               </div>
             </Card>
           ))}
         </div>
       </section>
 
-      {/* Component Showcase */}
+      {/* Component Showcase with Tabs */}
       <section>
-        <Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
-          UI Components
+        <Heading level="h2" size="2xl" weight="semibold" className="text-center mb-2">
+          Design System Components
         </Heading>
-        <Text color="muted" className="text-center mb-8">
-          Explore our pre-built component library.
+        <Text color="muted" className="text-center mb-8 max-w-lg mx-auto">
+          Pre-built, accessible components ready to use in your project.
         </Text>
 
-        {/* Tabs */}
-        <div className="flex justify-center mb-8">
-          <div className="inline-flex p-1 rounded-lg bg-slate-800/50 border border-slate-700/50">
-            {[
-              { id: 'buttons', label: 'Buttons' },
-              { id: 'cards', label: 'Cards' },
-              { id: 'forms', label: 'Forms' },
-            ].map((tab) => (
-              <button
-                key={tab.id}
-                className={\`px-4 py-2 text-sm font-medium rounded-md transition-all \${activeTab.value === tab.id ? 'bg-ember-500 text-white shadow-md' : 'text-slate-400 hover:text-slate-200'}\`}
-                onClick={() => { activeTab.value = tab.id; }}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Tab Content */}
-        {activeTab.value === 'buttons' && (
-          <Card padding="xl" className="max-w-2xl mx-auto">
-            <div className="text-center mb-6">
-              <Badge variant="primary" className="mb-2">Buttons</Badge>
-              <Heading level="h3" size="lg" weight="semibold">Button Variants</Heading>
-            </div>
-            <div className="flex flex-wrap gap-3 justify-center">
-              <Button variant="primary">Primary</Button>
-              <Button variant="secondary">Secondary</Button>
-              <Button variant="ghost">Ghost</Button>
-              <Button variant="primary" size="sm">Small</Button>
-              <Button variant="secondary" size="lg">Large</Button>
-            </div>
-            <div className="mt-6 pt-6 border-t border-slate-700/50">
-              <Heading level="h4" size="sm" weight="semibold" className="mb-3 text-slate-400">With Icons</Heading>
-              <div className="flex flex-wrap gap-3 justify-center">
-                <Button variant="primary">&#9889; Get Started</Button>
-                <Button variant="secondary">Learn More &#8594;</Button>
-                <Button variant="ghost">&#10084; Like</Button>
+        <div className="space-y-8">
+          {/* Buttons Section */}
+          <Card padding="xl">
+            <Heading level="h3" size="lg" weight="semibold" className="mb-6">
+              Button Component
+            </Heading>
+            <div className="space-y-4">
+              <Text color="muted" size="sm">
+                The Button component comes in multiple variants and sizes for different use cases.
+              </Text>
+              <div className="flex flex-wrap gap-2 pt-4">
+                <Button variant="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="primary" size="sm">Small</Button>
+                <Button variant="secondary" size="lg">Large</Button>
               </div>
             </div>
           </Card>
-        )}
-
-        {activeTab.value === 'cards' && (
-          <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
-            <Card padding="lg" className="hover:border-ember-500/50 transition-colors">
-              <Badge variant="success" className="mb-3">Analytics</Badge>
-              <Heading level="h3" size="lg" weight="semibold" className="mb-2">
-                Revenue Growth
-              </Heading>
-              <div className="text-3xl font-bold text-ember-400 mb-1">$45,231</div>
-              <Text color="muted" className="text-sm">+20.1% from last month</Text>
-              <div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
-                <div className="h-full w-3/4 rounded-full bg-gradient-to-r from-ember-500 to-amber-500" />
-              </div>
-            </Card>
-            <Card padding="lg" className="hover:border-ember-500/50 transition-colors">
-              <Badge variant="info" className="mb-3">Users</Badge>
-              <Heading level="h3" size="lg" weight="semibold" className="mb-2">
-                Active Users
-              </Heading>
-              <div className="text-3xl font-bold text-blue-400 mb-1">2,338</div>
-              <Text color="muted" className="text-sm">+15.3% from last month</Text>
-              <div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
-                <div className="h-full w-1/2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500" />
-              </div>
-            </Card>
-          </div>
-        )}
 
-        {activeTab.value === 'forms' && (
-          <Card padding="xl" className="max-w-md mx-auto">
-            <div className="text-center mb-6">
-              <Badge variant="info" className="mb-2">Forms</Badge>
-              <Heading level="h3" size="lg" weight="semibold">Newsletter Signup</Heading>
+          {/* Badge & Alert Section */}
+          <Card padding="xl">
+            <Heading level="h3" size="lg" weight="semibold" className="mb-6">
+              Status Components
+            </Heading>
+            <div className="space-y-6">
+              <div>
+                <Text weight="semibold" className="mb-3">Badges</Text>
+                <div className="flex flex-wrap gap-2">
+                  <Badge variant="primary">Primary</Badge>
+                  <Badge variant="success">Success</Badge>
+                  <Badge variant="warning">Warning</Badge>
+                  <Badge variant="info">Info</Badge>
+                </div>
+              </div>
+              <Alert variant="success">
+                ✓ This is a success alert message. Use it to confirm important actions.
+              </Alert>
+              <Alert variant="info">
+                ℹ This is an info alert. Useful for displaying helpful information.
+              </Alert>
             </div>
-            <div className="space-y-4">
-              <Input
-                label="Name"
-                placeholder="John Doe"
-              />
-              <Input
-                label="Email"
-                type="email"
-                placeholder="you@example.com"
-                value={email.value}
-                onChange={(e) => { email.value = e.currentTarget.value; }}
-              />
-              <Button variant="primary" className="w-full shadow-lg shadow-ember-500/20">
-                Subscribe &#10148;
-              </Button>
+          </Card>
+
+          {/* Components Grid */}
+          <Card padding="xl">
+            <Heading level="h3" size="lg" weight="semibold" className="mb-6">
+              Available Components
+            </Heading>
+            <div className="grid md:grid-cols-2 gap-4">
+              {components.map((comp) => (
+                <div key={comp.name} className="p-4 rounded-lg bg-slate-800/30 border border-slate-700/50">
+                  <Text weight="semibold" size="sm">{comp.name}</Text>
+                  <Text color="muted" size="xs" className="mt-1">{comp.desc}</Text>
+                </div>
+              ))}
             </div>
           </Card>
-        )}
+        </div>
       </section>
 
-      {/* CTA */}
+      {/* CTA Section */}
       <section className="relative py-20">
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
           <div className="w-[500px] h-[200px] rounded-full bg-ember-500/10 blur-[100px]" />
         </div>
-        <div className="relative z-10 text-center">
+        <Card padding="xl" className="relative z-10 max-w-2xl mx-auto text-center">
           <Heading level="h2" size="2xl" weight="semibold" className="mb-4">
-            Ready to build something amazing?
+            Ready to Build?
           </Heading>
-          <Text color="muted" className="max-w-xl mx-auto mb-8">
+          <Text color="muted" className="mb-8">
             Start building your next project with EmberKit's powerful components and TypeScript-first API.
           </Text>
-          <Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/25 hover:shadow-ember-500/40 transition-shadow">
-            Create Project &#10148;
-          </Button>
-        </div>
+          <div className="flex gap-4 justify-center">
+            <Button variant="primary" size="lg">
+              Create Project →
+            </Button>
+            <Button variant="secondary" size="lg">
+              Learn More
+            </Button>
+          </div>
+        </Card>
       </section>
     </div>
   );
@@ -301,9 +284,18 @@ 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 } from '@emberkit/ui';
+import { Heading, Text, Button, Card, Badge, Alert } 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' },
+  ];
+
+  const techStack = ['EmberKit', 'TypeScript', 'Tailwind CSS', 'Vite', 'JSX', 'Design System'];
+
   return (
     <>
       <Head>
@@ -311,59 +303,69 @@ const AboutPage: RouteComponent = () => {
       </Head>
       <div className="max-w-3xl mx-auto space-y-12">
         {/* Header */}
-        <div className="text-center">
-          <Badge variant="primary" className="mb-4 inline-flex">About</Badge>
+        <div className="text-center space-y-4">
+          <Badge variant="primary" className="inline-block">
+            About Us
+          </Badge>
           <Heading level="h1" size="3xl" weight="bold">
-            About {' '}
-            <span className="bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
+            About <span className="bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
           </Heading>
+          <Text size="lg" color="muted" className="max-w-2xl mx-auto">
+            A modern, component-driven project built with EmberKit and the UI design system.
+          </Text>
         </div>
 
-        {/* Description */}
+        {/* Description Card */}
         <Card padding="xl" className="border-ember-500/20">
           <Text size="lg" color="muted" className="leading-relaxed">
-            This project was created with EmberKit and the UI component library.
-            It demonstrates how to build modern, beautiful interfaces with our
-            pre-built components and Tailwind CSS.
+            This project demonstrates how to build modern, beautiful interfaces with EmberKit's pre-built components and Tailwind CSS.
+            It showcases best practices in component-driven development, accessible design, and TypeScript-first architecture.
           </Text>
         </Card>
 
-        {/* Features */}
-        <div className="grid sm:grid-cols-2 gap-4">
-          {[
-            { icon: '&#128268;', title: 'TypeScript-first', desc: 'Full type safety with intelligent autocomplete' },
-            { icon: '&#127912;', title: 'UI Components', desc: 'Pre-built atoms, molecules, and organisms' },
-            { icon: '&#127752;', title: 'Tailwind CSS', desc: 'Utility-first styling with custom theme' },
-            { icon: '&#128726;', title: 'File Routing', desc: 'Automatic routes from your file structure' },
-          ].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>
-              <Heading level="h3" size="md" weight="semibold" className="mb-1">
-                {f.title}
-              </Heading>
-              <Text color="muted" size="sm">{f.desc}</Text>
-            </Card>
-          ))}
-        </div>
-
-        {/* Tech Stack */}
-        <Card padding="xl">
-          <Heading level="h3" size="lg" weight="semibold" className="mb-4 text-center">
-            Tech Stack
+        {/* Features Grid */}
+        <section>
+          <Heading level="h2" size="xl" weight="semibold" className="mb-6">
+            Key Features
           </Heading>
-          <div className="flex flex-wrap gap-2 justify-center">
-            {['EmberKit', 'TypeScript', 'Tailwind CSS', 'Vite', 'JSX'].map((tech) => (
-              <Badge key={tech} variant="primary" className="px-3 py-1.5">
-                {tech}
-              </Badge>
+          <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>
+                <Heading level="h3" size="md" weight="semibold" className="mb-1">
+                  {f.title}
+                </Heading>
+                <Text color="muted" size="sm">{f.desc}</Text>
+              </Card>
             ))}
           </div>
-        </Card>
+        </section>
+
+        {/* Tech Stack */}
+        <section>
+          <Card padding="xl">
+            <Heading level="h3" size="lg" weight="semibold" className="mb-6 text-center">
+              Tech Stack
+            </Heading>
+            <div className="flex flex-wrap gap-2 justify-center">
+              {techStack.map((tech) => (
+                <Badge key={tech} variant="primary" className="px-3 py-1.5">
+                  {tech}
+                </Badge>
+              ))}
+            </div>
+          </Card>
+        </section>
+
+        {/* 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.
+        </Alert>
 
-        {/* Back */}
-        <div className="text-center">
+        {/* Back Button */}
+        <div className="text-center pt-4">
           <Button variant="secondary">
-            &#8592; Back to Home
+            ← Back to Home
           </Button>
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emberkit/cli",
-  "version": "0.6.1-alpha.1",
+  "version": "0.6.1-alpha.11",
   "type": "module",
   "private": false,
   "description": "CLI tool for EmberKit projects",