tova 0.8.2 → 0.9.5

package/bin/tova.js

@@ -1,9 +1,10 @@
 #!/usr/bin/env bun
 
-import { resolve, basename, dirname, join, relative } from 'path';
+import { resolve, basename, dirname, join, relative, sep, extname } from 'path';
 import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync, copyFileSync, rmSync, chmodSync, renameSync, watch as fsWatch } from 'fs';
 import { spawn } from 'child_process';
 import { createHash as _cryptoHash } from 'crypto';
+import { createRequire as _createRequire } from 'module';
 import { Lexer } from '../src/lexer/lexer.js';
 import { Parser } from '../src/parser/parser.js';
 import { Analyzer } from '../src/analyzer/analyzer.js';
@@ -14,9 +15,10 @@ import { richError, formatDiagnostics, DiagnosticFormatter, formatSummary } from
 import { getExplanation, lookupCode } from '../src/diagnostics/error-codes.js';
 import { getFullStdlib, buildSelectiveStdlib, BUILTIN_NAMES, PROPAGATE, NATIVE_INIT } from '../src/stdlib/inline.js';
 import { Formatter } from '../src/formatter/formatter.js';
-import { REACTIVITY_SOURCE, RPC_SOURCE, ROUTER_SOURCE } from '../src/runtime/embedded.js';
+import { REACTIVITY_SOURCE, RPC_SOURCE, ROUTER_SOURCE, DEVTOOLS_SOURCE, SSR_SOURCE, TESTING_SOURCE } from '../src/runtime/embedded.js';
 import '../src/runtime/string-proto.js';
 import '../src/runtime/array-proto.js';
+import { generateSecurityScorecard } from '../src/diagnostics/security-scorecard.js';
 import { resolveConfig } from '../src/config/resolve.js';
 import { writePackageJson } from '../src/config/package-json.js';
 import { addToSection, removeFromSection } from '../src/config/edit-toml.js';
@@ -52,10 +54,10 @@ Commands:
   check [dir]      Type-check .tova files without generating code
   clean            Delete .tova-out build artifacts
   dev              Start development server with live reload
-  new <name>       Create a new Tova project (--template fullstack|api|script|library|blank)
-  install          Install npm dependencies from tova.toml
-  add <pkg>        Add an npm dependency (--dev for dev dependency)
-  remove <pkg>     Remove an npm dependency
+  new <name>       Create a new Tova project (--template fullstack|spa|site|api|script|library|blank)
+  install          Install dependencies from tova.toml
+  add <pkg>        Add a dependency (npm:pkg for npm, github.com/user/repo for Tova)
+  remove <pkg>     Remove a dependency
   repl             Start interactive Tova REPL
   lsp              Start Language Server Protocol server
   fmt <file>      Format a .tova file (--check to verify only)
@@ -83,7 +85,9 @@ Options:
   --verbose        Show detailed output during compilation
   --quiet          Suppress non-error output
   --debug          Show verbose error output
+  --static         Pre-render routes to static HTML files (used with --production)
   --strict         Enable strict type checking
+  --strict-security Promote security warnings to errors
 `;
 
 async function main() {
@@ -102,14 +106,15 @@ async function main() {
   const command = args[0];
 
   const isStrict = args.includes('--strict');
+  const isStrictSecurity = args.includes('--strict-security');
   switch (command) {
     case 'run': {
-      const runArgs = args.filter(a => a !== '--strict');
+      const runArgs = args.filter(a => a !== '--strict' && a !== '--strict-security');
       const filePath = runArgs[1];
       const restArgs = runArgs.slice(2);
       const ddIdx = restArgs.indexOf('--');
       const scriptArgs = ddIdx !== -1 ? restArgs.slice(ddIdx + 1) : restArgs;
-      await runFile(filePath, { strict: isStrict, scriptArgs });
+      await runFile(filePath, { strict: isStrict, strictSecurity: isStrictSecurity, scriptArgs });
       break;
     }
     case 'build':
@@ -280,10 +285,10 @@ async function main() {
       break;
     default:
       if (command.endsWith('.tova')) {
-        const directArgs = args.filter(a => a !== '--strict').slice(1);
+        const directArgs = args.filter(a => a !== '--strict' && a !== '--strict-security').slice(1);
         const ddIdx = directArgs.indexOf('--');
         const scriptArgs = ddIdx !== -1 ? directArgs.slice(ddIdx + 1) : directArgs;
-        await runFile(command, { strict: isStrict, scriptArgs });
+        await runFile(command, { strict: isStrict, strictSecurity: isStrictSecurity, scriptArgs });
       } else {
         console.error(`Unknown command: ${command}`);
         console.log(HELP);
@@ -301,7 +306,7 @@ function compileTova(source, filename, options = {}) {
   const parser = new Parser(tokens, filename);
   const ast = parser.parse();
 
-  const analyzer = new Analyzer(ast, filename, { strict: options.strict || false });
+  const analyzer = new Analyzer(ast, filename, { strict: options.strict || false, strictSecurity: options.strictSecurity || false });
   // Pre-define extra names in the analyzer scope (used by REPL for cross-line persistence)
   if (options.knownNames) {
     for (const name of options.knownNames) {
@@ -684,11 +689,12 @@ async function runFile(filePath, options = {}) {
     }
     const hasTovaImports = tovaImportPaths.length > 0;
 
-    const output = compileTova(source, filePath, { strict: options.strict });
+    const output = compileTova(source, filePath, { strict: options.strict, strictSecurity: options.strictSecurity });
 
     // Execute the generated JavaScript (with stdlib)
     const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
     const stdlib = getRunStdlib();
+    const __tova_require = _createRequire(import.meta.url);
 
     // CLI mode: execute the cli code directly
     if (output.isCli) {
@@ -697,8 +703,8 @@ async function runFile(filePath, options = {}) {
       // Override process.argv for cli dispatch
       const scriptArgs = options.scriptArgs || [];
       code = `process.argv = ["node", ${JSON.stringify(resolved)}, ...${JSON.stringify(scriptArgs)}];\n` + code;
-      const fn = new AsyncFunction('__tova_args', '__tova_filename', '__tova_dirname', code);
-      await fn(scriptArgs, resolved, dirname(resolved));
+      const fn = new AsyncFunction('__tova_args', '__tova_filename', '__tova_dirname', 'require', code);
+      await fn(scriptArgs, resolved, dirname(resolved), __tova_require);
       return;
     }
 
@@ -733,8 +739,8 @@ async function runFile(filePath, options = {}) {
     if (/\bfunction\s+main\s*\(/.test(code)) {
       code += '\nconst __tova_exit = await main(__tova_args); if (typeof __tova_exit === "number") process.exitCode = __tova_exit;\n';
     }
-    const fn = new AsyncFunction('__tova_args', '__tova_filename', '__tova_dirname', code);
-    await fn(scriptArgs, resolved, dirname(resolved));
+    const fn = new AsyncFunction('__tova_args', '__tova_filename', '__tova_dirname', 'require', code);
+    await fn(scriptArgs, resolved, dirname(resolved), __tova_require);
   } catch (err) {
     console.error(richError(source, err, filePath));
     if (process.argv.includes('--debug') || process.env.DEBUG) {
@@ -744,12 +750,217 @@ async function runFile(filePath, options = {}) {
   }
 }
 
+// ─── Import Path Fixup ──────────────────────────────────────
+
+function fixImportPaths(code, outputFilePath, outDir, srcDir) {
+  const relPath = relative(outDir, outputFilePath);
+  const depth = dirname(relPath).split(sep).filter(p => p && p !== '.').length;
+
+  // Fix runtime imports: './runtime/X.js' → correct relative path based on depth
+  if (depth > 0) {
+    const prefix = '../'.repeat(depth);
+    for (const runtimeFile of ['reactivity.js', 'rpc.js', 'router.js', 'devtools.js', 'ssr.js', 'testing.js']) {
+      code = code.split("'./runtime/" + runtimeFile + "'").join("'" + prefix + "runtime/" + runtimeFile + "'");
+      code = code.split('"./runtime/' + runtimeFile + '"').join('"' + prefix + 'runtime/' + runtimeFile + '"');
+    }
+  }
+
+  // Add .js extension to relative imports that don't have one
+  code = code.replace(
+    /from\s+(['"])(\.[^'"]+)\1/g,
+    (match, quote, path) => {
+      if (path.endsWith('.js')) return match;
+      return 'from ' + quote + path + '.js' + quote;
+    }
+  );
+
+  // Inject missing router imports
+  code = injectRouterImport(code, depth);
+
+  // Fix duplicate identifiers between reactivity and router imports (e.g. 'lazy')
+  const reactivityMatch = code.match(/^import\s+\{([^}]+)\}\s+from\s+['"][^'"]*runtime\/reactivity[^'"]*['"]/m);
+  const routerMatch = code.match(/^(import\s+\{)([^}]+)(\}\s+from\s+['"][^'"]*runtime\/router[^'"]*['"])/m);
+  if (reactivityMatch && routerMatch) {
+    const reactivityNames = new Set(reactivityMatch[1].split(',').map(s => s.trim()));
+    const routerNames = routerMatch[2].split(',').map(s => s.trim());
+    const deduped = routerNames.filter(n => !reactivityNames.has(n));
+    if (deduped.length < routerNames.length) {
+      if (deduped.length === 0) {
+        // Remove the entire router import line if nothing left
+        code = code.replace(/^import\s+\{[^}]*\}\s+from\s+['"][^'"]*runtime\/router[^'"]*['"];?\s*\n?/m, '');
+      } else {
+        code = code.replace(routerMatch[0], routerMatch[1] + ' ' + deduped.join(', ') + ' ' + routerMatch[3]);
+      }
+    }
+  }
+
+  // Fix CodeBlock/code prop template literal interpolation: the compiler treats {identifier}
+  // inside string attributes as interpolation, generating `${identifier}` in template literals.
+  // For code example strings, these should be literal braces. Revert them.
+  code = code.replace(/code:\s*`([\s\S]*?)`/g, (match, content) => {
+    if (!content.includes('${')) return match;
+    const fixed = content.replace(/\$\{(\w+)\}/g, '{ $1 }');
+    // Convert template literal to regular string with escaped quotes and newlines
+    return 'code: "' + fixed.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"';
+  });
+
+  // File-based routing: inject routes if src/pages/ exists and no manual routes defined
+  if (srcDir && !(/\b(defineRoutes|createRouter)\s*\(/.test(code))) {
+    const fileRoutes = generateFileBasedRoutes(srcDir);
+    if (fileRoutes) {
+      // Convert Tova-style imports to JS imports with .js extensions
+      const jsRoutes = fileRoutes
+        .replace(/from\s+"([^"]+)"/g, (m, p) => 'from "' + p + '.js"');
+      // Inject before the last closing function or at the end
+      code = code + '\n// ── File-Based Routes (auto-generated from src/pages/) ──\n' + jsRoutes + '\n';
+    }
+  }
+
+  return code;
+}
+
+function injectRouterImport(code, depth) {
+  const routerFuncs = ['createRouter', 'lazy', 'resetRouter', 'getPath', 'navigate',
+                       'getCurrentRoute', 'getParams', 'getQuery', 'getMeta', 'getRouter',
+                       'defineRoutes', 'onRouteChange', 'Router', 'Link', 'Outlet', 'Redirect',
+                       'beforeNavigate', 'afterNavigate'];
+  const hasRouterImport = /runtime\/router/.test(code);
+  if (hasRouterImport) return code;
+
+  // Strip import lines before checking for router function usage to avoid false positives
+  const codeWithoutImports = code.replace(/^import\s+\{[^}]*\}\s+from\s+['"][^'"]*['"];?\s*$/gm, '');
+  const usedFuncs = routerFuncs.filter(fn => new RegExp('\\b' + fn + '\\b').test(codeWithoutImports));
+  if (usedFuncs.length === 0) return code;
+
+  const routerPath = depth === 0
+    ? './runtime/router.js'
+    : '../'.repeat(depth) + 'runtime/router.js';
+
+  const importLine = "import { " + usedFuncs.join(', ') + " } from '" + routerPath + "';\n";
+
+  // Insert after first import line, or at the start
+  const firstImportEnd = code.indexOf(';\n');
+  if (firstImportEnd !== -1 && code.trimStart().startsWith('import ')) {
+    return code.slice(0, firstImportEnd + 2) + importLine + code.slice(firstImportEnd + 2);
+  }
+  return importLine + code;
+}
+
+// ─── File-Based Routing ──────────────────────────────────────
+
+function generateFileBasedRoutes(srcDir) {
+  const pagesDir = join(srcDir, 'pages');
+  if (!existsSync(pagesDir) || !statSync(pagesDir).isDirectory()) return null;
+
+  // Scan pages directory recursively
+  const routes = [];
+  let hasLayout = false;
+  let has404 = false;
+
+  function scanDir(dir, prefix) {
+    const entries = readdirSync(dir).sort();
+    for (const entry of entries) {
+      const fullPath = join(dir, entry);
+      const stat = statSync(fullPath);
+
+      if (stat.isDirectory()) {
+        // Check for layout in subdirectory
+        const subLayout = join(fullPath, '_layout.tova');
+        if (existsSync(subLayout)) {
+          const childRoutes = [];
+          scanDir(fullPath, prefix + '/' + entry);
+          // Layout routes handled via nested children
+          continue;
+        }
+        scanDir(fullPath, prefix + '/' + entry);
+        continue;
+      }
+
+      if (!entry.endsWith('.tova')) continue;
+      const name = entry.replace('.tova', '');
+
+      // Skip layout files (handled separately)
+      if (name === '_layout') {
+        if (prefix === '') hasLayout = true;
+        continue;
+      }
+
+      // 404 page
+      if (name === '404') {
+        has404 = true;
+        const relImport = './pages' + (prefix ? prefix + '/' : '/') + name;
+        routes.push({ path: '404', importPath: relImport, componentName: 'NotFoundPage__auto' });
+        continue;
+      }
+
+      // Determine route path
+      let routePath;
+      if (name === 'index') {
+        routePath = prefix || '/';
+      } else if (name.startsWith('[...') && name.endsWith(']')) {
+        // Catch-all: [...slug] → *
+        routePath = prefix + '/*';
+      } else if (name.startsWith('[[') && name.endsWith(']]')) {
+        // Optional param: [[id]] → /:id?
+        const paramName = name.slice(2, -2);
+        routePath = prefix + '/:' + paramName + '?';
+      } else if (name.startsWith('[') && name.endsWith(']')) {
+        // Dynamic param: [id] → /:id
+        const paramName = name.slice(1, -1);
+        routePath = prefix + '/:' + paramName;
+      } else {
+        routePath = prefix + '/' + name;
+      }
+
+      const relImport = './pages' + (prefix ? prefix + '/' : '/') + name;
+      // Generate safe component name from path
+      const safeName = name
+        .replace(/\[\.\.\.(\w+)\]/, 'CatchAll_$1')
+        .replace(/\[\[(\w+)\]\]/, 'Optional_$1')
+        .replace(/\[(\w+)\]/, 'Param_$1')
+        .replace(/[^a-zA-Z0-9_]/g, '_');
+      const componentName = '__Page_' + (prefix ? prefix.slice(1).replace(/\//g, '_') + '_' : '') + safeName;
+
+      routes.push({ path: routePath, importPath: relImport, componentName });
+    }
+  }
+
+  scanDir(pagesDir, '');
+
+  if (routes.length === 0) return null;
+
+  // Generate import statements and route map
+  const imports = routes.map(r =>
+    'import { Page as ' + r.componentName + ' } from "' + r.importPath + '"'
+  ).join('\n');
+
+  const routeEntries = routes.map(r =>
+    '    "' + r.path + '": ' + r.componentName + ','
+  ).join('\n');
+
+  // Check for root layout
+  let layoutImport = '';
+  let layoutWrap = '';
+  if (hasLayout) {
+    layoutImport = '\nimport { Layout as __RootLayout } from "./pages/_layout"';
+    // With layout, wrap routes as children
+    // For now, just generate flat routes — layout support can be added later
+  }
+
+  const generated = imports + layoutImport + '\n\n' +
+    'defineRoutes({\n' + routeEntries + '\n})';
+
+  return generated;
+}
+
 // ─── Build ──────────────────────────────────────────────────
 
 async function buildProject(args) {
   const config = resolveConfig(process.cwd());
   const isProduction = args.includes('--production');
+  const isStatic = args.includes('--static');
   const buildStrict = args.includes('--strict');
+  const buildStrictSecurity = args.includes('--strict-security');
   const isVerbose = args.includes('--verbose');
   const isQuiet = args.includes('--quiet');
   const isWatch = args.includes('--watch');
@@ -767,7 +978,7 @@ async function buildProject(args) {
 
   // Production build uses a separate optimized pipeline
   if (isProduction) {
-    return await productionBuild(srcDir, outDir);
+    return await productionBuild(srcDir, outDir, isStatic);
   }
 
   const tovaFiles = findFiles(srcDir, '.tova');
@@ -784,6 +995,9 @@ async function buildProject(args) {
   writeFileSync(join(runtimeDest, 'reactivity.js'), REACTIVITY_SOURCE);
   writeFileSync(join(runtimeDest, 'rpc.js'), RPC_SOURCE);
   writeFileSync(join(runtimeDest, 'router.js'), ROUTER_SOURCE);
+  writeFileSync(join(runtimeDest, 'devtools.js'), DEVTOOLS_SOURCE);
+  writeFileSync(join(runtimeDest, 'ssr.js'), SSR_SOURCE);
+  writeFileSync(join(runtimeDest, 'testing.js'), TESTING_SOURCE);
 
   if (!isQuiet) console.log(`\n  Building ${tovaFiles.length} file(s)...\n`);
 
@@ -799,6 +1013,7 @@ async function buildProject(args) {
 
   // Group files by directory for multi-file merging
   const dirGroups = groupFilesByDirectory(tovaFiles);
+  let _scorecardData = null; // Collect security info for scorecard
 
   for (const [dir, files] of dirGroups) {
     const dirName = basename(dir) === '.' ? 'app' : basename(dir);
@@ -835,10 +1050,13 @@ async function buildProject(args) {
         }
       }
 
-      const result = mergeDirectory(dir, srcDir, { strict: buildStrict });
+      const result = mergeDirectory(dir, srcDir, { strict: buildStrict, strictSecurity: buildStrictSecurity });
       if (!result) continue;
 
-      const { output, single } = result;
+      const { output, single, warnings: buildWarnings, securityConfig, hasServer, hasEdge } = result;
+      if ((hasServer || hasEdge) && !_scorecardData) {
+        _scorecardData = { securityConfig, warnings: buildWarnings || [], hasServer, hasEdge };
+      }
       // Preserve relative directory structure in output (e.g., src/lib/math.tova → lib/math.js)
       const outBaseName = single
         ? relative(srcDir, files[0]).replace(/\.tova$/, '').replace(/\\/g, '/')
@@ -892,7 +1110,7 @@ async function buildProject(args) {
       else if (output.isModule) {
         if (output.shared && output.shared.trim()) {
           const modulePath = join(outDir, `${outBaseName}.js`);
-          writeFileSync(modulePath, generateSourceMap(output.shared, modulePath));
+          writeFileSync(modulePath, fixImportPaths(generateSourceMap(output.shared, modulePath), modulePath, outDir));
           if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', modulePath)}${timing}`);
         }
         // Update incremental build cache
