create-mantiq 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mantiq",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Scaffold a new MantiqJS application",
   "type": "module",
   "license": "MIT",

package/src/kits/react.ts

@@ -297,12 +297,41 @@ export default function Dashboard({ appName = '${ctx.name}', currentUser, users:
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
-      <nav className="border-b border-gray-200 dark:border-gray-800/80 bg-white/90 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
-        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
-          <span className="text-sm font-bold text-gray-900 dark:text-white">{appName}</span>
+    <div className="min-h-screen flex bg-gray-50 dark:bg-gray-950">
+      {/* Sidebar */}
+      <aside className="w-60 fixed inset-y-0 left-0 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col z-30">
+        <div className="h-14 flex items-center px-5 border-b border-gray-200 dark:border-gray-800">
+          <span className="text-sm font-semibold text-gray-900 dark:text-white">{appName}</span>
+        </div>
+        <nav className="flex-1 px-3 py-3 space-y-0.5">
+          <a href="/dashboard" className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
+            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+            Dashboard
+          </a>
+          <a href="#users-section" onClick={(e) => { e.preventDefault(); document.getElementById('users-section')?.scrollIntoView({ behavior: 'smooth' }) }} className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
+            Users
+          </a>
+        </nav>
+        <div className="px-3 py-3 mt-auto border-t border-gray-200 dark:border-gray-800 space-y-0.5">
+          <a href="/_heartbeat" className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064" /></svg>
+            Heartbeat
+          </a>
+          <a href="/api/ping" className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+            API Ping
+          </a>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <div className="flex-1 ml-60">
+        {/* Top bar */}
+        <header className="h-14 border-b border-gray-200 dark:border-gray-800 bg-white/90 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20 flex items-center justify-between px-6">
+          <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200">Dashboard</h1>
           <div className="flex items-center gap-3">
-            <button onClick={toggleTheme} className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" title="Toggle theme">
+            <button onClick={toggleTheme} className="p-1.5 rounded-lg text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" title="Toggle theme">
               {isDark ? (
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
@@ -314,73 +343,52 @@ export default function Dashboard({ appName = '${ctx.name}', currentUser, users:
               )}
             </button>
             <span className="text-xs text-gray-500 dark:text-gray-400">{currentUser?.name}</span>
-            <button onClick={handleLogout}
-              className="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-800 rounded-lg px-3 py-1.5 transition-colors">
+            <button onClick={handleLogout} className="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 transition-colors">
               Logout
             </button>
           </div>
-        </div>
-      </nav>
+        </header>
 
-      <main className="max-w-5xl mx-auto px-6 py-8 space-y-6 animate-fade-up">
-        <div>
-          <h1 className="text-xl font-bold text-gray-900 dark:text-white">Welcome back, {currentUser?.name}</h1>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Here's what's happening with your application.</p>
-        </div>
+        {/* Content */}
+        <main className="p-6 space-y-6 animate-fade-up">
+          <div className="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
+            <h2 className="text-lg font-bold text-gray-900 dark:text-white">Welcome back, {currentUser?.name}</h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Here's what's happening with your application.</p>
+          </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <a href="/heartbeat" className="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-500/40 transition-colors">
-            <div className="flex items-center justify-between">
-              <div>
-                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-200">Heartbeat Dashboard</h3>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Monitor application health</p>
-              </div>
-              <span className="text-emerald-600 dark:text-emerald-400 text-sm group-hover:translate-x-0.5 transition-transform">&rarr;</span>
+          <div id="users-section" className="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+              <h2 className="text-sm font-bold text-gray-900 dark:text-gray-200">Users</h2>
+              <span className="text-xs text-gray-500 dark:text-gray-400">{loading ? 'Loading...' : \`\${users.length} total\`}</span>
             </div>
-          </a>
-          <a href="/api/ping" className="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-500/40 transition-colors">
-            <div className="flex items-center justify-between">
-              <div>
-                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-200">API Ping</h3>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Test API connectivity</p>
-              </div>
-              <span className="text-emerald-600 dark:text-emerald-400 text-sm group-hover:translate-x-0.5 transition-transform">&rarr;</span>
-            </div>
-          </a>
-        </div>
-
-        <div className="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
-          <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
-            <h2 className="text-sm font-bold text-gray-900 dark:text-gray-200">Users</h2>
-            <span className="text-xs text-gray-500 dark:text-gray-400">{loading ? 'Loading...' : \`\${users.length} total\`}</span>
-          </div>
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                <th className="px-5 py-3 font-medium">Name</th>
-                <th className="px-5 py-3 font-medium">Email</th>
-                <th className="px-5 py-3 font-medium">Role</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-100 dark:divide-gray-800/60">
-              {users.map((u) => (
-                <tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors">
-                  <td className="px-5 py-3 text-gray-900 dark:text-gray-200">{u.name}</td>
-                  <td className="px-5 py-3 text-gray-500 dark:text-gray-400">{u.email}</td>
-                  <td className="px-5 py-3">
-                    <span className={\`text-[10px] px-2 py-0.5 rounded-full font-medium \${
-                      u.role === 'admin' ? 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-500/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700'
-                    }\`}>{u.role}</span>
-                  </td>
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-100 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-5 py-3 font-medium">Name</th>
+                  <th className="px-5 py-3 font-medium">Email</th>
+                  <th className="px-5 py-3 font-medium">Role</th>
                 </tr>
-              ))}
-              {users.length === 0 && !loading && (
-                <tr><td colSpan={3} className="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td></tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      </main>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-800/60">
+                {users.map((u) => (
+                  <tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors">
+                    <td className="px-5 py-3 text-gray-900 dark:text-gray-200">{u.name}</td>
+                    <td className="px-5 py-3 text-gray-500 dark:text-gray-400">{u.email}</td>
+                    <td className="px-5 py-3">
+                      <span className={\`text-[10px] px-2 py-0.5 rounded-full font-medium \${
+                        u.role === 'admin' ? 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-500/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700'
+                      }\`}>{u.role}</span>
+                    </td>
+                  </tr>
+                ))}
+                {users.length === 0 && !loading && (
+                  <tr><td colSpan={3} className="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td></tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </main>
+      </div>
     </div>
   )
 }

package/src/kits/svelte.ts

@@ -96,6 +96,13 @@ export function render(_url: string, data?: Record<string, any>) {
 
   $: PageComponent = pages[currentPage] ?? null
 
+  // Initialize theme immediately to prevent flash
+  if (typeof window !== 'undefined') {
+    const theme = localStorage.getItem('theme') ||
+      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+  }
+
   async function navigate(href: string) {
     const res = await fetch(href, {
       headers: { 'X-Mantiq': 'true', Accept: 'application/json' },
@@ -272,7 +279,7 @@ export function render(_url: string, data?: Record<string, any>) {
 `,
 
     'src/pages/Dashboard.svelte': `<script lang="ts">
-  import { onMount } from 'svelte'
+  import { onMount, getContext } from 'svelte'
   import { api, post } from '../lib/api.ts'
 
   export let appName: string = '${ctx.name}'
@@ -280,10 +287,21 @@ export function render(_url: string, data?: Record<string, any>) {
   export let users: any[] = []
   export let navigate: (href: string) => void
 
+  const ctxNavigate = getContext<(href: string) => void>('navigate')
+
   let localUsers: any[] = users ?? []
   let loading = !users?.length
   let isDark = true
 
+  const navItems = [
+    { label: 'Dashboard', icon: 'grid', href: '/dashboard', active: true },
+  ]
+
+  const bottomLinks = [
+    { label: 'Heartbeat', icon: 'heart', href: '/heartbeat' },
+    { label: 'API Ping', icon: 'zap', href: '/api/ping' },
+  ]
+
   async function fetchUsers() {
     loading = true
     const { ok, data } = await api('/api/users')
@@ -293,7 +311,7 @@ export function render(_url: string, data?: Record<string, any>) {
 
   async function handleLogout() {
     await post('/logout', {})
-    navigate('/login')
+    ;(navigate ?? ctxNavigate)('/login')
   }
 
   function toggleTheme() {
@@ -310,10 +328,56 @@ export function render(_url: string, data?: Record<string, any>) {
   })
 </script>
 
-<div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
-  <nav class="border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
-    <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
-      <span class="text-sm font-bold text-gray-900 dark:text-white">{appName}</span>
+<div class="min-h-screen flex bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
+  <!-- Sidebar -->
+  <aside class="w-60 flex-shrink-0 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col fixed inset-y-0 left-0 z-30">
+    <!-- App name -->
+    <div class="h-14 flex items-center px-5 border-b border-gray-200 dark:border-gray-800">
+      <div class="flex items-center gap-2.5">
+        <div class="w-7 h-7 rounded-lg bg-emerald-600 flex items-center justify-center">
+          <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+        </div>
+        <span class="text-sm font-bold text-gray-900 dark:text-white">{appName}</span>
+      </div>
+    </div>
+
+    <!-- Nav items -->
+    <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+      {#each navItems as item}
+        <a href={item.href}
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
+            {item.active
+              ? 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'}">
+          {#if item.icon === 'grid'}
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+          {/if}
+          {item.label}
+        </a>
+      {/each}
+    </nav>
+
+    <!-- Bottom links -->
+    <div class="px-3 py-4 border-t border-gray-200 dark:border-gray-800 space-y-1">
+      {#each bottomLinks as link}
+        <a href={link.href}
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+          {#if link.icon === 'heart'}
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+          {:else if link.icon === 'zap'}
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+          {/if}
+          {link.label}
+        </a>
+      {/each}
+    </div>
+  </aside>
+
+  <!-- Main content -->
+  <div class="flex-1 ml-60 flex flex-col min-h-screen">
+    <!-- Header -->
+    <header class="h-14 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
+      <h1 class="text-sm font-semibold text-gray-900 dark:text-white">Dashboard</h1>
       <div class="flex items-center gap-3">
         <button on:click={toggleTheme} class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle theme">
           {#if isDark}
@@ -325,66 +389,48 @@ export function render(_url: string, data?: Record<string, any>) {
         <span class="text-xs text-gray-500 dark:text-gray-400">{currentUser?.name}</span>
         <button on:click={handleLogout} class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-800 rounded-lg px-3 py-1.5 transition-colors">Logout</button>
       </div>
-    </div>
-  </nav>
-
-  <main class="max-w-5xl mx-auto px-6 py-8 space-y-6 animate-fade-up">
-    <div>
-      <h1 class="text-xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Welcome back, {currentUser?.name}.</p>
-    </div>
+    </header>
+
+    <!-- Page content -->
+    <main class="flex-1 px-6 py-8 space-y-6 animate-fade-up">
+      <!-- Welcome card -->
+      <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
+        <h2 class="text-lg font-bold text-gray-900 dark:text-white">Welcome back, {currentUser?.name}</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Here's what's happening with your application.</p>
+      </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <a href="/heartbeat" class="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-300 dark:hover:border-emerald-500/40 transition-colors">
-        <div class="flex items-center justify-between">
-          <div>
-            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Heartbeat Dashboard</h3>
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Monitor application health</p>
-          </div>
-          <span class="text-emerald-600 dark:text-emerald-400 group-hover:translate-x-0.5 transition-transform">&rarr;</span>
-        </div>
-      </a>
-      <a href="/api/ping" class="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-300 dark:hover:border-emerald-500/40 transition-colors">
-        <div class="flex items-center justify-between">
-          <div>
-            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">API Ping</h3>
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Test API connectivity</p>
-          </div>
-          <span class="text-emerald-600 dark:text-emerald-400 group-hover:translate-x-0.5 transition-transform">&rarr;</span>
+      <!-- Users table -->
+      <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+        <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+          <h2 class="text-sm font-bold text-gray-900 dark:text-gray-200">Users</h2>
+          <span class="text-xs text-gray-500 dark:text-gray-400">{loading ? 'Loading...' : localUsers.length + ' total'}</span>
         </div>
-      </a>
-    </div>
-
-    <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
-      <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
-        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-200">Users</h2>
-        <span class="text-xs text-gray-500 dark:text-gray-400">{loading ? 'Loading...' : localUsers.length + ' total'}</span>
-      </div>
-      <table class="w-full text-sm">
-        <thead>
-          <tr class="border-b border-gray-200 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-            <th class="px-5 py-3 font-medium">Name</th>
-            <th class="px-5 py-3 font-medium">Email</th>
-            <th class="px-5 py-3 font-medium">Role</th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-100 dark:divide-gray-800/60">
-          {#each localUsers as u (u.id)}
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
-              <td class="px-5 py-3 text-gray-900 dark:text-gray-200">{u.name}</td>
-              <td class="px-5 py-3 text-gray-500 dark:text-gray-400">{u.email}</td>
-              <td class="px-5 py-3">
-                <span class="text-[10px] px-2 py-0.5 rounded-full font-medium border {u.role === 'admin' ? 'bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'}">{u.role}</span>
-              </td>
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-gray-200 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              <th class="px-5 py-3 font-medium">Name</th>
+              <th class="px-5 py-3 font-medium">Email</th>
+              <th class="px-5 py-3 font-medium">Role</th>
             </tr>
-          {/each}
-          {#if localUsers.length === 0 && !loading}
-            <tr><td colspan="3" class="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td></tr>
-          {/if}
-        </tbody>
-      </table>
-    </div>
-  </main>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-800/60">
+            {#each localUsers as u (u.id)}
+              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
+                <td class="px-5 py-3 text-gray-900 dark:text-gray-200">{u.name}</td>
+                <td class="px-5 py-3 text-gray-500 dark:text-gray-400">{u.email}</td>
+                <td class="px-5 py-3">
+                  <span class="text-[10px] px-2 py-0.5 rounded-full font-medium border {u.role === 'admin' ? 'bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'}">{u.role}</span>
+                </td>
+              </tr>
+            {/each}
+            {#if localUsers.length === 0 && !loading}
+              <tr><td colspan="3" class="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td></tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  </div>
 </div>
 `,
   }

package/src/kits/vue.ts

@@ -120,7 +120,7 @@ onMounted(() => {
 
   // Initialize theme: localStorage > system preference > dark default
   const theme = localStorage.getItem('theme') ||
-    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'dark')
+    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
   document.documentElement.classList.toggle('dark', theme === 'dark')
 })
 
@@ -327,7 +327,7 @@ async function handleSubmit() {
 `,
 
     'src/pages/Dashboard.vue': `<script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, inject } from 'vue'
 import { api, post } from '../lib/api.ts'
 
 const props = defineProps<{
@@ -341,6 +341,7 @@ const appName = props.appName ?? '${ctx.name}'
 const users = ref(props.users ?? [])
 const loading = ref(!props.users?.length)
 const isDark = ref(true)
+const nav = inject<(href: string) => void>('navigate', props.navigate)
 
 function toggleTheme() {
   const dark = document.documentElement.classList.toggle('dark')
@@ -361,21 +362,64 @@ async function handleLogout() {
 }
 
 onMounted(() => {
-  const theme = localStorage.getItem('theme') ||
-    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'dark')
-  document.documentElement.classList.toggle('dark', theme === 'dark')
-  isDark.value = theme === 'dark'
-
+  isDark.value = document.documentElement.classList.contains('dark')
   if (!props.users?.length) fetchUsers()
 })
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
-    <!-- Navbar -->
-    <nav class="border-b border-gray-200 dark:border-gray-800/80 bg-white/80 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
-      <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+  <div class="min-h-screen flex bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
+    <!-- Sidebar -->
+    <aside class="w-60 flex-shrink-0 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col fixed inset-y-0 left-0 z-30">
+      <!-- App name -->
+      <div class="h-14 flex items-center px-5 border-b border-gray-200 dark:border-gray-800">
         <span class="text-sm font-bold text-gray-900 dark:text-white">{{ appName }}</span>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 px-3 py-4 space-y-1">
+        <a
+          href="/dashboard"
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+        >
+          <!-- Dashboard icon -->
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+          </svg>
+          Dashboard
+        </a>
+      </nav>
+
+      <!-- Bottom links -->
+      <div class="px-3 py-4 border-t border-gray-200 dark:border-gray-800 space-y-1">
+        <a
+          href="/heartbeat"
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          <!-- Heart/pulse icon -->
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+          </svg>
+          Heartbeat
+        </a>
+        <a
+          href="/api/ping"
+          class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          <!-- Signal/wifi icon -->
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0" />
+          </svg>
+          API Ping
+        </a>
+      </div>
+    </aside>
+
+    <!-- Main area -->
+    <div class="flex-1 ml-60 flex flex-col min-h-screen">
+      <!-- Header -->
+      <header class="h-14 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/90 backdrop-blur-md sticky top-0 z-20">
+        <h1 class="text-sm font-semibold text-gray-900 dark:text-white">Dashboard</h1>
         <div class="flex items-center gap-3">
           <!-- Dark/Light toggle -->
           <button
@@ -400,80 +444,53 @@ onMounted(() => {
             Logout
           </button>
         </div>
-      </div>
-    </nav>
-
-    <main class="max-w-5xl mx-auto px-6 py-8 space-y-6">
-      <!-- Welcome section -->
-      <div class="animate-fade-up">
-        <h1 class="text-xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Welcome back, {{ currentUser?.name }}.</p>
-      </div>
+      </header>
+
+      <!-- Content -->
+      <main class="flex-1 px-6 py-8 space-y-6">
+        <!-- Welcome card -->
+        <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6 animate-fade-up">
+          <h2 class="text-lg font-bold text-gray-900 dark:text-white">Welcome back, {{ currentUser?.name }}</h2>
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Here's what's happening with your application.</p>
+        </div>
 
-      <!-- Quick links -->
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 animate-fade-up">
-        <a
-          href="/heartbeat"
-          class="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-300 dark:hover:border-emerald-800 transition-colors"
-        >
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Heartbeat Dashboard</h3>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Monitor application health</p>
-            </div>
-            <span class="text-emerald-600 dark:text-emerald-400 group-hover:translate-x-0.5 transition-transform">&rarr;</span>
+        <!-- Users table -->
+        <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden animate-fade-up">
+          <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+            <h2 class="text-sm font-bold text-gray-900 dark:text-gray-200">Users</h2>
+            <span class="text-xs text-gray-500 dark:text-gray-400">{{ loading ? 'Loading...' : users.length + ' total' }}</span>
           </div>
-        </a>
-        <a
-          href="/api/ping"
-          class="group bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:border-emerald-300 dark:hover:border-emerald-800 transition-colors"
-        >
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">API Ping</h3>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Test API connectivity</p>
-            </div>
-            <span class="text-emerald-600 dark:text-emerald-400 group-hover:translate-x-0.5 transition-transform">&rarr;</span>
-          </div>
-        </a>
-      </div>
-
-      <!-- Users table -->
-      <div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden animate-fade-up">
-        <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
-          <h2 class="text-sm font-bold text-gray-800 dark:text-gray-200">Users</h2>
-          <span class="text-xs text-gray-500 dark:text-gray-400">{{ loading ? 'Loading...' : users.length + ' total' }}</span>
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b border-gray-200 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <th class="px-5 py-3 font-medium">Name</th>
+                <th class="px-5 py-3 font-medium">Email</th>
+                <th class="px-5 py-3 font-medium">Role</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-800/60">
+              <tr v-for="u in users" :key="u.id" class="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors">
+                <td class="px-5 py-3 text-gray-900 dark:text-gray-200">{{ u.name }}</td>
+                <td class="px-5 py-3 text-gray-500 dark:text-gray-400">{{ u.email }}</td>
+                <td class="px-5 py-3">
+                  <span
+                    :class="u.role === 'admin'
+                      ? 'bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/20'
+                      : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'"
+                    class="text-[10px] px-2 py-0.5 rounded-full font-medium border"
+                  >
+                    {{ u.role }}
+                  </span>
+                </td>
+              </tr>
+              <tr v-if="users.length === 0 && !loading">
+                <td colspan="3" class="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-gray-200 dark:border-gray-800 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              <th class="px-5 py-3 font-medium">Name</th>
-              <th class="px-5 py-3 font-medium">Email</th>
-              <th class="px-5 py-3 font-medium">Role</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-100 dark:divide-gray-800/60">
-            <tr v-for="u in users" :key="u.id" class="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors">
-              <td class="px-5 py-3 text-gray-800 dark:text-gray-200">{{ u.name }}</td>
-              <td class="px-5 py-3 text-gray-500 dark:text-gray-400">{{ u.email }}</td>
-              <td class="px-5 py-3">
-                <span
-                  :class="u.role === 'admin'
-                    ? 'bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-500/20'
-                    : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700'"
-                  class="text-[10px] px-2 py-0.5 rounded-full font-medium border"
-                >
-                  {{ u.role }}
-                </span>
-              </td>
-            </tr>
-            <tr v-if="users.length === 0 && !loading">
-              <td colspan="3" class="px-5 py-8 text-center text-gray-400 dark:text-gray-600">No users found</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </main>
+      </main>
+    </div>
   </div>
 </template>
 `,

package/src/templates.ts

@@ -869,13 +869,13 @@ export default {
 
   // ── routes/web.ts ───────────────────────────────────────────────────────
   templates['routes/web.ts'] = `import type { Router } from '@mantiq/core'
-import { MantiqResponse } from '@mantiq/core'
+import { HomeController } from '../app/Http/Controllers/HomeController.ts'
 import { PageController } from '../app/Http/Controllers/PageController.ts'
 import { AuthController } from '../app/Http/Controllers/AuthController.ts'
 
 export default function (router: Router) {
-  // Redirect root to dashboard
-  router.get('/', () => MantiqResponse.redirect('/dashboard'))
+  // Welcome page — shows auth-aware buttons
+  router.get('/', [HomeController, 'index'])
 
   // Page routes — each returns HTML (first load) or JSON (client navigation)
   router.get('/dashboard', [PageController, 'dashboard']).middleware('auth')
@@ -904,6 +904,124 @@ export default function (router: Router) {
     return MantiqResponse.json({ data: users.map((u: any) => u.toObject()) })
   }).middleware('auth')
 }
+`
+
+  // ── HomeController (welcome page, auth-aware) ─────────────────────────
+  templates['app/Http/Controllers/HomeController.ts'] = `import type { MantiqRequest } from '@mantiq/core'
+import { config } from '@mantiq/core'
+import { auth } from '@mantiq/auth'
+
+export class HomeController {
+  async index(request: MantiqRequest): Promise<Response> {
+    const appName = config('app.name') ?? 'MantiqJS'
+    const appEnv = config('app.env') ?? 'production'
+    const debug = config('app.debug') ? 'Enabled' : 'Disabled'
+    const bunVersion = typeof Bun !== 'undefined' ? Bun.version : 'unknown'
+
+    let mantiqVersion = '0.0.0'
+    try {
+      const pkg = await Bun.file(require.resolve('@mantiq/core/package.json')).json()
+      mantiqVersion = pkg.version
+    } catch { /* fallback */ }
+
+    // Check auth state
+    let isLoggedIn = false
+    let userName = ''
+    try {
+      const manager = auth()
+      manager.setRequest(request)
+      const user = await manager.user()
+      if (user) {
+        isLoggedIn = true
+        userName = (user as any).getAttribute?.('name') ?? ''
+      }
+    } catch { /* not authenticated or migration not run */ }
+
+    // Check if migration has been run (users table exists)
+    let migrated = false
+    try {
+      const { User } = await import('../../Models/User.ts')
+      await User.count()
+      migrated = true
+    } catch { /* table doesn't exist yet */ }
+
+    const authButtons = isLoggedIn
+      ? \\\`<a class="l l-accent" href="/dashboard">Dashboard<span class="a">&rarr;</span></a>
+         <a class="l" href="/_heartbeat">Heartbeat<span class="a">&rarr;</span></a>\\\`
+      : migrated
+        ? \\\`<a class="l l-accent" href="/login">Sign in<span class="a">&rarr;</span></a>
+           <a class="l" href="/register">Register<span class="a">&rarr;</span></a>\\\`
+        : \\\`<a class="l" href="/_heartbeat">Heartbeat<span class="a">&rarr;</span></a>
+           <a class="l" href="/api/ping">API Ping<span class="a">&rarr;</span></a>\\\`
+
+    const html = \\\`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>\\\${appName}</title>
+  <style>
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+    body{
+      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
+      background:#0a0a0b;color:#fafafa;min-height:100vh;
+      display:flex;align-items:center;justify-content:center;
+      -webkit-font-smoothing:antialiased;
+    }
+    .c{width:100%;max-width:460px;padding:32px;animation:up .5s ease}
+    @keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+    .w{font-size:28px;font-weight:600;letter-spacing:-0.04em;color:#fafafa}
+    .w .d{color:#10b981}
+    .v{font-family:'SF Mono',ui-monospace,monospace;font-size:12px;color:#52525b;margin-top:6px}
+    hr{border:none;border-top:1px solid #1e1e1e;margin:24px 0}
+    .g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+    .l{
+      background:#111113;border:1px solid #1e1e1e;border-radius:8px;
+      padding:14px 16px;text-decoration:none;color:#a1a1aa;font-size:13px;
+      display:flex;align-items:center;justify-content:space-between;
+      transition:border-color .15s,color .15s;
+    }
+    .l:hover{border-color:#27272a;color:#34d399}
+    .l-accent{border-color:#10b981;color:#fafafa}
+    .l-accent:hover{background:#10b981;color:#0a0a0b}
+    .l .a{color:#52525b;font-size:11px;transition:color .15s}
+    .l:hover .a{color:#34d399}
+    .l-accent .a{color:#10b981}
+    .l-accent:hover .a{color:#0a0a0b}
+    .e{
+      margin-top:24px;font-family:'SF Mono',ui-monospace,monospace;
+      font-size:11px;color:#3f3f46;line-height:2;
+    }
+    .e span{color:#52525b}
+    .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
+  </style>
+</head>
+<body>
+  <div class="c">
+    <div class="w"><span class="d">.</span>mantiq</div>
+    <div class="v">v\\\${mantiqVersion} — \\\${appName}</div>
+    <hr>
+    <div class="g">
+      \\\${authButtons}
+    </div>
+    <div class="g2">
+      <a class="l" href="https://github.com/mantiqjs/mantiq" target="_blank" rel="noopener">GitHub<span class="a">&nearr;</span></a>
+      <a class="l" href="https://www.npmjs.com/org/mantiq" target="_blank" rel="noopener">npm<span class="a">&nearr;</span></a>
+    </div>
+    <div class="e">
+      <span>Runtime</span> Bun \\\${bunVersion}<br>
+      <span>Environment</span> \\\${appEnv}<br>
+      <span>Debug</span> \\\${debug}
+    </div>
+  </div>
+</body>
+</html>\\\`
+
+    return new Response(html, {
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    })
+  }
+}
 `
 
   // ── PageController (SSR + universal routing) ────────────────────────────