create-ereo 0.1.32 → 0.1.35

package/dist/index.js

@@ -47,14 +47,20 @@ function printHelp() {
     bunx create-ereo@latest <project-name> [options]
 
   \x1B[1mOptions:\x1B[0m
-    -t, --template <name>   Template to use (minimal, default, tailwind)
+    -t, --template <name>   Template to use (minimal, default, tailwind, tasks)
     --no-typescript         Use JavaScript instead of TypeScript
     --no-git                Skip git initialization
     --no-install            Skip package installation
     --trace                 Include @ereo/trace for full-stack observability
 
+  \x1B[1mTemplates:\x1B[0m
+    tailwind (default)  Landing page with blog, Tailwind CSS styling
+    minimal             Bare-bones starting point
+    tasks               Full-stack CRUD app with auth + SQLite database
+
   \x1B[1mExamples:\x1B[0m
     bunx create-ereo@latest my-app
+    bunx create-ereo@latest my-app --template tasks
     bunx create-ereo@latest my-app --template minimal
     bunx create-ereo@latest my-app --no-typescript
 `);
@@ -75,8 +81,8 @@ function parseArgs(args) {
         process.exit(1);
       }
       const tmpl = args[++i];
-      if (tmpl !== "minimal" && tmpl !== "default" && tmpl !== "tailwind") {
-        console.error(`  \x1B[31m\u2717\x1B[0m Unknown template "${tmpl}". Valid options: minimal, default, tailwind
+      if (tmpl !== "minimal" && tmpl !== "default" && tmpl !== "tailwind" && tmpl !== "tasks") {
+        console.error(`  \x1B[31m\u2717\x1B[0m Unknown template "${tmpl}". Valid options: minimal, default, tailwind, tasks
 `);
         process.exit(1);
       }
@@ -111,25 +117,25 @@ COPY package.json bun.lockb* ./
 RUN bun install --production --ignore-scripts
 
 # ---- Stage 3: Production image ----
-FROM oven/bun:1-slim AS runner
+FROM oven/bun:1-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
 
 # Non-root user for security
-RUN groupadd --system --gid 1001 ereo && \\
-    useradd --system --uid 1001 --gid ereo --no-create-home ereo
+RUN addgroup -S -g 1001 ereo && \\
+    adduser -S -u 1001 -G ereo -H ereo
 
 # Copy production node_modules
 COPY --from=deps --chown=ereo:ereo /app/node_modules ./node_modules
 
 # Copy build output and runtime files
-COPY --from=builder --chown=ereo:ereo /app/.ereo   ./.ereo
-COPY --from=builder --chown=ereo:ereo /app/app     ./app
-COPY --from=builder --chown=ereo:ereo /app/public  ./public
-COPY --from=builder --chown=ereo:ereo /app/package.json   ./
-COPY --from=builder --chown=ereo:ereo /app/ereo.config.*  ./
-COPY --from=builder --chown=ereo:ereo /app/tsconfig.*     ./
+COPY --from=builder --chown=ereo:ereo /app/.ereo        ./.ereo
+COPY --from=builder --chown=ereo:ereo /app/app          ./app
+COPY --from=builder --chown=ereo:ereo /app/public       ./public
+COPY --from=builder --chown=ereo:ereo /app/package.json ./
+COPY --from=builder --chown=ereo:ereo /app/ereo.config.* ./
+COPY --from=builder --chown=ereo:ereo /app/tsconfig.*    ./
 
 USER ereo
 
@@ -318,8 +324,8 @@ export default function HomePage() {
         <h1><span className="gradient-text">EreoJS</span></h1>
         <p>A React fullstack framework built on Bun. Fast server-side rendering, file-based routing, and islands architecture.</p>
         <div className="btn-group">
-          <a href="https://ereo.dev/docs" className="cta-btn cta-btn-primary">Get Started</a>
-          <a href="https://github.com/nicholasgriffintn/ereo" className="cta-btn cta-btn-secondary">
+          <a href="https://ereojs.github.io/ereoJS/" className="cta-btn cta-btn-primary">Get Started</a>
+          <a href="https://github.com/ereoJS/ereoJS" className="cta-btn cta-btn-secondary">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
             GitHub
           </a>
@@ -392,7 +398,7 @@ export default function HomePage() {
 
       {/* Footer */}
       <footer className="site-footer">
-        <p>Built with EreoJS &mdash; <a href="https://ereo.dev/docs">Docs</a> &middot; <a href="https://github.com/nicholasgriffintn/ereo">GitHub</a></p>
+        <p>Built with EreoJS &mdash; <a href="https://ereojs.github.io/ereoJS/">Docs</a> &middot; <a href="https://github.com/ereoJS/ereoJS">GitHub</a></p>
       </footer>
     </>
   );
@@ -453,40 +459,44 @@ async function generateTailwindProject(projectDir, projectName, typescript, trac
       "@ereo/data": EREO_VERSION,
       "@ereo/cli": EREO_VERSION,
       "@ereo/runtime-bun": EREO_VERSION,
-      "@ereo/plugin-tailwind": EREO_VERSION,
       ...trace ? { "@ereo/trace": EREO_VERSION } : {},
       react: "^18.2.0",
       "react-dom": "^18.2.0"
     },
     devDependencies: {
+      "@ereo/bundler": EREO_VERSION,
       "@ereo/testing": EREO_VERSION,
       "@ereo/dev-inspector": EREO_VERSION,
+      "@ereo/plugin-tailwind": EREO_VERSION,
+      tailwindcss: "^3.4.0",
       ...ts ? {
         "@types/bun": "^1.1.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         typescript: "^5.4.0"
-      } : {},
-      tailwindcss: "^3.4.0"
+      } : {}
     }
   };
   await Bun.write(join(projectDir, "package.json"), JSON.stringify(packageJson, null, 2));
   const ereoConfig = `
 import { defineConfig } from '@ereo/core';
-import tailwind from '@ereo/plugin-tailwind';
+
+const plugins = [];
+
+// Tailwind is a dev/build dependency \u2014 skip in production
+if (process.env.NODE_ENV !== 'production') {
+  const { default: tailwind } = await import('@ereo/plugin-tailwind');
+  plugins.push(tailwind());
+}
 
 export default defineConfig({
   server: {
     port: 3000,
-    // Enable development features
-    development: process.env.NODE_ENV !== 'production',
   },
   build: {
     target: 'bun',
   },
-  plugins: [
-    tailwind(),
-  ],
+  plugins,
 });
 `.trim();
   await Bun.write(join(projectDir, `ereo.config.${ts ? "ts" : "js"}`), ereoConfig);
@@ -980,10 +990,10 @@ export function Footer() {
             <span>Built with EreoJS</span>
           </div>
           <div className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-500">
-            <a href="https://github.com/ereo-js/ereo" target="_blank" rel="noopener" className="hover:text-primary-600">
+            <a href="https://github.com/ereoJS/ereoJS" target="_blank" rel="noopener" className="hover:text-primary-600">
               GitHub
             </a>
-            <a href="https://ereo.dev/docs" target="_blank" rel="noopener" className="hover:text-primary-600">
+            <a href="https://ereojs.github.io/ereoJS/" target="_blank" rel="noopener" className="hover:text-primary-600">
               Documentation
             </a>
             <span>&copy; {currentYear}</span>
@@ -1157,7 +1167,7 @@ export default function HomePage({ loaderData }${ts ? ": HomePageProps" : ""}) {
 
           {/* CTA Buttons */}
           <div className="flex flex-wrap gap-4 justify-center mt-10 opacity-0 animate-slide-up delay-400">
-            <a href="https://ereo.dev/docs" className="btn btn-primary text-base px-6 py-3">
+            <a href="https://ereojs.github.io/ereoJS/" className="btn btn-primary text-base px-6 py-3">
               Get Started
             </a>
             <a href="/blog" className="btn btn-secondary text-base px-6 py-3">
@@ -1333,8 +1343,8 @@ export async function action({ request }) {
           </div>
         </div>
         <div className="flex flex-wrap gap-4 justify-center">
-          <a href="https://ereo.dev/docs" className="btn btn-primary text-base px-6 py-3">Documentation</a>
-          <a href="https://github.com/ereo-js/ereo" target="_blank" rel="noopener" className="btn btn-secondary text-base px-6 py-3">GitHub</a>
+          <a href="https://ereojs.github.io/ereoJS/" className="btn btn-primary text-base px-6 py-3">Documentation</a>
+          <a href="https://github.com/ereoJS/ereoJS" target="_blank" rel="noopener" className="btn btn-secondary text-base px-6 py-3">GitHub</a>
         </div>
       </section>
     </div>
@@ -1734,7 +1744,7 @@ export default function AboutPage() {
             </p>
             <div className="flex flex-wrap gap-4">
               <a
-                href="https://ereo.dev/docs"
+                href="https://ereojs.github.io/ereoJS/"
                 target="_blank"
                 rel="noopener"
                 className="btn btn-primary"
@@ -1742,7 +1752,7 @@ export default function AboutPage() {
                 Documentation
               </a>
               <a
-                href="https://github.com/ereo-js/ereo"
+                href="https://github.com/ereoJS/ereoJS"
                 target="_blank"
                 rel="noopener"
                 className="btn btn-secondary"
@@ -1834,7 +1844,7 @@ NODE_ENV=development
 # API_KEY=`);
   const readme = `# ${projectName}
 
-A modern web application built with [EreoJS](https://github.com/ereo-js/ereo) - a React fullstack framework powered by Bun.
+A modern web application built with [EreoJS](https://github.com/ereoJS/ereoJS) - a React fullstack framework powered by Bun.
 
 ## Features
 
@@ -1910,7 +1920,1888 @@ For production, alias \`@ereo/trace\` to \`@ereo/trace/noop\` in your bundler fo
 
 ` : ""}## Learn More
 
-- [EreoJS Documentation](https://ereo.dev/docs)
+- [EreoJS Documentation](https://ereojs.github.io/ereoJS/)
+- [Bun Documentation](https://bun.sh/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+`;
+  await Bun.write(join(projectDir, "README.md"), readme);
+}
+async function generateTasksProject(projectDir, projectName, typescript, trace = false) {
+  const ext = typescript ? "tsx" : "jsx";
+  const ts = typescript;
+  await mkdir(projectDir, { recursive: true });
+  await mkdir(join(projectDir, "app/routes/(auth)"), { recursive: true });
+  await mkdir(join(projectDir, "app/routes/tasks"), { recursive: true });
+  await mkdir(join(projectDir, "app/components"), { recursive: true });
+  await mkdir(join(projectDir, "app/lib"), { recursive: true });
+  await mkdir(join(projectDir, "public"), { recursive: true });
+  await mkdir(join(projectDir, "data"), { recursive: true });
+  const packageJson = {
+    name: projectName,
+    version: "0.1.0",
+    type: "module",
+    scripts: {
+      dev: trace ? "ereo dev --trace" : "ereo dev",
+      build: "ereo build",
+      start: "ereo start",
+      test: "bun test",
+      typecheck: "tsc --noEmit"
+    },
+    dependencies: {
+      "@ereo/core": EREO_VERSION,
+      "@ereo/router": EREO_VERSION,
+      "@ereo/server": EREO_VERSION,
+      "@ereo/client": EREO_VERSION,
+      "@ereo/data": EREO_VERSION,
+      "@ereo/cli": EREO_VERSION,
+      "@ereo/auth": EREO_VERSION,
+      "@ereo/runtime-bun": EREO_VERSION,
+      ...trace ? { "@ereo/trace": EREO_VERSION } : {},
+      react: "^18.2.0",
+      "react-dom": "^18.2.0"
+    },
+    devDependencies: {
+      "@ereo/bundler": EREO_VERSION,
+      "@ereo/testing": EREO_VERSION,
+      "@ereo/dev-inspector": EREO_VERSION,
+      "@ereo/plugin-tailwind": EREO_VERSION,
+      tailwindcss: "^3.4.0",
+      ...ts ? {
+        "@types/bun": "^1.1.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        typescript: "^5.4.0"
+      } : {}
+    }
+  };
+  await Bun.write(join(projectDir, "package.json"), JSON.stringify(packageJson, null, 2));
+  const ereoConfig = `
+import { defineConfig } from '@ereo/core';
+import { createAuthPlugin, credentials } from '@ereo/auth';
+
+const plugins${ts ? ": any[]" : ""} = [];
+
+// Tailwind CSS \u2014 dev/build only
+if (process.env.NODE_ENV !== 'production') {
+  const { default: tailwind } = await import('@ereo/plugin-tailwind');
+  plugins.push(tailwind());
+}
+
+// Database & auth helpers
+const { findUserByEmail, verifyPassword } = await import('./app/lib/db${ts ? "" : ".js"}');
+
+// Authentication plugin \u2014 email/password with JWT sessions
+plugins.push(
+  createAuthPlugin({
+    session: {
+      strategy: 'jwt',
+      secret: process.env.AUTH_SECRET || 'dev-only-please-change-in-production',
+      maxAge: 7 * 24 * 60 * 60, // 7 days
+    },
+    providers: [
+      credentials({
+        authorize: async (creds${ts ? ": Record<string, unknown>" : ""}) => {
+          const email = creds.email as string;
+          const password = creds.password as string;
+          if (!email || !password) return null;
+
+          const user = findUserByEmail(email);
+          if (!user) return null;
+
+          const valid = await verifyPassword(password, user.password_hash);
+          if (!valid) return null;
+
+          return { id: String(user.id), email: user.email, name: user.name };
+        },
+      }),
+    ],
+    cookie: {
+      name: 'ereo.session',
+      secure: process.env.NODE_ENV === 'production',
+      httpOnly: true,
+      sameSite: 'lax',
+    },
+  })
+);
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'bun',
+  },
+  plugins,
+});
+`.trim();
+  await Bun.write(join(projectDir, `ereo.config.${ts ? "ts" : "js"}`), ereoConfig);
+  if (ts) {
+    const tsconfig = {
+      compilerOptions: {
+        target: "ESNext",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "react-jsx",
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        forceConsistentCasingInFileNames: true,
+        types: ["bun-types"],
+        paths: {
+          "~/*": ["./app/*"]
+        }
+      },
+      include: ["app/**/*", "*.config.ts"]
+    };
+    await Bun.write(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2));
+  }
+  const tailwindConfig = `
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./app/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        mono: ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'monospace'],
+      },
+      colors: {
+        primary: {
+          50: '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+          950: '#1e1b4b',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease forwards',
+        'slide-up': 'slideUp 0.6s ease forwards',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+`.trim();
+  await Bun.write(join(projectDir, "tailwind.config.js"), tailwindConfig);
+  const styles = `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply antialiased font-sans;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 inline-flex items-center justify-center gap-2;
+  }
+  .btn-primary {
+    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+  }
+  .btn-secondary {
+    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600;
+  }
+  .btn-danger {
+    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+  .btn-ghost {
+    @apply bg-transparent text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 focus:ring-gray-500;
+  }
+  .btn-sm {
+    @apply px-3 py-1.5 text-sm;
+  }
+  .input {
+    @apply w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white;
+  }
+  .label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
+  }
+  .card {
+    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6;
+  }
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+}
+
+@layer utilities {
+  .delay-100 { animation-delay: 100ms; }
+  .delay-200 { animation-delay: 200ms; }
+  .delay-300 { animation-delay: 300ms; }
+}
+`.trim();
+  await Bun.write(join(projectDir, "app/styles.css"), styles);
+  const dbModule = `
+import { Database } from 'bun:sqlite';
+import { join } from 'node:path';
+
+${ts ? `export interface User {
+  id: number;
+  email: string;
+  name: string;
+  password_hash: string;
+  created_at: string;
+}
+
+export interface Task {
+  id: number;
+  user_id: number;
+  title: string;
+  description: string;
+  status: 'todo' | 'in_progress' | 'done';
+  priority: 'low' | 'medium' | 'high';
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TaskStats {
+  todo: number;
+  in_progress: number;
+  done: number;
+  total: number;
+}
+` : ""}
+/**
+ * SQLite database with production-ready configuration.
+ *
+ * The database file is stored in the /data directory so it can be
+ * easily mounted as a Docker volume for persistence.
+ */
+const DB_PATH = join(import.meta.dir, '../../data/app.db');
+
+const db = new Database(DB_PATH, { create: true });
+
+// Production-ready PRAGMA settings
+db.exec('PRAGMA journal_mode = WAL');        // Better concurrent reads
+db.exec('PRAGMA synchronous = NORMAL');      // Safe with WAL, much faster
+db.exec('PRAGMA foreign_keys = ON');         // Enforce referential integrity
+db.exec('PRAGMA cache_size = -64000');       // ~64MB cache
+db.exec('PRAGMA busy_timeout = 5000');       // Wait 5s on lock contention
+
+// \u2500\u2500 Schema migrations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+db.exec(\`
+  CREATE TABLE IF NOT EXISTS users (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    email         TEXT    UNIQUE NOT NULL,
+    name          TEXT    NOT NULL,
+    password_hash TEXT    NOT NULL,
+    created_at    TEXT    NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE TABLE IF NOT EXISTS tasks (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL,
+    title       TEXT    NOT NULL,
+    description TEXT    NOT NULL DEFAULT '',
+    status      TEXT    NOT NULL DEFAULT 'todo'
+                        CHECK (status IN ('todo', 'in_progress', 'done')),
+    priority    TEXT    NOT NULL DEFAULT 'medium'
+                        CHECK (priority IN ('low', 'medium', 'high')),
+    created_at  TEXT    NOT NULL DEFAULT (datetime('now')),
+    updated_at  TEXT    NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_tasks_user_id ON tasks(user_id);
+  CREATE INDEX IF NOT EXISTS idx_tasks_status  ON tasks(user_id, status);
+  CREATE INDEX IF NOT EXISTS idx_users_email   ON users(email);
+\`);
+
+// \u2500\u2500 User operations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function findUserByEmail(email${ts ? ": string" : ""})${ts ? ": User | null" : ""} {
+  return db.prepare('SELECT * FROM users WHERE email = ?').get(email)${ts ? " as User | null" : ""};
+}
+
+export function findUserById(id${ts ? ": number" : ""})${ts ? ": User | null" : ""} {
+  return db.prepare('SELECT * FROM users WHERE id = ?').get(id)${ts ? " as User | null" : ""};
+}
+
+export function createUser(email${ts ? ": string" : ""}, name${ts ? ": string" : ""}, passwordHash${ts ? ": string" : ""})${ts ? ": User" : ""} {
+  return db.prepare(
+    'INSERT INTO users (email, name, password_hash) VALUES (?, ?, ?) RETURNING *'
+  ).get(email, name, passwordHash)${ts ? " as User" : ""};
+}
+
+export function emailExists(email${ts ? ": string" : ""})${ts ? ": boolean" : ""} {
+  const row = db.prepare('SELECT 1 FROM users WHERE email = ?').get(email);
+  return row !== null;
+}
+
+// \u2500\u2500 Task operations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function getTasksByUser(
+  userId${ts ? ": number" : ""},
+  status${ts ? "?: string" : ""}
+)${ts ? ": Task[]" : ""} {
+  if (status && status !== 'all') {
+    return db.prepare(
+      \`SELECT * FROM tasks WHERE user_id = ? AND status = ?
+       ORDER BY CASE priority WHEN 'high' THEN 1 WHEN 'medium' THEN 2 WHEN 'low' THEN 3 END,
+       created_at DESC\`
+    ).all(userId, status)${ts ? " as Task[]" : ""};
+  }
+  return db.prepare(
+    \`SELECT * FROM tasks WHERE user_id = ?
+     ORDER BY CASE priority WHEN 'high' THEN 1 WHEN 'medium' THEN 2 WHEN 'low' THEN 3 END,
+     created_at DESC\`
+  ).all(userId)${ts ? " as Task[]" : ""};
+}
+
+export function getTaskById(id${ts ? ": number" : ""}, userId${ts ? ": number" : ""})${ts ? ": Task | null" : ""} {
+  return db.prepare(
+    'SELECT * FROM tasks WHERE id = ? AND user_id = ?'
+  ).get(id, userId)${ts ? " as Task | null" : ""};
+}
+
+export function createTask(
+  userId${ts ? ": number" : ""},
+  title${ts ? ": string" : ""},
+  description${ts ? ": string" : ""},
+  status${ts ? ": string" : ""},
+  priority${ts ? ": string" : ""}
+)${ts ? ": Task" : ""} {
+  return db.prepare(
+    'INSERT INTO tasks (user_id, title, description, status, priority) VALUES (?, ?, ?, ?, ?) RETURNING *'
+  ).get(userId, title, description, status, priority)${ts ? " as Task" : ""};
+}
+
+export function updateTask(
+  id${ts ? ": number" : ""},
+  userId${ts ? ": number" : ""},
+  title${ts ? ": string" : ""},
+  description${ts ? ": string" : ""},
+  status${ts ? ": string" : ""},
+  priority${ts ? ": string" : ""}
+)${ts ? ": Task | null" : ""} {
+  return db.prepare(
+    "UPDATE tasks SET title = ?, description = ?, status = ?, priority = ?, updated_at = datetime('now') WHERE id = ? AND user_id = ? RETURNING *"
+  ).get(title, description, status, priority, id, userId)${ts ? " as Task | null" : ""};
+}
+
+export function deleteTask(id${ts ? ": number" : ""}, userId${ts ? ": number" : ""})${ts ? ": boolean" : ""} {
+  const result = db.prepare('DELETE FROM tasks WHERE id = ? AND user_id = ?').run(id, userId);
+  return result.changes > 0;
+}
+
+export function getTaskStats(userId${ts ? ": number" : ""})${ts ? ": TaskStats" : ""} {
+  const rows = db.prepare(
+    'SELECT status, COUNT(*) as count FROM tasks WHERE user_id = ? GROUP BY status'
+  ).all(userId)${ts ? " as { status: string; count: number }[]" : ""};
+
+  const stats${ts ? ": TaskStats" : ""} = { todo: 0, in_progress: 0, done: 0, total: 0 };
+  for (const row of rows) {
+    stats[row.status${ts ? " as keyof TaskStats" : ""}] = row.count;
+    stats.total += row.count;
+  }
+  return stats;
+}
+
+// \u2500\u2500 Password hashing \u2014 Bun built-in argon2id \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export async function hashPassword(password${ts ? ": string" : ""})${ts ? ": Promise<string>" : ""} {
+  return Bun.password.hash(password, { algorithm: 'argon2id' });
+}
+
+export async function verifyPassword(password${ts ? ": string" : ""}, hash${ts ? ": string" : ""})${ts ? ": Promise<boolean>" : ""} {
+  return Bun.password.verify(password, hash);
+}
+
+export default db;
+`.trim();
+  await Bun.write(join(projectDir, `app/lib/db.${ts ? "ts" : "js"}`), dbModule);
+  if (ts) {
+    const types = `
+/**
+ * Shared types for the application.
+ */
+
+export type { User, Task, TaskStats } from './db';
+
+export interface ActionResult<T = unknown> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  errors?: Record<string, string>;
+}
+`.trim();
+    await Bun.write(join(projectDir, "app/lib/types.ts"), types);
+  }
+  const navigation = `
+${ts ? `interface NavigationProps {
+  user?: { name: string; email: string } | null;
+}
+` : ""}
+export function Navigation({ user }${ts ? ": NavigationProps" : ""}) {
+  return (
+    <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
+      <div className="max-w-5xl mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <a href={user ? '/tasks' : '/'} className="flex items-center gap-2 group">
+            <svg width="28" height="28" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" className="transition-transform group-hover:scale-110">
+              <path d="M40 8L72 24V56L40 72L8 56V24L40 8Z" stroke="url(#nav-grad)" strokeWidth="3" fill="none" />
+              <path d="M40 28L52 34V46L40 52L28 46V34L40 28Z" fill="url(#nav-grad)" />
+              <defs>
+                <linearGradient id="nav-grad" x1="8" y1="8" x2="72" y2="72">
+                  <stop stopColor="#6366f1" />
+                  <stop offset="1" stopColor="#a855f7" />
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className="font-bold text-xl">${projectName}</span>
+          </a>
+
+          {/* Desktop */}
+          <div className="hidden md:flex items-center gap-4">
+            {user ? (
+              <>
+                <a href="/tasks" className="text-gray-600 dark:text-gray-300 hover:text-primary-600 transition-colors">
+                  Tasks
+                </a>
+                <a href="/tasks/new" className="btn btn-primary btn-sm">
+                  New Task
+                </a>
+                <div className="relative group">
+                  <button className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                    <div className="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center text-primary-700 dark:text-primary-300 font-medium text-sm">
+                      {user.name.charAt(0).toUpperCase()}
+                    </div>
+                    <span className="text-sm text-gray-700 dark:text-gray-300">{user.name}</span>
+                  </button>
+                  <div className="absolute right-0 mt-0 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150">
+                    <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                      <p className="text-sm font-medium text-gray-900 dark:text-white">{user.name}</p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{user.email}</p>
+                    </div>
+                    <form method="POST" action="/logout">
+                      <button
+                        type="submit"
+                        className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                      >
+                        Sign out
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <a href="/login" className="text-gray-600 dark:text-gray-300 hover:text-primary-600 transition-colors">
+                  Sign in
+                </a>
+                <a href="/register" className="btn btn-primary btn-sm">
+                  Get Started
+                </a>
+              </>
+            )}
+          </div>
+
+          {/* Mobile */}
+          <div className="md:hidden flex items-center gap-3">
+            {user ? (
+              <>
+                <a href="/tasks/new" className="btn btn-primary btn-sm">New</a>
+                <form method="POST" action="/logout">
+                  <button type="submit" className="text-sm text-red-600 hover:text-red-700">Sign out</button>
+                </form>
+              </>
+            ) : (
+              <>
+                <a href="/login" className="text-gray-600 dark:text-gray-300 hover:text-primary-600 transition-colors">
+                  Sign in
+                </a>
+                <a href="/register" className="btn btn-primary btn-sm">
+                  Get Started
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/components/Navigation.${ext}`), navigation);
+  const footer = `
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-auto">
+      <div className="max-w-5xl mx-auto px-4 py-6">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm">
+            <span className="text-lg">&#x2B21;</span>
+            <span>Built with EreoJS</span>
+          </div>
+          <div className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-500">
+            <a href="https://ereojs.github.io/ereoJS/" target="_blank" rel="noopener" className="hover:text-primary-600 transition-colors">
+              Docs
+            </a>
+            <a href="https://github.com/ereoJS/ereoJS" target="_blank" rel="noopener" className="hover:text-primary-600 transition-colors">
+              GitHub
+            </a>
+            <span>&copy; {currentYear}</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/components/Footer.${ext}`), footer);
+  const taskCard = `
+${ts ? `interface TaskCardProps {
+  task: {
+    id: number;
+    title: string;
+    description: string;
+    status: 'todo' | 'in_progress' | 'done';
+    priority: 'low' | 'medium' | 'high';
+    created_at: string;
+    updated_at: string;
+  };
+}
+` : ""}
+const statusConfig${ts ? ": Record<string, { label: string; color: string }>" : ""} = {
+  todo: { label: 'To Do', color: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' },
+  in_progress: { label: 'In Progress', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' },
+  done: { label: 'Done', color: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' },
+};
+
+const priorityConfig${ts ? ": Record<string, { label: string; color: string; icon: string }>" : ""} = {
+  high: { label: 'High', color: 'text-red-600 dark:text-red-400', icon: '!!!' },
+  medium: { label: 'Medium', color: 'text-yellow-600 dark:text-yellow-400', icon: '!!' },
+  low: { label: 'Low', color: 'text-gray-400 dark:text-gray-500', icon: '!' },
+};
+
+export function TaskCard({ task }${ts ? ": TaskCardProps" : ""}) {
+  const status = statusConfig[task.status] || statusConfig.todo;
+  const priority = priorityConfig[task.priority] || priorityConfig.medium;
+
+  return (
+    <a
+      href={\`/tasks/\${task.id}\`}
+      className="card hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700 transition-all group block"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className={\`badge \${status.color}\`}>{status.label}</span>
+            <span className={\`text-xs font-mono font-bold \${priority.color}\`}>
+              {priority.icon}
+            </span>
+          </div>
+          <h3 className="font-semibold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate">
+            {task.title}
+          </h3>
+          {task.description && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+              {task.description}
+            </p>
+          )}
+        </div>
+        <svg className="w-5 h-5 text-gray-400 group-hover:text-primary-500 transition-colors flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+      <div className="mt-3 flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
+        <span>Created {new Date(task.created_at).toLocaleDateString()}</span>
+        {task.updated_at !== task.created_at && (
+          <span>Updated {new Date(task.updated_at).toLocaleDateString()}</span>
+        )}
+      </div>
+    </a>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/components/TaskCard.${ext}`), taskCard);
+  const rootLayout = `
+import { Navigation } from '~/components/Navigation';
+import { Footer } from '~/components/Footer';
+import { useAuth } from '@ereo/auth';
+
+${ts ? `interface RootLayoutProps {
+  children: React.ReactNode;
+  context: any;
+}
+` : ""}
+export async function loader({ context }${ts ? ": { context: any }" : ""}) {
+  let user = null;
+  try {
+    const auth = useAuth(context);
+    if (auth.isAuthenticated()) {
+      user = auth.getUser();
+    }
+  } catch {
+    // Not authenticated
+  }
+  return { user };
+}
+
+export default function RootLayout({ children, loaderData }${ts ? ": RootLayoutProps & { loaderData: { user: any } }" : ""}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="${projectName} \u2014 A task management app built with EreoJS" />
+        <title>${projectName}</title>
+        <link rel="stylesheet" href="/__tailwind.css" />
+      </head>
+      <body className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white">
+        <Navigation user={loaderData?.user} />
+        <main className="flex-1">
+          {children}
+        </main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/_layout.${ext}`), rootLayout);
+  const indexPage = `
+import { useAuth } from '@ereo/auth';
+
+export async function loader({ context }${ts ? ": { context: any }" : ""}) {
+  try {
+    const auth = useAuth(context);
+    if (auth.isAuthenticated()) {
+      return new Response(null, {
+        status: 302,
+        headers: { Location: '/tasks' },
+      });
+    }
+  } catch {
+    // Not authenticated \u2014 show landing page
+  }
+  return {};
+}
+
+export default function LandingPage() {
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="relative py-24 sm:py-32 px-4 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-primary-50/50 via-transparent to-transparent dark:from-primary-950/20" />
+        <div className="relative max-w-4xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 text-sm font-medium mb-6 opacity-0 animate-slide-up">
+            Built with EreoJS + SQLite
+          </div>
+
+          <h1 className="text-5xl sm:text-6xl font-extrabold tracking-tight mb-6 opacity-0 animate-slide-up delay-100">
+            Organize your work,{' '}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-purple-500">
+              ship faster
+            </span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10 opacity-0 animate-slide-up delay-200">
+            A full-stack task manager showcasing authentication, SQLite database,
+            and CRUD operations \u2014 all powered by EreoJS and Bun.
+          </p>
+
+          <div className="flex flex-wrap gap-4 justify-center opacity-0 animate-slide-up delay-300">
+            <a href="/register" className="btn btn-primary text-base px-6 py-3">
+              Get Started Free
+            </a>
+            <a href="/login" className="btn btn-secondary text-base px-6 py-3">
+              Sign In
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-20 px-4">
+        <div className="max-w-5xl mx-auto">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              {
+                title: 'Email & Password Auth',
+                desc: 'Secure authentication with argon2id password hashing, JWT sessions, and protected routes.',
+                icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
+              },
+              {
+                title: 'SQLite + WAL Mode',
+                desc: 'Production-ready SQLite with Write-Ahead Logging, prepared statements, and automatic migrations.',
+                icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4',
+              },
+              {
+                title: 'Full CRUD Operations',
+                desc: 'Create, read, update, and delete tasks with server-side validation and error handling.',
+                icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
+              },
+              {
+                title: 'Server-Side Rendering',
+                desc: 'Fast initial loads with SSR. Data fetched via loaders, mutations via actions.',
+                icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2',
+              },
+              {
+                title: 'File-Based Routing',
+                desc: 'Routes map to files. Dynamic segments, layouts, route groups, and error boundaries.',
+                icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z',
+              },
+              {
+                title: 'Production Ready',
+                desc: 'Docker support, environment configuration, secure cookies, and proper error handling.',
+                icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+              },
+            ].map((feature) => (
+              <div key={feature.title} className="card hover:shadow-md transition-shadow">
+                <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 bg-primary-100 dark:bg-primary-900/40">
+                  <svg className="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d={feature.icon} />
+                  </svg>
+                </div>
+                <h3 className="font-semibold mb-1">{feature.title}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Code Preview */}
+      <section className="py-20 px-4 bg-white dark:bg-gray-800/50">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold mb-3">Simple, Powerful Patterns</h2>
+            <p className="text-gray-600 dark:text-gray-400">Loaders fetch data. Actions handle mutations. It just works.</p>
+          </div>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="rounded-xl overflow-hidden" style={{ background: '#1e1e2e' }}>
+              <div className="flex items-center gap-1.5 px-4 py-3" style={{ background: 'rgba(255,255,255,0.05)' }}>
+                <span className="w-3 h-3 rounded-full bg-red-500" />
+                <span className="w-3 h-3 rounded-full bg-yellow-500" />
+                <span className="w-3 h-3 rounded-full bg-green-500" />
+                <span className="ml-3 text-xs text-gray-500 font-mono">routes/tasks/index.tsx</span>
+              </div>
+              <pre className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed overflow-x-auto">
+{\`// Server loader \u2014 fetches data
+export async function loader({ context }) {
+  const auth = useAuth(context);
+  const user = auth.getUser();
+  const tasks = getTasksByUser(user.id);
+  return { tasks };
+}
+
+// Component renders with data
+export default function Tasks({ loaderData }) {
+  return (
+    <div>
+      {loaderData.tasks.map(task => (
+        <TaskCard key={task.id} task={task} />
+      ))}
+    </div>
+  );
+}\`}
+              </pre>
+            </div>
+            <div className="rounded-xl overflow-hidden" style={{ background: '#1e1e2e' }}>
+              <div className="flex items-center gap-1.5 px-4 py-3" style={{ background: 'rgba(255,255,255,0.05)' }}>
+                <span className="w-3 h-3 rounded-full bg-red-500" />
+                <span className="w-3 h-3 rounded-full bg-yellow-500" />
+                <span className="w-3 h-3 rounded-full bg-green-500" />
+                <span className="ml-3 text-xs text-gray-500 font-mono">routes/tasks/new.tsx</span>
+              </div>
+              <pre className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed overflow-x-auto">
+{\`// Server action \u2014 handles mutations
+export async function action({ request, context }) {
+  const auth = useAuth(context);
+  const user = auth.getUser();
+  const form = await request.formData();
+
+  const task = createTask(
+    user.id,
+    form.get('title'),
+    form.get('description'),
+    'todo',
+    form.get('priority')
+  );
+
+  return Response.redirect('/tasks');
+}\`}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24 px-4 text-center">
+        <h2 className="text-3xl font-bold mb-4">Ready to get organized?</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">Create your account and start managing tasks in seconds.</p>
+        <a href="/register" className="btn btn-primary text-base px-8 py-3">
+          Create Free Account
+        </a>
+      </section>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/index.${ext}`), indexPage);
+  const loginPage = `
+import { useAuth } from '@ereo/auth';
+
+export async function loader({ context }${ts ? ": { context: any }" : ""}) {
+  try {
+    const auth = useAuth(context);
+    if (auth.isAuthenticated()) {
+      return new Response(null, { status: 302, headers: { Location: '/tasks' } });
+    }
+  } catch {}
+  return {};
+}
+
+export async function action({ request, context }${ts ? ": { request: Request; context: any }" : ""}) {
+  const formData = await request.formData();
+  const email = formData.get('email')${ts ? " as string" : ""};
+  const password = formData.get('password')${ts ? " as string" : ""};
+
+  const errors${ts ? ": Record<string, string>" : ""} = {};
+  if (!email) errors.email = 'Email is required';
+  if (!password) errors.password = 'Password is required';
+
+  if (Object.keys(errors).length > 0) {
+    return { success: false, errors };
+  }
+
+  try {
+    const auth = useAuth(context);
+    await auth.signIn('credentials', { email, password });
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: '/tasks',
+        'Set-Cookie': auth.getCookieHeader() || '',
+      },
+    });
+  } catch {
+    return { success: false, errors: { form: 'Invalid email or password' } };
+  }
+}
+
+${ts ? `interface LoginPageProps {
+  actionData?: {
+    success: boolean;
+    errors?: Record<string, string>;
+  };
+}
+` : ""}
+export default function LoginPage({ actionData }${ts ? ": LoginPageProps" : ""}) {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold">Welcome back</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-2">
+            Sign in to manage your tasks
+          </p>
+        </div>
+
+        <div className="card">
+          {actionData?.errors?.form && (
+            <div className="mb-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+              <p className="text-sm text-red-700 dark:text-red-300">{actionData.errors.form}</p>
+            </div>
+          )}
+
+          <form method="POST" className="space-y-4">
+            <div>
+              <label htmlFor="email" className="label">Email</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                autoComplete="email"
+                className="input"
+                placeholder="you@example.com"
+              />
+              {actionData?.errors?.email && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="label">Password</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                required
+                autoComplete="current-password"
+                className="input"
+                placeholder="Your password"
+              />
+              {actionData?.errors?.password && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.password}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className="btn btn-primary w-full py-2.5"
+            >
+              Sign in
+            </button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+            Don't have an account?{' '}
+            <a href="/register" className="text-primary-600 hover:underline font-medium">
+              Create one
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/(auth)/login.${ext}`), loginPage);
+  const registerPage = `
+import { useAuth } from '@ereo/auth';
+import { emailExists, createUser, hashPassword } from '~/lib/db';
+
+export async function loader({ context }${ts ? ": { context: any }" : ""}) {
+  try {
+    const auth = useAuth(context);
+    if (auth.isAuthenticated()) {
+      return new Response(null, { status: 302, headers: { Location: '/tasks' } });
+    }
+  } catch {}
+  return {};
+}
+
+export async function action({ request, context }${ts ? ": { request: Request; context: any }" : ""}) {
+  const formData = await request.formData();
+  const name = (formData.get('name')${ts ? " as string" : ""} || '').trim();
+  const email = (formData.get('email')${ts ? " as string" : ""} || '').trim().toLowerCase();
+  const password = formData.get('password')${ts ? " as string" : ""} || '';
+  const confirmPassword = formData.get('confirmPassword')${ts ? " as string" : ""} || '';
+
+  // Validate
+  const errors${ts ? ": Record<string, string>" : ""} = {};
+  if (!name || name.length < 2) errors.name = 'Name must be at least 2 characters';
+  if (!email || !email.includes('@')) errors.email = 'Please enter a valid email';
+  if (!password || password.length < 8) errors.password = 'Password must be at least 8 characters';
+  if (password !== confirmPassword) errors.confirmPassword = 'Passwords do not match';
+
+  if (Object.keys(errors).length > 0) {
+    return { success: false, errors };
+  }
+
+  // Check if email already exists
+  if (emailExists(email)) {
+    return { success: false, errors: { email: 'An account with this email already exists' } };
+  }
+
+  // Create user
+  const passwordHash = await hashPassword(password);
+  createUser(email, name, passwordHash);
+
+  // Sign in the new user
+  try {
+    const auth = useAuth(context);
+    await auth.signIn('credentials', { email, password });
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: '/tasks',
+        'Set-Cookie': auth.getCookieHeader() || '',
+      },
+    });
+  } catch {
+    // Account created but auto-login failed \u2014 redirect to login
+    return new Response(null, { status: 302, headers: { Location: '/login' } });
+  }
+}
+
+${ts ? `interface RegisterPageProps {
+  actionData?: {
+    success: boolean;
+    errors?: Record<string, string>;
+  };
+}
+` : ""}
+export default function RegisterPage({ actionData }${ts ? ": RegisterPageProps" : ""}) {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold">Create your account</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-2">
+            Start organizing your tasks today
+          </p>
+        </div>
+
+        <div className="card">
+          <form method="POST" className="space-y-4">
+            <div>
+              <label htmlFor="name" className="label">Name</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                autoComplete="name"
+                className="input"
+                placeholder="Your name"
+              />
+              {actionData?.errors?.name && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.name}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="email" className="label">Email</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                required
+                autoComplete="email"
+                className="input"
+                placeholder="you@example.com"
+              />
+              {actionData?.errors?.email && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="label">Password</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                required
+                autoComplete="new-password"
+                minLength={8}
+                className="input"
+                placeholder="At least 8 characters"
+              />
+              {actionData?.errors?.password && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.password}</p>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="label">Confirm Password</label>
+              <input
+                type="password"
+                id="confirmPassword"
+                name="confirmPassword"
+                required
+                autoComplete="new-password"
+                className="input"
+                placeholder="Repeat your password"
+              />
+              {actionData?.errors?.confirmPassword && (
+                <p className="mt-1 text-sm text-red-600">{actionData.errors.confirmPassword}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className="btn btn-primary w-full py-2.5"
+            >
+              Create account
+            </button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+            Already have an account?{' '}
+            <a href="/login" className="text-primary-600 hover:underline font-medium">
+              Sign in
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/(auth)/register.${ext}`), registerPage);
+  const logoutRoute = `
+import { useAuth } from '@ereo/auth';
+
+export async function action({ context }${ts ? ": { context: any }" : ""}) {
+  try {
+    const auth = useAuth(context);
+    await auth.signOut();
+  } catch {
+    // Already signed out
+  }
+
+  return new Response(null, {
+    status: 302,
+    headers: { Location: '/' },
+  });
+}
+
+export default function LogoutPage() {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <p className="text-gray-500">Signing out...</p>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/logout.${ext}`), logoutRoute);
+  const tasksIndex = `
+import { useAuth, requireAuth } from '@ereo/auth';
+import { getTasksByUser, getTaskStats } from '~/lib/db';
+import { TaskCard } from '~/components/TaskCard';
+
+export const config = { ...requireAuth({ redirect: '/login' }) };
+
+export async function loader({ request, context }${ts ? ": { request: Request; context: any }" : ""}) {
+  const auth = useAuth(context);
+  if (!auth.isAuthenticated()) {
+    return new Response(null, { status: 302, headers: { Location: '/login' } });
+  }
+  const user = auth.getUser()${ts ? "!" : ""};
+  const userId = Number(user.id);
+
+  // Read filter from URL search params
+  const url = new URL(request.url);
+  const status = url.searchParams.get('status') || 'all';
+
+  const tasks = getTasksByUser(userId, status);
+  const stats = getTaskStats(userId);
+
+  return { tasks, stats, currentFilter: status };
+}
+
+${ts ? `interface TasksPageProps {
+  loaderData: {
+    tasks: Array<{
+      id: number;
+      title: string;
+      description: string;
+      status: 'todo' | 'in_progress' | 'done';
+      priority: 'low' | 'medium' | 'high';
+      created_at: string;
+      updated_at: string;
+    }>;
+    stats: { todo: number; in_progress: number; done: number; total: number };
+    currentFilter: string;
+  };
+}
+` : ""}
+export default function TasksPage({ loaderData }${ts ? ": TasksPageProps" : ""}) {
+  const { tasks, stats, currentFilter } = loaderData;
+
+  const filters = [
+    { value: 'all', label: 'All', count: stats.total },
+    { value: 'todo', label: 'To Do', count: stats.todo },
+    { value: 'in_progress', label: 'In Progress', count: stats.in_progress },
+    { value: 'done', label: 'Done', count: stats.done },
+  ];
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div>
+          <h1 className="text-3xl font-bold">Tasks</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            {stats.total === 0
+              ? 'No tasks yet. Create your first one!'
+              : \`\${stats.total} task\${stats.total === 1 ? '' : 's'} total, \${stats.done} completed\`}
+          </p>
+        </div>
+        <a href="/tasks/new" className="btn btn-primary">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          New Task
+        </a>
+      </div>
+
+      {/* Stats Cards */}
+      {stats.total > 0 && (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          <div className="card py-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">Total</div>
+            <div className="text-3xl font-bold mt-1">{stats.total}</div>
+          </div>
+          <div className="card py-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">To Do</div>
+            <div className="text-3xl font-bold mt-1 text-gray-600 dark:text-gray-300">{stats.todo}</div>
+          </div>
+          <div className="card py-4">
+            <div className="text-sm text-blue-500">In Progress</div>
+            <div className="text-3xl font-bold mt-1 text-blue-600 dark:text-blue-400">{stats.in_progress}</div>
+          </div>
+          <div className="card py-4">
+            <div className="text-sm text-green-500">Done</div>
+            <div className="text-3xl font-bold mt-1 text-green-600 dark:text-green-400">{stats.done}</div>
+          </div>
+        </div>
+      )}
+
+      {/* Filter Tabs */}
+      {stats.total > 0 && (
+        <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
+          {filters.map((filter) => (
+            <a
+              key={filter.value}
+              href={\`/tasks\${filter.value === 'all' ? '' : \`?status=\${filter.value}\`}\`}
+              className={\`btn btn-sm whitespace-nowrap \${
+                currentFilter === filter.value
+                  ? 'btn-primary'
+                  : 'btn-ghost'
+              }\`}
+            >
+              {filter.label}
+              <span className={\`ml-1.5 px-1.5 py-0.5 rounded-full text-xs \${
+                currentFilter === filter.value
+                  ? 'bg-white/20'
+                  : 'bg-gray-200 dark:bg-gray-700'
+              }\`}>
+                {filter.count}
+              </span>
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Task List */}
+      {tasks.length > 0 ? (
+        <div className="space-y-3">
+          {tasks.map((task) => (
+            <TaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      ) : stats.total > 0 ? (
+        <div className="card text-center py-12">
+          <p className="text-gray-500 dark:text-gray-400 mb-4">No tasks match the current filter.</p>
+          <a href="/tasks" className="btn btn-secondary btn-sm">Clear filter</a>
+        </div>
+      ) : (
+        <div className="card text-center py-16">
+          <svg className="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+          </svg>
+          <h2 className="text-xl font-semibold mb-2">No tasks yet</h2>
+          <p className="text-gray-500 dark:text-gray-400 mb-6">Create your first task to get started.</p>
+          <a href="/tasks/new" className="btn btn-primary">
+            Create your first task
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/tasks/index.${ext}`), tasksIndex);
+  const newTaskPage = `
+import { useAuth, requireAuth } from '@ereo/auth';
+import { createTask } from '~/lib/db';
+
+export const config = { ...requireAuth({ redirect: '/login' }) };
+
+export async function action({ request, context }${ts ? ": { request: Request; context: any }" : ""}) {
+  const auth = useAuth(context);
+  if (!auth.isAuthenticated()) {
+    return new Response(null, { status: 302, headers: { Location: '/login' } });
+  }
+  const user = auth.getUser()${ts ? "!" : ""};
+  const userId = Number(user.id);
+
+  const formData = await request.formData();
+  const title = (formData.get('title')${ts ? " as string" : ""} || '').trim();
+  const description = (formData.get('description')${ts ? " as string" : ""} || '').trim();
+  const priority = formData.get('priority')${ts ? " as string" : ""} || 'medium';
+
+  // Validate
+  const errors${ts ? ": Record<string, string>" : ""} = {};
+  if (!title || title.length < 1) errors.title = 'Title is required';
+  if (title.length > 200) errors.title = 'Title must be under 200 characters';
+  if (!['low', 'medium', 'high'].includes(priority)) errors.priority = 'Invalid priority';
+
+  if (Object.keys(errors).length > 0) {
+    return { success: false, errors };
+  }
+
+  createTask(userId, title, description, 'todo', priority);
+
+  return new Response(null, {
+    status: 302,
+    headers: { Location: '/tasks' },
+  });
+}
+
+${ts ? `interface NewTaskPageProps {
+  actionData?: {
+    success: boolean;
+    errors?: Record<string, string>;
+  };
+}
+` : ""}
+export default function NewTaskPage({ actionData }${ts ? ": NewTaskPageProps" : ""}) {
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-8">
+      <div className="mb-8">
+        <a href="/tasks" className="text-sm text-gray-500 hover:text-primary-600 transition-colors">
+          &larr; Back to tasks
+        </a>
+        <h1 className="text-3xl font-bold mt-2">New Task</h1>
+      </div>
+
+      <div className="card">
+        <form method="POST" className="space-y-5">
+          <div>
+            <label htmlFor="title" className="label">Title</label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              required
+              maxLength={200}
+              className="input"
+              placeholder="What needs to be done?"
+              autoFocus
+            />
+            {actionData?.errors?.title && (
+              <p className="mt-1 text-sm text-red-600">{actionData.errors.title}</p>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="description" className="label">
+              Description <span className="text-gray-400 font-normal">(optional)</span>
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows={4}
+              className="input"
+              placeholder="Add more details about this task..."
+            />
+          </div>
+
+          <div>
+            <label htmlFor="priority" className="label">Priority</label>
+            <select id="priority" name="priority" className="input" defaultValue="medium">
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+            </select>
+            {actionData?.errors?.priority && (
+              <p className="mt-1 text-sm text-red-600">{actionData.errors.priority}</p>
+            )}
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <button
+              type="submit"
+              className="btn btn-primary"
+            >
+              Create Task
+            </button>
+            <a href="/tasks" className="btn btn-secondary">Cancel</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/tasks/new.${ext}`), newTaskPage);
+  const taskDetailPage = `
+import { useAuth, requireAuth } from '@ereo/auth';
+import { getTaskById, updateTask, deleteTask } from '~/lib/db';
+
+export const config = { ...requireAuth({ redirect: '/login' }) };
+
+export async function loader({ params, context }${ts ? ": { params: { id: string }; context: any }" : ""}) {
+  const auth = useAuth(context);
+  if (!auth.isAuthenticated()) {
+    return new Response(null, { status: 302, headers: { Location: '/login' } });
+  }
+  const user = auth.getUser()${ts ? "!" : ""};
+  const userId = Number(user.id);
+
+  const task = getTaskById(Number(params.id), userId);
+
+  if (!task) {
+    throw new Response('Task not found', { status: 404 });
+  }
+
+  return { task };
+}
+
+export async function action({ request, params, context }${ts ? ": { request: Request; params: { id: string }; context: any }" : ""}) {
+  const auth = useAuth(context);
+  if (!auth.isAuthenticated()) {
+    return new Response(null, { status: 302, headers: { Location: '/login' } });
+  }
+  const user = auth.getUser()${ts ? "!" : ""};
+  const userId = Number(user.id);
+  const taskId = Number(params.id);
+
+  const formData = await request.formData();
+  const intent = formData.get('_intent')${ts ? " as string" : ""};
+
+  // Handle delete
+  if (intent === 'delete') {
+    deleteTask(taskId, userId);
+    return new Response(null, {
+      status: 302,
+      headers: { Location: '/tasks' },
+    });
+  }
+
+  // Handle status quick-toggle
+  if (intent === 'toggle-status') {
+    const task = getTaskById(taskId, userId);
+    if (!task) throw new Response('Task not found', { status: 404 });
+
+    const nextStatus${ts ? ": Record<string, string>" : ""} = {
+      todo: 'in_progress',
+      in_progress: 'done',
+      done: 'todo',
+    };
+
+    updateTask(taskId, userId, task.title, task.description, nextStatus[task.status] || 'todo', task.priority);
+    return new Response(null, {
+      status: 302,
+      headers: { Location: \`/tasks/\${taskId}\` },
+    });
+  }
+
+  // Handle update
+  const title = (formData.get('title')${ts ? " as string" : ""} || '').trim();
+  const description = (formData.get('description')${ts ? " as string" : ""} || '').trim();
+  const status = formData.get('status')${ts ? " as string" : ""} || 'todo';
+  const priority = formData.get('priority')${ts ? " as string" : ""} || 'medium';
+
+  const errors${ts ? ": Record<string, string>" : ""} = {};
+  if (!title || title.length < 1) errors.title = 'Title is required';
+  if (title.length > 200) errors.title = 'Title must be under 200 characters';
+  if (!['todo', 'in_progress', 'done'].includes(status)) errors.status = 'Invalid status';
+  if (!['low', 'medium', 'high'].includes(priority)) errors.priority = 'Invalid priority';
+
+  if (Object.keys(errors).length > 0) {
+    return { success: false, errors };
+  }
+
+  const updated = updateTask(taskId, userId, title, description, status, priority);
+
+  if (!updated) {
+    return { success: false, errors: { form: 'Task not found' } };
+  }
+
+  return new Response(null, {
+    status: 302,
+    headers: { Location: '/tasks' },
+  });
+}
+
+${ts ? `interface TaskDetailProps {
+  loaderData: {
+    task: {
+      id: number;
+      title: string;
+      description: string;
+      status: 'todo' | 'in_progress' | 'done';
+      priority: 'low' | 'medium' | 'high';
+      created_at: string;
+      updated_at: string;
+    };
+  };
+  actionData?: {
+    success: boolean;
+    message?: string;
+    errors?: Record<string, string>;
+  };
+}
+` : ""}
+export default function TaskDetailPage({ loaderData, actionData }${ts ? ": TaskDetailProps" : ""}) {
+  const { task } = loaderData;
+
+  const statusLabels${ts ? ": Record<string, string>" : ""} = {
+    todo: 'To Do',
+    in_progress: 'In Progress',
+    done: 'Done',
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-8">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <a href="/tasks" className="text-sm text-gray-500 hover:text-primary-600 transition-colors">
+            &larr; Back to tasks
+          </a>
+          <h1 className="text-3xl font-bold mt-2">Edit Task</h1>
+        </div>
+
+        {/* Quick status toggle */}
+        <form method="POST">
+          <input type="hidden" name="_intent" value="toggle-status" />
+          <button type="submit" className="btn btn-secondary btn-sm">
+            Move to {statusLabels[task.status === 'todo' ? 'in_progress' : task.status === 'in_progress' ? 'done' : 'todo']}
+          </button>
+        </form>
+      </div>
+
+      {actionData?.errors?.form && (
+        <div className="mb-6 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+          <p className="text-sm text-red-700 dark:text-red-300">{actionData.errors.form}</p>
+        </div>
+      )}
+
+      <div className="card">
+        <form method="POST" className="space-y-5">
+          <div>
+            <label htmlFor="title" className="label">Title</label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              required
+              maxLength={200}
+              className="input"
+              defaultValue={task.title}
+            />
+            {actionData?.errors?.title && (
+              <p className="mt-1 text-sm text-red-600">{actionData.errors.title}</p>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="description" className="label">
+              Description <span className="text-gray-400 font-normal">(optional)</span>
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows={4}
+              className="input"
+              defaultValue={task.description}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="status" className="label">Status</label>
+              <select id="status" name="status" className="input" defaultValue={task.status}>
+                <option value="todo">To Do</option>
+                <option value="in_progress">In Progress</option>
+                <option value="done">Done</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="priority" className="label">Priority</label>
+              <select id="priority" name="priority" className="input" defaultValue={task.priority}>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="text-xs text-gray-400 dark:text-gray-500">
+            Created {new Date(task.created_at).toLocaleString()}
+            {task.updated_at !== task.created_at && (
+              <> &bull; Updated {new Date(task.updated_at).toLocaleString()}</>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              type="submit"
+              className="btn btn-primary"
+            >
+              Save Changes
+            </button>
+            <a href="/tasks" className="btn btn-secondary">Cancel</a>
+          </div>
+        </form>
+      </div>
+
+      {/* Delete section - pure form, no client JS needed */}
+      <div className="mt-6 card border-red-200 dark:border-red-800">
+        <h3 className="text-sm font-semibold text-red-600 dark:text-red-400 mb-2">Danger Zone</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Permanently delete this task. This action cannot be undone.
+        </p>
+        <form method="POST">
+          <input type="hidden" name="_intent" value="delete" />
+          <button type="submit" className="btn btn-danger btn-sm">
+            Delete Task
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export function ErrorBoundary({ error }${ts ? ": { error: Error }" : ""}) {
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-16 text-center">
+      <h1 className="text-4xl font-bold mb-4">Task Not Found</h1>
+      <p className="text-gray-600 dark:text-gray-400 mb-8">
+        This task doesn't exist or you don't have access to it.
+      </p>
+      <a href="/tasks" className="btn btn-primary">
+        Back to Tasks
+      </a>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/tasks/[id].${ext}`), taskDetailPage);
+  const errorPage = `
+${ts ? `interface ErrorPageProps {
+  error: Error;
+}
+` : ""}
+export default function ErrorPage({ error }${ts ? ": ErrorPageProps" : ""}) {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center p-4">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Something went wrong</h1>
+        <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-md">
+          {error?.message || 'An unexpected error occurred. Please try again.'}
+        </p>
+        <a href="/" className="btn btn-primary">
+          Go Home
+        </a>
+      </div>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/_error.${ext}`), errorPage);
+  const notFoundPage = `
+export default function NotFoundPage() {
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center p-4">
+      <div className="text-center">
+        <div className="text-8xl font-bold text-gray-200 dark:text-gray-700 mb-4">404</div>
+        <h1 className="text-4xl font-bold mb-4">Page Not Found</h1>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
+          The page you're looking for doesn't exist.
+        </p>
+        <a href="/" className="btn btn-primary">
+          Go Home
+        </a>
+      </div>
+    </div>
+  );
+}
+`.trim();
+  await Bun.write(join(projectDir, `app/routes/_404.${ext}`), notFoundPage);
+  await Bun.write(join(projectDir, ".gitignore"), `node_modules
+.ereo
+dist
+*.log
+.DS_Store
+.env
+.env.local
+.env.*.local
+data/*.db
+data/*.db-wal
+data/*.db-shm`);
+  await Bun.write(join(projectDir, ".env.example"), `# Environment Variables
+# Copy this file to .env and update the values
+
+# Node environment
+NODE_ENV=development
+
+# Server port (optional, defaults to 3000)
+# PORT=3000
+
+# Auth secret \u2014 REQUIRED for production!
+# Generate one with: openssl rand -base64 32
+AUTH_SECRET=change-me-in-production`);
+  await Bun.write(join(projectDir, ".env"), `NODE_ENV=development
+AUTH_SECRET=dev-secret-not-for-production`);
+  await Bun.write(join(projectDir, "data/.gitkeep"), "");
+  const dockerfile = `# ---- Stage 1: Install all deps + build ----
+FROM oven/bun:1-slim AS builder
+WORKDIR /app
+COPY package.json bun.lockb* ./
+RUN bun install --ignore-scripts
+COPY . .
+RUN bun run build
+
+# ---- Stage 2: Production dependencies only ----
+FROM oven/bun:1-slim AS deps
+WORKDIR /app
+COPY package.json bun.lockb* ./
+RUN bun install --production --ignore-scripts
+
+# ---- Stage 3: Production image ----
+FROM oven/bun:1-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# Non-root user for security
+RUN addgroup -S -g 1001 ereo && \\
+    adduser -S -u 1001 -G ereo -H ereo
+
+# Copy production node_modules
+COPY --from=deps --chown=ereo:ereo /app/node_modules ./node_modules
+
+# Copy build output and runtime files
+COPY --from=builder --chown=ereo:ereo /app/.ereo        ./.ereo
+COPY --from=builder --chown=ereo:ereo /app/app          ./app
+COPY --from=builder --chown=ereo:ereo /app/public       ./public
+COPY --from=builder --chown=ereo:ereo /app/package.json ./
+COPY --from=builder --chown=ereo:ereo /app/ereo.config.* ./
+COPY --from=builder --chown=ereo:ereo /app/tsconfig.*    ./
+
+# Create data directory for SQLite with proper permissions
+RUN mkdir -p /app/data && chown -R ereo:ereo /app/data
+
+USER ereo
+
+# Mount a volume for persistent SQLite data
+VOLUME ["/app/data"]
+
+EXPOSE 3000
+
+CMD ["bun", "run", "start"]
+`;
+  await Bun.write(join(projectDir, "Dockerfile"), dockerfile);
+  await Bun.write(join(projectDir, ".dockerignore"), generateDockerignore());
+  const readme = `# ${projectName}
+
+A full-stack task management app built with [EreoJS](https://github.com/ereoJS/ereoJS) \u2014 a React fullstack framework powered by Bun.
+
+## Features
+
+- **Email & Password Authentication** \u2014 Secure sign up/sign in with argon2id hashing and JWT sessions
+- **SQLite Database** \u2014 Production-ready with WAL mode, foreign keys, and automatic migrations
+- **Full CRUD** \u2014 Create, read, update, and delete tasks with server-side validation
+- **Server-Side Rendering** \u2014 Fast initial loads with data fetched via loaders
+- **File-Based Routing** \u2014 Routes map to files with layouts, dynamic segments, and error boundaries
+- **Protected Routes** \u2014 Auth middleware redirects unauthenticated users to login
+- **Tailwind CSS** \u2014 Utility-first styling with dark mode support
+- **Docker Ready** \u2014 Multi-stage Dockerfile with SQLite volume persistence${trace ? `
+- **Full-Stack Tracing** \u2014 Request-level observability with \`@ereo/trace\`` : ""}
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+bun install
+
+# Start development server${trace ? " (tracing enabled)" : ""}
+bun run dev
+
+# Open http://localhost:3000
+\`\`\`
+
+Create an account at http://localhost:3000/register and start managing tasks!
+
+## Project Structure
+
+\`\`\`
+app/
+\u251C\u2500\u2500 components/
+\u2502   \u251C\u2500\u2500 Navigation.tsx    # Auth-aware navigation
+\u2502   \u251C\u2500\u2500 Footer.tsx
+\u2502   \u2514\u2500\u2500 TaskCard.tsx      # Task list item
+\u251C\u2500\u2500 lib/
+\u2502   \u251C\u2500\u2500 db.ts             # SQLite database, schema & queries${ts ? `
+\u2502   \u2514\u2500\u2500 types.ts          # Shared TypeScript types` : ""}
+\u251C\u2500\u2500 routes/
+\u2502   \u251C\u2500\u2500 _layout.tsx       # Root layout with auth context
+\u2502   \u251C\u2500\u2500 _error.tsx        # Error boundary
+\u2502   \u251C\u2500\u2500 _404.tsx          # Not found page
+\u2502   \u251C\u2500\u2500 index.tsx         # Landing page
+\u2502   \u251C\u2500\u2500 logout.tsx        # Logout action
+\u2502   \u251C\u2500\u2500 (auth)/
+\u2502   \u2502   \u251C\u2500\u2500 login.tsx     # Sign in
+\u2502   \u2502   \u2514\u2500\u2500 register.tsx  # Sign up
+\u2502   \u2514\u2500\u2500 tasks/
+\u2502       \u251C\u2500\u2500 index.tsx     # Task list with filters
+\u2502       \u251C\u2500\u2500 new.tsx       # Create task form
+\u2502       \u2514\u2500\u2500 [id].tsx      # View/edit/delete task
+\u2514\u2500\u2500 styles.css            # Tailwind directives
+data/
+\u2514\u2500\u2500 app.db                # SQLite database (auto-created)
+\`\`\`
+
+## Scripts
+
+- \`bun run dev\` \u2014 Start development server
+- \`bun run build\` \u2014 Build for production
+- \`bun run start\` \u2014 Start production server
+- \`bun test\` \u2014 Run tests
+- \`bun run typecheck\` \u2014 TypeScript type checking
+
+## Environment Variables
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| \`AUTH_SECRET\` | **Yes** (production) | dev secret | JWT signing secret |
+| \`NODE_ENV\` | No | development | Environment |
+| \`PORT\` | No | 3000 | Server port |
+
+Generate a production secret:
+
+\`\`\`bash
+openssl rand -base64 32
+\`\`\`
+
+## Docker
+
+\`\`\`bash
+# Build image
+docker build -t ${projectName} .
+
+# Run with persistent SQLite data
+docker run -p 3000:3000 -v ${projectName}-data:/app/data -e AUTH_SECRET=your-secret ${projectName}
+\`\`\`
+
+${trace ? `## Tracing
+
+This project includes \`@ereo/trace\` for full-stack observability.
+
+- **CLI Reporter** \u2014 Live tree view in your terminal
+- **Trace Viewer** \u2014 http://localhost:3000/__ereo/traces
+- **Production** \u2014 Alias \`@ereo/trace\` to \`@ereo/trace/noop\` (592 bytes, zero cost)
+
+` : ""}## Learn More
+
+- [EreoJS Documentation](https://ereojs.github.io/ereoJS/)
 - [Bun Documentation](https://bun.sh/docs)
 - [Tailwind CSS](https://tailwindcss.com/docs)
 `;
@@ -1920,6 +3811,8 @@ async function generateProject(projectDir, projectName, options) {
   const { template, typescript, trace } = options;
   if (template === "minimal") {
     await generateMinimalProject(projectDir, projectName, typescript, trace);
+  } else if (template === "tasks") {
+    await generateTasksProject(projectDir, projectName, typescript, trace);
   } else {
     await generateTailwindProject(projectDir, projectName, typescript, trace);
   }