@illuma-ai/code-sandbox 1.4.0 → 1.5.0

package/src/templates/fullstack-starter.ts

@@ -1,3507 +0,0 @@
-/**
- * fullstack-starter — Production-equivalent full-stack starter template.
- *
- * A properly structured Express + React application with:
- * - sql.js (SQLite WASM) as a true relational DB — same schemas work on Postgres
- * - React Router v6 for client-side routing
- * - React Context for auth + app state management
- * - JWT authentication with role-based access
- * - .ranger manifest for AI agent context
- *
- * Architecture:
- * ┌─────────────────────────────────────────────────────┐
- * │  server.js              — Entry, middleware chain    │
- * │  config.js              — Environment / .env config  │
- * │  db/database.js         — sql.js init + migrations   │
- * │  db/migrations/001.js   — Schema definitions (typed) │
- * │  db/repositories/       — CRUD repos over SQL        │
- * │  middleware/             — Auth, errors, static       │
- * │  routes/                — Express route definitions   │
- * │  public/                — React SPA (CDN-loaded)      │
- * │  public/store/          — React Context providers     │
- * │  public/pages/          — Route-level components      │
- * │  public/components/     — Reusable UI components      │
- * │  .ranger                — AI agent instruction file   │
- * │  .env.example           — Env var documentation       │
- * └─────────────────────────────────────────────────────┘
- *
- * DATABASE:
- * Uses sql.js (SQLite compiled to WASM) — runs in the browser.
- * Schemas use standard SQL types (INTEGER, TEXT, REAL, BOOLEAN, TIMESTAMP).
- * To migrate to Postgres: change db/database.js to use 'pg', keep same schemas.
- * The repository layer abstracts all SQL — swap the query runner, not the repos.
- */
-
-import type { FileMap } from "../types";
-
-// ---------------------------------------------------------------------------
-// .ranger — AI Agent Instruction File
-// ---------------------------------------------------------------------------
-
-const RANGER_MANIFEST = `# .ranger — Project Manifest
-# This file provides context to the Ranger AI agent about project structure,
-# conventions, and schemas. Update this file when you add new files, routes,
-# or database tables.
-
-## Project Type
-type: fullstack-express-react
-runtime: nodepod (browser-based Node.js)
-database: sql.js (SQLite WASM — Postgres-compatible schemas)
-frontend: React 18 (CDN) + React Router v6 + React Context
-styling: Tailwind CSS (CDN)
-
-## File Structure
-\`\`\`
-├── server.js                  # Express entry point — middleware chain, server start
-├── config.js                  # Environment config — reads process.env with defaults
-├── .env.example               # Environment variable documentation
-├── package.json               # Dependencies (express, sql.js)
-├── Dockerfile                 # Multi-stage production Docker build
-├── docker-compose.yml         # Local dev + optional Postgres profile
-├── .dockerignore              # Docker build exclusions
-├── README.md                  # Project docs, API reference, deploy guide
-├── CONTRIBUTING.md            # Contribution guidelines, adding resources
-│
-├── db/
-│   ├── database.js            # sql.js initialization, migration runner, query helpers
-│   └── migrations/
-│       └── 001_initial.js     # Initial schema — users, items tables
-│
-├── db/repositories/
-│   ├── userRepository.js      # User CRUD — findById, findByEmail, create, update
-│   └── itemRepository.js      # Item CRUD — findAll, findById, create, update, delete, stats
-│
-├── middleware/
-│   ├── auth.js                # JWT auth — generateToken, authenticate, requireRole
-│   ├── errorHandler.js        # Global error handler + 404 with SPA fallback
-│   ├── staticFiles.js         # Static file serving (fs.readFileSync for Nodepod)
-│   └── validate.js            # Request body validation helpers
-│
-├── routes/
-│   ├── auth.js                # POST /api/auth/register, POST /api/auth/login, GET /api/auth/me
-│   └── items.js               # GET/POST /api/items, GET/PUT/DELETE /api/items/:id, GET /api/items/stats
-│
-├── public/
-│   ├── index.html             # HTML shell — loads React, Router, Tailwind from CDN
-│   ├── styles.css             # Custom CSS animations
-│   │
-│   ├── lib/
-│   │   └── api.js             # API client — fetch wrapper with auth token handling
-│   │
-│   ├── store/
-│   │   ├── AuthContext.js     # Auth state — user, token, login/logout/register actions
-│   │   └── AppContext.js      # App state — items, loading, filters, CRUD actions
-│   │
-│   ├── pages/
-│   │   ├── WelcomePage.js     # Landing page — hero, features, architecture overview
-│   │   ├── LoginPage.js       # Login form with demo credentials
-│   │   ├── RegisterPage.js    # Registration form
-│   │   └── DashboardPage.js   # Main app — stats, items list, create/edit/delete
-│   │
-│   ├── components/
-│   │   ├── Navbar.js          # Top nav — logo, nav links, auth status
-│   │   ├── Toast.js           # Notification toasts
-│   │   ├── ItemCard.js        # Item display with status/priority badges
-│   │   └── ItemForm.js        # Create/edit item form with validation
-│   │
-│   └── App.js                 # Root — providers, router, route definitions
-\`\`\`
-
-## Database Schema
-
-### users
-| Column     | Type      | Constraints                    | Notes                    |
-|------------|-----------|-------------------------------|--------------------------|
-| id         | INTEGER   | PRIMARY KEY AUTOINCREMENT     | Maps to SERIAL in Postgres |
-| email      | TEXT      | UNIQUE NOT NULL               |                          |
-| password   | TEXT      | NOT NULL                      | Hashed (base64 in sandbox) |
-| name       | TEXT      | NOT NULL                      |                          |
-| role       | TEXT      | NOT NULL DEFAULT 'user'       | 'admin' or 'user'       |
-| created_at | TEXT      | DEFAULT CURRENT_TIMESTAMP     | ISO 8601 string          |
-
-### items
-| Column      | Type      | Constraints                    | Notes                    |
-|-------------|-----------|-------------------------------|--------------------------|
-| id          | INTEGER   | PRIMARY KEY AUTOINCREMENT     | Maps to SERIAL in Postgres |
-| title       | TEXT      | NOT NULL                      |                          |
-| description | TEXT      |                               |                          |
-| status      | TEXT      | NOT NULL DEFAULT 'todo'       | 'todo', 'in_progress', 'done' |
-| priority    | TEXT      | NOT NULL DEFAULT 'medium'     | 'low', 'medium', 'high' |
-| user_id     | INTEGER   | REFERENCES users(id)          | Foreign key              |
-| created_at  | TEXT      | DEFAULT CURRENT_TIMESTAMP     |                          |
-| updated_at  | TEXT      | DEFAULT CURRENT_TIMESTAMP     |                          |
-
-## API Routes
-
-### Health
-| Method | Path                | Auth     | Body                              | Response              |
-|--------|---------------------|----------|-----------------------------------|-----------------------|
-| GET    | /api/health         | None     | —                                 | { status, uptime }    |
-
-### Authentication
-| Method | Path                | Auth     | Body                              | Response              |
-|--------|---------------------|----------|-----------------------------------|-----------------------|
-| POST   | /api/auth/register  | None     | { email, password, name }         | { user, token }       |
-| POST   | /api/auth/login     | None     | { email, password }               | { user, token }       |
-| GET    | /api/auth/me        | Required | —                                 | { user }              |
-
-### Items
-| Method | Path                | Auth     | Body                              | Response              |
-|--------|---------------------|----------|-----------------------------------|-----------------------|
-| GET    | /api/items          | Required | —                                 | { items: [...] }      |
-| POST   | /api/items          | Required | { title, description?, status?, priority? } | { item }     |
-| GET    | /api/items/stats    | Required | —                                 | { total, byStatus, byPriority } |
-| GET    | /api/items/:id      | Required | —                                 | { item }              |
-| PUT    | /api/items/:id      | Required | { title?, description?, status?, priority? } | { item }    |
-| DELETE | /api/items/:id      | Required | —                                 | { message }           |
-
-## Coding Conventions
-- Backend: CommonJS (require/module.exports), ES5-compatible for Nodepod
-- Frontend: React.createElement (aliased as 'h'), no JSX — loaded from CDN
-- React Router: ReactRouterDOM global, v6 API (Routes, Route, Link, Outlet, useParams, useNavigate)
-- State: React Context with useReducer for complex state, useState for simple
-- API calls: Use /public/lib/api.js client — handles auth headers, JSON parsing, errors
-- SQL: Use parameterized queries (?) — never string interpolation
-- Error handling: All async route handlers wrapped in try/catch, errors forwarded to errorHandler
-- Validation: Use middleware/validate.js for request body validation
-
-## Postgres Migration Guide
-To deploy to production with Postgres:
-1. Replace db/database.js: use 'pg' Pool instead of sql.js
-2. Update query syntax: ? params → $1, $2 (Postgres style)
-3. Replace INTEGER PRIMARY KEY AUTOINCREMENT → SERIAL PRIMARY KEY
-4. Replace TEXT for timestamps → TIMESTAMP WITH TIME ZONE
-5. Add connection pooling config to config.js
-6. Everything else (repos, routes, middleware) stays the same
-`;
-
-// ---------------------------------------------------------------------------
-// .env.example
-// ---------------------------------------------------------------------------
-
-const ENV_EXAMPLE = `# =============================================================================
-# Environment Configuration
-# Copy to .env and fill in values for your deployment
-# =============================================================================
-
-# Server
-PORT=3000
-NODE_ENV=development
-
-# Database
-# In sandbox: uses sql.js (SQLite WASM, in-memory)
-# In production: DATABASE_URL=postgresql://user:pass@host:5432/dbname
-DATABASE_URL=sqlite::memory:
-
-# Authentication
-JWT_SECRET=change-me-in-production
-JWT_EXPIRES_IN=24h
-
-# CORS
-CORS_ORIGIN=*
-`;
-
-// ---------------------------------------------------------------------------
-// config.js
-// ---------------------------------------------------------------------------
-
-const CONFIG_JS = `/**
- * config.js — Centralized configuration.
- *
- * Reads from process.env with sensible defaults for the sandbox.
- * In production, set real values via .env file or environment variables.
- */
-var config = {
-  port: parseInt(process.env.PORT || '3000', 10),
-  nodeEnv: process.env.NODE_ENV || 'development',
-  jwtSecret: process.env.JWT_SECRET || 'sandbox-secret-key',
-  jwtExpiresIn: process.env.JWT_EXPIRES_IN || '24h',
-  corsOrigin: process.env.CORS_ORIGIN || '*',
-  databaseUrl: process.env.DATABASE_URL || 'sqlite::memory:',
-};
-
-module.exports = config;
-`;
-
-// ---------------------------------------------------------------------------
-// db/database.js — sql.js initialization + migration runner
-// ---------------------------------------------------------------------------
-
-const DATABASE_JS = `/**
- * db/database.js — SQLite database via sql.js (WASM).
- *
- * Provides a Postgres-compatible interface:
- * - db.run(sql, params)    — Execute INSERT/UPDATE/DELETE, returns { changes }
- * - db.get(sql, params)    — SELECT single row, returns object or undefined
- * - db.all(sql, params)    — SELECT multiple rows, returns array
- * - db.exec(sql)           — Execute raw SQL (DDL, multi-statement)
- *
- * Migration runner applies numbered migration files in order.
- * Tracks applied migrations in a _migrations table.
- *
- * POSTGRES MIGRATION:
- * Replace this file with a 'pg' Pool wrapper exposing the same interface.
- * Change ? params to $1, $2 style. Everything else stays the same.
- */
-
-var initSqlJs;
-try {
-  initSqlJs = require('sql.js');
-} catch (e) {
-  // Fallback: sql.js not installed yet, will be loaded later
-  initSqlJs = null;
-}
-
-var _db = null;
-var _ready = null;
-
-var WASM_CDN_URL = 'https://cdn.jsdelivr.net/npm/sql.js@1.11.0/dist/sql-wasm.wasm';
-
-/**
- * Initialize the database. Called once at server startup.
- * Returns a promise that resolves when the DB is ready.
- */
-function initialize() {
-  if (_ready) return _ready;
-
-  _ready = _initializeInternal();
-  return _ready;
-}
-
-async function _initializeInternal() {
-  if (!initSqlJs) {
-    initSqlJs = require('sql.js');
-  }
-
-  // PERF: Pre-fetch the WASM binary ourselves using browser fetch().
-  // sql.js detects Nodepod as Node.js (because process.versions.node exists)
-  // and tries to use fs.readFileSync() to load the WASM binary — which fails.
-  // By fetching the binary ourselves and passing it as wasmBinary, we bypass
-  // sql.js's environment detection entirely.
-  console.log('[DB] Fetching sql.js WASM binary from CDN...');
-  var wasmResponse = await fetch(WASM_CDN_URL);
-  if (!wasmResponse.ok) {
-    throw new Error('[DB] Failed to fetch WASM binary: HTTP ' + wasmResponse.status);
-  }
-  var wasmBinary = new Uint8Array(await wasmResponse.arrayBuffer());
-  console.log('[DB] WASM binary loaded (' + wasmBinary.length + ' bytes)');
-
-  // Initialize sql.js with the pre-fetched WASM binary
-  var SQL = await initSqlJs({ wasmBinary: wasmBinary });
-
-  _db = new SQL.Database();
-
-  // Enable WAL mode equivalent (not applicable in-memory, but documents intent)
-  _db.run('PRAGMA journal_mode=MEMORY');
-  _db.run('PRAGMA foreign_keys=ON');
-
-  // Create migrations tracking table
-  _db.run(\`
-    CREATE TABLE IF NOT EXISTS _migrations (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL UNIQUE,
-      applied_at TEXT DEFAULT CURRENT_TIMESTAMP
-    )
-  \`);
-
-  // Run migrations
-  await _runMigrations();
-
-  console.log('[DB] SQLite database initialized (sql.js WASM)');
-  return _db;
-}
-
-/**
- * Run all pending migrations in order.
- */
-async function _runMigrations() {
-  var migrations = require('./migrations/001_initial');
-
-  var applied = {};
-  var rows = _db.exec('SELECT name FROM _migrations');
-  if (rows.length > 0) {
-    rows[0].values.forEach(function(row) {
-      applied[row[0]] = true;
-    });
-  }
-
-  migrations.forEach(function(migration) {
-    if (!applied[migration.name]) {
-      console.log('[DB] Running migration: ' + migration.name);
-      // Use exec() instead of run() — migrations may contain multiple statements
-      _db.exec(migration.up);
-      _db.run('INSERT INTO _migrations (name) VALUES (?)', [migration.name]);
-    }
-  });
-}
-
-/**
- * Execute a query that modifies data (INSERT, UPDATE, DELETE).
- * @param {string} sql - SQL with ? placeholders
- * @param {Array} params - Parameter values
- * @returns {{ changes: number }} Number of affected rows
- */
-function run(sql, params) {
-  _db.run(sql, params || []);
-  var result = _db.exec('SELECT changes() as changes');
-  var changes = result.length > 0 ? result[0].values[0][0] : 0;
-  return { changes: changes };
-}
-
-/**
- * Execute a SELECT query returning a single row.
- * @param {string} sql - SQL with ? placeholders
- * @param {Array} params - Parameter values
- * @returns {Object|undefined} Row as { column: value } or undefined
- */
-function get(sql, params) {
-  var stmt = _db.prepare(sql);
-  stmt.bind(params || []);
-  var row = undefined;
-  if (stmt.step()) {
-    row = stmt.getAsObject();
-  }
-  stmt.free();
-  return row;
-}
-
-/**
- * Execute a SELECT query returning all matching rows.
- * @param {string} sql - SQL with ? placeholders
- * @param {Array} params - Parameter values
- * @returns {Array<Object>} Array of { column: value } objects
- */
-function all(sql, params) {
-  var stmt = _db.prepare(sql);
-  stmt.bind(params || []);
-  var rows = [];
-  while (stmt.step()) {
-    rows.push(stmt.getAsObject());
-  }
-  stmt.free();
-  return rows;
-}
-
-/**
- * Execute raw SQL (for DDL or multi-statement queries).
- * @param {string} sql - Raw SQL
- */
-function exec(sql) {
-  _db.exec(sql);
-}
-
-/**
- * Get the last inserted row ID.
- * @returns {number}
- */
-function lastInsertRowId() {
-  var result = _db.exec('SELECT last_insert_rowid() as id');
-  return result.length > 0 ? result[0].values[0][0] : 0;
-}
-
-module.exports = {
-  initialize: initialize,
-  run: run,
-  get: get,
-  all: all,
-  exec: exec,
-  lastInsertRowId: lastInsertRowId,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// db/migrations/001_initial.js
-// ---------------------------------------------------------------------------
-
-const MIGRATION_001 = `/**
- * Migration 001 — Initial schema.
- *
- * Creates the core tables with proper types, constraints, and indexes.
- * These schemas are designed to map directly to Postgres:
- *
- * SQLite → Postgres equivalents:
- *   INTEGER PRIMARY KEY AUTOINCREMENT → SERIAL PRIMARY KEY
- *   TEXT → VARCHAR or TEXT
- *   TEXT (timestamps) → TIMESTAMP WITH TIME ZONE
- *   REAL → DOUBLE PRECISION
- *   INTEGER (boolean) → BOOLEAN
- */
-
-module.exports = [
-  {
-    name: '001_create_users',
-    up: \`
-      CREATE TABLE IF NOT EXISTS users (
-        id          INTEGER PRIMARY KEY AUTOINCREMENT,
-        email       TEXT    NOT NULL UNIQUE,
-        password    TEXT    NOT NULL,
-        name        TEXT    NOT NULL,
-        role        TEXT    NOT NULL DEFAULT 'user',
-        created_at  TEXT    DEFAULT CURRENT_TIMESTAMP
-      )
-    \`,
-  },
-  {
-    name: '002_create_items',
-    up: \`
-      CREATE TABLE IF NOT EXISTS items (
-        id          INTEGER PRIMARY KEY AUTOINCREMENT,
-        title       TEXT    NOT NULL,
-        description TEXT,
-        status      TEXT    NOT NULL DEFAULT 'todo',
-        priority    TEXT    NOT NULL DEFAULT 'medium',
-        user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-        created_at  TEXT    DEFAULT CURRENT_TIMESTAMP,
-        updated_at  TEXT    DEFAULT CURRENT_TIMESTAMP
-      )
-    \`,
-  },
-  {
-    name: '003_create_items_indexes',
-    up: \`
-      CREATE INDEX IF NOT EXISTS idx_items_user_id ON items(user_id);
-      CREATE INDEX IF NOT EXISTS idx_items_status ON items(status);
-      CREATE INDEX IF NOT EXISTS idx_items_priority ON items(priority);
-    \`,
-  },
-  {
-    name: '004_seed_data',
-    up: \`
-      INSERT INTO users (email, password, name, role) VALUES
-        ('admin@example.com', 'YWRtaW4xMjM=', 'Admin User', 'admin'),
-        ('user@example.com', 'dXNlcjEyMw==', 'Demo User', 'user');
-
-      INSERT INTO items (title, description, status, priority, user_id) VALUES
-        ('Set up project structure', 'Initialize the repository with proper folder structure and configuration files', 'done', 'high', 1),
-        ('Design database schema', 'Create the initial database tables with proper types, constraints, and indexes', 'in_progress', 'high', 1),
-        ('Build authentication flow', 'Implement JWT-based login and registration with role-based access control', 'todo', 'medium', 1),
-        ('Create API endpoints', 'Build RESTful CRUD endpoints for all resources', 'todo', 'medium', 2),
-        ('Write frontend components', 'Build React components for dashboard, forms, and navigation', 'todo', 'low', 2);
-    \`,
-  },
-];
-`;
-
-// ---------------------------------------------------------------------------
-// db/repositories/userRepository.js
-// ---------------------------------------------------------------------------
-
-const USER_REPOSITORY_JS = `/**
- * db/repositories/userRepository.js — User data access layer.
- *
- * All database queries for the users table. Uses parameterized SQL.
- * This file works identically with Postgres — just change ? to $1, $2.
- */
-
-var db = require('../database');
-
-/**
- * Find a user by ID.
- * @param {number} id
- * @returns {Object|undefined} User object (without password)
- */
-function findById(id) {
-  var user = db.get(
-    'SELECT id, email, name, role, created_at FROM users WHERE id = ?',
-    [id]
-  );
-  return user || undefined;
-}
-
-/**
- * Find a user by email (includes password for auth).
- * @param {string} email
- * @returns {Object|undefined} User object with password
- */
-function findByEmail(email) {
-  return db.get('SELECT * FROM users WHERE email = ?', [email]) || undefined;
-}
-
-/**
- * Create a new user.
- * @param {{ email: string, password: string, name: string, role?: string }} data
- * @returns {Object} Created user (without password)
- */
-function create(data) {
-  var role = data.role || 'user';
-  db.run(
-    'INSERT INTO users (email, password, name, role) VALUES (?, ?, ?, ?)',
-    [data.email, data.password, data.name, role]
-  );
-  var id = db.lastInsertRowId();
-  return findById(id);
-}
-
-/**
- * Update a user.
- * @param {number} id
- * @param {{ email?: string, name?: string, role?: string }} data
- * @returns {Object|undefined} Updated user
- */
-function update(id, data) {
-  var fields = [];
-  var values = [];
-
-  if (data.email !== undefined) { fields.push('email = ?'); values.push(data.email); }
-  if (data.name !== undefined) { fields.push('name = ?'); values.push(data.name); }
-  if (data.role !== undefined) { fields.push('role = ?'); values.push(data.role); }
-
-  if (fields.length === 0) return findById(id);
-
-  values.push(id);
-  db.run('UPDATE users SET ' + fields.join(', ') + ' WHERE id = ?', values);
-  return findById(id);
-}
-
-/**
- * Get all users (without passwords).
- * @returns {Array<Object>}
- */
-function findAll() {
-  return db.all('SELECT id, email, name, role, created_at FROM users ORDER BY created_at DESC');
-}
-
-/**
- * Count total users.
- * @returns {number}
- */
-function count() {
-  var row = db.get('SELECT COUNT(*) as count FROM users');
-  return row ? row.count : 0;
-}
-
-module.exports = {
-  findById: findById,
-  findByEmail: findByEmail,
-  create: create,
-  update: update,
-  findAll: findAll,
-  count: count,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// db/repositories/itemRepository.js
-// ---------------------------------------------------------------------------
-
-const ITEM_REPOSITORY_JS = `/**
- * db/repositories/itemRepository.js — Item data access layer.
- *
- * All database queries for the items table. Uses parameterized SQL.
- * This file works identically with Postgres — just change ? to $1, $2.
- */
-
-var db = require('../database');
-
-/**
- * Find all items, optionally filtered by user_id, status, or priority.
- * @param {{ userId?: number, status?: string, priority?: string }} filters
- * @returns {Array<Object>}
- */
-function findAll(filters) {
-  var where = [];
-  var params = [];
-  filters = filters || {};
-
-  if (filters.userId) {
-    where.push('i.user_id = ?');
-    params.push(filters.userId);
-  }
-  if (filters.status) {
-    where.push('i.status = ?');
-    params.push(filters.status);
-  }
-  if (filters.priority) {
-    where.push('i.priority = ?');
-    params.push(filters.priority);
-  }
-
-  var sql = \`
-    SELECT i.*, u.name as user_name, u.email as user_email
-    FROM items i
-    LEFT JOIN users u ON i.user_id = u.id
-  \`;
-  if (where.length > 0) {
-    sql += ' WHERE ' + where.join(' AND ');
-  }
-  sql += ' ORDER BY i.created_at DESC';
-
-  return db.all(sql, params);
-}
-
-/**
- * Find a single item by ID.
- * @param {number} id
- * @returns {Object|undefined}
- */
-function findById(id) {
-  return db.get(
-    \`SELECT i.*, u.name as user_name, u.email as user_email
-     FROM items i
-     LEFT JOIN users u ON i.user_id = u.id
-     WHERE i.id = ?\`,
-    [id]
-  ) || undefined;
-}
-
-/**
- * Create a new item.
- * @param {{ title: string, description?: string, status?: string, priority?: string, user_id: number }} data
- * @returns {Object} Created item
- */
-function create(data) {
-  var status = data.status || 'todo';
-  var priority = data.priority || 'medium';
-  var description = data.description || '';
-
-  db.run(
-    'INSERT INTO items (title, description, status, priority, user_id) VALUES (?, ?, ?, ?, ?)',
-    [data.title, description, status, priority, data.user_id]
-  );
-  var id = db.lastInsertRowId();
-  return findById(id);
-}
-
-/**
- * Update an existing item.
- * @param {number} id
- * @param {{ title?: string, description?: string, status?: string, priority?: string }} data
- * @returns {Object|undefined} Updated item
- */
-function update(id, data) {
-  var fields = [];
-  var values = [];
-
-  if (data.title !== undefined) { fields.push('title = ?'); values.push(data.title); }
-  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description); }
-  if (data.status !== undefined) { fields.push('status = ?'); values.push(data.status); }
-  if (data.priority !== undefined) { fields.push('priority = ?'); values.push(data.priority); }
-
-  if (fields.length === 0) return findById(id);
-
-  fields.push("updated_at = datetime('now')");
-  values.push(id);
-  db.run('UPDATE items SET ' + fields.join(', ') + ' WHERE id = ?', values);
-  return findById(id);
-}
-
-/**
- * Delete an item by ID.
- * @param {number} id
- * @returns {boolean} True if deleted
- */
-function remove(id) {
-  var result = db.run('DELETE FROM items WHERE id = ?', [id]);
-  return result.changes > 0;
-}
-
-/**
- * Get aggregate statistics.
- * @returns {{ total: number, byStatus: Object, byPriority: Object }}
- */
-function getStats() {
-  var total = db.get('SELECT COUNT(*) as count FROM items');
-  var byStatus = db.all('SELECT status, COUNT(*) as count FROM items GROUP BY status');
-  var byPriority = db.all('SELECT priority, COUNT(*) as count FROM items GROUP BY priority');
-
-  var statusMap = {};
-  byStatus.forEach(function(row) { statusMap[row.status] = row.count; });
-
-  var priorityMap = {};
-  byPriority.forEach(function(row) { priorityMap[row.priority] = row.count; });
-
-  return {
-    total: total ? total.count : 0,
-    byStatus: statusMap,
-    byPriority: priorityMap,
-  };
-}
-
-module.exports = {
-  findAll: findAll,
-  findById: findById,
-  create: create,
-  update: update,
-  remove: remove,
-  getStats: getStats,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// middleware/auth.js
-// ---------------------------------------------------------------------------
-
-const AUTH_JS = `/**
- * middleware/auth.js — JWT authentication.
- *
- * In the sandbox, JWT is a base64-encoded JSON payload (no crypto).
- * In production, swap for the 'jsonwebtoken' package with real signing.
- *
- * Provides:
- * - generateToken(payload) — Create a JWT
- * - authenticate — Middleware to verify JWT and attach req.user
- * - requireRole(role) — Middleware to enforce role-based access
- */
-
-var config = require('../config');
-
-/**
- * Generate a JWT token.
- * Sandbox: base64-encoded JSON. Production: use jsonwebtoken.sign().
- *
- * @param {{ id: number, email: string, role: string }} payload
- * @returns {string} Token
- */
-function generateToken(payload) {
-  var data = {
-    sub: payload.id,
-    email: payload.email,
-    role: payload.role,
-    iat: Date.now(),
-    exp: Date.now() + 24 * 60 * 60 * 1000, // 24h
-  };
-  // Sandbox: base64 encode (NOT secure — for demo only)
-  // Production: return jwt.sign(data, config.jwtSecret, { expiresIn: config.jwtExpiresIn });
-  return btoa(JSON.stringify(data));
-}
-
-/**
- * Verify and decode a JWT token.
- * @param {string} token
- * @returns {Object|null} Decoded payload or null
- */
-function verifyToken(token) {
-  try {
-    // Sandbox: base64 decode
-    // Production: return jwt.verify(token, config.jwtSecret);
-    var data = JSON.parse(atob(token));
-    if (data.exp && data.exp < Date.now()) return null;
-    return data;
-  } catch (e) {
-    return null;
-  }
-}
-
-/**
- * Hash a password.
- * Sandbox: base64 encode. Production: use bcrypt.hash().
- */
-function hashPassword(password) {
-  return btoa(password);
-}
-
-/**
- * Compare a password with its hash.
- * Sandbox: base64 compare. Production: use bcrypt.compare().
- */
-function comparePassword(password, hash) {
-  return btoa(password) === hash;
-}
-
-/**
- * Authentication middleware — verifies JWT from Authorization header.
- * Attaches decoded user info to req.user.
- */
-function authenticate(req, res, next) {
-  var authHeader = req.headers.authorization;
-  if (!authHeader || !authHeader.startsWith('Bearer ')) {
-    return res.status(401).json({ error: 'Authentication required' });
-  }
-
-  var token = authHeader.split(' ')[1];
-  var decoded = verifyToken(token);
-  if (!decoded) {
-    return res.status(401).json({ error: 'Invalid or expired token' });
-  }
-
-  req.user = { id: decoded.sub, email: decoded.email, role: decoded.role };
-  next();
-}
-
-/**
- * Role-based access middleware.
- * @param {...string} roles — Allowed roles
- * @returns {Function} Express middleware
- */
-function requireRole() {
-  var roles = Array.prototype.slice.call(arguments);
-  return function(req, res, next) {
-    if (!req.user) {
-      return res.status(401).json({ error: 'Authentication required' });
-    }
-    if (roles.indexOf(req.user.role) === -1) {
-      return res.status(403).json({ error: 'Insufficient permissions' });
-    }
-    next();
-  };
-}
-
-module.exports = {
-  generateToken: generateToken,
-  verifyToken: verifyToken,
-  hashPassword: hashPassword,
-  comparePassword: comparePassword,
-  authenticate: authenticate,
-  requireRole: requireRole,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// middleware/errorHandler.js
-// ---------------------------------------------------------------------------
-
-const ERROR_HANDLER_JS = `/**
- * middleware/errorHandler.js — Global error handling.
- *
- * - notFound: 404 handler that serves index.html for SPA routes
- * - errorHandler: Catches all errors, returns structured JSON
- */
-
-var fs = require('fs');
-var path = require('path');
-
-/**
- * 404 handler — serves index.html for SPA routes, 404 JSON for API routes.
- */
-function notFound(req, res, next) {
-  // API routes get a JSON 404
-  if (req.path.startsWith('/api/')) {
-    return res.status(404).json({ error: 'Endpoint not found: ' + req.method + ' ' + req.path });
-  }
-
-  // SPA fallback — serve index.html for all non-API routes
-  try {
-    var html = fs.readFileSync(path.join(__dirname, '..', 'public', 'index.html'), 'utf-8');
-    res.setHeader('Content-Type', 'text/html');
-    res.send(html);
-  } catch (e) {
-    res.status(404).json({ error: 'Not found' });
-  }
-}
-
-/**
- * Global error handler — catches thrown errors and returns structured JSON.
- */
-function errorHandler(err, req, res, next) {
-  var status = err.status || err.statusCode || 500;
-  var message = err.message || 'Internal server error';
-
-  console.error('[Error] ' + req.method + ' ' + req.path + ' — ' + status + ': ' + message);
-
-  res.status(status).json({
-    error: message,
-    ...(process.env.NODE_ENV === 'development' ? { stack: err.stack } : {}),
-  });
-}
-
-module.exports = {
-  notFound: notFound,
-  errorHandler: errorHandler,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// middleware/staticFiles.js
-// ---------------------------------------------------------------------------
-
-const STATIC_FILES_JS = `/**
- * middleware/staticFiles.js — Static file serving for Nodepod.
- *
- * Nodepod doesn't support express.static() or res.sendFile().
- * This middleware reads files via fs.readFileSync and sends them
- * with proper Content-Type headers.
- *
- * PRODUCTION: Replace this entire middleware with express.static('public').
- */
-
-var fs = require('fs');
-var path = require('path');
-
-var MIME_TYPES = {
-  '.html': 'text/html; charset=utf-8',
-  '.js':   'application/javascript; charset=utf-8',
-  '.css':  'text/css; charset=utf-8',
-  '.json': 'application/json; charset=utf-8',
-  '.svg':  'image/svg+xml',
-  '.png':  'image/png',
-  '.jpg':  'image/jpeg',
-  '.ico':  'image/x-icon',
-  '.woff': 'font/woff',
-  '.woff2': 'font/woff2',
-  '.ttf':  'font/ttf',
-};
-
-/**
- * Static file serving middleware.
- * Serves files from the /public directory.
- */
-function serveStatic(req, res, next) {
-  if (req.method !== 'GET' && req.method !== 'HEAD') return next();
-
-  // Skip API routes
-  if (req.path.startsWith('/api/')) return next();
-
-  var reqPath = req.path === '/' ? '/index.html' : req.path;
-  var filePath = path.join(__dirname, '..', 'public', reqPath);
-  var ext = path.extname(filePath);
-
-  // If no extension and not an API route, try serving index.html (SPA fallback)
-  if (!ext) {
-    filePath = path.join(__dirname, '..', 'public', 'index.html');
-    ext = '.html';
-  }
-
-  try {
-    var isBinary = ext === '.png' || ext === '.jpg' || ext === '.ico' || ext === '.woff' || ext === '.woff2' || ext === '.ttf';
-    var data = fs.readFileSync(filePath, isBinary ? undefined : 'utf-8');
-    res.setHeader('Content-Type', MIME_TYPES[ext] || 'application/octet-stream');
-    res.send(data);
-  } catch (e) {
-    next();
-  }
-}
-
-module.exports = serveStatic;
-`;
-
-// ---------------------------------------------------------------------------
-// middleware/validate.js
-// ---------------------------------------------------------------------------
-
-const VALIDATE_JS = `/**
- * middleware/validate.js — Request validation helpers.
- *
- * Simple validation middleware factory. For production, consider
- * using Joi, Zod, or express-validator.
- */
-
-/**
- * Validate that required fields exist in req.body.
- * @param {Array<string>} fields — Required field names
- * @returns {Function} Express middleware
- */
-function requireFields(fields) {
-  return function(req, res, next) {
-    var missing = [];
-    fields.forEach(function(field) {
-      if (req.body[field] === undefined || req.body[field] === null || req.body[field] === '') {
-        missing.push(field);
-      }
-    });
-
-    if (missing.length > 0) {
-      return res.status(400).json({
-        error: 'Missing required fields: ' + missing.join(', '),
-      });
-    }
-    next();
-  };
-}
-
-/**
- * Validate that a field value is one of the allowed values.
- * @param {string} field — Field name in req.body
- * @param {Array<string>} allowed — Allowed values
- * @returns {Function} Express middleware
- */
-function allowedValues(field, allowed) {
-  return function(req, res, next) {
-    if (req.body[field] !== undefined && allowed.indexOf(req.body[field]) === -1) {
-      return res.status(400).json({
-        error: field + ' must be one of: ' + allowed.join(', '),
-      });
-    }
-    next();
-  };
-}
-
-module.exports = {
-  requireFields: requireFields,
-  allowedValues: allowedValues,
-};
-`;
-
-// ---------------------------------------------------------------------------
-// routes/auth.js
-// ---------------------------------------------------------------------------
-
-const ROUTES_AUTH_JS = `/**
- * routes/auth.js — Authentication endpoints.
- *
- * POST /api/auth/register — Create new account
- * POST /api/auth/login    — Sign in, receive JWT
- * GET  /api/auth/me       — Get current user profile
- */
-
-var express = require('express');
-var router = express.Router();
-var auth = require('../middleware/auth');
-var validate = require('../middleware/validate');
-var userRepo = require('../db/repositories/userRepository');
-
-/**
- * POST /api/auth/register
- * Body: { email, password, name }
- * Returns: { user, token }
- */
-router.post('/register',
-  validate.requireFields(['email', 'password', 'name']),
-  function(req, res) {
-    try {
-      // Check if email already exists
-      var existing = userRepo.findByEmail(req.body.email);
-      if (existing) {
-        return res.status(409).json({ error: 'Email already registered' });
-      }
-
-      // Create user with hashed password
-      var user = userRepo.create({
-        email: req.body.email,
-        password: auth.hashPassword(req.body.password),
-        name: req.body.name,
-        role: 'user',
-      });
-
-      var token = auth.generateToken(user);
-      res.status(201).json({ user: user, token: token });
-    } catch (err) {
-      console.error('[Auth] Register error:', err.message);
-      res.status(500).json({ error: 'Registration failed' });
-    }
-  }
-);
-
-/**
- * POST /api/auth/login
- * Body: { email, password }
- * Returns: { user, token }
- */
-router.post('/login',
-  validate.requireFields(['email', 'password']),
-  function(req, res) {
-    try {
-      var user = userRepo.findByEmail(req.body.email);
-      if (!user) {
-        return res.status(401).json({ error: 'Invalid email or password' });
-      }
-
-      if (!auth.comparePassword(req.body.password, user.password)) {
-        return res.status(401).json({ error: 'Invalid email or password' });
-      }
-
-      // Return user without password
-      var safeUser = {
-        id: user.id,
-        email: user.email,
-        name: user.name,
-        role: user.role,
-        created_at: user.created_at,
-      };
-
-      var token = auth.generateToken(safeUser);
-      res.json({ user: safeUser, token: token });
-    } catch (err) {
-      console.error('[Auth] Login error:', err.message);
-      res.status(500).json({ error: 'Login failed' });
-    }
-  }
-);
-
-/**
- * GET /api/auth/me
- * Headers: Authorization: Bearer <token>
- * Returns: { user }
- */
-router.get('/me', auth.authenticate, function(req, res) {
-  try {
-    var user = userRepo.findById(req.user.id);
-    if (!user) {
-      return res.status(404).json({ error: 'User not found' });
-    }
-    res.json({ user: user });
-  } catch (err) {
-    console.error('[Auth] Me error:', err.message);
-    res.status(500).json({ error: 'Failed to fetch profile' });
-  }
-});
-
-module.exports = router;
-`;
-
-// ---------------------------------------------------------------------------
-// routes/items.js
-// ---------------------------------------------------------------------------
-
-const ROUTES_ITEMS_JS = `/**
- * routes/items.js — Item CRUD endpoints.
- *
- * All routes require authentication (JWT).
- *
- * GET    /api/items       — List items (with optional filters)
- * POST   /api/items       — Create item
- * GET    /api/items/stats  — Get aggregate statistics
- * GET    /api/items/:id   — Get single item
- * PUT    /api/items/:id   — Update item
- * DELETE /api/items/:id   — Delete item
- */
-
-var express = require('express');
-var router = express.Router();
-var auth = require('../middleware/auth');
-var validate = require('../middleware/validate');
-var itemRepo = require('../db/repositories/itemRepository');
-
-// All item routes require authentication
-router.use(auth.authenticate);
-
-/**
- * GET /api/items
- * Query: ?status=todo&priority=high
- * Returns: { items: [...] }
- */
-router.get('/', function(req, res) {
-  try {
-    var filters = {
-      status: req.query.status || undefined,
-      priority: req.query.priority || undefined,
-    };
-    var items = itemRepo.findAll(filters);
-    res.json({ items: items });
-  } catch (err) {
-    console.error('[Items] List error:', err.message);
-    res.status(500).json({ error: 'Failed to fetch items' });
-  }
-});
-
-/**
- * GET /api/items/stats
- * Returns: { total, byStatus, byPriority }
- */
-router.get('/stats', function(req, res) {
-  try {
-    var stats = itemRepo.getStats();
-    res.json(stats);
-  } catch (err) {
-    console.error('[Items] Stats error:', err.message);
-    res.status(500).json({ error: 'Failed to fetch stats' });
-  }
-});
-
-/**
- * GET /api/items/:id
- * Returns: { item }
- */
-router.get('/:id', function(req, res) {
-  try {
-    var item = itemRepo.findById(parseInt(req.params.id, 10));
-    if (!item) {
-      return res.status(404).json({ error: 'Item not found' });
-    }
-    res.json({ item: item });
-  } catch (err) {
-    console.error('[Items] Get error:', err.message);
-    res.status(500).json({ error: 'Failed to fetch item' });
-  }
-});
-
-/**
- * POST /api/items
- * Body: { title, description?, status?, priority? }
- * Returns: { item }
- */
-router.post('/',
-  validate.requireFields(['title']),
-  validate.allowedValues('status', ['todo', 'in_progress', 'done']),
-  validate.allowedValues('priority', ['low', 'medium', 'high']),
-  function(req, res) {
-    try {
-      var item = itemRepo.create({
-        title: req.body.title,
-        description: req.body.description || '',
-        status: req.body.status || 'todo',
-        priority: req.body.priority || 'medium',
-        user_id: req.user.id,
-      });
-      res.status(201).json({ item: item });
-    } catch (err) {
-      console.error('[Items] Create error:', err.message);
-      res.status(500).json({ error: 'Failed to create item' });
-    }
-  }
-);
-
-/**
- * PUT /api/items/:id
- * Body: { title?, description?, status?, priority? }
- * Returns: { item }
- */
-router.put('/:id',
-  validate.allowedValues('status', ['todo', 'in_progress', 'done']),
-  validate.allowedValues('priority', ['low', 'medium', 'high']),
-  function(req, res) {
-    try {
-      var existing = itemRepo.findById(parseInt(req.params.id, 10));
-      if (!existing) {
-        return res.status(404).json({ error: 'Item not found' });
-      }
-
-      var item = itemRepo.update(parseInt(req.params.id, 10), {
-        title: req.body.title,
-        description: req.body.description,
-        status: req.body.status,
-        priority: req.body.priority,
-      });
-      res.json({ item: item });
-    } catch (err) {
-      console.error('[Items] Update error:', err.message);
-      res.status(500).json({ error: 'Failed to update item' });
-    }
-  }
-);
-
-/**
- * DELETE /api/items/:id
- * Returns: { message }
- */
-router.delete('/:id', function(req, res) {
-  try {
-    var deleted = itemRepo.remove(parseInt(req.params.id, 10));
-    if (!deleted) {
-      return res.status(404).json({ error: 'Item not found' });
-    }
-    res.json({ message: 'Item deleted' });
-  } catch (err) {
-    console.error('[Items] Delete error:', err.message);
-    res.status(500).json({ error: 'Failed to delete item' });
-  }
-});
-
-module.exports = router;
-`;
-
-// ---------------------------------------------------------------------------
-// server.js
-// ---------------------------------------------------------------------------
-
-const SERVER_JS = `/**
- * server.js — Express application entry point.
- *
- * Middleware chain:
- * 1. Body parsing (JSON)
- * 2. Request logging
- * 3. Static file serving (Nodepod-compatible)
- * 4. API routes (auth, items)
- * 5. SPA fallback (404 → index.html)
- * 6. Error handler
- */
-
-var express = require('express');
-var config = require('./config');
-var db = require('./db/database');
-var serveStatic = require('./middleware/staticFiles');
-var errorHandler = require('./middleware/errorHandler');
-var authRoutes = require('./routes/auth');
-var itemRoutes = require('./routes/items');
-
-var app = express();
-
-// ---------------------------------------------------------------------------
-// Middleware
-// ---------------------------------------------------------------------------
-
-// Parse JSON bodies
-app.use(express.json());
-
-// Request logging
-app.use(function(req, res, next) {
-  var start = Date.now();
-  res.on('finish', function() {
-    var duration = Date.now() - start;
-    console.log(
-      '[' + req.method + '] ' + req.path + ' → ' + res.statusCode + ' (' + duration + 'ms)'
-    );
-  });
-  next();
-});
-
-// Static files (must be before API routes for / to serve index.html)
-app.use(serveStatic);
-
-// ---------------------------------------------------------------------------
-// API Routes
-// ---------------------------------------------------------------------------
-
-// Health check — used by Docker HEALTHCHECK, load balancers, and uptime monitors
-app.get('/api/health', function(req, res) {
-  res.json({ status: 'ok', uptime: process.uptime() });
-});
-
-app.use('/api/auth', authRoutes);
-app.use('/api/items', itemRoutes);
-
-// ---------------------------------------------------------------------------
-// Error handling
-// ---------------------------------------------------------------------------
-
-app.use(errorHandler.notFound);
-app.use(errorHandler.errorHandler);
-
-// ---------------------------------------------------------------------------
-// Start server after DB initialization
-// ---------------------------------------------------------------------------
-
-console.log('[Server] Initializing database...');
-
-db.initialize().then(function() {
-  console.log('[Server] Database ready, starting HTTP server...');
-  app.listen(config.port, function() {
-    console.log('');
-    console.log('===========================================');
-    console.log('  Server running on port ' + config.port);
-    console.log('  Database: SQLite (sql.js WASM)');
-    console.log('  Environment: ' + config.nodeEnv);
-    console.log('===========================================');
-    console.log('');
-    console.log('Demo accounts:');
-    console.log('  admin@example.com / admin123');
-    console.log('  user@example.com  / user123');
-    console.log('');
-  });
-}).catch(function(err) {
-  console.error('[FATAL] Failed to initialize database:', err && err.message ? err.message : err);
-  console.error('[FATAL] Stack:', err && err.stack ? err.stack : 'no stack');
-});
-`;
-
-// ---------------------------------------------------------------------------
-// public/index.html
-// ---------------------------------------------------------------------------
-
-const INDEX_HTML = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Starter App</title>
-  <script src="https://cdn.tailwindcss.com"><\/script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' },
-          }
-        }
-      }
-    }
-  <\/script>
-  <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
-  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
-  <script src="https://unpkg.com/@remix-run/router@1.21.0/dist/router.umd.min.js"><\/script>
-  <script src="https://unpkg.com/react-router@6.28.0/dist/umd/react-router.production.min.js"><\/script>
-  <script src="https://unpkg.com/react-router-dom@6.28.0/dist/umd/react-router-dom.production.min.js"><\/script>
-  <script src="https://unpkg.com/chart.js@4.4.0/dist/chart.umd.js"><\/script>
-  <link rel="stylesheet" href="/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen antialiased">
-  <div id="root"></div>
-
-  <!-- Lib -->
-  <script src="/lib/api.js"><\/script>
-
-  <!-- Store -->
-  <script src="/store/AuthContext.js"><\/script>
-  <script src="/store/AppContext.js"><\/script>
-
-  <!-- Components -->
-  <script src="/components/Toast.js"><\/script>
-  <script src="/components/Navbar.js"><\/script>
-  <script src="/components/ItemCard.js"><\/script>
-  <script src="/components/ItemForm.js"><\/script>
-  <script src="/components/StatsChart.js"><\/script>
-
-  <!-- Pages -->
-  <script src="/pages/WelcomePage.js"><\/script>
-  <script src="/pages/LoginPage.js"><\/script>
-  <script src="/pages/RegisterPage.js"><\/script>
-  <script src="/pages/DashboardPage.js"><\/script>
-
-  <!-- App (must be last) -->
-  <script src="/App.js"><\/script>
-</body>
-</html>`;
-
-// ---------------------------------------------------------------------------
-// public/styles.css
-// ---------------------------------------------------------------------------
-
-const STYLES_CSS = `/*
- * Ranger Theme Variables — chart colors and design tokens.
- * HSL values stored WITHOUT hsl() wrapper; consume as: color: hsl(var(--chart-1));
- */
-
-/* --- Light mode (default) ----------------------------------------------- */
-:root {
-  --text-primary: #1a1a1a;
-  --text-secondary: #565869;
-  --text-tertiary: #8e8ea0;
-  --surface-primary: #ffffff;
-  --surface-secondary: #f9fafb;
-  --surface-tertiary: #f3f4f6;
-  --border-light: #e5e7eb;
-  --border-medium: #d1d5db;
-  --border-heavy: #9ca3af;
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
-  --radius: 0.5rem;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-}
-
-/* --- Dark mode ---------------------------------------------------------- */
-.dark {
-  --text-primary: #f3f4f6;
-  --text-secondary: #d1d5db;
-  --text-tertiary: #6b7280;
-  --surface-primary: #111827;
-  --surface-secondary: #1f2937;
-  --surface-tertiary: #374151;
-  --border-light: #3a3a3b;
-  --border-medium: #4b5563;
-  --border-heavy: #6b7280;
-  --background: 0 0% 7%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 40.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-}
-
-/* --- Animations --------------------------------------------------------- */
-.fade-in {
-  animation: fadeIn 0.3s ease-out;
-}
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.slide-in {
-  animation: slideIn 0.3s ease-out;
-}
-@keyframes slideIn {
-  from { opacity: 0; transform: translateX(-12px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-.card-hover {
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.card-hover:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-}
-.toast-enter {
-  animation: toastIn 0.3s ease-out;
-}
-@keyframes toastIn {
-  from { opacity: 0; transform: translateY(-16px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-`;
-
-// ---------------------------------------------------------------------------
-// public/lib/api.js
-// ---------------------------------------------------------------------------
-
-const API_JS = `/**
- * lib/api.js — API client.
- *
- * Wraps fetch() with:
- * - Automatic Authorization header from stored token
- * - JSON parsing
- * - Error handling with structured error messages
- */
-
-window.ApiClient = (function() {
-  var TOKEN_KEY = 'auth_token';
-
-  function getToken() {
-    try { return localStorage.getItem(TOKEN_KEY); } catch(e) { return null; }
-  }
-
-  function setToken(token) {
-    try { if (token) localStorage.setItem(TOKEN_KEY, token); else localStorage.removeItem(TOKEN_KEY); } catch(e) {}
-  }
-
-  function clearToken() {
-    try { localStorage.removeItem(TOKEN_KEY); } catch(e) {}
-  }
-
-  /**
-   * Make an API request.
-   * @param {string} path — API path (e.g., '/api/items')
-   * @param {Object} options — fetch options
-   * @returns {Promise<Object>} Parsed JSON response
-   */
-  async function request(path, options) {
-    options = options || {};
-    var headers = { 'Content-Type': 'application/json' };
-    var token = getToken();
-    if (token) {
-      headers['Authorization'] = 'Bearer ' + token;
-    }
-    options.headers = Object.assign(headers, options.headers || {});
-
-    var response = await fetch(path, options);
-    var data;
-    try {
-      data = await response.json();
-    } catch (e) {
-      data = { error: 'Invalid response from server' };
-    }
-
-    if (!response.ok) {
-      var err = new Error(data.error || 'Request failed');
-      err.status = response.status;
-      err.data = data;
-      throw err;
-    }
-    return data;
-  }
-
-  return {
-    getToken: getToken,
-    setToken: setToken,
-    clearToken: clearToken,
-    get: function(path) { return request(path, { method: 'GET' }); },
-    post: function(path, body) { return request(path, { method: 'POST', body: JSON.stringify(body) }); },
-    put: function(path, body) { return request(path, { method: 'PUT', body: JSON.stringify(body) }); },
-    del: function(path) { return request(path, { method: 'DELETE' }); },
-  };
-})();
-`;
-
-// ---------------------------------------------------------------------------
-// public/store/AuthContext.js
-// ---------------------------------------------------------------------------
-
-const AUTH_CONTEXT_JS = `/**
- * store/AuthContext.js — Authentication state management.
- *
- * Provides:
- * - AuthProvider: Wraps app with auth state
- * - useAuth(): Hook to access { user, token, loading, login, register, logout }
- *
- * Uses React Context + useReducer for predictable state updates.
- */
-
-var h = React.createElement;
-
-// Action types
-var AUTH_ACTIONS = {
-  SET_LOADING: 'SET_LOADING',
-  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
-  LOGOUT: 'LOGOUT',
-  SET_USER: 'SET_USER',
-};
-
-// Reducer
-function authReducer(state, action) {
-  switch (action.type) {
-    case AUTH_ACTIONS.SET_LOADING:
-      return Object.assign({}, state, { loading: action.payload });
-    case AUTH_ACTIONS.LOGIN_SUCCESS:
-      return Object.assign({}, state, {
-        user: action.payload.user,
-        token: action.payload.token,
-        loading: false,
-      });
-    case AUTH_ACTIONS.SET_USER:
-      return Object.assign({}, state, { user: action.payload, loading: false });
-    case AUTH_ACTIONS.LOGOUT:
-      return { user: null, token: null, loading: false };
-    default:
-      return state;
-  }
-}
-
-// Context
-var AuthContext = React.createContext(null);
-
-/**
- * AuthProvider — Wraps children with auth state.
- * On mount, checks for stored token and fetches user profile.
- */
-window.AuthProvider = function AuthProvider(props) {
-  var initialState = { user: null, token: null, loading: true };
-  var stateAndDispatch = React.useReducer(authReducer, initialState);
-  var state = stateAndDispatch[0];
-  var dispatch = stateAndDispatch[1];
-
-  // Check stored token on mount
-  React.useEffect(function() {
-    var token = ApiClient.getToken();
-    if (!token) {
-      dispatch({ type: AUTH_ACTIONS.SET_LOADING, payload: false });
-      return;
-    }
-
-    ApiClient.get('/api/auth/me')
-      .then(function(data) {
-        dispatch({ type: AUTH_ACTIONS.LOGIN_SUCCESS, payload: { user: data.user, token: token } });
-      })
-      .catch(function() {
-        ApiClient.clearToken();
-        dispatch({ type: AUTH_ACTIONS.LOGOUT });
-      });
-  }, []);
-
-  /**
-   * Login with email and password.
-   * @returns {Promise<Object>} User data
-   */
-  var login = React.useCallback(function(email, password) {
-    dispatch({ type: AUTH_ACTIONS.SET_LOADING, payload: true });
-    return ApiClient.post('/api/auth/login', { email: email, password: password })
-      .then(function(data) {
-        ApiClient.setToken(data.token);
-        dispatch({ type: AUTH_ACTIONS.LOGIN_SUCCESS, payload: data });
-        return data;
-      })
-      .catch(function(err) {
-        dispatch({ type: AUTH_ACTIONS.SET_LOADING, payload: false });
-        throw err;
-      });
-  }, []);
-
-  /**
-   * Register a new account.
-   * @returns {Promise<Object>} User data
-   */
-  var register = React.useCallback(function(email, password, name) {
-    dispatch({ type: AUTH_ACTIONS.SET_LOADING, payload: true });
-    return ApiClient.post('/api/auth/register', { email: email, password: password, name: name })
-      .then(function(data) {
-        ApiClient.setToken(data.token);
-        dispatch({ type: AUTH_ACTIONS.LOGIN_SUCCESS, payload: data });
-        return data;
-      })
-      .catch(function(err) {
-        dispatch({ type: AUTH_ACTIONS.SET_LOADING, payload: false });
-        throw err;
-      });
-  }, []);
-
-  /**
-   * Logout — clear token and state.
-   */
-  var logout = React.useCallback(function() {
-    ApiClient.clearToken();
-    dispatch({ type: AUTH_ACTIONS.LOGOUT });
-  }, []);
-
-  var value = {
-    user: state.user,
-    token: state.token,
-    loading: state.loading,
-    login: login,
-    register: register,
-    logout: logout,
-    isAuthenticated: !!state.user,
-  };
-
-  return h(AuthContext.Provider, { value: value }, props.children);
-};
-
-/**
- * useAuth — Hook to access auth state and actions.
- * @returns {{ user, token, loading, login, register, logout, isAuthenticated }}
- */
-window.useAuth = function useAuth() {
-  var context = React.useContext(AuthContext);
-  if (!context) throw new Error('useAuth must be used within AuthProvider');
-  return context;
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/store/AppContext.js
-// ---------------------------------------------------------------------------
-
-const APP_CONTEXT_JS = `/**
- * store/AppContext.js — Application state management.
- *
- * Manages items, loading states, filters, and toasts.
- * Uses React Context + useReducer.
- *
- * Provides:
- * - AppProvider: Wraps app with state
- * - useApp(): Hook to access state and CRUD actions
- */
-
-var h = React.createElement;
-
-var APP_ACTIONS = {
-  SET_LOADING: 'SET_LOADING',
-  SET_ITEMS: 'SET_ITEMS',
-  ADD_ITEM: 'ADD_ITEM',
-  UPDATE_ITEM: 'UPDATE_ITEM',
-  REMOVE_ITEM: 'REMOVE_ITEM',
-  SET_STATS: 'SET_STATS',
-  SET_FILTER: 'SET_FILTER',
-  ADD_TOAST: 'ADD_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
-};
-
-function appReducer(state, action) {
-  switch (action.type) {
-    case APP_ACTIONS.SET_LOADING:
-      return Object.assign({}, state, { loading: action.payload });
-    case APP_ACTIONS.SET_ITEMS:
-      return Object.assign({}, state, { items: action.payload, loading: false });
-    case APP_ACTIONS.ADD_ITEM:
-      return Object.assign({}, state, { items: [action.payload].concat(state.items) });
-    case APP_ACTIONS.UPDATE_ITEM:
-      return Object.assign({}, state, {
-        items: state.items.map(function(i) { return i.id === action.payload.id ? action.payload : i; }),
-      });
-    case APP_ACTIONS.REMOVE_ITEM:
-      return Object.assign({}, state, {
-        items: state.items.filter(function(i) { return i.id !== action.payload; }),
-      });
-    case APP_ACTIONS.SET_STATS:
-      return Object.assign({}, state, { stats: action.payload });
-    case APP_ACTIONS.SET_FILTER:
-      return Object.assign({}, state, {
-        filters: Object.assign({}, state.filters, action.payload),
-      });
-    case APP_ACTIONS.ADD_TOAST:
-      return Object.assign({}, state, {
-        toasts: state.toasts.concat([action.payload]),
-      });
-    case APP_ACTIONS.REMOVE_TOAST:
-      return Object.assign({}, state, {
-        toasts: state.toasts.filter(function(t) { return t.id !== action.payload; }),
-      });
-    default:
-      return state;
-  }
-}
-
-var AppContext = React.createContext(null);
-
-window.AppProvider = function AppProvider(props) {
-  var initialState = {
-    items: [],
-    stats: null,
-    loading: false,
-    filters: { status: '', priority: '' },
-    toasts: [],
-  };
-  var stateAndDispatch = React.useReducer(appReducer, initialState);
-  var state = stateAndDispatch[0];
-  var dispatch = stateAndDispatch[1];
-
-  var toastId = React.useRef(0);
-
-  // Toast helper
-  function addToast(message, type) {
-    var id = ++toastId.current;
-    dispatch({ type: APP_ACTIONS.ADD_TOAST, payload: { id: id, message: message, type: type || 'info' } });
-    setTimeout(function() {
-      dispatch({ type: APP_ACTIONS.REMOVE_TOAST, payload: id });
-    }, 3000);
-  }
-
-  // CRUD actions
-  function fetchItems(filters) {
-    dispatch({ type: APP_ACTIONS.SET_LOADING, payload: true });
-    var query = '';
-    if (filters) {
-      var parts = [];
-      if (filters.status) parts.push('status=' + filters.status);
-      if (filters.priority) parts.push('priority=' + filters.priority);
-      if (parts.length > 0) query = '?' + parts.join('&');
-    }
-    return ApiClient.get('/api/items' + query)
-      .then(function(data) {
-        dispatch({ type: APP_ACTIONS.SET_ITEMS, payload: data.items });
-        return data.items;
-      })
-      .catch(function(err) {
-        dispatch({ type: APP_ACTIONS.SET_LOADING, payload: false });
-        addToast(err.message, 'error');
-      });
-  }
-
-  function fetchStats() {
-    return ApiClient.get('/api/items/stats')
-      .then(function(data) {
-        dispatch({ type: APP_ACTIONS.SET_STATS, payload: data });
-        return data;
-      })
-      .catch(function(err) {
-        addToast(err.message, 'error');
-      });
-  }
-
-  function createItem(data) {
-    return ApiClient.post('/api/items', data)
-      .then(function(result) {
-        dispatch({ type: APP_ACTIONS.ADD_ITEM, payload: result.item });
-        addToast('Item created', 'success');
-        fetchStats();
-        return result.item;
-      })
-      .catch(function(err) {
-        addToast(err.message, 'error');
-        throw err;
-      });
-  }
-
-  function updateItem(id, data) {
-    return ApiClient.put('/api/items/' + id, data)
-      .then(function(result) {
-        dispatch({ type: APP_ACTIONS.UPDATE_ITEM, payload: result.item });
-        addToast('Item updated', 'success');
-        fetchStats();
-        return result.item;
-      })
-      .catch(function(err) {
-        addToast(err.message, 'error');
-        throw err;
-      });
-  }
-
-  function deleteItem(id) {
-    return ApiClient.del('/api/items/' + id)
-      .then(function() {
-        dispatch({ type: APP_ACTIONS.REMOVE_ITEM, payload: id });
-        addToast('Item deleted', 'success');
-        fetchStats();
-      })
-      .catch(function(err) {
-        addToast(err.message, 'error');
-        throw err;
-      });
-  }
-
-  function setFilter(filter) {
-    dispatch({ type: APP_ACTIONS.SET_FILTER, payload: filter });
-  }
-
-  var value = {
-    items: state.items,
-    stats: state.stats,
-    loading: state.loading,
-    filters: state.filters,
-    toasts: state.toasts,
-    fetchItems: fetchItems,
-    fetchStats: fetchStats,
-    createItem: createItem,
-    updateItem: updateItem,
-    deleteItem: deleteItem,
-    setFilter: setFilter,
-    addToast: addToast,
-  };
-
-  return h(AppContext.Provider, { value: value }, props.children);
-};
-
-window.useApp = function useApp() {
-  var context = React.useContext(AppContext);
-  if (!context) throw new Error('useApp must be used within AppProvider');
-  return context;
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/Toast.js
-// ---------------------------------------------------------------------------
-
-const TOAST_JS = `var h = React.createElement;
-
-/**
- * Toast — Notification toast displayed at top-right.
- */
-window.Toast = function Toast(props) {
-  var toasts = props.toasts || [];
-  if (toasts.length === 0) return null;
-
-  var colors = {
-    success: 'bg-emerald-500',
-    error: 'bg-red-500',
-    info: 'bg-blue-500',
-    warning: 'bg-amber-500',
-  };
-
-  return h('div', { className: 'fixed top-4 right-4 z-50 space-y-2' },
-    toasts.map(function(toast) {
-      return h('div', {
-        key: toast.id,
-        className: 'toast-enter px-4 py-3 rounded-lg text-white text-sm font-medium shadow-lg ' + (colors[toast.type] || colors.info),
-      }, toast.message);
-    })
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/Navbar.js
-// ---------------------------------------------------------------------------
-
-const NAVBAR_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * Navbar — Top navigation bar with logo, links, and auth status.
- */
-window.Navbar = function Navbar() {
-  var auth = window.useAuth();
-
-  return h('header', { className: 'bg-white border-b border-gray-200 sticky top-0 z-40' },
-    h('div', { className: 'max-w-6xl mx-auto px-4 sm:px-6' },
-      h('div', { className: 'flex items-center justify-between h-14' },
-        // Logo + nav
-        h('div', { className: 'flex items-center gap-6' },
-          h(RR.Link, { to: '/', className: 'flex items-center gap-2' },
-            h('div', { className: 'w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center' },
-              h('span', { className: 'text-white font-bold text-sm' }, 'S')
-            ),
-            h('span', { className: 'font-semibold text-gray-800' }, 'Starter')
-          ),
-          auth.isAuthenticated ? h('nav', { className: 'hidden sm:flex items-center gap-4' },
-            h(RR.NavLink, {
-              to: '/dashboard',
-              className: function(a) { return 'text-sm font-medium ' + (a.isActive ? 'text-primary-600' : 'text-gray-500 hover:text-gray-700'); },
-            }, 'Dashboard')
-          ) : null
-        ),
-
-        // Auth section
-        h('div', { className: 'flex items-center gap-3' },
-          auth.isAuthenticated
-            ? h('div', { className: 'flex items-center gap-3' },
-                h('span', { className: 'text-sm text-gray-500 hidden sm:block' }, auth.user.name),
-                h('span', { className: 'text-xs px-2 py-0.5 rounded-full font-medium ' +
-                  (auth.user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-600')
-                }, auth.user.role),
-                h('button', {
-                  onClick: function() { auth.logout(); },
-                  className: 'text-sm text-gray-500 hover:text-gray-700',
-                }, 'Sign out')
-              )
-            : h('div', { className: 'flex items-center gap-2' },
-                h(RR.Link, {
-                  to: '/login',
-                  className: 'text-sm text-gray-600 hover:text-gray-800 px-3 py-1.5',
-                }, 'Sign in'),
-                h(RR.Link, {
-                  to: '/register',
-                  className: 'text-sm bg-primary-600 text-white px-3 py-1.5 rounded-lg hover:bg-primary-700',
-                }, 'Get started')
-              )
-        )
-      )
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/ItemCard.js
-// ---------------------------------------------------------------------------
-
-const ITEM_CARD_JS = `var h = React.createElement;
-
-var STATUS_STYLES = {
-  todo: { bg: 'bg-gray-100', text: 'text-gray-600', label: 'To Do' },
-  in_progress: { bg: 'bg-blue-100', text: 'text-blue-700', label: 'In Progress' },
-  done: { bg: 'bg-emerald-100', text: 'text-emerald-700', label: 'Done' },
-};
-
-var PRIORITY_STYLES = {
-  low: { bg: 'bg-gray-100', text: 'text-gray-500', label: 'Low' },
-  medium: { bg: 'bg-amber-100', text: 'text-amber-700', label: 'Medium' },
-  high: { bg: 'bg-red-100', text: 'text-red-700', label: 'High' },
-};
-
-/**
- * ItemCard — Displays a single item with status/priority badges and actions.
- */
-window.ItemCard = function ItemCard(props) {
-  var item = props.item;
-  var onEdit = props.onEdit;
-  var onDelete = props.onDelete;
-
-  var s = STATUS_STYLES[item.status] || STATUS_STYLES.todo;
-  var p = PRIORITY_STYLES[item.priority] || PRIORITY_STYLES.medium;
-
-  return h('div', { className: 'bg-white rounded-lg p-4 border border-gray-200 card-hover fade-in' },
-    // Header row
-    h('div', { className: 'flex items-start justify-between mb-2' },
-      h('h3', { className: 'font-medium text-gray-800 flex-1 mr-2' }, item.title),
-      h('div', { className: 'flex gap-1.5 flex-shrink-0' },
-        h('span', { className: 'text-xs px-2 py-0.5 rounded-full font-medium ' + s.bg + ' ' + s.text }, s.label),
-        h('span', { className: 'text-xs px-2 py-0.5 rounded-full font-medium ' + p.bg + ' ' + p.text }, p.label)
-      )
-    ),
-
-    // Description
-    item.description
-      ? h('p', { className: 'text-sm text-gray-500 mb-3 line-clamp-2' }, item.description)
-      : null,
-
-    // Footer
-    h('div', { className: 'flex items-center justify-between' },
-      h('span', { className: 'text-xs text-gray-400' },
-        (item.user_name || 'Unknown') + ' · ' + (item.created_at || '').split('T')[0]
-      ),
-      h('div', { className: 'flex gap-2' },
-        h('button', {
-          onClick: function() { onEdit(item); },
-          className: 'text-xs text-primary-600 hover:text-primary-700 font-medium',
-        }, 'Edit'),
-        h('button', {
-          onClick: function() { onDelete(item.id); },
-          className: 'text-xs text-red-500 hover:text-red-600 font-medium',
-        }, 'Delete')
-      )
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/ItemForm.js
-// ---------------------------------------------------------------------------
-
-const ITEM_FORM_JS = `var h = React.createElement;
-
-/**
- * ItemForm — Create or edit an item.
- * @param {{ item?: Object, onSave: Function, onCancel: Function }} props
- */
-window.ItemForm = function ItemForm(props) {
-  var item = props.item;
-  var onSave = props.onSave;
-  var onCancel = props.onCancel;
-
-  var titleState = React.useState(item ? item.title : '');
-  var title = titleState[0]; var setTitle = titleState[1];
-
-  var descState = React.useState(item ? (item.description || '') : '');
-  var desc = descState[0]; var setDesc = descState[1];
-
-  var statusState = React.useState(item ? item.status : 'todo');
-  var status = statusState[0]; var setStatus = statusState[1];
-
-  var priorityState = React.useState(item ? item.priority : 'medium');
-  var priority = priorityState[0]; var setPriority = priorityState[1];
-
-  var savingState = React.useState(false);
-  var saving = savingState[0]; var setSaving = savingState[1];
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (!title.trim()) return;
-    setSaving(true);
-    onSave({
-      title: title.trim(),
-      description: desc.trim(),
-      status: status,
-      priority: priority,
-    }).then(function() {
-      setSaving(false);
-    }).catch(function() {
-      setSaving(false);
-    });
-  }
-
-  return h('div', { className: 'bg-white rounded-lg border border-gray-200 p-5 fade-in' },
-    h('h3', { className: 'text-lg font-semibold text-gray-800 mb-4' },
-      item ? 'Edit Item' : 'New Item'
-    ),
-    h('form', { onSubmit: handleSubmit, className: 'space-y-4' },
-      // Title
-      h('div', null,
-        h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Title'),
-        h('input', {
-          type: 'text',
-          value: title,
-          onChange: function(e) { setTitle(e.target.value); },
-          className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-          placeholder: 'Enter item title...',
-          required: true,
-        })
-      ),
-      // Description
-      h('div', null,
-        h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Description'),
-        h('textarea', {
-          value: desc,
-          onChange: function(e) { setDesc(e.target.value); },
-          className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none',
-          rows: 3,
-          placeholder: 'Optional description...',
-        })
-      ),
-      // Status + Priority row
-      h('div', { className: 'grid grid-cols-2 gap-4' },
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Status'),
-          h('select', {
-            value: status,
-            onChange: function(e) { setStatus(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500',
-          },
-            h('option', { value: 'todo' }, 'To Do'),
-            h('option', { value: 'in_progress' }, 'In Progress'),
-            h('option', { value: 'done' }, 'Done')
-          )
-        ),
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Priority'),
-          h('select', {
-            value: priority,
-            onChange: function(e) { setPriority(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500',
-          },
-            h('option', { value: 'low' }, 'Low'),
-            h('option', { value: 'medium' }, 'Medium'),
-            h('option', { value: 'high' }, 'High')
-          )
-        )
-      ),
-      // Buttons
-      h('div', { className: 'flex justify-end gap-2 pt-2' },
-        h('button', {
-          type: 'button',
-          onClick: onCancel,
-          className: 'px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg',
-        }, 'Cancel'),
-        h('button', {
-          type: 'submit',
-          disabled: saving || !title.trim(),
-          className: 'px-4 py-2 text-sm text-white bg-primary-600 hover:bg-primary-700 rounded-lg disabled:opacity-50',
-        }, saving ? 'Saving...' : (item ? 'Update' : 'Create'))
-      )
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/pages/WelcomePage.js
-// ---------------------------------------------------------------------------
-
-const WELCOME_PAGE_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * WelcomePage — Landing page with hero, features, and architecture overview.
- */
-window.WelcomePage = function WelcomePage() {
-  var auth = window.useAuth();
-
-  return h('div', { className: 'fade-in' },
-    // Hero
-    h('section', { className: 'py-16 px-4' },
-      h('div', { className: 'max-w-3xl mx-auto text-center' },
-        h('div', { className: 'inline-flex items-center gap-2 px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium mb-6' },
-          h('span', { className: 'w-2 h-2 bg-emerald-400 rounded-full' }),
-          'Full-Stack Application'
-        ),
-        h('h1', { className: 'text-4xl sm:text-5xl font-bold text-gray-900 mb-4 tracking-tight' },
-          'Production-Ready', h('br'),
-          h('span', { className: 'text-primary-600' }, 'Starter Template')
-        ),
-        h('p', { className: 'text-lg text-gray-500 mb-8 max-w-xl mx-auto' },
-          'Express + React + SQLite with proper separation of concerns. ' +
-          'Same code structure deploys to production with Postgres.'
-        ),
-        h('div', { className: 'flex flex-col sm:flex-row gap-3 justify-center' },
-          auth.isAuthenticated
-            ? h(RR.Link, {
-                to: '/dashboard',
-                className: 'px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium',
-              }, 'Go to Dashboard')
-            : h(React.Fragment, null,
-                h(RR.Link, {
-                  to: '/register',
-                  className: 'px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium',
-                }, 'Get Started'),
-                h(RR.Link, {
-                  to: '/login',
-                  className: 'px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium',
-                }, 'Sign In')
-              )
-        )
-      )
-    ),
-
-    // Features
-    h('section', { className: 'py-12 px-4 bg-white border-t border-gray-100' },
-      h('div', { className: 'max-w-4xl mx-auto' },
-        h('h2', { className: 'text-2xl font-bold text-gray-800 text-center mb-8' }, 'Architecture'),
-        h('div', { className: 'grid sm:grid-cols-2 lg:grid-cols-3 gap-4' },
-          _featureCard('SQLite (sql.js)', 'True relational database with typed schemas, migrations, and indexes. Same SQL works on Postgres.', 'DB'),
-          _featureCard('React Router v6', 'Client-side routing with nested routes, URL params, navigation guards, and SPA fallback.', 'RT'),
-          _featureCard('React Context', 'Predictable state management with useReducer. Auth context + app state context.', 'ST'),
-          _featureCard('JWT Auth', 'Token-based authentication with role-based access control. Login, register, protected routes.', 'AU'),
-          _featureCard('REST API', 'Express routes with validation, error handling, and structured JSON responses.', 'AP'),
-          _featureCard('Repository Pattern', 'Data access layer abstracts SQL queries. Swap database without changing routes.', 'RP')
-        )
-      )
-    ),
-
-    // Demo credentials
-    h('section', { className: 'py-12 px-4' },
-      h('div', { className: 'max-w-md mx-auto text-center' },
-        h('h3', { className: 'text-lg font-semibold text-gray-700 mb-4' }, 'Demo Accounts'),
-        h('div', { className: 'bg-white rounded-lg border border-gray-200 divide-y' },
-          h('div', { className: 'p-4 flex items-center justify-between' },
-            h('div', { className: 'text-left' },
-              h('p', { className: 'text-sm font-medium text-gray-800' }, 'admin@example.com'),
-              h('p', { className: 'text-xs text-gray-400' }, 'Password: admin123')
-            ),
-            h('span', { className: 'text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full font-medium' }, 'admin')
-          ),
-          h('div', { className: 'p-4 flex items-center justify-between' },
-            h('div', { className: 'text-left' },
-              h('p', { className: 'text-sm font-medium text-gray-800' }, 'user@example.com'),
-              h('p', { className: 'text-xs text-gray-400' }, 'Password: user123')
-            ),
-            h('span', { className: 'text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full font-medium' }, 'user')
-          )
-        )
-      )
-    )
-  );
-};
-
-function _featureCard(title, desc, icon) {
-  return h('div', { className: 'p-4 rounded-lg border border-gray-100 hover:border-primary-200 transition-colors' },
-    h('div', { className: 'w-8 h-8 bg-primary-50 rounded-lg flex items-center justify-center text-primary-600 font-bold text-xs mb-3' }, icon),
-    h('h3', { className: 'font-medium text-gray-800 mb-1' }, title),
-    h('p', { className: 'text-sm text-gray-500' }, desc)
-  );
-}
-`;
-
-// ---------------------------------------------------------------------------
-// public/pages/LoginPage.js
-// ---------------------------------------------------------------------------
-
-const LOGIN_PAGE_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * LoginPage — Login form with email and password.
- */
-window.LoginPage = function LoginPage() {
-  var auth = window.useAuth();
-  var navigate = RR.useNavigate();
-
-  var emailState = React.useState('');
-  var email = emailState[0]; var setEmail = emailState[1];
-
-  var passState = React.useState('');
-  var pass = passState[0]; var setPass = passState[1];
-
-  var errorState = React.useState('');
-  var error = errorState[0]; var setError = errorState[1];
-
-  var loadingState = React.useState(false);
-  var loading = loadingState[0]; var setLoading = loadingState[1];
-
-  // Redirect if already logged in
-  React.useEffect(function() {
-    if (auth.isAuthenticated) navigate('/dashboard');
-  }, [auth.isAuthenticated]);
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-    auth.login(email, pass)
-      .then(function() {
-        navigate('/dashboard');
-      })
-      .catch(function(err) {
-        setError(err.message || 'Login failed');
-        setLoading(false);
-      });
-  }
-
-  return h('div', { className: 'min-h-[calc(100vh-56px)] flex items-center justify-center px-4 fade-in' },
-    h('div', { className: 'w-full max-w-sm' },
-      h('div', { className: 'text-center mb-6' },
-        h('h1', { className: 'text-2xl font-bold text-gray-800' }, 'Welcome back'),
-        h('p', { className: 'text-sm text-gray-500 mt-1' }, 'Sign in to your account')
-      ),
-
-      h('form', { onSubmit: handleSubmit, className: 'bg-white rounded-lg border border-gray-200 p-6 space-y-4' },
-        error ? h('div', { className: 'text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg' }, error) : null,
-
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Email'),
-          h('input', {
-            type: 'email', value: email, onChange: function(e) { setEmail(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-            placeholder: 'admin@example.com', required: true,
-          })
-        ),
-
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Password'),
-          h('input', {
-            type: 'password', value: pass, onChange: function(e) { setPass(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-            placeholder: 'admin123', required: true,
-          })
-        ),
-
-        h('button', {
-          type: 'submit', disabled: loading,
-          className: 'w-full py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 disabled:opacity-50',
-        }, loading ? 'Signing in...' : 'Sign in')
-      ),
-
-      h('p', { className: 'text-center text-sm text-gray-500 mt-4' },
-        "Don't have an account? ",
-        h(RR.Link, { to: '/register', className: 'text-primary-600 hover:text-primary-700 font-medium' }, 'Register')
-      )
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/pages/RegisterPage.js
-// ---------------------------------------------------------------------------
-
-const REGISTER_PAGE_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * RegisterPage — Registration form.
- */
-window.RegisterPage = function RegisterPage() {
-  var auth = window.useAuth();
-  var navigate = RR.useNavigate();
-
-  var nameState = React.useState('');
-  var name = nameState[0]; var setName = nameState[1];
-
-  var emailState = React.useState('');
-  var email = emailState[0]; var setEmail = emailState[1];
-
-  var passState = React.useState('');
-  var pass = passState[0]; var setPass = passState[1];
-
-  var errorState = React.useState('');
-  var error = errorState[0]; var setError = errorState[1];
-
-  var loadingState = React.useState(false);
-  var loading = loadingState[0]; var setLoading = loadingState[1];
-
-  React.useEffect(function() {
-    if (auth.isAuthenticated) navigate('/dashboard');
-  }, [auth.isAuthenticated]);
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (pass.length < 6) { setError('Password must be at least 6 characters'); return; }
-    setError('');
-    setLoading(true);
-    auth.register(email, pass, name)
-      .then(function() {
-        navigate('/dashboard');
-      })
-      .catch(function(err) {
-        setError(err.message || 'Registration failed');
-        setLoading(false);
-      });
-  }
-
-  return h('div', { className: 'min-h-[calc(100vh-56px)] flex items-center justify-center px-4 fade-in' },
-    h('div', { className: 'w-full max-w-sm' },
-      h('div', { className: 'text-center mb-6' },
-        h('h1', { className: 'text-2xl font-bold text-gray-800' }, 'Create account'),
-        h('p', { className: 'text-sm text-gray-500 mt-1' }, 'Start building with the starter template')
-      ),
-
-      h('form', { onSubmit: handleSubmit, className: 'bg-white rounded-lg border border-gray-200 p-6 space-y-4' },
-        error ? h('div', { className: 'text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg' }, error) : null,
-
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Name'),
-          h('input', {
-            type: 'text', value: name, onChange: function(e) { setName(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-            placeholder: 'Your name', required: true,
-          })
-        ),
-
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Email'),
-          h('input', {
-            type: 'email', value: email, onChange: function(e) { setEmail(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-            placeholder: 'you@example.com', required: true,
-          })
-        ),
-
-        h('div', null,
-          h('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, 'Password'),
-          h('input', {
-            type: 'password', value: pass, onChange: function(e) { setPass(e.target.value); },
-            className: 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
-            placeholder: 'Min 6 characters', required: true,
-          })
-        ),
-
-        h('button', {
-          type: 'submit', disabled: loading,
-          className: 'w-full py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 disabled:opacity-50',
-        }, loading ? 'Creating account...' : 'Create account')
-      ),
-
-      h('p', { className: 'text-center text-sm text-gray-500 mt-4' },
-        'Already have an account? ',
-        h(RR.Link, { to: '/login', className: 'text-primary-600 hover:text-primary-700 font-medium' }, 'Sign in')
-      )
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/StatsChart.js
-// ---------------------------------------------------------------------------
-
-const STATS_CHART_JS = `var h = React.createElement;
-
-/**
- * StatsChart — Renders a doughnut chart of item status distribution
- * using Chart.js with Ranger theme CSS variables (--chart-1 through --chart-5).
- *
- * Props:
- *   stats  — { total, byStatus: { todo, in_progress, done }, byPriority: { low, medium, high } }
- *
- * Uses the global Chart class from chart.js UMD CDN.
- */
-window.StatsChart = function StatsChart(props) {
-  var stats = props.stats || { total: 0, byStatus: {}, byPriority: {} };
-  var canvasRef = React.useRef(null);
-  var chartRef = React.useRef(null);
-
-  /**
-   * Read a CSS custom property value from :root and convert to usable color.
-   * Ranger stores HSL values without the hsl() wrapper (e.g. "12 76% 61%"),
-   * so we wrap them: hsl(12 76% 61%).
-   */
-  function getChartColor(varName, fallback) {
-    var raw = getComputedStyle(document.documentElement)
-      .getPropertyValue(varName)
-      .trim();
-    if (!raw) return fallback;
-    if (raw.startsWith('#') || raw.startsWith('rgb') || raw.startsWith('hsl(')) {
-      return raw;
-    }
-    return 'hsl(' + raw + ')';
-  }
-
-  React.useEffect(function () {
-    if (!canvasRef.current) return;
-
-    if (chartRef.current) {
-      chartRef.current.destroy();
-      chartRef.current = null;
-    }
-
-    var todo = (stats.byStatus && stats.byStatus.todo) || 0;
-    var inProgress = (stats.byStatus && stats.byStatus.in_progress) || 0;
-    var done = (stats.byStatus && stats.byStatus.done) || 0;
-
-    if (todo + inProgress + done === 0) return;
-
-    var colors = [
-      getChartColor('--chart-1', 'hsl(12 76% 61%)'),
-      getChartColor('--chart-2', 'hsl(173 58% 39%)'),
-      getChartColor('--chart-3', 'hsl(197 37% 24%)'),
-    ];
-
-    chartRef.current = new Chart(canvasRef.current, {
-      type: 'doughnut',
-      data: {
-        labels: ['To Do', 'In Progress', 'Done'],
-        datasets: [
-          {
-            data: [todo, inProgress, done],
-            backgroundColor: colors,
-            borderWidth: 0,
-            hoverOffset: 6,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        cutout: '65%',
-        plugins: {
-          legend: {
-            position: 'bottom',
-            labels: {
-              padding: 16,
-              usePointStyle: true,
-              pointStyleWidth: 8,
-              font: { size: 12 },
-              color: getChartColor('--text-secondary', '#565869'),
-            },
-          },
-          tooltip: {
-            backgroundColor: 'rgba(0,0,0,0.8)',
-            titleFont: { size: 13 },
-            bodyFont: { size: 12 },
-            padding: 10,
-            cornerRadius: 8,
-          },
-        },
-      },
-    });
-
-    return function () {
-      if (chartRef.current) {
-        chartRef.current.destroy();
-        chartRef.current = null;
-      }
-    };
-  }, [stats.byStatus && stats.byStatus.todo,
-      stats.byStatus && stats.byStatus.in_progress,
-      stats.byStatus && stats.byStatus.done]);
-
-  var hasData =
-    ((stats.byStatus && stats.byStatus.todo) || 0) +
-    ((stats.byStatus && stats.byStatus.in_progress) || 0) +
-    ((stats.byStatus && stats.byStatus.done) || 0) > 0;
-
-  return h(
-    'div',
-    { className: 'bg-white rounded-lg border border-gray-200 p-4 card-hover' },
-    h('h3', { className: 'text-sm font-semibold text-gray-700 mb-3' }, 'Status Distribution'),
-    hasData
-      ? h('div', { style: { height: '200px', position: 'relative' } },
-          h('canvas', { ref: canvasRef })
-        )
-      : h('div', { className: 'flex items-center justify-center h-48 text-gray-400 text-sm' },
-          'No data to display'
-        )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/pages/DashboardPage.js
-// ---------------------------------------------------------------------------
-
-const DASHBOARD_PAGE_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * DashboardPage — Main application view with stats, filters, and item CRUD.
- */
-window.DashboardPage = function DashboardPage() {
-  var auth = window.useAuth();
-  var app = window.useApp();
-  var navigate = RR.useNavigate();
-
-  var showFormState = React.useState(false);
-  var showForm = showFormState[0]; var setShowForm = showFormState[1];
-
-  var editingState = React.useState(null);
-  var editing = editingState[0]; var setEditing = editingState[1];
-
-  // Redirect if not authenticated
-  React.useEffect(function() {
-    if (!auth.loading && !auth.isAuthenticated) navigate('/login');
-  }, [auth.loading, auth.isAuthenticated]);
-
-  // Fetch data on mount
-  React.useEffect(function() {
-    if (auth.isAuthenticated) {
-      app.fetchItems();
-      app.fetchStats();
-    }
-  }, [auth.isAuthenticated]);
-
-  // Re-fetch when filters change
-  React.useEffect(function() {
-    if (auth.isAuthenticated) {
-      app.fetchItems(app.filters);
-    }
-  }, [app.filters.status, app.filters.priority]);
-
-  function handleSave(data) {
-    if (editing) {
-      return app.updateItem(editing.id, data).then(function() {
-        setEditing(null);
-        setShowForm(false);
-      });
-    }
-    return app.createItem(data).then(function() {
-      setShowForm(false);
-    });
-  }
-
-  function handleEdit(item) {
-    setEditing(item);
-    setShowForm(true);
-  }
-
-  function handleDelete(id) {
-    app.deleteItem(id);
-  }
-
-  function handleCancel() {
-    setEditing(null);
-    setShowForm(false);
-  }
-
-  if (auth.loading) {
-    return h('div', { className: 'flex items-center justify-center py-20' },
-      h('div', { className: 'w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin' })
-    );
-  }
-
-  var stats = app.stats || { total: 0, byStatus: {}, byPriority: {} };
-
-  return h('div', { className: 'max-w-5xl mx-auto px-4 sm:px-6 py-6 fade-in' },
-    // Header
-    h('div', { className: 'flex items-center justify-between mb-6' },
-      h('div', null,
-        h('h1', { className: 'text-2xl font-bold text-gray-800' }, 'Dashboard'),
-        h('p', { className: 'text-sm text-gray-500' }, 'Manage your items')
-      ),
-      h('button', {
-        onClick: function() { setEditing(null); setShowForm(true); },
-        className: 'px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 font-medium',
-      }, '+ New Item')
-    ),
-
-    // Stats cards
-    h('div', { className: 'grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6' },
-      _statCard('Total', stats.total, 'bg-gray-50'),
-      _statCard('To Do', stats.byStatus.todo || 0, 'bg-gray-50'),
-      _statCard('In Progress', stats.byStatus.in_progress || 0, 'bg-blue-50'),
-      _statCard('Done', stats.byStatus.done || 0, 'bg-emerald-50')
-    ),
-
-    // Chart — doughnut showing status distribution
-    h('div', { className: 'mb-6' },
-      h(window.StatsChart, { stats: stats })
-    ),
-
-    // Filters
-    h('div', { className: 'flex gap-2 mb-4' },
-      _filterSelect('Status', app.filters.status, ['todo', 'in_progress', 'done'],
-        function(v) { app.setFilter({ status: v }); }),
-      _filterSelect('Priority', app.filters.priority, ['low', 'medium', 'high'],
-        function(v) { app.setFilter({ priority: v }); })
-    ),
-
-    // Form (show/hide)
-    showForm
-      ? h(window.ItemForm, { item: editing, onSave: handleSave, onCancel: handleCancel })
-      : null,
-
-    // Items list
-    app.loading
-      ? h('div', { className: 'text-center py-12' },
-          h('div', { className: 'w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto mb-2' }),
-          h('p', { className: 'text-sm text-gray-400' }, 'Loading...')
-        )
-      : app.items.length === 0
-        ? h('div', { className: 'text-center py-12 bg-white rounded-lg border border-gray-200' },
-            h('p', { className: 'text-gray-400 mb-2' }, 'No items yet'),
-            h('button', {
-              onClick: function() { setShowForm(true); },
-              className: 'text-sm text-primary-600 hover:text-primary-700 font-medium',
-            }, 'Create your first item')
-          )
-        : h('div', { className: 'grid gap-3 ' + (showForm ? 'mt-4' : '') },
-            app.items.map(function(item) {
-              return h(window.ItemCard, {
-                key: item.id,
-                item: item,
-                onEdit: handleEdit,
-                onDelete: handleDelete,
-              });
-            })
-          )
-  );
-};
-
-function _statCard(label, value, bg) {
-  return h('div', { className: 'rounded-lg p-3 ' + bg },
-    h('p', { className: 'text-xs text-gray-500 font-medium' }, label),
-    h('p', { className: 'text-xl font-bold text-gray-800' }, value)
-  );
-}
-
-function _filterSelect(label, value, options, onChange) {
-  return h('select', {
-    value: value,
-    onChange: function(e) { onChange(e.target.value); },
-    className: 'px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500',
-  },
-    h('option', { value: '' }, 'All ' + label),
-    options.map(function(opt) {
-      var label = opt.replace('_', ' ');
-      label = label.charAt(0).toUpperCase() + label.slice(1);
-      return h('option', { key: opt, value: opt }, label);
-    })
-  );
-}
-`;
-
-// ---------------------------------------------------------------------------
-// public/App.js — Root component with providers and router
-// ---------------------------------------------------------------------------
-
-const APP_JS = `var h = React.createElement;
-var RR = ReactRouterDOM;
-
-/**
- * Detect the basename for React Router.
- *
- * When running inside a Nodepod preview iframe, the URL path is
- * something like "/__preview__/3000/" — React Router needs to
- * know this prefix so it can match routes correctly. In production
- * (real server), the pathname is just "/" and basename is empty.
- */
-var BASENAME = (function() {
-  var m = window.location.pathname.match(/^(\\/__.+?__\\/\\d+)/);
-  return m ? m[1] : '';
-})();
-
-/**
- * ProtectedRoute — Redirects to /login if not authenticated.
- */
-function ProtectedRoute(props) {
-  var auth = window.useAuth();
-
-  if (auth.loading) {
-    return h('div', { className: 'flex items-center justify-center min-h-[calc(100vh-56px)]' },
-      h('div', { className: 'w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin' })
-    );
-  }
-
-  if (!auth.isAuthenticated) {
-    return h(RR.Navigate, { to: '/login', replace: true });
-  }
-
-  return props.children || h(RR.Outlet);
-}
-
-/**
- * Layout — App shell with navbar.
- */
-function Layout() {
-  var app = window.useApp();
-
-  return h(React.Fragment, null,
-    h(window.Navbar),
-    h(window.Toast, { toasts: app.toasts }),
-    h('main', null, h(RR.Outlet))
-  );
-}
-
-/**
- * App — Root component. Sets up providers and router.
- */
-function App() {
-  return h(window.AuthProvider, null,
-    h(window.AppProvider, null,
-      h(RR.BrowserRouter, { basename: BASENAME },
-        h(RR.Routes, null,
-          h(RR.Route, { element: h(Layout) },
-            // Public routes
-            h(RR.Route, { index: true, element: h(window.WelcomePage) }),
-            h(RR.Route, { path: 'login', element: h(window.LoginPage) }),
-            h(RR.Route, { path: 'register', element: h(window.RegisterPage) }),
-            // Protected routes
-            h(RR.Route, { element: h(ProtectedRoute) },
-              h(RR.Route, { path: 'dashboard', element: h(window.DashboardPage) })
-            ),
-            // 404
-            h(RR.Route, { path: '*', element: h('div', { className: 'text-center py-20' },
-              h('h1', { className: 'text-4xl font-bold text-gray-300 mb-2' }, '404'),
-              h('p', { className: 'text-gray-400 mb-4' }, 'Page not found'),
-              h(RR.Link, { to: '/', className: 'text-primary-600 hover:text-primary-700 text-sm font-medium' }, 'Go home')
-            )})
-          )
-        )
-      )
-    )
-  );
-}
-
-// Mount
-ReactDOM.createRoot(document.getElementById('root')).render(h(App));
-`;
-
-// ---------------------------------------------------------------------------
-// Dockerfile — Multi-stage production build
-// ---------------------------------------------------------------------------
-
-const DOCKERFILE = `# ===========================================================================
-# Dockerfile — Production-ready multi-stage build
-#
-# Supports two modes:
-#   1. SQLite (default) — zero external dependencies, great for POC/MVP
-#   2. Postgres — set DATABASE_URL to switch (no code changes needed)
-#
-# Build:
-#   docker build -t starter-app .
-#
-# Run (SQLite — data persists via mounted volume):
-#   docker run -p 3000:3000 \\
-#     -v app-data:/app/data \\
-#     -e JWT_SECRET=your-secret-here \\
-#     starter-app
-#
-# Run (Postgres):
-#   docker run -p 3000:3000 \\
-#     -e DATABASE_URL=postgresql://user:pass@host:5432/dbname \\
-#     -e JWT_SECRET=your-secret-here \\
-#     starter-app
-# ===========================================================================
-
-# --- Stage 1: Dependencies ---------------------------------------------------
-FROM node:20-alpine AS deps
-
-WORKDIR /app
-
-COPY package.json package-lock.json* ./
-RUN npm ci --omit=dev 2>/dev/null || npm install --omit=dev
-
-# --- Stage 2: Production image -----------------------------------------------
-FROM node:20-alpine AS runtime
-
-# Security: run as non-root
-RUN addgroup -S app && adduser -S app -G app
-
-WORKDIR /app
-
-# Copy dependencies from builder stage
-COPY --from=deps /app/node_modules ./node_modules
-
-# Copy application source
-COPY . .
-
-# Remove files not needed in production
-RUN rm -f Dockerfile .dockerignore docker-compose.yml CONTRIBUTING.md
-
-# Create data directory for SQLite persistence (mounted as volume)
-RUN mkdir -p /app/data && chown -R app:app /app/data
-
-# Switch to non-root user
-USER app
-
-# Environment defaults — override at runtime via -e or .env
-ENV NODE_ENV=production \\
-    PORT=3000 \\
-    DATABASE_URL=sqlite:/app/data/app.db \\
-    JWT_SECRET=change-me-in-production
-
-EXPOSE 3000
-
-# Health check — ensures container is marked healthy in orchestrators
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \\
-  CMD wget -qO- http://localhost:3000/api/health || exit 1
-
-CMD ["node", "server.js"]
-`;
-
-// ---------------------------------------------------------------------------
-// .dockerignore
-// ---------------------------------------------------------------------------
-
-const DOCKERIGNORE = `node_modules
-npm-debug.log*
-.env
-.env.local
-.env.*.local
-.git
-.gitignore
-.DS_Store
-*.md
-!README.md
-`;
-
-// ---------------------------------------------------------------------------
-// docker-compose.yml — Local dev with optional Postgres
-// ---------------------------------------------------------------------------
-
-const DOCKER_COMPOSE = `# docker-compose.yml — Local development and production deployment
-#
-# Usage:
-#   SQLite (default):    docker compose up
-#   With Postgres:       docker compose --profile postgres up
-#
-# The app works identically with both — swap DATABASE_URL and restart.
-
-services:
-  app:
-    build: .
-    ports:
-      - "\${PORT:-3000}:3000"
-    environment:
-      - NODE_ENV=\${NODE_ENV:-production}
-      - PORT=3000
-      - JWT_SECRET=\${JWT_SECRET:-change-me-in-production}
-      - JWT_EXPIRES_IN=\${JWT_EXPIRES_IN:-24h}
-      - CORS_ORIGIN=\${CORS_ORIGIN:-*}
-      - DATABASE_URL=\${DATABASE_URL:-sqlite:/app/data/app.db}
-    volumes:
-      - app-data:/app/data
-    restart: unless-stopped
-    healthcheck:
-      test: wget -qO- http://localhost:3000/api/health || exit 1
-      interval: 30s
-      timeout: 5s
-      start_period: 10s
-      retries: 3
-
-  # --- Optional: Postgres (activate with --profile postgres) ----------------
-  postgres:
-    image: postgres:16-alpine
-    profiles: [postgres]
-    environment:
-      POSTGRES_DB: starter_app
-      POSTGRES_USER: app
-      POSTGRES_PASSWORD: \${POSTGRES_PASSWORD:-postgres}
-    ports:
-      - "5432:5432"
-    volumes:
-      - pg-data:/var/lib/postgresql/data
-    healthcheck:
-      test: pg_isready -U app -d starter_app
-      interval: 10s
-      timeout: 5s
-      retries: 5
-
-volumes:
-  app-data:
-  pg-data:
-`;
-
-// ---------------------------------------------------------------------------
-// README.md
-// ---------------------------------------------------------------------------
-
-const README_MD = `# Starter App
-
-A production-ready full-stack application built with **Express.js** and **React**.
-
-Designed as a proper starting point — not a toy demo. The architecture, patterns,
-and code quality are what you'd ship to production. Start building features
-immediately, deploy when ready.
-
-## Stack
-
-| Layer        | Technology                              | Notes                              |
-|--------------|-----------------------------------------|------------------------------------|
-| **Server**   | Express.js 4                            | Middleware chain, route modules    |
-| **Database** | SQLite (sql.js) / Postgres              | Swap via env var, zero code changes |
-| **Auth**     | JWT + role-based access control         | Register, login, protected routes  |
-| **Frontend** | React 18 + React Router v6             | SPA with client-side routing       |
-| **State**    | React Context + useReducer              | AuthContext + AppContext            |
-| **Styling**  | Tailwind CSS (CDN)                      | Utility-first, responsive          |
-
-## Quick Start
-
-\`\`\`bash
-# Install dependencies
-npm install
-
-# Start development server
-node server.js
-
-# Open http://localhost:3000
-\`\`\`
-
-**Demo accounts** (seeded automatically):
-- \`admin@example.com\` / \`admin123\` (admin role)
-- \`user@example.com\` / \`user123\` (user role)
-
-## Project Structure
-
-\`\`\`
-├── server.js                   # Entry point — middleware chain + startup
-├── config.js                   # Centralized env var config
-├── package.json                # Dependencies
-├── .env.example                # Environment variable documentation
-├── .ranger                     # AI agent context (project manifest)
-│
-├── db/
-│   ├── database.js             # Database init, migrations, query helpers
-│   ├── migrations/
-│   │   └── 001_initial.js      # Schema: users, items tables + seed data
-│   └── repositories/
-│       ├── userRepository.js   # User CRUD (parameterized SQL)
-│       └── itemRepository.js   # Item CRUD with JOINs, filters, stats
-│
-├── middleware/
-│   ├── auth.js                 # JWT generation, verification, role checks
-│   ├── errorHandler.js         # Global error handler + 404 / SPA fallback
-│   ├── staticFiles.js          # Static file serving
-│   └── validate.js             # Request body validation helpers
-│
-├── routes/
-│   ├── auth.js                 # POST /api/auth/register, login, GET /me
-│   └── items.js                # CRUD /api/items + GET /api/items/stats
-│
-├── public/                     # React SPA (served as static files)
-│   ├── index.html              # HTML shell (loads React + Router from CDN)
-│   ├── styles.css              # Custom animations
-│   ├── lib/api.js              # API client with auth token handling
-│   ├── store/
-│   │   ├── AuthContext.js      # Auth state (login/register/logout)
-│   │   └── AppContext.js       # App state (items CRUD, stats, filters)
-│   ├── components/
-│   │   ├── Navbar.js           # Top nav with auth status
-│   │   ├── Toast.js            # Notification toasts
-│   │   ├── ItemCard.js         # Item display card
-│   │   └── ItemForm.js         # Item create/edit form
-│   ├── pages/
-│   │   ├── WelcomePage.js      # Landing page
-│   │   ├── LoginPage.js        # Login form
-│   │   ├── RegisterPage.js     # Registration form
-│   │   └── DashboardPage.js    # Dashboard with stats + item list
-│   └── App.js                  # Root — providers, router, routes
-│
-├── Dockerfile                  # Multi-stage production build
-├── docker-compose.yml          # Local dev + optional Postgres
-├── .dockerignore               # Docker build exclusions
-├── README.md                   # This file
-└── CONTRIBUTING.md             # Contribution guidelines
-\`\`\`
-
-## API Reference
-
-### Authentication
-
-| Method | Endpoint             | Auth     | Description            |
-|--------|----------------------|----------|------------------------|
-| POST   | /api/auth/register   | Public   | Create account         |
-| POST   | /api/auth/login      | Public   | Login, returns JWT     |
-| GET    | /api/auth/me         | Required | Get current user       |
-
-### Items
-
-| Method | Endpoint             | Auth     | Description            |
-|--------|----------------------|----------|------------------------|
-| GET    | /api/items           | Required | List items (filterable)|
-| POST   | /api/items           | Required | Create item            |
-| GET    | /api/items/stats     | Required | Dashboard statistics   |
-| GET    | /api/items/:id       | Required | Get single item        |
-| PUT    | /api/items/:id       | Required | Update item            |
-| DELETE | /api/items/:id       | Required | Delete item (owner/admin) |
-
-**Query parameters** for GET /api/items:
-- \`status\` — Filter by status (todo, in_progress, done)
-- \`priority\` — Filter by priority (low, medium, high)
-
-## Deployment
-
-### Docker (Recommended)
-
-\`\`\`bash
-# Build the image
-docker build -t starter-app .
-
-# Run with SQLite (data persists in a Docker volume)
-docker run -d -p 3000:3000 \\
-  -v app-data:/app/data \\
-  -e JWT_SECRET=your-secret-here \\
-  starter-app
-
-# Run with Postgres
-docker run -d -p 3000:3000 \\
-  -e DATABASE_URL=postgresql://user:pass@host:5432/dbname \\
-  -e JWT_SECRET=your-secret-here \\
-  starter-app
-\`\`\`
-
-### Docker Compose
-
-\`\`\`bash
-# SQLite mode (default)
-docker compose up -d
-
-# With Postgres
-docker compose --profile postgres up -d
-\`\`\`
-
-### Cloud Platforms
-
-Works out of the box on any platform that supports Docker or Node.js:
-
-| Platform             | Deploy Command / Notes                                    |
-|----------------------|-----------------------------------------------------------|
-| **Railway**          | Connect repo, auto-detects Dockerfile                     |
-| **Render**           | New Web Service, Docker, set env vars                     |
-| **Fly.io**           | \`fly launch\`, creates fly.toml automatically              |
-| **AWS ECS**          | Push image to ECR, create task definition                 |
-| **Google Cloud Run** | \`gcloud run deploy --source .\`                           |
-| **DigitalOcean**     | App Platform, auto-detect Dockerfile                      |
-| **Heroku**           | \`heroku container:push web\` then \`heroku container:release web\` |
-
-### Manual Deployment (No Docker)
-
-\`\`\`bash
-npm install --omit=dev
-NODE_ENV=production JWT_SECRET=your-secret node server.js
-\`\`\`
-
-## Database: SQLite vs Postgres
-
-This app runs on **SQLite by default** — zero setup, great for POC/MVP/demos.
-When you need multi-server or production scale, switch to Postgres with **zero
-code changes** in your route/repository layer.
-
-### When to Use SQLite (Default)
-
-- POC, MVP, demos, hackathons
-- Single-server deployments (< 1000 concurrent users)
-- Embedded applications, edge deployments
-- You want zero infrastructure dependencies
-
-### When to Switch to Postgres
-
-- Multiple application servers (horizontal scaling)
-- Need concurrent writes from many users
-- Want managed backups, point-in-time recovery
-- Compliance requirements (SOC2, HIPAA)
-
-### How to Migrate
-
-1. **Install the Postgres driver:**
-   \`\`\`bash
-   npm install pg
-   \`\`\`
-
-2. **Replace \`db/database.js\`** with a Postgres version:
-   \`\`\`javascript
-   const { Pool } = require('pg');
-   const pool = new Pool({ connectionString: process.env.DATABASE_URL });
-
-   module.exports = {
-     initialize: async () => { await runMigrations(); },
-     run: (sql, params) => pool.query(sql, params),
-     get: async (sql, params) => { const r = await pool.query(sql, params); return r.rows[0]; },
-     all: async (sql, params) => { const r = await pool.query(sql, params); return r.rows; },
-     exec: (sql) => pool.query(sql),
-   };
-   \`\`\`
-
-3. **Set the environment variable:**
-   \`\`\`bash
-   DATABASE_URL=postgresql://user:pass@host:5432/dbname
-   \`\`\`
-
-4. **Run migrations** — they execute automatically on startup. The SQL is
-   standard and works on both SQLite and Postgres.
-
-> The repository layer (\`db/repositories/*.js\`) uses parameterized SQL.
-> For Postgres, change \`?\` placeholders to \`$1, $2\` style in the adapter.
-
-## Environment Variables
-
-| Variable       | Default                    | Description                        |
-|----------------|----------------------------|------------------------------------|
-| PORT           | 3000                       | Server listen port                 |
-| NODE_ENV       | development                | Environment (development/production)|
-| DATABASE_URL   | sqlite::memory:            | Database connection string         |
-| JWT_SECRET     | sandbox-secret-key         | JWT signing secret (**change this**) |
-| JWT_EXPIRES_IN | 24h                        | Token expiry duration              |
-| CORS_ORIGIN    | *                          | Allowed CORS origins               |
-
-## License
-
-MIT
-`;
-
-// ---------------------------------------------------------------------------
-// CONTRIBUTING.md
-// ---------------------------------------------------------------------------
-
-const CONTRIBUTING_MD = `# Contributing
-
-Thank you for considering contributing to this project.
-
-## Development Setup
-
-\`\`\`bash
-# Clone the repository
-git clone <repo-url>
-cd starter-app
-
-# Install dependencies
-npm install
-
-# Start the development server
-node server.js
-\`\`\`
-
-The server starts on http://localhost:3000 with hot-reloadable frontend files.
-
-## Project Architecture
-
-This is a **monolith with clean separation of concerns**:
-
-\`\`\`
-Request -> Express middleware chain -> Route handler -> Repository -> Database
-                                                            |
-Response <- JSON / HTML <- Route handler <- Repository result
-\`\`\`
-
-### Key Conventions
-
-1. **Database access goes through repositories** — never write SQL directly in
-   routes. Add methods to \`db/repositories/*.js\`.
-
-2. **Validation happens in middleware** — use \`middleware/validate.js\` helpers
-   or add new ones. Routes assume valid data.
-
-3. **Auth is JWT-based** — \`middleware/auth.js\` handles token generation,
-   verification, and role checks. All \`/api/*\` routes (except auth) require
-   a valid token.
-
-4. **Frontend is a static SPA** — React components live in \`public/\`. State
-   is managed via React Context providers in \`public/store/\`.
-
-5. **Migrations are numbered** — add new files as \`db/migrations/002_*.js\`,
-   \`003_*.js\`, etc. They run automatically on startup.
-
-## Adding a New Resource
-
-Example: adding a "comments" feature.
-
-### 1. Database Migration
-
-Create \`db/migrations/002_comments.js\`:
-\`\`\`javascript
-module.exports = [
-  {
-    name: '005_create_comments',
-    up: \`
-      CREATE TABLE IF NOT EXISTS comments (
-        id          INTEGER PRIMARY KEY AUTOINCREMENT,
-        body        TEXT    NOT NULL,
-        item_id     INTEGER NOT NULL REFERENCES items(id) ON DELETE CASCADE,
-        user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-        created_at  TEXT    DEFAULT CURRENT_TIMESTAMP
-      )
-    \`,
-  },
-];
-\`\`\`
-
-### 2. Repository
-
-Create \`db/repositories/commentRepository.js\`:
-\`\`\`javascript
-var db = require('../database');
-
-function findByItemId(itemId) {
-  return db.all(
-    'SELECT c.*, u.name as author FROM comments c JOIN users u ON c.user_id = u.id WHERE c.item_id = ? ORDER BY c.created_at DESC',
-    [itemId]
-  );
-}
-
-function create(body, itemId, userId) {
-  return db.run(
-    'INSERT INTO comments (body, item_id, user_id) VALUES (?, ?, ?)',
-    [body, itemId, userId]
-  );
-}
-
-module.exports = { findByItemId, create };
-\`\`\`
-
-### 3. Route
-
-Create \`routes/comments.js\`:
-\`\`\`javascript
-var express = require('express');
-var router = express.Router();
-var auth = require('../middleware/auth');
-var comments = require('../db/repositories/commentRepository');
-
-router.get('/items/:itemId/comments', auth.authenticate, function(req, res) {
-  var rows = comments.findByItemId(req.params.itemId);
-  res.json(rows);
-});
-
-router.post('/items/:itemId/comments', auth.authenticate, function(req, res) {
-  var result = comments.create(req.body.body, req.params.itemId, req.user.id);
-  res.status(201).json({ id: result.lastInsertRowId });
-});
-
-module.exports = router;
-\`\`\`
-
-### 4. Mount the route in \`server.js\`:
-\`\`\`javascript
-var commentRoutes = require('./routes/comments');
-app.use('/api', commentRoutes);
-\`\`\`
-
-### 5. Update \`.ranger\`
-
-Add the new table schema, routes, and files to the \`.ranger\` manifest so the
-AI agent knows about your changes.
-
-## Code Style
-
-- **JavaScript** (CommonJS) — no build step required
-- **Semicolons** — yes
-- **Quotes** — single quotes for strings
-- **Indentation** — 2 spaces
-- **Comments** — JSDoc on exported functions, inline comments for non-obvious logic
-- **Error handling** — always pass errors to \`next()\` in Express middleware
-
-## Testing
-
-\`\`\`bash
-# Run all tests
-npm test
-
-# Run with coverage
-npm run test:coverage
-\`\`\`
-
-When adding new features:
-1. Add unit tests for repository methods
-2. Add integration tests for API endpoints
-3. Test both SQLite and Postgres if applicable
-
-## Pull Request Checklist
-
-- [ ] Code follows the project conventions above
-- [ ] New database tables have a migration file
-- [ ] New routes are documented in README.md API Reference
-- [ ] New files are listed in \`.ranger\` manifest
-- [ ] Tests pass locally
-- [ ] No hardcoded secrets or credentials
-`;
-
-// ---------------------------------------------------------------------------
-// package.json
-// ---------------------------------------------------------------------------
-
-const PACKAGE_JSON = JSON.stringify(
-  {
-    name: "starter-app",
-    version: "1.0.0",
-    description: "Full-stack Express + React starter with SQLite (sql.js)",
-    dependencies: {
-      express: "^4.18.0",
-      "sql.js": "^1.11.0",
-    },
-    // PRODUCTION: Add these dependencies:
-    // "pg": "^8.11.0" or "mongoose": "^7.0.0",
-    // "jsonwebtoken": "^9.0.0",
-    // "bcryptjs": "^2.4.3",
-    // "dotenv": "^16.0.0",
-    // "cors": "^2.8.5",
-    // "helmet": "^7.0.0",
-    // "express-rate-limit": "^7.0.0"
-  },
-  null,
-  2,
-);
-
-// ---------------------------------------------------------------------------
-// Export
-// ---------------------------------------------------------------------------
-
-export const fullstackStarterTemplate = {
-  entryCommand: "node server.js",
-  port: 3000,
-  files: {
-    ".ranger": RANGER_MANIFEST,
-    "package.json": PACKAGE_JSON,
-    ".env.example": ENV_EXAMPLE,
-    "config.js": CONFIG_JS,
-    "server.js": SERVER_JS,
-    Dockerfile: DOCKERFILE,
-    ".dockerignore": DOCKERIGNORE,
-    "docker-compose.yml": DOCKER_COMPOSE,
-    "README.md": README_MD,
-    "CONTRIBUTING.md": CONTRIBUTING_MD,
-    "db/database.js": DATABASE_JS,
-    "db/migrations/001_initial.js": MIGRATION_001,
-    "db/repositories/userRepository.js": USER_REPOSITORY_JS,
-    "db/repositories/itemRepository.js": ITEM_REPOSITORY_JS,
-    "middleware/auth.js": AUTH_JS,
-    "middleware/errorHandler.js": ERROR_HANDLER_JS,
-    "middleware/staticFiles.js": STATIC_FILES_JS,
-    "middleware/validate.js": VALIDATE_JS,
-    "routes/auth.js": ROUTES_AUTH_JS,
-    "routes/items.js": ROUTES_ITEMS_JS,
-    "public/index.html": INDEX_HTML,
-    "public/styles.css": STYLES_CSS,
-    "public/lib/api.js": API_JS,
-    "public/store/AuthContext.js": AUTH_CONTEXT_JS,
-    "public/store/AppContext.js": APP_CONTEXT_JS,
-    "public/components/Toast.js": TOAST_JS,
-    "public/components/Navbar.js": NAVBAR_JS,
-    "public/components/ItemCard.js": ITEM_CARD_JS,
-    "public/components/ItemForm.js": ITEM_FORM_JS,
-    "public/components/StatsChart.js": STATS_CHART_JS,
-    "public/pages/WelcomePage.js": WELCOME_PAGE_JS,
-    "public/pages/LoginPage.js": LOGIN_PAGE_JS,
-    "public/pages/RegisterPage.js": REGISTER_PAGE_JS,
-    "public/pages/DashboardPage.js": DASHBOARD_PAGE_JS,
-    "public/App.js": APP_JS,
-  } as Record<string, string>,
-};