create-lacspace-app 2.4.0 → 2.6.0

package/dist/index.js

@@ -36,7 +36,8 @@ function resolveContext(options = {}) {
   const seg = raw.split(/[\\/]/).filter(Boolean).pop() ?? "my-app";
   const name = seg.toLowerCase().replace(/[^a-z0-9-_]/g, "-").replace(/^-+|-+$/g, "") || "my-app";
   const features = normalizeFeatures(options.features);
-  const mode = options.mode === "dynamic" ? "dynamic" : "static";
+  let mode = options.mode === "dynamic" ? "dynamic" : "static";
+  if (mode === "static" && features.some((f) => f.requiresBackend)) mode = "dynamic";
   return { name, template, features, mode };
 }
 function normalizeFeatures(requested) {
@@ -2117,6 +2118,97 @@ var FEATURES = [
       "Run `npm run dev` and open http://localhost:3000/ask."
     ],
     learn: "https://developer.lacspace.com/packages/rag"
+  },
+  {
+    key: "content",
+    label: "Content / blog",
+    description: "A markdown content section (/updates) for any template \u2014 plus an RSS feed and an llms.txt. Drop in .md files, get pages.",
+    deps: {
+      "@lacspace/markdown": "^1.1.0",
+      "@lacspace/rss": "^1.4.0",
+      "@lacspace/llms-txt": "^1.4.0"
+    },
+    files: (ctx) => ({
+      "content/updates/welcome.md": contentSampleWelcome(ctx),
+      "content/updates/building-in-public.md": contentSampleSecond(),
+      "lib/content.ts": contentLib(),
+      "app/updates/page.tsx": updatesListPage(),
+      "app/updates/[slug]/page.tsx": updatePostPage(),
+      "app/feed.xml/route.ts": feedRoute(),
+      "app/llms.txt/route.ts": llmsRoute()
+    }),
+    nextSteps: [
+      "Add markdown files to content/updates/ \u2014 each becomes a page at /updates/<name>.",
+      "Run `npm run dev` and open http://localhost:3000/updates, /feed.xml and /llms.txt.",
+      "Set NEXT_PUBLIC_SITE_URL in .env so the feed and llms.txt links are absolute."
+    ],
+    learn: "https://developer.lacspace.com/packages/markdown"
+  },
+  {
+    key: "search",
+    label: "Search",
+    description: "Instant, keyless full-text search (BM25) over your markdown content \u2014 a search box + /search page + API route. No key, no service.",
+    deps: {
+      "@lacspace/rerank": "^1.0.0",
+      "@lacspace/markdown": "^1.1.0"
+    },
+    files: () => ({
+      "app/api/search/route.ts": searchRoute(),
+      "components/search.tsx": searchBox(),
+      "app/search/page.tsx": searchPage()
+    }),
+    nextSteps: [
+      "Add markdown to content/ (e.g. the `content` add-on's content/updates/) \u2014 search indexes it automatically.",
+      "Run `npm run dev` and open http://localhost:3000/search, or drop <Search /> into your header.",
+      "Want semantic search? Upgrade to @lacspace/embeddings + @lacspace/vector (keyless-local via Ollama)."
+    ],
+    learn: "https://developer.lacspace.com/packages/rerank"
+  },
+  {
+    key: "auth-pages",
+    label: "Auth & account",
+    description: "Account management on top of the built-in login/register: edit profile, change password, and TOTP two-factor auth (2FA) with backup codes. Full-stack.",
+    requiresBackend: true,
+    deps: {},
+    files: () => ({ "app/account/settings/page.tsx": authSettingsPage() }),
+    backend: (ctx) => ({
+      deps: { "@lacspace/otp": "^1.2.0" },
+      files: {
+        "src/models/two-factor.ts": authTwoFactorModel(),
+        "src/routes/account.ts": authAccountRoutes(ctx)
+      },
+      routes: [{ path: "/account", handler: "accountRoutes", auth: true, importLine: 'import accountRoutes from "./account.js";' }]
+    }),
+    nextSteps: [
+      "Sign in, then open http://localhost:3000/account/settings.",
+      "Enable 2FA: add the shown secret to an authenticator app (Google Authenticator, Authy\u2026), then verify.",
+      "Backup codes are shown once on enable \u2014 store them somewhere safe."
+    ],
+    learn: "https://developer.lacspace.com/packages/otp"
+  },
+  {
+    key: "analytics",
+    label: "Analytics",
+    description: "Privacy-first, cookieless web analytics: a tracker (@lacspace/analytics-lite), a collector that stores events in MongoDB, and a dashboard. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/analytics-lite": "^1.1.0" },
+    files: (ctx) => ({
+      "components/analytics.tsx": analyticsComponent(ctx),
+      "app/analytics/page.tsx": analyticsDashboard()
+    }),
+    backend: () => ({
+      files: {
+        "src/models/event.ts": analyticsEventModel(),
+        "src/routes/events.ts": analyticsEventsRoutes()
+      },
+      routes: [{ path: "/events", handler: "eventRoutes", auth: false, importLine: 'import eventRoutes from "./events.js";' }]
+    }),
+    nextSteps: [
+      "Add <Analytics /> to app/layout.tsx (inside <body>) to start tracking page views.",
+      "Browse your site, then open http://localhost:3000/analytics (sign in) to see the dashboard.",
+      "It's cookieless and stores no personal data \u2014 privacy-first by default."
+    ],
+    learn: "https://developer.lacspace.com/packages/analytics-lite"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -5095,6 +5187,646 @@ var faqSection = (ctx) => {
         </div>
       </section>`;
 };
+var contentLib = () => `import fs from "node:fs";
+import path from "node:path";
+import { parseFrontmatter, markdownToHtml, excerpt } from "@lacspace/markdown";
+
+// how this works: every .md file in content/updates/ becomes a post. Frontmatter
+// (title/date/description) is read with @lacspace/markdown; the body is rendered to
+// safe HTML (raw HTML in the source is escaped, so this is XSS-safe by construction).
+const DIR = path.join(process.cwd(), "content/updates");
+
+export interface PostMeta { slug: string; title: string; date: string; description: string; }
+export interface Post extends PostMeta { html: string; }
+
+function read(slug: string): Post | null {
+  const file = path.join(DIR, slug + ".md");
+  if (!fs.existsSync(file)) return null;
+  const { data, content } = parseFrontmatter(fs.readFileSync(file, "utf8"));
+  return {
+    slug,
+    title: String(data.title ?? slug),
+    date: String(data.date ?? ""),
+    description: String(data.description ?? excerpt(content, { length: 160 })),
+    html: markdownToHtml(content, { headingIds: true, openLinksInNewTab: true }),
+  };
+}
+
+export function getAllPosts(): PostMeta[] {
+  if (!fs.existsSync(DIR)) return [];
+  return fs.readdirSync(DIR)
+    .filter((f) => f.endsWith(".md"))
+    .map((f) => read(f.replace(/\\.md$/, ""))!)
+    .filter(Boolean)
+    .sort((a, b) => (a.date < b.date ? 1 : -1));
+}
+
+export function getPost(slug: string): Post | null {
+  return read(slug);
+}
+`;
+var updatesListPage = () => `import Link from "next/link";
+import { site } from "@/lib/site";
+import { getAllPosts } from "@/lib/content";
+
+export const metadata = site.meta({ title: "Updates", path: "/updates" });
+
+export default function UpdatesPage() {
+  const posts = getAllPosts();
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <h1 className="text-3xl font-bold">Updates</h1>
+      <p className="mt-2 text-muted">News, notes and posts. <a href="/feed.xml" className="underline">RSS</a></p>
+      {posts.length === 0 && (
+        <p className="mt-8 text-muted">No posts yet \u2014 add a markdown file in <code>content/updates/</code>.</p>
+      )}
+      <ul className="mt-8 space-y-6">
+        {posts.map((p) => (
+          <li key={p.slug} className="border-b border-hairline pb-6">
+            <Link href={\`/updates/\${p.slug}\`} className="text-xl font-semibold hover:underline">{p.title}</Link>
+            {p.date && <p className="mt-1 text-sm text-muted">{p.date}</p>}
+            <p className="mt-2 text-muted">{p.description}</p>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}
+`;
+var updatePostPage = () => `import Link from "next/link";
+import { notFound } from "next/navigation";
+import { site } from "@/lib/site";
+import { getAllPosts, getPost } from "@/lib/content";
+
+export function generateStaticParams() {
+  return getAllPosts().map((p) => ({ slug: p.slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = getPost(slug);
+  return site.meta({ title: post?.title ?? "Updates", path: \`/updates/\${slug}\` });
+}
+
+export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = getPost(slug);
+  if (!post) notFound();
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-16">
+      <Link href="/updates" className="text-sm text-muted hover:underline">\u2190 Updates</Link>
+      <h1 className="mt-4 text-3xl font-bold">{post.title}</h1>
+      {post.date && <p className="mt-1 text-sm text-muted">{post.date}</p>}
+      <article
+        className="mt-8 leading-7 [&_h2]:mt-8 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-6 [&_h3]:text-xl [&_h3]:font-semibold [&_p]:mt-4 [&_p]:text-muted [&_a]:underline [&_ul]:mt-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:mt-1 [&_pre]:mt-4 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-surface [&_pre]:p-4 [&_pre]:text-sm [&_code]:text-sm"
+        dangerouslySetInnerHTML={{ __html: post.html }}
+      />
+    </main>
+  );
+}
+`;
+var feedRoute = () => `import { rssResponse } from "@lacspace/rss";
+import { getAllPosts } from "@/lib/content";
+
+export const dynamic = "force-static";
+
+export function GET() {
+  const base = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
+  const items = getAllPosts().map((p) => ({
+    title: p.title,
+    link: base + "/updates/" + p.slug,
+    description: p.description,
+    // Only pass a date the feed can parse (rfc822Date throws on bad input).
+    date: p.date && !Number.isNaN(Date.parse(p.date)) ? p.date : undefined,
+  }));
+  return rssResponse(
+    { title: "Updates", link: base, description: "The latest posts and updates.", feedUrl: base + "/feed.xml" },
+    items,
+  );
+}
+`;
+var llmsRoute = () => `import { llmsTxtFromPages } from "@lacspace/llms-txt";
+import { getAllPosts } from "@/lib/content";
+
+export const dynamic = "force-static";
+
+export function GET() {
+  const base = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
+  const txt = llmsTxtFromPages(
+    getAllPosts().map((p) => ({ title: p.title, url: base + "/updates/" + p.slug, content: p.description, section: "Updates" })),
+    { title: "Updates", summary: "A content index for large language models." },
+  );
+  return new Response(txt, { headers: { "content-type": "text/plain; charset=utf-8" } });
+}
+`;
+var contentSampleWelcome = (ctx) => `---
+title: Welcome to ${ctx.template.siteName}'s content section
+date: 2026-01-15
+description: This markdown file became a page automatically \u2014 here's how it works.
+---
+
+## It just works
+
+Drop any \\\`.md\\\` file into \\\`content/updates/\\\` and it becomes a page at \\\`/updates/<filename>\\\`, listed on \\\`/updates\\\`, and included in \\\`/feed.xml\\\` and \\\`/llms.txt\\\`.
+
+- Frontmatter \\\`title\\\`, \\\`date\\\` and \\\`description\\\` are read automatically.
+- The body is rendered safely with \\\`@lacspace/markdown\\\` \u2014 raw HTML is escaped, so it's XSS-safe.
+- Delete this file when you're ready to write your own.
+`;
+var contentSampleSecond = () => `---
+title: Building in public
+date: 2026-01-10
+description: A second example post so the list and feed have something to show.
+---
+
+## Why a content section?
+
+Every product needs a place for changelog posts, announcements and notes. This one is
+Markdown-powered, needs no database, and ships an RSS feed and an \\\`llms.txt\\\` for free.
+
+### Add your own
+
+1. Create \\\`content/updates/my-post.md\\\`.
+2. Add frontmatter (\\\`title\\\`, \\\`date\\\`, \\\`description\\\`).
+3. Write. That's it \u2014 it appears at \\\`/updates/my-post\\\`.
+`;
+var searchRoute = () => `import fs from "node:fs";
+import path from "node:path";
+import { parseFrontmatter, toPlainText, excerpt } from "@lacspace/markdown";
+import { rerank } from "@lacspace/rerank";
+
+// how this works: full-text search with BM25 ranking \u2014 no external service, no API
+// key, no Ollama. It scans your markdown at request time and ranks matches. (For a
+// big site, precompute the corpus at build time and cache it instead.)
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const ROOT = path.join(process.cwd(), "content");
+// Map a content/<dir>/ to the route it renders under.
+const SECTION: Record<string, string> = { updates: "/updates", posts: "/blog", docs: "/docs" };
+
+interface Entry { id: string; title: string; url: string; text: string; }
+
+function corpus(): Entry[] {
+  if (!fs.existsSync(ROOT)) return [];
+  const out: Entry[] = [];
+  for (const dir of fs.readdirSync(ROOT)) {
+    const full = path.join(ROOT, dir);
+    if (!fs.statSync(full).isDirectory()) continue;
+    const base = SECTION[dir] ?? "/" + dir;
+    for (const file of fs.readdirSync(full)) {
+      if (!file.endsWith(".md")) continue;
+      const slug = file.replace(/\\.md$/, "");
+      const { data, content } = parseFrontmatter(fs.readFileSync(path.join(full, file), "utf8"));
+      out.push({ id: dir + "/" + slug, title: String(data.title ?? slug), url: base + "/" + slug, text: toPlainText(content) });
+    }
+  }
+  return out;
+}
+
+export async function GET(req: Request) {
+  const q = new URL(req.url).searchParams.get("q")?.trim() ?? "";
+  if (!q) return Response.json([]);
+  const docs = corpus().map((e) => ({ id: e.id, text: e.title + "\\n" + e.text, metadata: { title: e.title, url: e.url } }));
+  const hits = await rerank(q, docs, { method: "bm25", k: 8 });
+  return Response.json(hits.map((h) => ({
+    title: String(h.metadata?.title ?? ""),
+    url: String(h.metadata?.url ?? "#"),
+    snippet: excerpt(h.text.split("\\n").slice(1).join(" "), { length: 140 }),
+  })));
+}
+`;
+var searchBox = () => `"use client";
+import { useState, useEffect, useRef } from "react";
+
+interface Result { title: string; url: string; snippet: string; }
+
+export function Search() {
+  const [q, setQ] = useState("");
+  const [results, setResults] = useState<Result[]>([]);
+  const [open, setOpen] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (timer.current) clearTimeout(timer.current);
+    if (!q.trim()) { setResults([]); return; }
+    timer.current = setTimeout(async () => {
+      const res = await fetch("/api/search?q=" + encodeURIComponent(q));
+      setResults(await res.json());
+      setOpen(true);
+    }, 200);
+    return () => { if (timer.current) clearTimeout(timer.current); };
+  }, [q]);
+
+  return (
+    <div className="relative w-full max-w-md">
+      <input
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        onFocus={() => { if (results.length) setOpen(true); }}
+        onBlur={() => setTimeout(() => setOpen(false), 150)}
+        placeholder="Search\u2026"
+        className="w-full rounded-xl border border-hairline bg-surface px-4 py-2 outline-none"
+      />
+      {open && results.length > 0 && (
+        <ul className="absolute z-20 mt-2 w-full overflow-hidden rounded-xl border border-hairline bg-app shadow-lg">
+          {results.map((r) => (
+            <li key={r.url}>
+              <a href={r.url} className="block px-4 py-3 transition hover:bg-surface">
+                <p className="font-medium">{r.title}</p>
+                <p className="mt-0.5 text-sm text-muted">{r.snippet}</p>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+`;
+var searchPage = () => `import { site } from "@/lib/site";
+import { Search } from "@/components/search";
+
+export const metadata = site.meta({ title: "Search", path: "/search" });
+
+export default function SearchPage() {
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-16">
+      <h1 className="text-3xl font-bold">Search</h1>
+      <p className="mt-2 text-muted">Instant, keyless full-text search over your content.</p>
+      <div className="mt-8"><Search /></div>
+    </main>
+  );
+}
+`;
+var authTwoFactorModel = () => `import mongoose from "mongoose";
+import { uuidv7 } from "@lacspace/id";
+
+// how this works: a separate collection for 2FA so the base User model stays simple.
+// NOTE: the TOTP secret is stored as-is here \u2014 in production, encrypt it at rest with
+// @lacspace/crypto (encrypt/decrypt) using a key from your env.
+export interface TwoFactorDoc {
+  _id: string;
+  userId: string;
+  secret: string;
+  enabled: boolean;
+  backupHashes: string[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const schema = new mongoose.Schema<TwoFactorDoc>(
+  {
+    _id: { type: String, default: () => uuidv7() },
+    userId: { type: String, required: true, unique: true, index: true },
+    secret: { type: String, required: true },
+    enabled: { type: Boolean, default: false },
+    backupHashes: { type: [String], default: [] },
+  },
+  { timestamps: true },
+);
+
+export const TwoFactor =
+  (mongoose.models.TwoFactor as mongoose.Model<TwoFactorDoc>) ?? mongoose.model<TwoFactorDoc>("TwoFactor", schema);
+`;
+var authAccountRoutes = (ctx) => `import express from "express";
+import { hash, verify as verifyPassword } from "@lacspace/password";
+import { setupTotp, verifyTotp, generateBackupCodes, verifyBackupCode } from "@lacspace/otp";
+import { v } from "@lacspace/validate";
+import { asyncHandler, HttpError } from "../http.js";
+import { User } from "../models/user.js";
+import { TwoFactor } from "../models/two-factor.js";
+
+// This whole group is mounted behind requireAuth (see routes/index.ts), so
+// req.user is always set here.
+const router = express.Router();
+const ISSUER = "${ctx.name}";
+
+const ProfileInput = v.object({ name: v.string().min(2).max(80) });
+const PasswordInput = v.object({ currentPassword: v.string().min(1), newPassword: v.string().min(8).max(200) });
+const CodeInput = v.object({ code: v.string().min(6).max(12) });
+
+// GET /account/2fa \u2014 is two-factor enabled?
+router.get("/2fa", asyncHandler(async (req, res) => {
+  const tf = await TwoFactor.findOne({ userId: req.user!.sub });
+  res.json({ enabled: Boolean(tf?.enabled) });
+}));
+
+// PATCH /account/profile \u2014 update your display name.
+router.patch("/profile", asyncHandler(async (req, res) => {
+  const { name } = ProfileInput.parse(req.body);
+  const user = await User.findByIdAndUpdate(req.user!.sub, { $set: { name } }, { new: true });
+  if (!user) throw new HttpError(404, "User not found");
+  res.json({ id: String(user._id), name: user.name, email: user.email });
+}));
+
+// POST /account/password \u2014 change your password (verifies the current one).
+router.post("/password", asyncHandler(async (req, res) => {
+  const { currentPassword, newPassword } = PasswordInput.parse(req.body);
+  const user = await User.findById(req.user!.sub);
+  if (!user || !(await verifyPassword(currentPassword, user.passwordHash))) {
+    throw new HttpError(401, "Current password is incorrect");
+  }
+  user.passwordHash = await hash(newPassword);
+  await user.save();
+  res.json({ ok: true });
+}));
+
+// POST /account/2fa/setup \u2014 create a TOTP secret; show \`uri\` as a QR / \`secret\` to type.
+router.post("/2fa/setup", asyncHandler(async (req, res) => {
+  const user = await User.findById(req.user!.sub);
+  if (!user) throw new HttpError(404, "User not found");
+  const { secret, uri } = setupTotp({ account: user.email, issuer: ISSUER });
+  await TwoFactor.findOneAndUpdate(
+    { userId: String(user._id) },
+    { $set: { secret, enabled: false } },
+    { upsert: true, new: true },
+  );
+  res.json({ secret, uri });
+}));
+
+// POST /account/2fa/enable \u2014 verify a code, turn 2FA on, return one-time backup codes.
+router.post("/2fa/enable", asyncHandler(async (req, res) => {
+  const { code } = CodeInput.parse(req.body);
+  const tf = await TwoFactor.findOne({ userId: req.user!.sub });
+  if (!tf) throw new HttpError(400, "Run 2FA setup first");
+  if ((await verifyTotp(code, tf.secret, { window: 1 })) === null) throw new HttpError(401, "Invalid code");
+  const { codes, hashes } = await generateBackupCodes(10);
+  tf.enabled = true;
+  tf.backupHashes = hashes;
+  await tf.save();
+  res.json({ enabled: true, backupCodes: codes });
+}));
+
+// POST /account/2fa/disable \u2014 verify a TOTP or backup code, then turn 2FA off.
+router.post("/2fa/disable", asyncHandler(async (req, res) => {
+  const { code } = CodeInput.parse(req.body);
+  const tf = await TwoFactor.findOne({ userId: req.user!.sub });
+  if (!tf || !tf.enabled) { res.json({ enabled: false }); return; }
+  const ok = (await verifyTotp(code, tf.secret, { window: 1 })) !== null || (await verifyBackupCode(code, tf.backupHashes)) >= 0;
+  if (!ok) throw new HttpError(401, "Invalid code");
+  await TwoFactor.deleteOne({ userId: req.user!.sub });
+  res.json({ enabled: false });
+}));
+
+export default router;
+`;
+var authSettingsPage = () => `"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getToken } from "@/lib/api";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+async function call<T>(path: string, body?: unknown, method = "POST"): Promise<T> {
+  const token = getToken();
+  const res = await fetch(API + path, {
+    method,
+    headers: { "Content-Type": "application/json", ...(token ? { Authorization: "Bearer " + token } : {}) },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const data: unknown = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error((data as { error?: string }).error ?? "Request failed");
+  return data as T;
+}
+const msgOf = (e: unknown) => (e instanceof Error ? e.message : "Something went wrong");
+const field = "w-full rounded-xl border border-hairline bg-surface px-4 py-2 outline-none";
+const card = "rounded-2xl border border-hairline p-5 space-y-3";
+const btn = "rounded-full gradient-bg px-4 py-2 text-sm font-semibold on-accent";
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [enabled, setEnabled] = useState(false);
+  const [setup, setSetup] = useState<{ secret: string; uri: string } | null>(null);
+  const [code, setCode] = useState("");
+  const [backup, setBackup] = useState<string[] | null>(null);
+  const [msg, setMsg] = useState<string | null>(null);
+
+  const flash = (m: string) => { setMsg(m); setTimeout(() => setMsg(null), 3000); };
+
+  useEffect(() => {
+    if (!getToken()) { router.push("/login"); return; }
+    call<{ enabled: boolean }>("/account/2fa", undefined, "GET").then((r) => setEnabled(r.enabled)).catch(() => {});
+  }, [router]);
+
+  async function saveName(e: React.FormEvent) {
+    e.preventDefault();
+    try { await call("/account/profile", { name }, "PATCH"); flash("Profile updated"); } catch (err) { flash(msgOf(err)); }
+  }
+  async function savePassword(e: React.FormEvent) {
+    e.preventDefault();
+    try { await call("/account/password", { currentPassword: current, newPassword: next }); setCurrent(""); setNext(""); flash("Password changed"); } catch (err) { flash(msgOf(err)); }
+  }
+  async function begin2fa() {
+    try { setSetup(await call<{ secret: string; uri: string }>("/account/2fa/setup")); } catch (err) { flash(msgOf(err)); }
+  }
+  async function enable2fa() {
+    try { const r = await call<{ backupCodes: string[] }>("/account/2fa/enable", { code }); setBackup(r.backupCodes); setEnabled(true); setSetup(null); setCode(""); } catch (err) { flash(msgOf(err)); }
+  }
+  async function disable2fa() {
+    const c = window.prompt("Enter a current 2FA code (or a backup code) to disable:");
+    if (!c) return;
+    try { await call("/account/2fa/disable", { code: c }); setEnabled(false); flash("2FA disabled"); } catch (err) { flash(msgOf(err)); }
+  }
+
+  return (
+    <main className="mx-auto max-w-lg space-y-6 px-6 py-16">
+      <h1 className="text-2xl font-bold">Account settings</h1>
+      {msg && <p className="rounded-xl border border-hairline bg-surface px-4 py-2 text-sm">{msg}</p>}
+
+      <form onSubmit={saveName} className={card}>
+        <h2 className="font-semibold">Profile</h2>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="New display name" className={field} />
+        <button className={btn}>Save name</button>
+      </form>
+
+      <form onSubmit={savePassword} className={card}>
+        <h2 className="font-semibold">Change password</h2>
+        <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)} placeholder="Current password" className={field} />
+        <input type="password" value={next} onChange={(e) => setNext(e.target.value)} placeholder="New password (min 8)" className={field} />
+        <button className={btn}>Change password</button>
+      </form>
+
+      <div className={card}>
+        <h2 className="font-semibold">Two-factor authentication {enabled && <span className="text-green-500">\xB7 on</span>}</h2>
+        {!enabled && !setup && <button onClick={begin2fa} className={btn}>Enable 2FA</button>}
+        {!enabled && setup && (
+          <div className="space-y-3">
+            <p className="text-sm text-muted">Add this secret to your authenticator app (Google Authenticator, Authy\u2026):</p>
+            <code className="block break-all rounded-lg bg-surface p-3 text-sm">{setup.secret}</code>
+            <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="6-digit code" className={field} />
+            <button onClick={enable2fa} className={btn}>Verify & enable</button>
+          </div>
+        )}
+        {enabled && <button onClick={disable2fa} className="rounded-full border border-hairline px-4 py-2 text-sm">Disable 2FA</button>}
+        {backup && (
+          <div className="mt-2 space-y-2">
+            <p className="text-sm font-medium">Save these backup codes (shown once):</p>
+            <ul className="grid grid-cols-2 gap-1 rounded-lg bg-surface p-3 font-mono text-sm">
+              {backup.map((b) => <li key={b}>{b}</li>)}
+            </ul>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+`;
+var analyticsEventModel = () => `import mongoose from "mongoose";
+import { uuidv7 } from "@lacspace/id";
+
+export interface EventDoc {
+  _id: string;
+  type: string;
+  path: string;
+  referrer: string;
+  screen: string;
+  sid: string;
+  props: Record<string, unknown>;
+  ts: Date;
+}
+
+const schema = new mongoose.Schema<EventDoc>({
+  _id: { type: String, default: () => uuidv7() },
+  type: { type: String, default: "pageview", index: true },
+  path: { type: String, default: "/" },
+  referrer: { type: String, default: "" },
+  screen: { type: String, default: "" },
+  sid: { type: String, default: "" },
+  props: { type: mongoose.Schema.Types.Mixed, default: {} },
+  ts: { type: Date, default: Date.now, index: true },
+});
+
+export const Event =
+  (mongoose.models.Event as mongoose.Model<EventDoc>) ?? mongoose.model<EventDoc>("Event", schema);
+`;
+var analyticsEventsRoutes = () => `import express from "express";
+import { asyncHandler } from "../http.js";
+import { requireAuth } from "../middleware/auth.js";
+import { Event } from "../models/event.js";
+
+const router = express.Router();
+
+// POST /events \u2014 the tracker beacon posts here. Public + cookieless (no PII stored).
+router.post("/", asyncHandler(async (req, res) => {
+  const b = (req.body ?? {}) as Record<string, unknown>;
+  await Event.create({
+    type: String(b.type ?? "pageview"),
+    path: String(b.path ?? "/"),
+    referrer: String(b.referrer ?? ""),
+    screen: String(b.screen ?? ""),
+    sid: String(b.sid ?? ""),
+    props: b.props && typeof b.props === "object" ? (b.props as Record<string, unknown>) : {},
+  });
+  res.status(204).end();
+}));
+
+// GET /events/summary \u2014 dashboard aggregates (protected: only signed-in owners).
+router.get("/summary", requireAuth, asyncHandler(async (_req, res) => {
+  const since = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+  const [total, pageviews, topPaths, byDay] = await Promise.all([
+    Event.countDocuments({}),
+    Event.countDocuments({ type: "pageview" }),
+    Event.aggregate([
+      { $match: { type: "pageview" } },
+      { $group: { _id: "$path", count: { $sum: 1 } } },
+      { $sort: { count: -1 } },
+      { $limit: 8 },
+    ]),
+    Event.aggregate([
+      { $match: { ts: { $gte: since } } },
+      { $group: { _id: { $dateToString: { format: "%Y-%m-%d", date: "$ts" } }, count: { $sum: 1 } } },
+      { $sort: { _id: 1 } },
+    ]),
+  ]);
+  res.json({
+    total,
+    pageviews,
+    topPaths: topPaths.map((p: { _id: string; count: number }) => ({ path: p._id, count: p.count })),
+    byDay: byDay.map((d: { _id: string; count: number }) => ({ day: d._id, count: d.count })),
+  });
+}));
+
+export default router;
+`;
+var analyticsComponent = (ctx) => `"use client";
+import { useEffect } from "react";
+import { createAnalytics } from "@lacspace/analytics-lite";
+
+// how this works: cookieless, privacy-first tracking. It POSTs page views + events to
+// your backend /events collector (stored in MongoDB). No cookies, no localStorage, no
+// personal data. Respects the browser's Do-Not-Track.
+const ENDPOINT = (process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000") + "/events";
+
+export function Analytics() {
+  useEffect(() => {
+    const a = createAnalytics({ endpoint: ENDPOINT, siteId: ${JSON.stringify(ctx.name)}, respectDNT: true });
+    a.pageview();
+    return a.autoTrack();
+  }, []);
+  return null;
+}
+`;
+var analyticsDashboard = () => `"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getToken } from "@/lib/api";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+interface Summary {
+  total: number;
+  pageviews: number;
+  topPaths: { path: string; count: number }[];
+  byDay: { day: string; count: number }[];
+}
+
+export default function AnalyticsPage() {
+  const router = useRouter();
+  const [data, setData] = useState<Summary | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) { router.push("/login"); return; }
+    fetch(API + "/events/summary", { headers: { Authorization: "Bearer " + token } })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Please sign in"))))
+      .then(setData)
+      .catch((e) => setError(e instanceof Error ? e.message : "Failed to load"));
+  }, [router]);
+
+  if (error) return <main className="mx-auto max-w-3xl px-6 py-16 text-muted">{error}</main>;
+  if (!data) return <main className="mx-auto max-w-3xl px-6 py-16 text-muted">Loading\u2026</main>;
+  const max = Math.max(1, ...data.byDay.map((d) => d.count));
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <h1 className="text-3xl font-bold">Analytics</h1>
+      <p className="mt-1 text-muted">Cookieless, privacy-first \u2014 last 30 days.</p>
+      <div className="mt-6 grid grid-cols-2 gap-4">
+        <div className="rounded-2xl border border-hairline p-5"><p className="text-sm text-muted">Total events</p><p className="text-3xl font-bold">{data.total}</p></div>
+        <div className="rounded-2xl border border-hairline p-5"><p className="text-sm text-muted">Page views</p><p className="text-3xl font-bold">{data.pageviews}</p></div>
+      </div>
+      <h2 className="mt-8 font-semibold">Top pages</h2>
+      <ul className="mt-3 space-y-2">
+        {data.topPaths.length === 0 && <li className="text-muted">No data yet \u2014 browse your site with &lt;Analytics/&gt; mounted.</li>}
+        {data.topPaths.map((p) => (
+          <li key={p.path} className="flex justify-between border-b border-hairline pb-2"><span className="truncate">{p.path}</span><span className="text-muted">{p.count}</span></li>
+        ))}
+      </ul>
+      <h2 className="mt-8 font-semibold">Events per day</h2>
+      <div className="mt-3 flex items-end gap-1" style={{ height: 120 }}>
+        {data.byDay.map((d) => (
+          <div key={d.day} className="flex-1 rounded-t" style={{ height: (d.count / max) * 100 + "%", backgroundColor: "var(--accent, #6366f1)" }} title={d.day + ": " + d.count} />
+        ))}
+      </div>
+    </main>
+  );
+}
+`;
 var scope = (ctx) => `@${ctx.name}`;
 var typesPkgJson = (ctx) => JSON.stringify({
   name: `${scope(ctx)}/types`,
@@ -5494,44 +6226,67 @@ function buildFullStack(ctx) {
   out[".gitignore"] = rootGitignore();
   out[".env.example"] = rootEnvExample(ctx);
   out["README.md"] = rootReadme(ctx);
+  const envBase = out[".env.example"];
+  const seen = new Set(
+    (envBase.match(/^#?\s*([A-Z0-9_]+)=/gm) ?? []).map((l) => l.replace(/^#?\s*/, "").replace(/=.*/, ""))
+  );
+  const lines = [];
+  for (const f of ctx.features) {
+    const b = f.backend?.(ctx);
+    if (!b?.env) continue;
+    const fresh = Object.entries(b.env).filter(([name]) => !seen.has(name));
+    if (!fresh.length) continue;
+    lines.push("", `# --- ${f.label} (${f.key}) ---`);
+    for (const [name, comment] of fresh) {
+      if (comment) lines.push(`# ${comment}`);
+      lines.push(`${name}=`);
+      seen.add(name);
+    }
+  }
+  if (lines.length) out[".env.example"] = envBase.replace(/\n?$/, "\n") + lines.join("\n") + "\n";
   return out;
 }
-var backendPkgJson = (ctx) => JSON.stringify({
-  name: `${scope(ctx)}/backend`,
-  version: "0.1.0",
-  private: true,
-  type: "module",
-  main: "dist/index.js",
-  scripts: {
-    dev: "tsx watch src/index.ts",
-    build: "tsc -p tsconfig.json",
-    start: "node dist/index.js",
-    typecheck: "tsc -p tsconfig.json --noEmit"
-  },
-  dependencies: {
-    express: "^4.21.2",
-    cors: "^2.8.5",
-    mongoose: "^8.9.0",
-    ioredis: "^5.4.2",
-    dotenv: "^16.4.7",
-    // ✨ Backend built on zero-dep @lacspace/* packages instead of the usual grab-bag.
-    "@lacspace/env": "^1.1.0",
-    "@lacspace/jwt": "^1.4.0",
-    "@lacspace/password": "^1.1.0",
-    "@lacspace/validate": "^1.1.0",
-    "@lacspace/id": "^1.1.0",
-    "@lacspace/rate-limit": "^1.2.0",
-    "@lacspace/cache": "^1.1.0",
-    [`${scope(ctx)}/types`]: "*"
-  },
-  devDependencies: {
-    typescript: "^5.7.0",
-    tsx: "^4.19.2",
-    "@types/node": "^22.10.0",
-    "@types/express": "^4.17.21",
-    "@types/cors": "^2.8.17"
-  }
-}, null, 2) + "\n";
+var backendPkgJson = (ctx) => {
+  const featureDeps = {};
+  for (const f of ctx.features) Object.assign(featureDeps, f.backend?.(ctx)?.deps ?? {});
+  return JSON.stringify({
+    name: `${scope(ctx)}/backend`,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    main: "dist/index.js",
+    scripts: {
+      dev: "tsx watch src/index.ts",
+      build: "tsc -p tsconfig.json",
+      start: "node dist/index.js",
+      typecheck: "tsc -p tsconfig.json --noEmit"
+    },
+    dependencies: {
+      express: "^4.21.2",
+      cors: "^2.8.5",
+      mongoose: "^8.9.0",
+      ioredis: "^5.4.2",
+      dotenv: "^16.4.7",
+      // ✨ Backend built on zero-dep @lacspace/* packages instead of the usual grab-bag.
+      "@lacspace/env": "^1.1.0",
+      "@lacspace/jwt": "^1.4.0",
+      "@lacspace/password": "^1.1.0",
+      "@lacspace/validate": "^1.1.0",
+      "@lacspace/id": "^1.1.0",
+      "@lacspace/rate-limit": "^1.2.0",
+      "@lacspace/cache": "^1.1.0",
+      ...featureDeps,
+      [`${scope(ctx)}/types`]: "*"
+    },
+    devDependencies: {
+      typescript: "^5.7.0",
+      tsx: "^4.19.2",
+      "@types/node": "^22.10.0",
+      "@types/express": "^4.17.21",
+      "@types/cors": "^2.8.17"
+    }
+  }, null, 2) + "\n";
+};
 var backendTsconfig = (ctx) => JSON.stringify({
   compilerOptions: {
     target: "ES2022",
@@ -5957,35 +6712,49 @@ router.delete("/:id", asyncHandler(async (req, res) => {
 export default router;
 `;
 var backendApp = (ctx) => `import express from "express";
-import type { RequestHandler } from "express";
 import cors from "cors";
-import { rateLimit, expressRateLimit } from "@lacspace/rate-limit";
 import { env } from "./env.js";
 import { errorHandler } from "./middleware/error.js";
-import authRoutes from "./routes/auth.js";
-import noteRoutes from "./routes/notes.js";
+import { registerRoutes } from "./routes/index.js";
 
 // how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// a health check, the auth + notes routers, then the error handler LAST.
+// a health check, all route groups (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
   app.use(express.json());
 
-  // Brute-force protection on auth: 20 requests / minute / IP (@lacspace/rate-limit).
-  const authLimiter = expressRateLimit(rateLimit({ limit: 20, windowMs: 60_000 })) as unknown as RequestHandler;
-
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });
-  app.use("/auth", authLimiter, authRoutes);
-  app.use("/notes", noteRoutes);
+  registerRoutes(app);
 
   app.use(errorHandler);
   return app;
 }
 `;
+var backendRoutesIndex = (ctx) => {
+  const featureRoutes = ctx.features.flatMap((f) => f.backend?.(ctx)?.routes ?? []);
+  const needsAuth = featureRoutes.some((r) => r.auth);
+  const importLines = featureRoutes.map((r) => r.importLine).join("\n");
+  const mountLines = featureRoutes.map((r) => `  app.use(${JSON.stringify(r.path)}, ${r.auth ? "requireAuth, " : ""}${r.handler});`).join("\n");
+  return `import type { Express, RequestHandler } from "express";
+import { rateLimit, expressRateLimit } from "@lacspace/rate-limit";
+${needsAuth ? 'import { requireAuth } from "../middleware/auth.js";\n' : ""}import authRoutes from "./auth.js";
+import noteRoutes from "./notes.js";
+${importLines ? importLines + "\n" : ""}
+// how this works: every route group is mounted here. Add a new resource by creating
+// a router in routes/ and adding one app.use(...) line below.
+export function registerRoutes(app: Express): void {
+  // Brute-force protection on auth: 20 requests / minute / IP (@lacspace/rate-limit).
+  const authLimiter = expressRateLimit(rateLimit({ limit: 20, windowMs: 60_000 })) as unknown as RequestHandler;
+  app.use("/auth", authLimiter, authRoutes);
+  app.use("/notes", noteRoutes);
+${mountLines}
+}
+`;
+};
 function backendFiles(ctx) {
-  return {
+  const files = {
     "backend/package.json": backendPkgJson(ctx),
     "backend/tsconfig.json": backendTsconfig(ctx),
     "backend/.gitignore": backendGitignore(),
@@ -6004,8 +6773,15 @@ function backendFiles(ctx) {
     "backend/src/models/user.ts": backendUserModel(),
     "backend/src/models/note.ts": backendNoteModel(),
     "backend/src/routes/auth.ts": backendAuthRoutes(ctx),
-    "backend/src/routes/notes.ts": backendNoteRoutes(ctx)
+    "backend/src/routes/notes.ts": backendNoteRoutes(ctx),
+    "backend/src/routes/index.ts": backendRoutesIndex(ctx)
   };
+  for (const f of ctx.features) {
+    const b = f.backend?.(ctx);
+    if (!b?.files) continue;
+    for (const [rel, content] of Object.entries(b.files)) files["backend/" + rel] = content;
+  }
+  return files;
 }
 var splitList = (s) => s.split(",").map((x) => x.trim()).filter(Boolean);
 function parseArgs(list) {