@@ -911,28 +1129,30 @@ async function buildProject(args) {
         // Write shared
         if (output.shared && output.shared.trim()) {
           const sharedPath = join(outDir, `${outBaseName}.shared.js`);
-          writeFileSync(sharedPath, generateSourceMap(output.shared, sharedPath));
+          writeFileSync(sharedPath, fixImportPaths(generateSourceMap(output.shared, sharedPath), sharedPath, outDir));
           if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', sharedPath)}${timing}`);
         }
 
         // Write default server
         if (output.server) {
           const serverPath = join(outDir, `${outBaseName}.server.js`);
-          writeFileSync(serverPath, generateSourceMap(output.server, serverPath));
+          writeFileSync(serverPath, fixImportPaths(generateSourceMap(output.server, serverPath), serverPath, outDir));
           if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', serverPath)}${timing}`);
         }
 
         // Write default browser
         if (output.browser) {
           const browserPath = join(outDir, `${outBaseName}.browser.js`);
-          writeFileSync(browserPath, generateSourceMap(output.browser, browserPath));
+          // Pass srcDir for file-based routing injection (only for root-level browser output)
+          const browserSrcDir = (relDir === '.' || relDir === '') ? srcDir : undefined;
+          writeFileSync(browserPath, fixImportPaths(generateSourceMap(output.browser, browserPath), browserPath, outDir, browserSrcDir));
           if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', browserPath)}${timing}`);
         }
 
         // Write default edge
         if (output.edge) {
           const edgePath = join(outDir, `${outBaseName}.edge.js`);
-          writeFileSync(edgePath, generateSourceMap(output.edge, edgePath));
+          writeFileSync(edgePath, fixImportPaths(generateSourceMap(output.edge, edgePath), edgePath, outDir));
           if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', edgePath)} [edge]${timing}`);
         }
 
@@ -941,7 +1161,7 @@ async function buildProject(args) {
           for (const [name, code] of Object.entries(output.servers)) {
             if (name === 'default') continue;
             const path = join(outDir, `${outBaseName}.server.${name}.js`);
-            writeFileSync(path, code);
+            writeFileSync(path, fixImportPaths(code, path, outDir));
             if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', path)} [server:${name}]${timing}`);
           }
         }
@@ -951,7 +1171,7 @@ async function buildProject(args) {
           for (const [name, code] of Object.entries(output.edges)) {
             if (name === 'default') continue;
             const path = join(outDir, `${outBaseName}.edge.${name}.js`);
-            writeFileSync(path, code);
+            writeFileSync(path, fixImportPaths(code, path, outDir));
             if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', path)} [edge:${name}]${timing}`);
           }
         }
@@ -961,7 +1181,7 @@ async function buildProject(args) {
           for (const [name, code] of Object.entries(output.browsers)) {
             if (name === 'default') continue;
             const path = join(outDir, `${outBaseName}.browser.${name}.js`);
-            writeFileSync(path, code);
+            writeFileSync(path, fixImportPaths(code, path, outDir));
             if (!isQuiet) console.log(`  ✓ ${relLabel} → ${relative('.', path)} [browser:${name}]${timing}`);
           }
         }
@@ -1001,6 +1221,18 @@ async function buildProject(args) {
     const cachedStr = skippedCount > 0 ? ` (${skippedCount} cached)` : '';
     console.log(`\n  Build complete. ${dirCount - errorCount}/${dirCount} directory group(s) succeeded${cachedStr}${timingStr}.\n`);
   }
+
+  // Security scorecard (shown with --verbose or --strict-security, suppressed with --quiet)
+  if ((isVerbose || buildStrictSecurity) && !isQuiet && _scorecardData) {
+    const scorecard = generateSecurityScorecard(
+      _scorecardData.securityConfig,
+      _scorecardData.warnings,
+      _scorecardData.hasServer,
+      _scorecardData.hasEdge
+    );
+    if (scorecard) console.log(scorecard.format());
+  }
+
   if (errorCount > 0) process.exit(1);
 
   // Watch mode for build command
@@ -1027,6 +1259,7 @@ async function buildProject(args) {
 
 async function checkProject(args) {
   const checkStrict = args.includes('--strict');
+  const checkStrictSecurity = args.includes('--strict-security');
   const isVerbose = args.includes('--verbose');
   const isQuiet = args.includes('--quiet');
 
@@ -1069,6 +1302,8 @@ async function checkProject(args) {
   let totalErrors = 0;
   let totalWarnings = 0;
   const seenCodes = new Set();
+  let _checkScorecardData = null;
+  const _allCheckWarnings = [];
 
   for (const file of tovaFiles) {
     const relPath = relative(srcDir, file);
@@ -1079,13 +1314,39 @@ async function checkProject(args) {
       const tokens = lexer.tokenize();
       const parser = new Parser(tokens, file);
       const ast = parser.parse();
-      const analyzer = new Analyzer(ast, file, { strict: checkStrict, tolerant: true });
+      const analyzer = new Analyzer(ast, file, { strict: checkStrict, strictSecurity: checkStrictSecurity, tolerant: true });
       const result = analyzer.analyze();
 
       const errors = result.errors || [];
       const warnings = result.warnings || [];
       totalErrors += errors.length;
       totalWarnings += warnings.length;
+      _allCheckWarnings.push(...warnings);
+
+      // Collect security info for scorecard
+      if (!_checkScorecardData) {
+        const hasServer = ast.body.some(n => n.type === 'ServerBlock');
+        const hasEdge = ast.body.some(n => n.type === 'EdgeBlock');
+        if (hasServer || hasEdge) {
+          const secNode = ast.body.find(n => n.type === 'SecurityBlock');
+          let secCfg = null;
+          if (secNode) {
+            secCfg = {};
+            for (const child of secNode.body || []) {
+              if (child.type === 'AuthDeclaration') secCfg.auth = { authType: child.authType || 'jwt', storage: child.config?.storage?.value };
+              else if (child.type === 'CsrfDeclaration') secCfg.csrf = { enabled: child.config?.enabled?.value !== false };
+              else if (child.type === 'RateLimitDeclaration') secCfg.rateLimit = { max: child.config?.max?.value };
+              else if (child.type === 'CspDeclaration') secCfg.csp = { default_src: true };
+              else if (child.type === 'CorsDeclaration') {
+                const origins = child.config?.origins;
+                secCfg.cors = { origins: origins ? (origins.elements || []).map(e => e.value) : [] };
+              }
+              else if (child.type === 'AuditDeclaration') secCfg.audit = { events: ['auth'] };
+            }
+          }
+          _checkScorecardData = { securityConfig: secCfg, hasServer, hasEdge };
+        }
+      }
 
       if (errors.length > 0 || warnings.length > 0) {
         const formatter = new DiagnosticFormatter(source, file);
@@ -1114,6 +1375,17 @@ async function checkProject(args) {
     }
   }
 
+  // Security scorecard (shown with --verbose or --strict-security, suppressed with --quiet)
+  if ((isVerbose || checkStrictSecurity) && !isQuiet && _checkScorecardData) {
+    const scorecard = generateSecurityScorecard(
+      _checkScorecardData.securityConfig,
+      _allCheckWarnings,
+      _checkScorecardData.hasServer,
+      _checkScorecardData.hasEdge
+    );
+    if (scorecard) console.log(scorecard.format());
+  }
+
   if (!isQuiet) {
     console.log(`\n  ${tovaFiles.length} file${tovaFiles.length === 1 ? '' : 's'} checked, ${formatSummary(totalErrors, totalWarnings)}`);
     // Show explain hint for encountered error codes
@@ -1150,6 +1422,7 @@ async function devServer(args) {
   const explicitPort = args.find((_, i, a) => a[i - 1] === '--port');
   const basePort = parseInt(explicitPort || config.dev.port || '3000');
   const buildStrict = args.includes('--strict');
+  const buildStrictSecurity = args.includes('--strict-security');
 
   const tovaFiles = findFiles(srcDir, '.tova');
   if (tovaFiles.length === 0) {
@@ -1193,6 +1466,9 @@ async function devServer(args) {
   writeFileSync(join(runtimeDest, 'reactivity.js'), REACTIVITY_SOURCE);
   writeFileSync(join(runtimeDest, 'rpc.js'), RPC_SOURCE);
   writeFileSync(join(runtimeDest, 'router.js'), ROUTER_SOURCE);
+  writeFileSync(join(runtimeDest, 'devtools.js'), DEVTOOLS_SOURCE);
+  writeFileSync(join(runtimeDest, 'ssr.js'), SSR_SOURCE);
+  writeFileSync(join(runtimeDest, 'testing.js'), TESTING_SOURCE);
 
   const serverFiles = [];
   let hasClient = false;
@@ -1208,25 +1484,40 @@ async function devServer(args) {
 
   // Pass 1: Merge each directory, write shared/client outputs, collect clientHTML
   const dirResults = [];
+  const allSharedParts = [];
+  let browserCode = '';
   for (const [dir, files] of dirGroups) {
     const dirName = basename(dir) === '.' ? 'app' : basename(dir);
     try {
-      const result = mergeDirectory(dir, srcDir, { strict: buildStrict });
+      const result = mergeDirectory(dir, srcDir, { strict: buildStrict, strictSecurity: buildStrictSecurity });
       if (!result) continue;
 
       const { output, single } = result;
-      const outBaseName = single ? basename(files[0], '.tova') : dirName;
+      const relDir = relative(srcDir, dir);
+      const outBaseName = single
+        ? relative(srcDir, files[0]).replace(/\.tova$/, '').replace(/\\/g, '/')
+        : (relDir === '.' ? dirName : relDir + '/' + dirName);
       dirResults.push({ dir, output, outBaseName, single, files });
 
+      // Ensure output subdirectory exists for nested paths
+      const outSubDir = dirname(join(outDir, outBaseName));
+      if (outSubDir !== outDir) mkdirSync(outSubDir, { recursive: true });
+
       if (output.shared && output.shared.trim()) {
-        writeFileSync(join(outDir, `${outBaseName}.shared.js`), output.shared);
+        // Use .js (not .shared.js) for module files to match build output
+        const ext = (output.isModule || (!output.browser && !output.server)) ? '.js' : '.shared.js';
+        const sp = join(outDir, `${outBaseName}${ext}`);
+        const fixedShared = fixImportPaths(output.shared, sp, outDir);
+        writeFileSync(sp, fixedShared);
+        allSharedParts.push(fixedShared);
       }
 
       if (output.browser) {
         const p = join(outDir, `${outBaseName}.browser.js`);
-        writeFileSync(p, output.browser);
-        clientHTML = await generateDevHTML(output.browser, srcDir, actualReloadPort);
-        writeFileSync(join(outDir, 'index.html'), clientHTML);
+        const browserSrcDir = (relative(srcDir, dir) === '.' || relative(srcDir, dir) === '') ? srcDir : undefined;
+        const fixedBrowser = fixImportPaths(output.browser, p, outDir, browserSrcDir);
+        writeFileSync(p, fixedBrowser);
+        browserCode = fixedBrowser;
         hasClient = true;
       }
     } catch (err) {
@@ -1234,6 +1525,16 @@ async function devServer(args) {
     }
   }
 
+  // Generate dev HTML with all shared code prepended to browser code
+  // Skip if the project has its own index.html (uses import maps or custom module loading)
+  const hasCustomIndex = existsSync(join(process.cwd(), 'index.html'));
+  if (hasClient && !hasCustomIndex) {
+    const allSharedCode = allSharedParts.join('\n').replace(/^export /gm, '');
+    const fullClientCode = allSharedCode ? allSharedCode + '\n' + browserCode : browserCode;
+    clientHTML = await generateDevHTML(fullClientCode, srcDir, actualReloadPort);
+    writeFileSync(join(outDir, 'index.html'), clientHTML);
+  }
+
   // Pass 2: Write server files with clientHTML injected
   for (const { output, outBaseName } of dirResults) {
     if (output.server) {
@@ -1305,6 +1606,75 @@ async function devServer(args) {
     console.log(`  ✓ Client: ${relative('.', outDir)}/index.html`);
   }
 
+  // If no server blocks were found but we have a client, start a static file server
+  if (processes.length === 0 && hasClient) {
+    const mimeTypes = {
+      '.html': 'text/html',
+      '.js': 'application/javascript',
+      '.mjs': 'application/javascript',
+      '.css': 'text/css',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+      '.woff': 'font/woff',
+      '.woff2': 'font/woff2',
+      '.map': 'application/json',
+    };
+
+    const staticServer = Bun.serve({
+      port: basePort,
+      async fetch(req) {
+        const url = new URL(req.url);
+        let pathname = url.pathname;
+
+        // Try to serve the file directly from outDir, srcDir, or project root
+        const tryPaths = [
+          join(outDir, pathname),
+          join(srcDir, pathname),
+          join(process.cwd(), pathname),
+        ];
+
+        for (const filePath of tryPaths) {
+          if (existsSync(filePath) && statSync(filePath).isFile()) {
+            const ext = extname(filePath);
+            const contentType = mimeTypes[ext] || 'application/octet-stream';
+            const content = readFileSync(filePath);
+            return new Response(content, {
+              headers: {
+                'Content-Type': contentType,
+                'Cache-Control': 'no-cache',
+                'Access-Control-Allow-Origin': '*',
+              },
+            });
+          }
+        }
+
+        // SPA fallback: serve index.html for non-file routes
+        const indexPath = join(outDir, 'index.html');
+        if (existsSync(indexPath)) {
+          return new Response(readFileSync(indexPath), {
+            headers: { 'Content-Type': 'text/html', 'Cache-Control': 'no-cache' },
+          });
+        }
+
+        const rootIndex = join(process.cwd(), 'index.html');
+        if (existsSync(rootIndex)) {
+          return new Response(readFileSync(rootIndex), {
+            headers: { 'Content-Type': 'text/html', 'Cache-Control': 'no-cache' },
+          });
+        }
+
+        return new Response('Not Found', { status: 404 });
+      },
+    });
+
+    console.log(`\n  Static file server running:`);
+    console.log(`    → http://localhost:${basePort}`);
+  }
+
   function handleReloadFetch(req) {
       const url = new URL(req.url);
       if (url.pathname === '/__tova_reload') {
@@ -1358,22 +1728,39 @@ async function devServer(args) {
       // Merge each directory group, collect client HTML
       const rebuildDirGroups = groupFilesByDirectory(currentFiles);
       let rebuildClientHTML = '';
+      const rebuildSharedParts = [];
+      let rebuildBrowserCode = '';
+      let rebuildHasClient = false;
 
       for (const [dir, files] of rebuildDirGroups) {
         const dirName = basename(dir) === '.' ? 'app' : basename(dir);
-        const result = mergeDirectory(dir, srcDir, { strict: buildStrict });
+        const result = mergeDirectory(dir, srcDir, { strict: buildStrict, strictSecurity: buildStrictSecurity });
         if (!result) continue;
 
         const { output, single } = result;
-        const outBaseName = single ? basename(files[0], '.tova') : dirName;
+        const relDir = relative(srcDir, dir);
+        const outBaseName = single
+          ? relative(srcDir, files[0]).replace(/\.tova$/, '').replace(/\\/g, '/')
+          : (relDir === '.' ? dirName : relDir + '/' + dirName);
+
+        // Ensure output subdirectory exists for nested paths
+        const outSubDir = dirname(join(outDir, outBaseName));
+        if (outSubDir !== outDir) mkdirSync(outSubDir, { recursive: true });
 
         if (output.shared && output.shared.trim()) {
-          writeFileSync(join(outDir, `${outBaseName}.shared.js`), output.shared);
+          const ext = (output.isModule || (!output.browser && !output.server)) ? '.js' : '.shared.js';
+          const sp = join(outDir, `${outBaseName}${ext}`);
+          const fixedShared = fixImportPaths(output.shared, sp, outDir);
+          writeFileSync(sp, fixedShared);
+          rebuildSharedParts.push(fixedShared);
         }
         if (output.browser) {
-          writeFileSync(join(outDir, `${outBaseName}.browser.js`), output.browser);
-          rebuildClientHTML = await generateDevHTML(output.browser, srcDir, actualReloadPort);
-          writeFileSync(join(outDir, 'index.html'), rebuildClientHTML);
+          const p = join(outDir, `${outBaseName}.browser.js`);
+          const browserSrcDir = (relative(srcDir, dir) === '.' || relative(srcDir, dir) === '') ? srcDir : undefined;
+          const fixedBrowser = fixImportPaths(output.browser, p, outDir, browserSrcDir);
+          writeFileSync(p, fixedBrowser);
+          rebuildBrowserCode = fixedBrowser;
+          rebuildHasClient = true;
         }
         if (output.server) {
           let serverCode = output.server;
@@ -1381,7 +1768,7 @@ async function devServer(args) {
             serverCode = `const __clientHTML = ${JSON.stringify(rebuildClientHTML)};\n` + serverCode;
           }
           const p = join(outDir, `${outBaseName}.server.js`);
-          writeFileSync(p, serverCode);
+          writeFileSync(p, fixImportPaths(serverCode, p, outDir));
           newServerFiles.push(p);
         }
         if (output.multiBlock && output.servers) {
@@ -1393,6 +1780,14 @@ async function devServer(args) {
           }
         }
       }
+
+      // Generate dev HTML with all shared code prepended to browser code
+      if (rebuildHasClient) {
+        const rebuildAllShared = rebuildSharedParts.join('\n').replace(/^export /gm, '');
+        const rebuildFullClient = rebuildAllShared ? rebuildAllShared + '\n' + rebuildBrowserCode : rebuildBrowserCode;
+        rebuildClientHTML = await generateDevHTML(rebuildFullClient, srcDir, actualReloadPort);
+        writeFileSync(join(outDir, 'index.html'), rebuildClientHTML);
+      }
     } catch (err) {
       console.error(`  ✗ Rebuild failed: ${err.message}`);
       return; // Keep old processes running
@@ -1510,6 +1905,10 @@ ${bundled}
   const inlineReactivity = REACTIVITY_SOURCE.replace(/^export /gm, '');
   const inlineRpc = RPC_SOURCE.replace(/^export /gm, '');
 
+  // Detect if client code uses routing (defineRoutes, Router, getPath, navigate, etc.)
+  const usesRouter = /\b(createRouter|lazy|resetRouter|defineRoutes|Router|getPath|getQuery|getParams|getCurrentRoute|getMeta|getRouter|navigate|onRouteChange|beforeNavigate|afterNavigate|Outlet|Link|Redirect)\b/.test(clientCode);
+  const inlineRouter = usesRouter ? ROUTER_SOURCE.replace(/^export /gm, '').replace(/^\s*import\s+(?:\{[^}]*\}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"][^'"]+['"];?\s*$/gm, '') : '';
+
   // Strip all import lines from client code (we inline the runtime instead)
   const inlineClient = clientCode
     .replace(/^\s*import\s+(?:\{[^}]*\}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -1560,6 +1959,8 @@ ${inlineReactivity}
 // ── Tova Runtime: RPC ──
 ${inlineRpc}
 
+${usesRouter ? '// ── Tova Runtime: Router ──\n' + inlineRouter : ''}
+
 // ── App ──
 ${inlineClient}
   </script>${liveReloadScript}
@@ -1571,14 +1972,629 @@ ${inlineClient}
 
 // ─── Template Definitions ────────────────────────────────────
 
+// ─── Auth template content (fullstack + auth) ───────────────────────
+function fullstackAuthContent(name) {
+  return `// ${name} — Built with Tova
+// Full-stack app with authentication and security
+
+shared {
+  type User {
+    id: String
+    email: String
+    role: String
+  }
+}
+
+security {
+  cors {
+    origins: ["http://localhost:3000"]
+    methods: ["GET", "POST", "PUT", "DELETE"]
+    credentials: true
+  }
+
+  csrf {
+    enabled: true
+  }
+
+  rate_limit {
+    window: 60
+    max: 100
+  }
+
+  csp {
+    default_src: ["self"]
+    script_src: ["self", "https://cdn.tailwindcss.com"]
+    style_src: ["self", "unsafe-inline"]
+    img_src: ["self", "data:", "https:"]
+    connect_src: ["self"]
+  }
+}
+
+auth {
+  secret: env("AUTH_SECRET")
+  token_expires: 900
+  refresh_expires: 604800
+  storage: "cookie"
+
+  provider email {
+    confirm_email: true
+    password_min: 8
+    max_attempts: 5
+    lockout_duration: 900
+  }
+
+  on signup fn(user) {
+    print("New user signed up: " + user.email)
+  }
+
+  on login fn(user) {
+    print("User logged in: " + user.email)
+  }
+
+  on logout fn(user) {
+    print("User logged out: " + user.id)
+  }
+
+  protected_route "/dashboard" { redirect: "/login" }
+  protected_route "/dashboard/*" { redirect: "/login" }
+  protected_route "/settings" { redirect: "/login" }
+}
+
+server {
+  fn get_message() {
+    { text: "Hello from ${name}!", timestamp: Date.new().toLocaleTimeString() }
+  }
+
+  route GET "/api/message" => get_message
+}
+
+browser {
+  state message = ""
+  state timestamp = ""
+  state refreshing = false
+
+  effect {
+    result = server.get_message()
+    message = result.text
+    timestamp = result.timestamp
+  }
+
+  fn handle_refresh() {
+    refreshing = true
+    result = server.get_message()
+    message = result.text
+    timestamp = result.timestamp
+    refreshing = false
+  }
+
+  // \u2500\u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component NavBar {
+    <nav class="border-b border-gray-200 bg-white shadow-sm sticky top-0 z-10">
+      <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" class="flex items-center gap-2 no-underline">
+          <div class="w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center">
+            <span class="text-white font-bold text-sm">"T"</span>
+          </div>
+          <span class="font-bold text-gray-900 text-lg">"${name}"</span>
+        </Link>
+        <div class="flex items-center gap-4">
+          <Link href="/" exactActiveClass="text-emerald-600 font-semibold" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Home"</Link>
+          if $isAuthenticated {
+            <Link href="/dashboard" activeClass="text-emerald-600 font-semibold" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Dashboard"</Link>
+            <div class="flex items-center gap-3 ml-2 pl-4 border-l border-gray-200">
+              <span class="text-sm text-gray-500">
+                if $currentUser != null {
+                  {$currentUser.email}
+                }
+              </span>
+              <button
+                on:click={fn() { logout() }}
+                class="text-sm font-medium text-red-600 hover:text-red-700 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors"
+              >
+                "Sign Out"
+              </button>
+            </div>
+          } else {
+            <Link href="/login" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Login"</Link>
+            <Link href="/signup" class="text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 px-4 py-1.5 rounded-lg no-underline transition-colors">"Sign Up"</Link>
+          }
+        </div>
+      </div>
+    </nav>
+  }
+
+  // \u2500\u2500\u2500 Pages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component FeatureCard(icon, title, description) {
+    <div class="group relative bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-emerald-100 transition-all duration-300">
+      <div class="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center text-lg mb-4 group-hover:bg-emerald-100 transition-colors">
+        "{icon}"
+      </div>
+      <h3 class="font-semibold text-gray-900 mb-1">"{title}"</h3>
+      <p class="text-sm text-gray-500 leading-relaxed">"{description}"</p>
+    </div>
+  }
+
+  component HomePage {
+    <main class="max-w-5xl mx-auto px-6">
+      <div class="py-20 text-center">
+        <div class="inline-flex items-center gap-2 bg-emerald-50 text-emerald-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
+          <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
+          "Secure by Default"
+        </div>
+        <h1 class="text-5xl font-bold text-gray-900 tracking-tight mb-4">"Welcome to " <span class="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">"${name}"</span></h1>
+        <p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">"A full-stack app with authentication. Edit " <code class="text-sm bg-gray-100 text-emerald-600 px-2 py-1 rounded-md font-mono">"src/app.tova"</code> " to get started."</p>
+
+        if $isAuthenticated {
+          <Link href="/dashboard" class="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-6 py-3 rounded-xl no-underline transition-colors">
+            "Go to Dashboard"
+          </Link>
+        } else {
+          <div class="flex items-center justify-center gap-4">
+            <Link href="/signup" class="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-6 py-3 rounded-xl no-underline transition-colors">"Get Started"</Link>
+            <Link href="/login" class="inline-block bg-white border border-gray-200 hover:border-gray-300 text-gray-700 font-medium px-6 py-3 rounded-xl no-underline transition-colors">"Sign In"</Link>
+          </div>
+        }
+
+        if timestamp != "" {
+          <p class="text-xs text-gray-400 mt-6">"Server time: " "{timestamp}"</p>
+        }
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-5 pb-20">
+        <FeatureCard
+          icon="\u2699"
+          title="Full-Stack"
+          description="Server and client in one file. Shared types, RPC calls, and reactive UI."
+        />
+        <FeatureCard
+          icon="\uD83D\uDD12"
+          title="Auth Built-in"
+          description="Email signup, login, password reset, and JWT sessions \u2014 secure by default."
+        />
+        <FeatureCard
+          icon="\uD83D\uDEE1"
+          title="Security Hardened"
+          description="CORS, CSRF, CSP, rate limiting, brute-force lockout, and HttpOnly cookies."
+        />
+      </div>
+    </main>
+  }
+
+  // \u2500\u2500\u2500 Auth Pages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component LoginPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Sign In"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <LoginForm />
+        <div class="mt-6 text-center">
+          <Link href="/forgot-password" class="text-sm text-emerald-600 hover:text-emerald-700 no-underline">"Forgot your password?"</Link>
+        </div>
+        <div class="mt-4 text-center">
+          <span class="text-sm text-gray-500">"Don't have an account? "</span>
+          <Link href="/signup" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Sign Up"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  component SignupPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Create Account"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <SignupForm />
+        <div class="mt-4 text-center">
+          <span class="text-sm text-gray-500">"Already have an account? "</span>
+          <Link href="/login" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Sign In"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  component ForgotPasswordPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Reset Password"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <ForgotPasswordForm />
+        <div class="mt-4 text-center">
+          <Link href="/login" class="text-sm text-emerald-600 hover:text-emerald-700 no-underline">"Back to login"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  // \u2500\u2500\u2500 Protected Pages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component DashboardPage {
+    <AuthGuard redirect="/login">
+      <main class="max-w-5xl mx-auto px-6 py-8">
+        <div class="mb-8">
+          <h2 class="text-2xl font-bold text-gray-900">"Dashboard"</h2>
+          <p class="text-gray-500">
+            "Welcome back"
+            if $currentUser != null {
+              ", " "{$currentUser.email}"
+            }
+          </p>
+        </div>
+
+        <div class="bg-white rounded-xl border border-gray-200 p-8">
+          <div class="text-center">
+            <div class="inline-flex items-center gap-3 bg-emerald-50 border border-emerald-200 rounded-2xl p-3">
+              <div class="bg-gradient-to-r from-emerald-500 to-teal-500 text-white px-5 py-2.5 rounded-xl font-medium">
+                "{message}"
+              </div>
+              <button
+                on:click={handle_refresh}
+                class="px-4 py-2.5 text-gray-500 hover:text-emerald-600 hover:bg-emerald-50 rounded-xl transition-all font-medium text-sm"
+              >
+                if refreshing { "..." } else { "Refresh" }
+              </button>
+            </div>
+            if timestamp != "" {
+              <p class="text-xs text-gray-400 mt-3">"Server time: " "{timestamp}"</p>
+            }
+          </div>
+        </div>
+      </main>
+    </AuthGuard>
+  }
+
+  component SettingsPage {
+    <AuthGuard redirect="/login">
+      <main class="max-w-2xl mx-auto px-6 py-8">
+        <h2 class="text-2xl font-bold text-gray-900 mb-6">"Settings"</h2>
+        <div class="bg-white rounded-xl border border-gray-200 p-6">
+          <h3 class="font-semibold text-gray-900 mb-4">"Account"</h3>
+          if $currentUser != null {
+            <div class="space-y-3">
+              <div>
+                <span class="text-sm text-gray-500">"Email: "</span>
+                <span class="text-sm font-medium text-gray-900">{$currentUser.email}</span>
+              </div>
+              <div>
+                <span class="text-sm text-gray-500">"Role: "</span>
+                <span class="text-sm font-medium text-gray-900">{$currentUser.role}</span>
+              </div>
+            </div>
+          }
+        </div>
+      </main>
+    </AuthGuard>
+  }
+
+  component NotFoundPage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <h1 class="text-6xl font-bold text-gray-200 mb-4">"404"</h1>
+      <p class="text-lg text-gray-500 mb-6">"Page not found"</p>
+      <Link href="/" class="text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Go home"</Link>
+    </div>
+  }
+
+  // \u2500\u2500\u2500 Router \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  createRouter({
+    routes: {
+      "/": HomePage,
+      "/login": LoginPage,
+      "/signup": SignupPage,
+      "/forgot-password": ForgotPasswordPage,
+      "/dashboard": DashboardPage,
+      "/settings": SettingsPage,
+      "404": NotFoundPage,
+    },
+    scroll: "auto",
+  })
+
+  component App {
+    <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-emerald-50">
+      <NavBar />
+      <Router />
+      <div class="border-t border-gray-100 py-8 text-center">
+        <p class="text-sm text-gray-400">"Built with " <a href="https://github.com/tova-lang/tova-lang" class="text-emerald-500 hover:text-emerald-600 transition-colors">"Tova"</a></p>
+      </div>
+    </div>
+  }
+}
+`;
+}
+
+// ─── Auth template content (SPA + auth) ──────────────────────────
+function spaAuthContent(name) {
+  return `// ${name} — Built with Tova
+// Single-page app with authentication, nested routes, and dynamic params
+
+shared {
+  type User {
+    id: String
+    email: String
+    role: String
+  }
+}
+
+security {
+  cors {
+    origins: ["http://localhost:3000"]
+    methods: ["GET", "POST", "PUT", "DELETE"]
+    credentials: true
+  }
+
+  csrf {
+    enabled: true
+  }
+
+  rate_limit {
+    window: 60
+    max: 100
+  }
+
+  csp {
+    default_src: ["self"]
+    script_src: ["self", "https://cdn.tailwindcss.com"]
+    style_src: ["self", "unsafe-inline"]
+    img_src: ["self", "data:", "https:"]
+    connect_src: ["self"]
+  }
+}
+
+auth {
+  secret: env("AUTH_SECRET")
+  token_expires: 900
+  refresh_expires: 604800
+  storage: "cookie"
+
+  provider email {
+    confirm_email: true
+    password_min: 8
+    max_attempts: 5
+    lockout_duration: 900
+  }
+
+  on signup fn(user) {
+    print("New user signed up: " + user.email)
+  }
+
+  on login fn(user) {
+    print("User logged in: " + user.email)
+  }
+
+  on logout fn(user) {
+    print("User logged out: " + user.id)
+  }
+
+  protected_route "/dashboard" { redirect: "/login" }
+  protected_route "/profile/*" { redirect: "/login" }
+}
+
+server {
+  // Auth endpoints (signup, login, logout, etc.) are generated automatically
+  fn health_check() {
+    { status: "ok" }
+  }
+
+  route GET "/api/health" => health_check
+}
+
+browser {
+  // \u2500\u2500\u2500 Navigation bar with auth-aware links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component NavBar {
+    <nav class="bg-white border-b border-gray-100 sticky top-0 z-10">
+      <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" class="flex items-center gap-2 no-underline">
+          <div class="w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center">
+            <span class="text-white font-bold text-sm">"T"</span>
+          </div>
+          <span class="font-bold text-gray-900 text-lg">"${name}"</span>
+        </Link>
+        <div class="flex items-center gap-4">
+          <Link href="/" exactActiveClass="text-emerald-600 font-semibold" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Home"</Link>
+          if $isAuthenticated {
+            <Link href="/dashboard" activeClass="text-emerald-600 font-semibold" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Dashboard"</Link>
+            <Link href="/profile" activeClass="text-emerald-600 font-semibold" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Profile"</Link>
+            <div class="flex items-center gap-3 ml-2 pl-4 border-l border-gray-200">
+              <span class="text-sm text-gray-500">
+                if $currentUser != null {
+                  {$currentUser.email}
+                }
+              </span>
+              <button
+                on:click={fn() { logout() }}
+                class="text-sm font-medium text-red-600 hover:text-red-700 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors"
+              >
+                "Sign Out"
+              </button>
+            </div>
+          } else {
+            <Link href="/login" class="text-sm font-medium text-gray-500 hover:text-gray-900 no-underline">"Login"</Link>
+            <Link href="/signup" class="text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 px-4 py-1.5 rounded-lg no-underline transition-colors">"Sign Up"</Link>
+          }
+        </div>
+      </div>
+    </nav>
+  }
+
+  // \u2500\u2500\u2500 Home page \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component HomePage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <div class="inline-flex items-center gap-2 bg-emerald-50 text-emerald-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
+        <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
+        "Secure SPA"
+      </div>
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">"Welcome to " <span class="text-emerald-600">"${name}"</span></h1>
+      <p class="text-lg text-gray-500 mb-8">"A single-page app with authentication, nested routes, and dynamic params."</p>
+      if $isAuthenticated {
+        <Link href="/dashboard" class="inline-block bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-emerald-700 transition-colors no-underline">"Go to Dashboard"</Link>
+      } else {
+        <div class="flex items-center justify-center gap-4">
+          <Link href="/signup" class="inline-block bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-emerald-700 transition-colors no-underline">"Get Started"</Link>
+          <Link href="/login" class="inline-block bg-white text-gray-700 border border-gray-200 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors no-underline">"Sign In"</Link>
+        </div>
+      }
+    </div>
+  }
+
+  // \u2500\u2500\u2500 Auth Pages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component LoginPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Sign In"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <LoginForm />
+        <div class="mt-6 text-center">
+          <Link href="/forgot-password" class="text-sm text-emerald-600 hover:text-emerald-700 no-underline">"Forgot your password?"</Link>
+        </div>
+        <div class="mt-4 text-center">
+          <span class="text-sm text-gray-500">"Don't have an account? "</span>
+          <Link href="/signup" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Sign Up"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  component SignupPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Create Account"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <SignupForm />
+        <div class="mt-4 text-center">
+          <span class="text-sm text-gray-500">"Already have an account? "</span>
+          <Link href="/login" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Sign In"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  component ForgotPasswordPage {
+    <main class="max-w-md mx-auto px-6 py-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">"Reset Password"</h2>
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <ForgotPasswordForm />
+        <div class="mt-4 text-center">
+          <Link href="/login" class="text-sm text-emerald-600 hover:text-emerald-700 no-underline">"Back to login"</Link>
+        </div>
+      </div>
+    </main>
+  }
+
+  // \u2500\u2500\u2500 Dashboard (protected) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component DashboardPage {
+    <AuthGuard redirect="/login">
+      <main class="max-w-5xl mx-auto px-6 py-8">
+        <h2 class="text-2xl font-bold text-gray-900 mb-2">"Dashboard"</h2>
+        <p class="text-gray-500 mb-8">
+          "Welcome back"
+          if $currentUser != null {
+            ", " "{$currentUser.email}"
+          }
+        </p>
+        <div class="bg-white rounded-xl border border-gray-200 p-6">
+          <p class="text-gray-600">"This is a protected page. Only authenticated users can see this."</p>
+        </div>
+      </main>
+    </AuthGuard>
+  }
+
+  // \u2500\u2500\u2500 Profile layout with nested routes + Outlet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component ProfileLayout {
+    <AuthGuard redirect="/login">
+      <div class="max-w-5xl mx-auto px-6 py-8">
+        <h2 class="text-2xl font-bold text-gray-900 mb-6">"Profile"</h2>
+        <div class="flex gap-8">
+          <aside class="w-48 flex-shrink-0">
+            <div class="flex flex-col gap-1">
+              <Link href="/profile/account" activeClass="bg-emerald-50 text-emerald-700" class="block px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 no-underline transition-colors">"Account"</Link>
+              <Link href="/profile/security" activeClass="bg-emerald-50 text-emerald-700" class="block px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 no-underline transition-colors">"Security"</Link>
+            </div>
+          </aside>
+          <div class="flex-1 min-w-0">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </AuthGuard>
+  }
+
+  component AccountSettings {
+    <div class="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">"Account Settings"</h3>
+      if $currentUser != null {
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">"Email"</label>
+            <div class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-900">{$currentUser.email}</div>
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">"Role"</label>
+            <div class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-900">{$currentUser.role}</div>
+          </div>
+        </div>
+      }
+    </div>
+  }
+
+  component SecuritySettings {
+    <div class="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">"Security Settings"</h3>
+      <p class="text-gray-600 mb-4">"Manage your password and security preferences."</p>
+      <div class="pt-4 border-t border-gray-100">
+        <Link href="/forgot-password" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Change Password"</Link>
+      </div>
+    </div>
+  }
+
+  // \u2500\u2500\u2500 404 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  component NotFoundPage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <h1 class="text-6xl font-bold text-gray-200 mb-4">"404"</h1>
+      <p class="text-lg text-gray-500 mb-6">"Page not found"</p>
+      <Link href="/" class="text-emerald-600 hover:text-emerald-700 font-medium no-underline">"Go home"</Link>
+    </div>
+  }
+
+  // \u2500\u2500\u2500 Router \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  createRouter({
+    routes: {
+      "/": HomePage,
+      "/login": LoginPage,
+      "/signup": SignupPage,
+      "/forgot-password": ForgotPasswordPage,
+      "/dashboard": { component: DashboardPage, meta: { title: "Dashboard" } },
+      "/profile": {
+        component: ProfileLayout,
+        children: {
+          "/account": { component: AccountSettings, meta: { title: "Account" } },
+          "/security": { component: SecuritySettings, meta: { title: "Security" } },
+        },
+      },
+      "404": NotFoundPage,
+    },
+    scroll: "auto",
+  })
+
+  // \u2500\u2500\u2500 Update document title from route meta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  afterNavigate(fn(current) {
+    if current.meta != undefined {
+      if current.meta.title != undefined {
+        document.title = "{current.meta.title} | ${name}"
+      }
+    }
+  })
+
+  component App {
+    <div class="min-h-screen bg-gray-50">
+      <NavBar />
+      <Router />
+    </div>
+  }
+}
+`;
+}
+
 const PROJECT_TEMPLATES = {
   fullstack: {
     label: 'Full-stack app',
-    description: 'server + client + shared blocks',
+    description: 'server + browser + shared blocks',
     tomlDescription: 'A full-stack Tova application',
     entry: 'src',
     file: 'src/app.tova',
     content: name => `// ${name} — Built with Tova
+// Full-stack app: server RPC + client-side routing
 
 shared {
   type Message {
@@ -1595,7 +2611,7 @@ server {
   route GET "/api/message" => get_message
 }
 
-client {
+browser {
   state message = ""
   state timestamp = ""
   state refreshing = false
@@ -1614,6 +2630,23 @@ client {
     refreshing = false
   }
 
+  // ─── Navigation ─────────────────────────────────────────
+  component NavBar {
+    <nav class="border-b border-gray-100 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
+      <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" class="flex items-center gap-2 no-underline">
+          <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg"></div>
+          <span class="font-bold text-gray-900 text-lg">"${name}"</span>
+        </Link>
+        <div class="flex items-center gap-6">
+          <Link href="/" exactActiveClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors text-gray-500 hover:text-gray-900 no-underline">"Home"</Link>
+          <Link href="/about" activeClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors text-gray-500 hover:text-gray-900 no-underline">"About"</Link>
+        </div>
+      </div>
+    </nav>
+  }
+
+  // ─── Pages ──────────────────────────────────────────────
   component FeatureCard(icon, title, description) {
     <div class="group relative bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-indigo-100 transition-all duration-300">
       <div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-lg mb-4 group-hover:bg-indigo-100 transition-colors">
@@ -1624,72 +2657,422 @@ client {
     </div>
   }
 
+  component HomePage {
+    <main class="max-w-5xl mx-auto px-6">
+      <div class="py-20 text-center">
+        <div class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
+          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
+          "Powered by Tova"
+        </div>
+        <h1 class="text-5xl font-bold text-gray-900 tracking-tight mb-4">"Welcome to " <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">"${name}"</span></h1>
+        <p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">"A modern full-stack app. Edit " <code class="text-sm bg-gray-100 text-indigo-600 px-2 py-1 rounded-md font-mono">"src/app.tova"</code> " to get started."</p>
+
+        <div class="inline-flex items-center gap-3 bg-white border border-gray-200 rounded-2xl p-2 shadow-sm">
+          <div class="bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-5 py-2.5 rounded-xl font-medium">
+            "{message}"
+          </div>
+          <button
+            on:click={handle_refresh}
+            class="px-4 py-2.5 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-xl transition-all font-medium text-sm"
+          >
+            if refreshing {
+              "..."
+            } else {
+              "Refresh"
+            }
+          </button>
+        </div>
+        if timestamp != "" {
+          <p class="text-xs text-gray-400 mt-3">"Last fetched at " "{timestamp}"</p>
+        }
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-5 pb-20">
+        <FeatureCard
+          icon="\u2699"
+          title="Full-Stack"
+          description="Server and client in one file. Shared types, RPC calls, and reactive UI — all type-safe."
+        />
+        <FeatureCard
+          icon="\u26A1"
+          title="Fast Refresh"
+          description="Edit your code and see changes instantly. The dev server recompiles on save."
+        />
+        <FeatureCard
+          icon="\uD83C\uDFA8"
+          title="Tailwind Built-in"
+          description="Style with utility classes out of the box. No config or build step needed."
+        />
+      </div>
+    </main>
+  }
+
+  component AboutPage {
+    <main class="max-w-5xl mx-auto px-6 py-12">
+      <h2 class="text-3xl font-bold text-gray-900 mb-6">"About"</h2>
+      <div class="bg-white rounded-xl border border-gray-200 p-8 space-y-4">
+        <p class="text-gray-600 leading-relaxed">"${name} is a full-stack application built with Tova — a modern language that compiles to JavaScript."</p>
+        <p class="text-gray-600 leading-relaxed">"It uses shared types between server and browser, server-side RPC, and client-side routing."</p>
+      </div>
+      <div class="mt-8">
+        <Link href="/" class="text-indigo-600 hover:text-indigo-700 font-medium no-underline">"\u2190 Back to home"</Link>
+      </div>
+    </main>
+  }
+
+  component NotFoundPage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <h1 class="text-6xl font-bold text-gray-200 mb-4">"404"</h1>
+      <p class="text-lg text-gray-500 mb-6">"Page not found"</p>
+      <Link href="/" class="text-indigo-600 hover:text-indigo-700 font-medium no-underline">"Go home"</Link>
+    </div>
+  }
+
+  // ─── Router setup ─────────────────────────────────────────
+  createRouter({
+    routes: {
+      "/": HomePage,
+      "/about": { component: AboutPage, meta: { title: "About" } },
+      "404": NotFoundPage,
+    },
+    scroll: "auto",
+  })
+
   component App {
     <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50">
-      <nav class="border-b border-gray-100 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
-        <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg"></div>
-            <span class="font-bold text-gray-900 text-lg">"${name}"</span>
+      <NavBar />
+      <Router />
+      <div class="border-t border-gray-100 py-8 text-center">
+        <p class="text-sm text-gray-400">"Built with " <a href="https://github.com/tova-lang/tova-lang" class="text-indigo-500 hover:text-indigo-600 transition-colors">"Tova"</a></p>
+      </div>
+    </div>
+  }
+}
+`,
+    nextSteps: name => `    cd ${name}\n    tova dev`,
+    hasAuthOption: true,
+    authContent: fullstackAuthContent,
+    authNextSteps: name => `    cd ${name}\n    tova dev\n\n  ${color.dim('Auth is ready! Sign up at')} ${color.cyan('http://localhost:3000/signup')}`,
+  },
+  spa: {
+    label: 'Single-page app',
+    description: 'browser-only app with routing',
+    tomlDescription: 'A Tova single-page application',
+    entry: 'src',
+    file: 'src/app.tova',
+    content: name => `// ${name} — Built with Tova
+// Demonstrates: createRouter, Link, Router, Outlet, navigate(),
+// dynamic :param routes, nested routes, route meta, 404 handling
+
+browser {
+  // ─── Navigation bar with active link highlighting ─────────
+  component NavBar {
+    <nav class="bg-white border-b border-gray-100 sticky top-0 z-10">
+      <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" class="flex items-center gap-2 no-underline">
+          <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg"></div>
+          <span class="font-bold text-gray-900 text-lg">"${name}"</span>
+        </Link>
+        <div class="flex items-center gap-6">
+          <Link href="/" exactActiveClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors text-gray-500 hover:text-gray-900">"Home"</Link>
+          <Link href="/users" activeClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors text-gray-500 hover:text-gray-900">"Users"</Link>
+          <Link href="/settings" activeClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors text-gray-500 hover:text-gray-900">"Settings"</Link>
+        </div>
+      </div>
+    </nav>
+  }
+
+  // ─── Home page ────────────────────────────────────────────
+  component HomePage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <div class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
+        <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
+        "Tova Router"
+      </div>
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">"Welcome to " <span class="text-indigo-600">"${name}"</span></h1>
+      <p class="text-lg text-gray-500 mb-8">"A single-page app with client-side routing. Click around to explore."</p>
+      <div class="flex items-center justify-center gap-4">
+        <Link href="/users" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition-colors no-underline">"Browse Users"</Link>
+        <Link href="/settings/profile" class="inline-block bg-white text-gray-700 border border-gray-200 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors no-underline">"Settings"</Link>
+      </div>
+    </div>
+  }
+
+  // ─── Users list (demonstrates programmatic navigation) ────
+  fn go_to_user(uid) {
+    navigate("/users/{uid}")
+  }
+
+  component UsersPage {
+    <div class="max-w-5xl mx-auto px-6 py-12">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">"Users"</h2>
+      <div class="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100">
+        <div class="flex items-center justify-between p-4 hover:bg-gray-50 cursor-pointer transition-colors" on:click={fn() go_to_user("1")}>
+          <div class="flex items-center gap-3">
+            <div class="w-9 h-9 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center font-semibold text-sm">"A"</div>
+            <div>
+              <p class="font-medium text-gray-900">"alice"</p>
+              <p class="text-xs text-gray-500">"Admin"</p>
+            </div>
+          </div>
+          <span class="text-gray-400 text-sm">"View \u2192"</span>
+        </div>
+        <div class="flex items-center justify-between p-4 hover:bg-gray-50 cursor-pointer transition-colors" on:click={fn() go_to_user("2")}>
+          <div class="flex items-center gap-3">
+            <div class="w-9 h-9 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-semibold text-sm">"B"</div>
+            <div>
+              <p class="font-medium text-gray-900">"bob"</p>
+              <p class="text-xs text-gray-500">"Editor"</p>
+            </div>
           </div>
-          <div class="flex items-center gap-4">
-            <a href="https://github.com/tova-lang/tova-lang" class="text-sm text-gray-500 hover:text-gray-900 transition-colors">"Docs"</a>
-            <a href="https://github.com/tova-lang/tova-lang" class="text-sm bg-gray-900 text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors">"GitHub"</a>
+          <span class="text-gray-400 text-sm">"View \u2192"</span>
+        </div>
+        <div class="flex items-center justify-between p-4 hover:bg-gray-50 cursor-pointer transition-colors" on:click={fn() go_to_user("3")}>
+          <div class="flex items-center gap-3">
+            <div class="w-9 h-9 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center font-semibold text-sm">"C"</div>
+            <div>
+              <p class="font-medium text-gray-900">"charlie"</p>
+              <p class="text-xs text-gray-500">"Viewer"</p>
+            </div>
           </div>
+          <span class="text-gray-400 text-sm">"View \u2192"</span>
         </div>
-      </nav>
+      </div>
+    </div>
+  }
 
-      <main class="max-w-5xl mx-auto px-6">
-        <div class="py-20 text-center">
-          <div class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">
-            <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
-            "Powered by Tova"
+  // ─── User detail (demonstrates :id dynamic route param) ───
+  component UserPage(id) {
+    <div class="max-w-5xl mx-auto px-6 py-12">
+      <button on:click={fn() navigate("/users")} class="text-sm text-indigo-600 hover:text-indigo-700 mb-6 inline-flex items-center gap-1 cursor-pointer bg-transparent border-0">
+        "\u2190 Back to users"
+      </button>
+      <div class="bg-white rounded-xl border border-gray-200 p-8">
+        <div class="flex items-center gap-4 mb-6">
+          <div class="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center font-bold text-xl">
+            "#{id}"
+          </div>
+          <div>
+            <h2 class="text-2xl font-bold text-gray-900">"User {id}"</h2>
+            <span class="text-sm text-gray-500">"Dynamic route parameter: " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-xs">":id = {id}"</code></span>
           </div>
-          <h1 class="text-5xl font-bold text-gray-900 tracking-tight mb-4">"Welcome to " <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">"${name}"</span></h1>
-          <p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">"A modern full-stack app. Edit " <code class="text-sm bg-gray-100 text-indigo-600 px-2 py-1 rounded-md font-mono">"src/app.tova"</code> " to get started."</p>
+        </div>
+        <p class="text-gray-600">"This page receives " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-xs">"id"</code> " from the route " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-xs">"/users/:id"</code> " pattern."</p>
+      </div>
+    </div>
+  }
 
-          <div class="inline-flex items-center gap-3 bg-white border border-gray-200 rounded-2xl p-2 shadow-sm">
-            <div class="bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-5 py-2.5 rounded-xl font-medium">
-              "{message}"
-            </div>
-            <button
-              on:click={handle_refresh}
-              class="px-4 py-2.5 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-xl transition-all font-medium text-sm"
-            >
-              if refreshing {
-                "..."
-              } else {
-                "Refresh"
-              }
-            </button>
+  // ─── Settings layout with nested routes + Outlet ──────────
+  component SettingsLayout {
+    <div class="max-w-5xl mx-auto px-6 py-12">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">"Settings"</h2>
+      <div class="flex gap-8">
+        <aside class="w-48 flex-shrink-0">
+          <div class="flex flex-col gap-1">
+            <Link href="/settings/profile" activeClass="bg-indigo-50 text-indigo-700" class="block px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 no-underline transition-colors">"Profile"</Link>
+            <Link href="/settings/account" activeClass="bg-indigo-50 text-indigo-700" class="block px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 no-underline transition-colors">"Account"</Link>
           </div>
-          if timestamp != "" {
-            <p class="text-xs text-gray-400 mt-3">"Last fetched at " "{timestamp}"</p>
-          }
+        </aside>
+        <div class="flex-1 min-w-0">
+          <Outlet />
         </div>
+      </div>
+    </div>
+  }
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-5 pb-20">
-          <FeatureCard
-            icon="&#9881;"
-            title="Full-Stack"
-            description="Server and client in one file. Shared types, RPC calls, and reactive UI — all type-safe."
-          />
-          <FeatureCard
-            icon="&#9889;"
-            title="Fast Refresh"
-            description="Edit your code and see changes instantly. The dev server recompiles on save."
-          />
-          <FeatureCard
-            icon="&#127912;"
-            title="Tailwind Built-in"
-            description="Style with utility classes out of the box. No config or build step needed."
-          />
+  component ProfileSettings {
+    <div class="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">"Profile Settings"</h3>
+      <p class="text-gray-600 mb-4">"This is a nested child route rendered via " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-xs">"Outlet"</code> " inside SettingsLayout."</p>
+      <div class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">"Display Name"</label>
+          <div class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-900">"Alice"</div>
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">"Bio"</label>
+          <div class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-500">"Tova developer"</div>
         </div>
+      </div>
+    </div>
+  }
 
-        <div class="border-t border-gray-100 py-8 text-center">
-          <p class="text-sm text-gray-400">"Built with " <a href="https://github.com/tova-lang/tova-lang" class="text-indigo-500 hover:text-indigo-600 transition-colors">"Tova"</a></p>
+  component AccountSettings {
+    <div class="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">"Account Settings"</h3>
+      <p class="text-gray-600 mb-4">"Another nested child of " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-xs">"/settings"</code> "."</p>
+      <div class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">"Email"</label>
+          <div class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-900">"alice@example.com"</div>
+        </div>
+        <div class="pt-4 border-t border-gray-100">
+          <button class="text-sm text-red-600 hover:text-red-700 font-medium cursor-pointer bg-transparent border-0">"Delete Account"</button>
         </div>
+      </div>
+    </div>
+  }
+
+  // ─── 404 page ─────────────────────────────────────────────
+  component NotFoundPage {
+    <div class="max-w-5xl mx-auto px-6 py-16 text-center">
+      <h1 class="text-6xl font-bold text-gray-200 mb-4">"404"</h1>
+      <p class="text-lg text-gray-500 mb-6">"Page not found"</p>
+      <Link href="/" class="text-indigo-600 hover:text-indigo-700 font-medium no-underline">"Go home"</Link>
+    </div>
+  }
+
+  // ─── Router setup ─────────────────────────────────────────
+  createRouter({
+    routes: {
+      "/": HomePage,
+      "/users": { component: UsersPage, meta: { title: "Users" } },
+      "/users/:id": { component: UserPage, meta: { title: "User Detail" } },
+      "/settings": {
+        component: SettingsLayout,
+        children: {
+          "/profile": { component: ProfileSettings, meta: { title: "Profile" } },
+          "/account": { component: AccountSettings, meta: { title: "Account" } },
+        },
+      },
+      "404": NotFoundPage,
+    },
+    scroll: "auto",
+  })
+
+  // ─── Update document title from route meta ────────────────
+  afterNavigate(fn(current) {
+    if current.meta != undefined {
+      if current.meta.title != undefined {
+        document.title = "{current.meta.title} | ${name}"
+      }
+    }
+  })
+
+  component App {
+    <div class="min-h-screen bg-gray-50">
+      <NavBar />
+      <Router />
+    </div>
+  }
+}
+`,
+    nextSteps: name => `    cd ${name}\n    tova dev`,
+    hasAuthOption: true,
+    authContent: spaAuthContent,
+    authNextSteps: name => `    cd ${name}\n    tova dev\n\n  ${color.dim('Auth is ready! Sign up at')} ${color.cyan('http://localhost:3000/signup')}`,
+  },
+  site: {
+    label: 'Static site',
+    description: 'docs or marketing site with pages',
+    tomlDescription: 'A Tova static site',
+    entry: 'src',
+    file: 'src/app.tova',
+    extraFiles: [
+      {
+        path: 'src/pages/home.tova',
+        content: name => `pub component HomePage {
+  <div class="max-w-4xl mx-auto px-6 py-16">
+    <h1 class="text-4xl font-bold text-gray-900 mb-4">"Welcome to ${name}"</h1>
+    <p class="text-lg text-gray-600 mb-8">"A static site built with Tova. Fast, simple, and easy to deploy anywhere."</p>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 class="font-semibold text-gray-900 mb-2">"Fast by default"</h3>
+        <p class="text-gray-500 text-sm">"Client-side routing for smooth, instant navigation between pages."</p>
+      </div>
+      <div class="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 class="font-semibold text-gray-900 mb-2">"Deploy anywhere"</h3>
+        <p class="text-gray-500 text-sm">"GitHub Pages, Netlify, Vercel, Firebase — works with any static host."</p>
+      </div>
+    </div>
+  </div>
+}
+`,
+      },
+      {
+        path: 'src/pages/docs.tova',
+        content: name => `pub component DocsPage {
+  <div class="max-w-4xl mx-auto px-6 py-12">
+    <h1 class="text-3xl font-bold text-gray-900 mb-6">"Documentation"</h1>
+    <div class="prose">
+      <h2 class="text-xl font-semibold text-gray-900 mt-8 mb-3">"Getting Started"</h2>
+      <p class="text-gray-600 mb-4">"Add your documentation content here. Each page is a Tova component with its own route."</p>
+      <h2 class="text-xl font-semibold text-gray-900 mt-8 mb-3">"Adding Pages"</h2>
+      <p class="text-gray-600 mb-4">"Create a new file in " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-sm">"src/pages/"</code> " and add a route in " <code class="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-sm">"src/app.tova"</code> "."</p>
+    </div>
+  </div>
+}
+`,
+      },
+      {
+        path: 'src/pages/about.tova',
+        content: name => `pub component AboutPage {
+  <div class="max-w-4xl mx-auto px-6 py-12">
+    <h1 class="text-3xl font-bold text-gray-900 mb-6">"About"</h1>
+    <p class="text-gray-600">"This site was built with Tova — a modern programming language that compiles to JavaScript."</p>
+  </div>
+}
+`,
+      },
+    ],
+    content: name => `// ${name} — Built with Tova
+import { HomePage } from "./pages/home"
+import { DocsPage } from "./pages/docs"
+import { AboutPage } from "./pages/about"
+
+browser {
+  component SiteNav {
+    <header class="bg-white border-b border-gray-100 sticky top-0 z-10">
+      <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" class="flex items-center gap-2 no-underline">
+          <div class="w-7 h-7 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg"></div>
+          <span class="font-bold text-gray-900">"${name}"</span>
+        </Link>
+        <nav class="flex items-center gap-6">
+          <Link href="/" exactActiveClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors no-underline text-gray-500 hover:text-gray-900">"Home"</Link>
+          <Link href="/docs" activeClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors no-underline text-gray-500 hover:text-gray-900">"Docs"</Link>
+          <Link href="/about" activeClass="text-indigo-600 font-semibold" class="text-sm font-medium transition-colors no-underline text-gray-500 hover:text-gray-900">"About"</Link>
+        </nav>
+      </div>
+    </header>
+  }
+
+  component NotFoundPage {
+    <div class="max-w-4xl mx-auto px-6 py-16 text-center">
+      <h1 class="text-6xl font-bold text-gray-200 mb-4">"404"</h1>
+      <p class="text-lg text-gray-500 mb-6">"Page not found"</p>
+      <Link href="/" class="text-indigo-600 hover:text-indigo-700 font-medium no-underline">"Go home"</Link>
+    </div>
+  }
+
+  createRouter({
+    routes: {
+      "/": HomePage,
+      "/docs": { component: DocsPage, meta: { title: "Documentation" } },
+      "/about": { component: AboutPage, meta: { title: "About" } },
+      "404": NotFoundPage,
+    },
+    scroll: "auto",
+  })
+
+  // Update document title from route meta
+  afterNavigate(fn(current) {
+    if current.meta != undefined {
+      if current.meta.title != undefined {
+        document.title = "{current.meta.title} | ${name}"
+      }
+    }
+  })
+
+  component App {
+    <div class="min-h-screen bg-gray-50">
+      <SiteNav />
+      <main>
+        <Router />
       </main>
+      <footer class="border-t border-gray-100 py-8 text-center">
+        <p class="text-sm text-gray-400">"Built with Tova"</p>
+      </footer>
     </div>
   }
 }
@@ -1733,12 +3116,20 @@ print("Hello, {name}!")
     tomlDescription: 'A Tova library',
     entry: 'src',
     noEntry: true,
+    isPackage: true,
     file: 'src/lib.tova',
     content: name => `// ${name} — A Tova library
+//
+// Usage:
+//   import { greet } from "github.com/yourname/${name}"
 
 pub fn greet(name: String) -> String {
   "Hello, {name}!"
 }
+
+pub fn version() -> String {
+  "0.1.0"
+}
 `,
     nextSteps: name => `    cd ${name}\n    tova build`,
   },
@@ -1753,7 +3144,7 @@ pub fn greet(name: String) -> String {
   },
 };
 
-const TEMPLATE_ORDER = ['fullstack', 'api', 'script', 'library', 'blank'];
+const TEMPLATE_ORDER = ['fullstack', 'spa', 'site', 'api', 'script', 'library', 'blank'];
 
 async function newProject(rawArgs) {
   const name = rawArgs.find(a => !a.startsWith('-'));
@@ -1770,11 +3161,12 @@ async function newProject(rawArgs) {
 
   if (!name) {
     console.error(color.red('Error: No project name specified'));
-    console.error('Usage: tova new <project-name> [--template fullstack|api|script|library|blank]');
+    console.error('Usage: tova new <project-name> [--template fullstack|spa|site|api|script|library|blank] [--auth]');
     process.exit(1);
   }
 
   const projectDir = resolve(name);
+  const projectName = basename(projectDir);
   if (existsSync(projectDir)) {
     console.error(color.red(`Error: Directory '${name}' already exists`));
     process.exit(1);
@@ -1817,7 +3209,30 @@ async function newProject(rawArgs) {
   }
 
   const template = PROJECT_TEMPLATES[templateName];
-  console.log(`\n  ${color.bold('Creating new Tova project:')} ${color.cyan(name)} ${color.dim(`(${template.label})`)}\n`);
+  const authFlag = rawArgs.includes('--auth');
+
+  // Ask about auth if template supports it
+  // Only prompt interactively when template was selected via picker (not --template flag)
+  let withAuth = false;
+  if (template.hasAuthOption) {
+    if (authFlag) {
+      withAuth = true;
+    } else if (!templateFlag) {
+      // Interactive mode — template was selected via picker, so ask about auth
+      const { createInterface: createRl } = await import('readline');
+      const rl2 = createRl({ input: process.stdin, output: process.stdout });
+      const authAnswer = await new Promise(resolve => {
+        rl2.question(`  Include authentication? ${color.dim('[y/N]')}: `, ans => {
+          rl2.close();
+          resolve(ans.trim().toLowerCase());
+        });
+      });
+      withAuth = authAnswer === 'y' || authAnswer === 'yes';
+    }
+  }
+
+  const templateLabel = withAuth ? `${template.label} + Auth` : template.label;
+  console.log(`\n  ${color.bold('Creating new Tova project:')} ${color.cyan(name)} ${color.dim(`(${templateLabel})`)}\n`);
 
   // Create directories
   mkdirSync(projectDir, { recursive: true });
@@ -1826,45 +3241,93 @@ async function newProject(rawArgs) {
   const createdFiles = [];
 
   // tova.toml
-  const tomlConfig = {
-    project: {
-      name,
-      version: '0.1.0',
-      description: template.tomlDescription,
-    },
-    build: {
-      output: '.tova-out',
-    },
-  };
-  if (!template.noEntry) {
-    tomlConfig.project.entry = template.entry;
-  }
-  if (templateName === 'fullstack' || templateName === 'api') {
-    tomlConfig.dev = { port: 3000 };
-    tomlConfig.npm = {};
+  let tomlContent;
+  if (template.isPackage) {
+    // Library packages use [package] section per package management design
+    tomlContent = [
+      '[package]',
+      `name = "github.com/yourname/${projectName}"`,
+      `version = "0.1.0"`,
+      `description = "${template.tomlDescription}"`,
+      `license = "MIT"`,
+      `exports = ["greet", "version"]`,
+      '',
+      '[build]',
+      'output = ".tova-out"',
+      '',
+      '[dependencies]',
+      '',
+      '[npm]',
+      '',
+    ].join('\n') + '\n';
+  } else {
+    const tomlConfig = {
+      project: {
+        name: projectName,
+        version: '0.1.0',
+        description: template.tomlDescription,
+      },
+      build: {
+        output: '.tova-out',
+      },
+    };
+    if (!template.noEntry) {
+      tomlConfig.project.entry = template.entry;
+    }
+    if (templateName === 'fullstack' || templateName === 'api' || templateName === 'spa' || templateName === 'site') {
+      tomlConfig.dev = { port: 3000 };
+      tomlConfig.npm = {};
+    }
+    if (templateName === 'spa' || templateName === 'site') {
+      tomlConfig.deploy = { base: '/' };
+    }
+    tomlContent = stringifyTOML(tomlConfig);
   }
-  writeFileSync(join(projectDir, 'tova.toml'), stringifyTOML(tomlConfig));
+  writeFileSync(join(projectDir, 'tova.toml'), tomlContent);
   createdFiles.push('tova.toml');
 
   // .gitignore
-  writeFileSync(join(projectDir, '.gitignore'), `node_modules/
+  let gitignoreContent = `node_modules/
 .tova-out/
 package.json
 bun.lock
 *.db
 *.db-shm
 *.db-wal
-`);
+`;
+  if (withAuth) gitignoreContent += `.env\n`;
+  writeFileSync(join(projectDir, '.gitignore'), gitignoreContent);
   createdFiles.push('.gitignore');
 
   // Template source file
-  if (template.file && template.content) {
-    writeFileSync(join(projectDir, template.file), template.content(name));
+  const contentFn = withAuth && template.authContent ? template.authContent : template.content;
+  if (template.file && contentFn) {
+    writeFileSync(join(projectDir, template.file), contentFn(projectName));
     createdFiles.push(template.file);
   }
 
+  // Extra files (e.g., page components for site template)
+  if (template.extraFiles) {
+    for (const extra of template.extraFiles) {
+      const extraPath = join(projectDir, extra.path);
+      mkdirSync(dirname(extraPath), { recursive: true });
+      writeFileSync(extraPath, extra.content(projectName));
+      createdFiles.push(extra.path);
+    }
+  }
+
+  // Auth files (.env + .env.example)
+  if (withAuth) {
+    const { randomBytes } = await import('crypto');
+    const authSecret = randomBytes(32).toString('hex');
+    writeFileSync(join(projectDir, '.env'), `# Auto-generated for development \u2014 do not commit this file\nAUTH_SECRET=${authSecret}\n`);
+    writeFileSync(join(projectDir, '.env.example'), `# Auth secret \u2014 used to sign JWT tokens\n# For production, generate a new one:\n#   node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"\nAUTH_SECRET=change-me-to-a-random-secret\n`);
+    createdFiles.push('.env');
+    createdFiles.push('.env.example');
+  }
+
   // README
-  writeFileSync(join(projectDir, 'README.md'), `# ${name}
+  let readmeContent = `# ${projectName}
 
 Built with [Tova](https://github.com/tova-lang/tova-lang) — a modern full-stack language.
 
@@ -1873,7 +3336,34 @@ Built with [Tova](https://github.com/tova-lang/tova-lang) — a modern full-stac
 \`\`\`bash
 ${template.nextSteps(name).trim()}
 \`\`\`
-`);
+`;
+  if (template.isPackage) {
+    readmeContent += `
+## Usage
+
+\`\`\`tova
+import { greet } from "github.com/yourname/${projectName}"
+
+print(greet("world"))
+\`\`\`
+
+## Publishing
+
+Tag a release and push — no registry needed:
+
+\`\`\`bash
+git tag v0.1.0
+git push origin v0.1.0
+\`\`\`
+
+Others can then add your package:
+
+\`\`\`bash
+tova add github.com/yourname/${projectName}
+\`\`\`
+`;
+  }
+  writeFileSync(join(projectDir, 'README.md'), readmeContent);
   createdFiles.push('README.md');
 
   // Print created files
@@ -1890,7 +3380,8 @@ ${template.nextSteps(name).trim()}
   } catch {}
 
   console.log(`\n  ${color.green('Done!')} Next steps:\n`);
-  console.log(color.cyan(template.nextSteps(name)));
+  const nextStepsFn = withAuth && template.authNextSteps ? template.authNextSteps : template.nextSteps;
+  console.log(nextStepsFn(name));
   console.log('');
 }
 
@@ -1964,7 +3455,7 @@ server {
   route GET "/api/message" => get_message
 }
 
-client {
+browser {
   state message = ""
 
   effect {
@@ -2003,8 +3494,16 @@ async function installDeps() {
 
   // Resolve Tova module dependencies (if any)
   const tovaDeps = config.dependencies || {};
-  const { isTovModule: _isTovMod } = await import('../src/config/module-path.js');
-  const tovModuleKeys = Object.keys(tovaDeps).filter(k => _isTovMod(k));
+  const { isTovModule: _isTovMod, expandBlessedPackage: _expandBlessed } = await import('../src/config/module-path.js');
+
+  // Expand blessed package shorthands (e.g., tova/data → github.com/tova-lang/data)
+  const expandedTovaDeps = {};
+  for (const [k, v] of Object.entries(tovaDeps)) {
+    const expanded = _expandBlessed(k);
+    expandedTovaDeps[expanded || k] = v;
+  }
+
+  const tovModuleKeys = Object.keys(expandedTovaDeps).filter(k => _isTovMod(k));
 
   if (tovModuleKeys.length > 0) {
     const { resolveDependencies } = await import('../src/config/resolver.js');
@@ -2017,7 +3516,7 @@ async function installDeps() {
     const lock = readLockFile(cwd);
     const tovaModuleDeps = {};
     for (const k of tovModuleKeys) {
-      tovaModuleDeps[k] = tovaDeps[k];
+      tovaModuleDeps[k] = expandedTovaDeps[k];
     }
 
     try {
@@ -2132,7 +3631,7 @@ async function addDep(args) {
     await installDeps();
   } else {
     // Tova native dependency
-    const { isTovModule: isTovMod } = await import('../src/config/module-path.js');
+    const { isTovModule: isTovMod, expandBlessedPackage } = await import('../src/config/module-path.js');
 
     // Parse potential @version suffix
     let pkgName = actualPkg;
@@ -2143,21 +3642,25 @@ async function addDep(args) {
       pkgName = pkgName.slice(0, atIdx);
     }
 
+    // Expand blessed package shorthand: tova/data → github.com/tova-lang/data
+    const expandedPkg = expandBlessedPackage(pkgName);
+    const resolvedPkg = expandedPkg || pkgName;
+
     if (isTovMod(pkgName)) {
       // Tova module: fetch tags, pick version, add to [dependencies]
       const { listRemoteTags, pickLatestTag } = await import('../src/config/git-resolver.js');
       try {
-        const tags = await listRemoteTags(pkgName);
+        const tags = await listRemoteTags(resolvedPkg);
         if (tags.length === 0) {
-          console.error(`  No version tags found for ${pkgName}`);
+          console.error(`  No version tags found for ${resolvedPkg}`);
           process.exit(1);
         }
         if (!versionConstraint) {
           const latest = pickLatestTag(tags);
           versionConstraint = `^${latest.version}`;
         }
-        addToSection(tomlPath, 'dependencies', `"${pkgName}"`, versionConstraint);
-        console.log(`  Added ${pkgName}@${versionConstraint} to [dependencies] in tova.toml`);
+        addToSection(tomlPath, 'dependencies', `"${resolvedPkg}"`, versionConstraint);
+        console.log(`  Added ${resolvedPkg}@${versionConstraint} to [dependencies] in tova.toml`);
         await installDeps();
       } catch (err) {
         console.error(`  Failed to add ${pkgName}: ${err.message}`);
@@ -3010,6 +4513,26 @@ async function startRepl() {
         const declaredInCode = new Set();
         for (const m of code.matchAll(/\bfunction\s+([a-zA-Z_]\w*)/g)) { declaredInCode.add(m[1]); userDefinedNames.add(m[1]); }
         for (const m of code.matchAll(/\bconst\s+([a-zA-Z_]\w*)/g)) { declaredInCode.add(m[1]); userDefinedNames.add(m[1]); }
+        // Extract destructured names: const { a, b } = ... or const [ a, b ] = ...
+        for (const m of code.matchAll(/\bconst\s+\{\s*([^}]+)\}/g)) {
+          for (const part of m[1].split(',')) {
+            const trimmed = part.trim();
+            if (!trimmed) continue;
+            // Handle renaming: "key: alias" or "key: alias = default" — extract the alias
+            const colonMatch = trimmed.match(/^\w+\s*:\s*([a-zA-Z_]\w*)/);
+            const name = colonMatch ? colonMatch[1] : trimmed.match(/^([a-zA-Z_]\w*)/)?.[1];
+            if (name) { declaredInCode.add(name); userDefinedNames.add(name); }
+          }
+        }
+        for (const m of code.matchAll(/\bconst\s+\[\s*([^\]]+)\]/g)) {
+          for (const part of m[1].split(',')) {
+            const trimmed = part.trim();
+            if (!trimmed) continue;
+            const name = trimmed.startsWith('...') ? trimmed.slice(3).trim() : trimmed;
+            const id = name.match(/^([a-zA-Z_]\w*)/)?.[1];
+            if (id) { declaredInCode.add(id); userDefinedNames.add(id); }
+          }
+        }
         for (const m of code.matchAll(/\blet\s+([a-zA-Z_]\w*)/g)) {
           declaredInCode.add(m[1]);
           userDefinedNames.add(m[1]);
@@ -3306,7 +4829,11 @@ async function binaryBuild(srcDir, outputName, outDir) {
 
 // ─── Production Build ────────────────────────────────────────
 
-async function productionBuild(srcDir, outDir) {
+async function productionBuild(srcDir, outDir, isStatic = false) {
+  const config = resolveConfig(process.cwd());
+  const basePath = config.deploy?.base || '/';
+  const base = basePath.endsWith('/') ? basePath : basePath + '/';
+
   const tovaFiles = findFiles(srcDir, '.tova');
   if (tovaFiles.length === 0) {
     console.error('No .tova files found');
@@ -3351,6 +4878,9 @@ async function productionBuild(srcDir, outDir) {
     const serverPath = join(outDir, `server.${hash}.js`);
     writeFileSync(serverPath, serverBundle);
     console.log(`  server.${hash}.js`);
+
+    // Write stable server.js entrypoint for Docker/deployment
+    writeFileSync(join(outDir, 'server.js'), `import "./server.${hash}.js";\n`);
   }
 
   // Write script bundle for plain scripts (no server/client blocks)
@@ -3378,7 +4908,9 @@ async function productionBuild(srcDir, outDir) {
       // No npm imports — inline runtime, strip all imports
       const reactivityCode = REACTIVITY_SOURCE.replace(/^export /gm, '');
       const rpcCode = RPC_SOURCE.replace(/^export /gm, '');
-      clientBundle = reactivityCode + '\n' + rpcCode + '\n' + allSharedCode + '\n' +
+      const usesRouter = /\b(defineRoutes|Router|getPath|getQuery|getParams|getCurrentRoute|navigate|onRouteChange|beforeNavigate|afterNavigate|Outlet|Link|Redirect)\b/.test(allClientCode);
+      const routerCode = usesRouter ? ROUTER_SOURCE.replace(/^export /gm, '').replace(/^\s*import\s+(?:\{[^}]*\}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"][^'"]+['"];?\s*$/gm, '') : '';
+      clientBundle = reactivityCode + '\n' + rpcCode + '\n' + (routerCode ? routerCode + '\n' : '') + allSharedCode + '\n' +
         allClientCode.replace(/^\s*import\s+(?:\{[^}]*\}|[\w$]+|\*\s+as\s+[\w$]+)\s+from\s+['"][^'"]+['"];?\s*$/gm, '').trim();
     }
 
@@ -3389,14 +4921,19 @@ async function productionBuild(srcDir, outDir) {
 
     // Generate production HTML
     const scriptTag = useModule
-      ? `<script type="module" src="client.${hash}.js"></script>`
-      : `<script src="client.${hash}.js"></script>`;
+      ? `<script type="module" src="${base}.tova-out/client.${hash}.js"></script>`
+      : `<script src="${base}.tova-out/client.${hash}.js"></script>`;
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tova App</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, -apple-system, sans-serif; }
+  </style>
 </head>
 <body>
   <div id="app"></div>
@@ -3405,6 +4942,12 @@ async function productionBuild(srcDir, outDir) {
 </html>`;
     writeFileSync(join(outDir, 'index.html'), html);
     console.log(`  index.html`);
+
+    // SPA fallback files for various static hosts
+    writeFileSync(join(outDir, '404.html'), html);
+    console.log(`  404.html (GitHub Pages SPA fallback)`);
+    writeFileSync(join(outDir, '200.html'), html);
+    console.log(`  200.html (Surge SPA fallback)`);
   }
 
   // Minify all JS bundles using Bun's built-in transpiler
@@ -3441,13 +4984,64 @@ async function productionBuild(srcDir, outDir) {
     }
   }
 
+  // Rewrite min entrypoints to import minified hashed files
+  for (const f of ['server.min.js', 'script.min.js']) {
+    const minEntry = join(outDir, f);
+    try {
+      const content = readFileSync(minEntry, 'utf-8');
+      const rewritten = content.replace(/\.js(["'])/g, '.min.js$1');
+      writeFileSync(minEntry, rewritten);
+    } catch {}
+  }
+
   if (minified === 0 && jsFiles.length > 0) {
     console.log('  (minification skipped — Bun.build unavailable)');
   }
 
+  // Static generation: pre-render each route to its own HTML file
+  if (isStatic && allClientCode.trim()) {
+    console.log(`\n  Static generation...\n`);
+
+    const routePaths = extractRoutePaths(allClientCode);
+    if (routePaths.length > 0) {
+      // Read the generated index.html to use as the shell for all routes
+      const shellHtml = readFileSync(join(outDir, 'index.html'), 'utf-8');
+      for (const routePath of routePaths) {
+        const htmlPath = routePath === '/'
+          ? join(outDir, 'index.html')
+          : join(outDir, routePath.replace(/^\//, ''), 'index.html');
+
+        mkdirSync(dirname(htmlPath), { recursive: true });
+        writeFileSync(htmlPath, shellHtml);
+        const relPath = relative(outDir, htmlPath);
+        console.log(`  ${relPath}`);
+      }
+      console.log(`\n  Pre-rendered ${routePaths.length} route(s)`);
+    }
+  }
+
   console.log(`\n  Production build complete.\n`);
 }
 
+function extractRoutePaths(code) {
+  // Support both defineRoutes({...}) and createRouter({ routes: {...} })
+  let match = code.match(/defineRoutes\s*\(\s*\{([^}]+)\}\s*\)/);
+  if (!match) {
+    match = code.match(/routes\s*:\s*\{([^}]+)\}/);
+  }
+  if (!match) return [];
+
+  const paths = [];
+  const entries = match[1].matchAll(/"([^"]+)"\s*:/g);
+  for (const entry of entries) {
+    const path = entry[1];
+    if (path === '404' || path === '*') continue;
+    if (path.includes(':')) continue;
+    paths.push(path);
+  }
+  return paths;
+}
+
 // Fallback JS minifier — string/regex-aware, no AST required
 function _simpleMinify(code) {
   // Phase 1: Strip comments while respecting strings and regexes
@@ -3921,6 +5515,10 @@ function collectExports(ast, filename) {
       allNames.add(node.name);
       if (node.isPublic) publicExports.add(node.name);
     }
+    if (node.type === 'ComponentDeclaration') {
+      allNames.add(node.name);
+      if (node.isPublic) publicExports.add(node.name);
+    }
     if (node.type === 'ImplDeclaration') { /* impl doesn't export a name */ }
   }
 
@@ -3962,8 +5560,24 @@ function compileWithImports(source, filename, srcDir) {
     // Collect this module's exports for validation
     collectExports(ast, filename);
 
-    // Resolve .tova imports first
+    // Resolve imports: tova: prefix, @/ prefix, then .tova files
     for (const node of ast.body) {
+      // Resolve tova: prefix imports to runtime modules
+      if ((node.type === 'ImportDeclaration' || node.type === 'ImportDefault' || node.type === 'ImportWildcard') && node.source.startsWith('tova:')) {
+        node.source = './runtime/' + node.source.slice(5) + '.js';
+        continue;
+      }
+      // Resolve @/ prefix imports to project root
+      if ((node.type === 'ImportDeclaration' || node.type === 'ImportDefault' || node.type === 'ImportWildcard') && node.source.startsWith('@/')) {
+        const relPath = node.source.slice(2);
+        let resolved = resolve(srcDir, relPath);
+        if (!resolved.endsWith('.tova')) resolved += '.tova';
+        const fromDir = dirname(filename);
+        let rel = relative(fromDir, resolved);
+        if (!rel.startsWith('.')) rel = './' + rel;
+        node.source = rel;
+        // Fall through to .tova import handling below
+      }
       if (node.type === 'ImportDeclaration' && node.source.endsWith('.tova')) {
         const importPath = resolve(dirname(filename), node.source);
         trackDependency(filename, importPath);
@@ -4180,8 +5794,22 @@ function mergeDirectory(dir, srcDir, options = {}) {
     // Collect exports for cross-file import validation
     collectExports(ast, file);
 
-    // Resolve cross-directory .tova imports (same logic as compileWithImports)
+    // Resolve imports: tova: prefix, @/ prefix, then cross-directory .tova
     for (const node of ast.body) {
+      if ((node.type === 'ImportDeclaration' || node.type === 'ImportDefault' || node.type === 'ImportWildcard') && node.source.startsWith('tova:')) {
+        node.source = './runtime/' + node.source.slice(5) + '.js';
+        continue;
+      }
+      if ((node.type === 'ImportDeclaration' || node.type === 'ImportDefault' || node.type === 'ImportWildcard') && node.source.startsWith('@/')) {
+        const relPath = node.source.slice(2);
+        let resolved = resolve(srcDir, relPath);
+        if (!resolved.endsWith('.tova')) resolved += '.tova';
+        const fromDir = dirname(file);
+        let rel = relative(fromDir, resolved);
+        if (!rel.startsWith('.')) rel = './' + rel;
+        node.source = rel;
+        // Fall through to .tova import handling below
+      }
       if ((node.type === 'ImportDeclaration' || node.type === 'ImportDefault' || node.type === 'ImportWildcard') && node.source.endsWith('.tova')) {
         const importPath = resolve(dirname(file), node.source);
         // Only process imports from OTHER directories (same-dir files are merged)
@@ -4257,7 +5885,7 @@ function mergeDirectory(dir, srcDir, options = {}) {
   const mergedAST = new Program(mergedBody);
 
   // Run analyzer on merged AST
-  const analyzer = new Analyzer(mergedAST, dir);
+  const analyzer = new Analyzer(mergedAST, dir, { strict: options.strict, strictSecurity: options.strictSecurity });
   const { warnings } = analyzer.analyze();
 
   if (warnings.length > 0) {
@@ -4278,7 +5906,27 @@ function mergeDirectory(dir, srcDir, options = {}) {
   output._sourceContents = sourceContents;
   output._sourceFiles = tovaFiles;
 
-  return { output, files: tovaFiles, single: false };
+  // Extract security info for scorecard
+  const hasServer = mergedBody.some(n => n.type === 'ServerBlock');
+  const hasEdge = mergedBody.some(n => n.type === 'EdgeBlock');
+  const securityNode = mergedBody.find(n => n.type === 'SecurityBlock');
+  let securityConfig = null;
+  if (securityNode) {
+    securityConfig = {};
+    for (const child of securityNode.body || []) {
+      if (child.type === 'AuthDeclaration') securityConfig.auth = { authType: child.authType || 'jwt', storage: child.config?.storage?.value };
+      else if (child.type === 'CsrfDeclaration') securityConfig.csrf = { enabled: child.config?.enabled?.value !== false };
+      else if (child.type === 'RateLimitDeclaration') securityConfig.rateLimit = { max: child.config?.max?.value };
+      else if (child.type === 'CspDeclaration') securityConfig.csp = { default_src: true };
+      else if (child.type === 'CorsDeclaration') {
+        const origins = child.config?.origins;
+        securityConfig.cors = { origins: origins ? (origins.elements || []).map(e => e.value) : [] };
+      }
+      else if (child.type === 'AuditDeclaration') securityConfig.audit = { events: ['auth'] };
+    }
+  }
+
+  return { output, files: tovaFiles, single: false, warnings, securityConfig, hasServer, hasEdge };
 }
 
 // Group .tova files by their parent directory
@@ -4451,7 +6099,7 @@ function completionsCommand(shell) {
     'migrate:create', 'migrate:up', 'migrate:down', 'migrate:reset', 'migrate:fresh', 'migrate:status',
   ];
 
-  const globalFlags = ['--help', '--version', '--output', '--production', '--watch', '--verbose', '--quiet', '--debug', '--strict'];
+  const globalFlags = ['--help', '--version', '--output', '--production', '--watch', '--verbose', '--quiet', '--debug', '--strict', '--strict-security'];
 
   switch (shell) {
     case 'bash': {
@@ -4474,7 +6122,7 @@ _tova() {
       return 0
       ;;
     --template)
-      COMPREPLY=( $(compgen -W "fullstack api script library blank" -- "\${cur}") )
+      COMPREPLY=( $(compgen -W "fullstack spa site api script library blank" -- "\${cur}") )
       return 0
       ;;
     completions)
@@ -4522,7 +6170,7 @@ ${commands.map(c => `    '${c}:${c} command'`).join('\n')}
       case $words[1] in
         new)
           _arguments \\
-            '--template[Project template]:template:(fullstack api script library blank)' \\
+            '--template[Project template]:template:(fullstack spa site api script library blank)' \\
             '*:name:'
           ;;
         run|build|check|fmt|doc)
@@ -4614,7 +6262,7 @@ _tova "$@"
       script += `complete -c tova -l debug -d 'Debug output'\n`;
       script += `complete -c tova -l strict -d 'Strict type checking'\n`;
       script += `\n# Template completions for 'new'\n`;
-      script += `complete -c tova -n '__fish_seen_subcommand_from new' -l template -d 'Project template' -xa 'fullstack api script library blank'\n`;
+      script += `complete -c tova -n '__fish_seen_subcommand_from new' -l template -d 'Project template' -xa 'fullstack spa site api script library blank'\n`;
       script += `\n# Shell completions for 'completions'\n`;
       script += `complete -c tova -n '__fish_seen_subcommand_from completions' -xa 'bash zsh fish'\n`;