npm - create-lacspace-app - Versions diffs - 2.9.0 → 2.11.0 - Mend

create-lacspace-app 2.9.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/lib.js CHANGED Viewed

@@ -1998,6 +1998,11 @@ function applyFeatures(files, ctx) {
       files[rel] = content;
     }
   }
+  if (ctx.mode === "static") {
+    for (const feat of features) {
+      for (const [rel, content] of Object.entries(feat.rootFiles?.(ctx) ?? {})) files[rel] = content;
+    }
+  }
   const addDeps = {};
   const addScripts = {};
   for (const feat of features) {
@@ -2276,6 +2281,128 @@ var FEATURES = [
       "Reuse the helpers in backend/src/mail/mailer.ts: sendWelcome / sendVerify / sendReset."
     ],
     learn: "https://developer.lacspace.com/packages/mailer"
+  },
+  {
+    key: "i18n",
+    label: "i18n (multi-language)",
+    description: "Multi-language UI: a tiny runtime translator (t() + a language switcher) with English + Nepali locales, plus an i18n:check lint script.",
+    deps: {},
+    scripts: { "i18n:check": "npx lacspace-i18n@0.2.0 check locales" },
+    files: () => ({
+      "lib/i18n.ts": i18nLib(),
+      "components/language-provider.tsx": i18nProvider(),
+      "app/i18n-demo/page.tsx": i18nDemoPage(),
+      "locales/en.json": i18nEn(),
+      "locales/ne.json": i18nNe()
+    }),
+    nextSteps: [
+      "Wrap app/layout.tsx's <body> with <LanguageProvider> (from @/components/language-provider).",
+      'Use it in a client component: const { t } = useT();  then {t("hello", { name })}.',
+      "Add keys in locales/*.json, then lint them with `npm run i18n:check`."
+    ],
+    learn: "https://developer.lacspace.com/tools/i18n"
+  },
+  {
+    key: "quality",
+    label: "Quality & CI",
+    description: "One-command quality gates from the Lacspace dev-tools \u2014 bundle-size budget, dependency audit and fake fixtures \u2014 plus a ready GitHub Actions CI workflow.",
+    deps: {},
+    scripts: {
+      "size:check": "npx lacspace-size@0.2.0 .next/static --metric gzip --max 500kb",
+      "deps:audit": "npx lacspace-deps@0.2.0 . --fail-on duplicates",
+      "fixtures:gen": 'npx lacspace-fake@0.2.0 --fields "id:autoincrement,name:fullName,email:unique(email)" -n 50 --pretty -o fixtures/users.json'
+    },
+    files: () => ({}),
+    rootFiles: (ctx) => ({ ".github/workflows/ci.yml": qualityCiWorkflow(ctx) }),
+    nextSteps: [
+      "Run `npm run size:check` (bundle-size budget) and `npm run deps:audit` (dependency audit) \u2014 both fail loudly in CI.",
+      "Generate sample data: `npm run fixtures:gen` \u2192 fixtures/users.json.",
+      "The GitHub Actions workflow (.github/workflows/ci.yml) runs the checks on every push."
+    ],
+    learn: "https://developer.lacspace.com/tools/size"
+  },
+  {
+    key: "uploads",
+    label: "File uploads",
+    description: "Authenticated file uploads stored in MongoDB, served via signed, expiring URLs (@lacspace/signed-url). No S3 required. Full-stack.",
+    requiresBackend: true,
+    deps: {},
+    files: () => ({ "app/uploads/page.tsx": uploadsPage() }),
+    backend: () => ({
+      deps: { "@lacspace/signed-url": "^1.1.0" },
+      files: {
+        "src/models/upload.ts": uploadModel(),
+        "src/routes/uploads.ts": uploadsRoutes()
+      },
+      routes: [{ path: "/uploads", handler: "uploadRoutes", auth: false, importLine: 'import uploadRoutes from "./uploads.js";' }],
+      env: { UPLOAD_URL_SECRET: "Secret for signing file download URLs (blank = reuse JWT_SECRET)." }
+    }),
+    nextSteps: [
+      "Sign in, then open http://localhost:3000/uploads and upload an image or file.",
+      "Files are stored in MongoDB and served via signed, expiring links \u2014 no S3 required.",
+      "For large files or production, swap the Mongo storage for disk or object storage."
+    ],
+    learn: "https://developer.lacspace.com/packages/signed-url"
+  },
+  {
+    key: "notify",
+    label: "Toast notifications",
+    description: "Beautiful in-app toast notifications (@lacspace/notify) \u2014 a <Toaster/> plus success/error/promise toasts, accessible and zero-config. Frontend, any template.",
+    deps: { "@lacspace/notify": "^1.0.0" },
+    files: () => ({ "components/toaster.tsx": notifyToaster(), "app/notify-demo/page.tsx": notifyDemoPage() }),
+    nextSteps: [
+      "Render <Toaster/> once in app/layout.tsx: import { Toaster } from '@/components/toaster'.",
+      "Then call toast.success('Saved!') (or .error/.info/.promise) from any client component.",
+      "See it live at http://localhost:3000/notify-demo."
+    ],
+    learn: "https://developer.lacspace.com/packages/notify"
+  },
+  {
+    key: "captcha",
+    label: "Keyless CAPTCHA",
+    description: "Privacy-friendly proof-of-work CAPTCHA (@lacspace/captcha) \u2014 no Google/Cloudflare, no keys, no tracking. A drop-in widget + a backend verify route. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/captcha": "^1.0.0" },
+    files: () => ({ "components/captcha.tsx": captchaComponent(), "app/captcha-demo/page.tsx": captchaDemoPage() }),
+    backend: () => ({
+      deps: { "@lacspace/captcha": "^1.0.0" },
+      files: { "src/routes/captcha.ts": captchaRoutesBackend() },
+      routes: [{ path: "/captcha", handler: "captchaRoutes", auth: false, importLine: 'import captchaRoutes from "./captcha.js";' }],
+      env: { CAPTCHA_SECRET: "Secret for signing CAPTCHA challenges (blank = reuse JWT_SECRET)." }
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/captcha-demo \u2014 solve the CAPTCHA, then Submit to verify it server-side.",
+      "Drop <Captcha onVerified={setToken} /> into any form, then POST the token to /captcha/verify.",
+      "No accounts or keys \u2014 tune difficulty via createChallenge({ maxNumber }) in src/routes/captcha.ts."
+    ],
+    learn: "https://developer.lacspace.com/packages/captcha"
+  },
+  {
+    key: "push",
+    label: "Web push notifications",
+    description: "Real browser push notifications (@lacspace/web-push) \u2014 keyless VAPID, no Firebase/FCM. Generates a service worker, a subscribe button, and a backend that stores subscriptions and sends. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/web-push": "^1.0.0" },
+    files: () => ({ "public/sw.js": pushServiceWorkerFile(), "app/push-demo/page.tsx": pushDemoPage() }),
+    backend: () => ({
+      deps: { "@lacspace/web-push": "^1.0.0" },
+      files: {
+        "src/models/push-subscription.ts": pushSubscriptionModel(),
+        "src/routes/push.ts": pushRoutesBackend()
+      },
+      routes: [{ path: "/push", handler: "pushRoutes", auth: false, importLine: 'import pushRoutes from "./push.js";' }],
+      env: {
+        VAPID_PUBLIC: "VAPID public key \u2014 generate with: npx @lacspace/web-push (or generateVapidKeys()).",
+        VAPID_PRIVATE: "VAPID private key (keep secret).",
+        VAPID_SUBJECT: "Contact for the push service, e.g. mailto:you@yoursite.com."
+      }
+    }),
+    nextSteps: [
+      "Generate VAPID keys: npx @lacspace/web-push \u2014 put them in .env (VAPID_PUBLIC / VAPID_PRIVATE).",
+      "Open http://localhost:3000/push-demo \u2192 'Enable notifications', then 'Send test'.",
+      "Push works on https (or localhost); the generated public/sw.js receives the notifications."
+    ],
+    learn: "https://developer.lacspace.com/packages/web-push"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6260,6 +6387,542 @@ export default function EmailTestPage() {
   );
 }
 `;
+var i18nLib = () => `import en from "@/locales/en.json";
+import ne from "@/locales/ne.json";
+// how this works: a tiny, dependency-free translator. Locale files live in locales/,
+// keys are flat strings, and {vars} are interpolated. A missing key falls back to
+// English, then to the key itself. Lint the files with \`npm run i18n:check\`.
+export const locales = ["en", "ne"] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = "en";
+const dicts: Record<Locale, Record<string, string>> = {
+  en: en as Record<string, string>,
+  ne: ne as Record<string, string>,
+};
+export function translate(locale: Locale, key: string, vars?: Record<string, string | number>): string {
+  const table = dicts[locale] ?? dicts[defaultLocale];
+  let str = table[key] ?? dicts[defaultLocale][key] ?? key;
+  if (vars) for (const [k, v] of Object.entries(vars)) str = str.split("{" + k + "}").join(String(v));
+  return str;
+}
+`;
+var i18nProvider = () => `"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+import { locales, defaultLocale, translate, type Locale } from "@/lib/i18n";
+// how this works: holds the current locale (persisted in localStorage) and exposes
+// t() via the useT() hook. Wrap your app in <LanguageProvider> once (in layout.tsx).
+interface LocaleCtxValue { locale: Locale; setLocale: (l: Locale) => void; }
+const LocaleCtx = createContext<LocaleCtxValue>({ locale: defaultLocale, setLocale: () => {} });
+export function LanguageProvider({ children }: { children: React.ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>(defaultLocale);
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("locale");
+      if (saved && (locales as readonly string[]).includes(saved)) setLocaleState(saved as Locale);
+    } catch {}
+  }, []);
+  const setLocale = (l: Locale) => { setLocaleState(l); try { localStorage.setItem("locale", l); } catch {} };
+  return <LocaleCtx.Provider value={{ locale, setLocale }}>{children}</LocaleCtx.Provider>;
+}
+export function useT() {
+  const { locale, setLocale } = useContext(LocaleCtx);
+  return {
+    t: (key: string, vars?: Record<string, string | number>) => translate(locale, key, vars),
+    locale,
+    setLocale,
+  };
+}
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useT();
+  return (
+    <div className="inline-flex gap-1 rounded-full border border-hairline p-1">
+      {locales.map((l) => (
+        <button
+          key={l}
+          onClick={() => setLocale(l)}
+          className={"rounded-full px-3 py-1 text-sm transition " + (l === locale ? "gradient-bg on-accent" : "text-muted hover:text-fg")}
+        >
+          {l.toUpperCase()}
+        </button>
+      ))}
+    </div>
+  );
+}
+`;
+var i18nDemoPage = () => `"use client";
+import { LanguageProvider, LanguageSwitcher, useT } from "@/components/language-provider";
+function Demo() {
+  const { t } = useT();
+  return (
+    <div className="space-y-4">
+      <h1 className="text-3xl font-bold">{t("hello", { name: "world" })}</h1>
+      <p className="text-muted">{t("tagline")}</p>
+      <LanguageSwitcher />
+    </div>
+  );
+}
+export default function I18nDemoPage() {
+  return (
+    <main className="mx-auto max-w-md px-6 py-16">
+      <LanguageProvider>
+        <Demo />
+      </LanguageProvider>
+    </main>
+  );
+}
+`;
+var i18nEn = () => JSON.stringify(
+  { hello: "Hello, {name}!", tagline: "This text switches language instantly \u2014 no reload.", "nav.home": "Home", "nav.about": "About" },
+  null,
+  2
+) + "\n";
+var i18nNe = () => JSON.stringify(
+  { hello: "\u0928\u092E\u0938\u094D\u0924\u0947, {name}!", tagline: "\u092F\u094B \u092A\u093E\u0920 \u0924\u0941\u0930\u0941\u0928\u094D\u0924\u0948 \u092D\u093E\u0937\u093E \u092B\u0947\u0930\u094D\u091B \u2014 \u0930\u093F\u0932\u094B\u0921 \u092C\u093F\u0928\u093E\u0964", "nav.home": "\u0917\u0943\u0939", "nav.about": "\u092C\u093E\u0930\u0947\u092E\u093E" },
+  null,
+  2
+) + "\n";
+var qualityCiWorkflow = (ctx) => {
+  const sizePath = ctx.mode === "dynamic" ? "frontend/.next/static" : ".next/static";
+  const depsGate = ctx.mode === "dynamic" ? "duplicates" : "missing,duplicates";
+  return `name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run build
+      - name: Bundle-size budget
+        run: npx lacspace-size@0.2.0 ${sizePath} --metric gzip --max 500kb
+      - name: Dependency audit
+        run: npx lacspace-deps@0.2.0 . --fail-on ${depsGate}
+`;
+};
+var uploadModel = () => `import mongoose from "mongoose";
+import { uuidv7 } from "@lacspace/id";
+// how this works: files are stored base64-in-Mongo so it works with NO S3/disk setup.
+// For large files or production, swap this for disk or object storage.
+export interface UploadDoc {
+  _id: string;
+  userId: string;
+  filename: string;
+  contentType: string;
+  size: number;
+  data: string; // base64
+  createdAt: Date;
+}
+const schema = new mongoose.Schema<UploadDoc>(
+  {
+    _id: { type: String, default: () => uuidv7() },
+    userId: { type: String, required: true, index: true },
+    filename: { type: String, required: true },
+    contentType: { type: String, default: "application/octet-stream" },
+    size: { type: Number, default: 0 },
+    data: { type: String, required: true },
+  },
+  { timestamps: { createdAt: true, updatedAt: false } },
+);
+export const Upload =
+  (mongoose.models.Upload as mongoose.Model<UploadDoc>) ?? mongoose.model<UploadDoc>("Upload", schema);
+`;
+var uploadsRoutes = () => `import express from "express";
+import { signUrl, verifyUrl } from "@lacspace/signed-url";
+import { v } from "@lacspace/validate";
+import { asyncHandler, HttpError } from "../http.js";
+import { requireAuth } from "../middleware/auth.js";
+import { env } from "../env.js";
+import { Upload } from "../models/upload.js";
+// how this works: uploads live in Mongo; each file is served from a PUBLIC route
+// protected by a signed, expiring URL (@lacspace/signed-url) \u2014 so <img src> works
+// without a bearer token, yet the link can't be forged or shared forever.
+const router = express.Router();
+const SECRET = process.env.UPLOAD_URL_SECRET ?? env.JWT_SECRET;
+const MAX_BYTES = 5 * 1024 * 1024; // 5 MB \u2014 base64-in-Mongo, keep it small
+const UploadInput = v.object({ filename: v.string().min(1).max(200), dataUrl: v.string().min(1) });
+// Sign a RELATIVE URL; the frontend prefixes it with the API base. Verified as-is.
+function signed(id: string): Promise<string> {
+  return signUrl("/uploads/" + id + "/raw", { secret: SECRET, expiresIn: 3600 });
+}
+// GET /uploads/:id/raw \u2014 PUBLIC, but the signed query params must verify.
+router.get("/:id/raw", asyncHandler(async (req, res) => {
+  const check = await verifyUrl(req.originalUrl, { secret: SECRET, clockToleranceSec: 60 });
+  if (!check.valid) throw new HttpError(check.reason === "expired" ? 410 : 403, "Link expired or invalid");
+  const file = await Upload.findById(req.params.id);
+  if (!file) throw new HttpError(404, "Not found");
+  res.setHeader("Content-Type", file.contentType);
+  res.send(Buffer.from(file.data, "base64"));
+}));
+// POST /uploads \u2014 protected: store a base64 data URL.
+router.post("/", requireAuth, asyncHandler(async (req, res) => {
+  const { filename, dataUrl } = UploadInput.parse(req.body);
+  const m = /^data:(.+?);base64,(.*)$/.exec(dataUrl);
+  if (!m) throw new HttpError(400, "Expected a base64 data URL");
+  const contentType = m[1]!;
+  const data = m[2]!;
+  const size = Math.floor((data.length * 3) / 4);
+  if (size > MAX_BYTES) throw new HttpError(413, "File too large (max 5 MB)");
+  const file = await Upload.create({ userId: req.user!.sub, filename, contentType, size, data });
+  res.status(201).json({ id: String(file._id), filename, contentType, size, url: await signed(String(file._id)) });
+}));
+// GET /uploads \u2014 protected: this user's files (with fresh signed URLs).
+router.get("/", requireAuth, asyncHandler(async (req, res) => {
+  const files = await Upload.find({ userId: req.user!.sub }).sort({ createdAt: -1 }).select("filename contentType size");
+  const out = await Promise.all(
+    files.map(async (f) => ({ id: String(f._id), filename: f.filename, contentType: f.contentType, size: f.size, url: await signed(String(f._id)) })),
+  );
+  res.json(out);
+}));
+export default router;
+`;
+var uploadsPage = () => `"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 FileItem { id: string; filename: string; contentType: string; size: number; url: string; }
+function readAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result));
+    r.onerror = () => reject(new Error("read failed"));
+    r.readAsDataURL(file);
+  });
+}
+export default function UploadsPage() {
+  const router = useRouter();
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  async function load() {
+    const token = getToken();
+    if (!token) { router.push("/login"); return; }
+    const res = await fetch(API + "/uploads", { headers: { Authorization: "Bearer " + token } });
+    if (res.ok) setFiles(await res.json());
+  }
+  useEffect(() => { void load(); }, []);
+  async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setBusy(true); setError(null);
+    try {
+      const dataUrl = await readAsDataUrl(file);
+      const token = getToken();
+      const res = await fetch(API + "/uploads", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...(token ? { Authorization: "Bearer " + token } : {}) },
+        body: JSON.stringify({ filename: file.name, dataUrl }),
+      });
+      const data: unknown = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error((data as { error?: string }).error ?? "Upload failed");
+      await load();
+    } catch (err) { setError(err instanceof Error ? err.message : "Upload failed"); }
+    finally { setBusy(false); }
+  }
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Uploads</h1>
+      <p className="mt-1 text-muted">Stored in MongoDB, served via signed, expiring links.</p>
+      <label className="mt-6 flex cursor-pointer items-center justify-center rounded-2xl border border-dashed border-hairline p-8 text-muted transition hover:bg-surface">
+        <input type="file" className="hidden" onChange={onPick} disabled={busy} />
+        {busy ? "Uploading\u2026" : "Choose a file (max 5 MB)"}
+      </label>
+      {error && <p className="mt-3 text-sm text-red-400">{error}</p>}
+      <ul className="mt-6 space-y-2">
+        {files.map((f) => (
+          <li key={f.id} className="flex items-center justify-between rounded-xl border border-hairline p-3">
+            <a href={API + f.url} target="_blank" rel="noreferrer" className="truncate underline">{f.filename}</a>
+            <span className="ml-3 shrink-0 text-sm text-muted">{Math.max(1, Math.round(f.size / 1024))} KB</span>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}
+`;
+var notifyToaster = () => `"use client";
+// how this works: re-export the Lacspace toast API + <Toaster/> from one place.
+// Render <Toaster/> once in app/layout.tsx, then call toast.* from anywhere.
+export { Toaster, useToast, toast } from "@lacspace/notify/react";
+`;
+var notifyDemoPage = () => `"use client";
+import { toast } from "@/components/toaster";
+export default function NotifyDemo() {
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Toasts</h1>
+      <p className="mt-1 text-muted">In-app notifications from @lacspace/notify.</p>
+      <div className="mt-6 flex flex-wrap gap-3">
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={() => toast.success("Saved!")}>Success</button>
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={() => toast.error("Something broke")}>Error</button>
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={() => toast.info("Heads up", { action: { label: "Undo", onClick: () => toast.success("Undone") } })}>With action</button>
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={() => void toast.promise(new Promise((r) => setTimeout(r, 1200)), { loading: "Working\u2026", success: "Done!", error: "Failed" })}>Promise</button>
+      </div>
+    </main>
+  );
+}
+`;
+var captchaComponent = () => `"use client";
+import { useEffect, useRef } from "react";
+import { renderCaptcha } from "@lacspace/captcha/client";
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+// how this works: the widget fetches a challenge from your backend, solves a small
+// proof-of-work in the browser, and drops the solution into a hidden input named
+// "lacspace-captcha". Read it via onVerified, or submit it with a surrounding form.
+export function Captcha({ onVerified }: { onVerified?: (token: string) => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const widget = renderCaptcha(ref.current, {
+      challenge: API + "/captcha",
+      onVerified: (token) => onVerified?.(token),
+    });
+    return () => widget.destroy();
+  }, [onVerified]);
+  return <div ref={ref} />;
+}
+`;
+var captchaDemoPage = () => `"use client";
+import { useState } from "react";
+import { Captcha } from "@/components/captcha";
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+export default function CaptchaDemo() {
+  const [token, setToken] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!token) { setStatus("Please solve the CAPTCHA first."); return; }
+    const res = await fetch(API + "/captcha/verify", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ solution: token }),
+    });
+    setStatus(res.ok ? "Verified on the server \u2713 \u2014 safe to proceed." : "Verification failed.");
+  }
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Keyless CAPTCHA</h1>
+      <p className="mt-1 text-muted">Proof-of-work \u2014 no Google / Cloudflare, no keys.</p>
+      <form onSubmit={submit} className="mt-6 space-y-4">
+        <Captcha onVerified={setToken} />
+        <button type="submit" className="rounded-xl border border-hairline px-4 py-2">Submit</button>
+      </form>
+      {status && <p className="mt-3 text-sm text-muted">{status}</p>}
+    </main>
+  );
+}
+`;
+var captchaRoutesBackend = () => `import express from "express";
+import { createChallenge, verifySolution } from "@lacspace/captcha";
+import { asyncHandler, HttpError } from "../http.js";
+import { env } from "../env.js";
+// how this works: a keyless proof-of-work CAPTCHA. GET /captcha issues a signed
+// challenge; the browser solves it; POST /captcha/verify checks the solution with
+// only your secret \u2014 stateless, nothing stored between the two calls.
+const router = express.Router();
+const SECRET = process.env.CAPTCHA_SECRET ?? env.JWT_SECRET;
+router.get("/", asyncHandler(async (_req, res) => {
+  res.json(await createChallenge({ secret: SECRET }));
+}));
+router.post("/verify", asyncHandler(async (req, res) => {
+  const solution = typeof req.body?.solution === "string" ? req.body.solution : "";
+  const result = await verifySolution(solution, { secret: SECRET });
+  if (!result.success) throw new HttpError(400, "CAPTCHA failed: " + result.error);
+  res.json({ success: true });
+}));
+export default router;
+`;
+var pushServiceWorkerFile = () => `// Service worker \u2014 web push notifications. Generated by create-lacspace-app.
+// Served at /sw.js. Wakes on incoming pushes and opens the app on click.
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));
+self.addEventListener("push", (event) => {
+  let data = {};
+  try { data = event.data ? event.data.json() : {}; }
+  catch (err) { data = { body: event.data ? event.data.text() : "" }; }
+  const title = data.title || "Notification";
+  event.waitUntil(
+    self.registration.showNotification(title, {
+      body: data.body,
+      icon: data.icon,
+      data: { url: data.url || "/" },
+    }),
+  );
+});
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const target = (event.notification.data && event.notification.data.url) || "/";
+  event.waitUntil(
+    (async () => {
+      const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+      for (const client of all) { if (client.url === target && "focus" in client) return client.focus(); }
+      if (self.clients.openWindow) return self.clients.openWindow(target);
+    })(),
+  );
+});
+`;
+var pushDemoPage = () => `"use client";
+import { useState } from "react";
+import { subscribeToPush } from "@lacspace/web-push/client";
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+export default function PushDemo() {
+  const [status, setStatus] = useState("");
+  async function enable() {
+    try {
+      const { publicKey } = await fetch(API + "/push/vapid").then((r) => r.json());
+      if (!publicKey) { setStatus("Set VAPID_PUBLIC / VAPID_PRIVATE in the backend .env first (npx @lacspace/web-push)."); return; }
+      await subscribeToPush({ vapidPublicKey: publicKey, serviceWorkerUrl: "/sw.js", saveUrl: API + "/push/subscribe" });
+      setStatus("Subscribed! Click 'Send test' to receive a push.");
+    } catch (err) { setStatus("Failed: " + String(err)); }
+  }
+  async function sendTest() {
+    const r = await fetch(API + "/push/send", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: "It works", body: "Your first web push \u{1F389}" }),
+    }).then((r) => r.json());
+    setStatus("Sent to " + r.sent + " device(s).");
+  }
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Web push</h1>
+      <p className="mt-1 text-muted">Real browser notifications \u2014 keyless VAPID, no Firebase.</p>
+      <div className="mt-6 flex flex-wrap gap-3">
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={enable}>Enable notifications</button>
+        <button className="rounded-xl border border-hairline px-4 py-2" onClick={sendTest}>Send test</button>
+      </div>
+      {status && <p className="mt-3 text-sm text-muted">{status}</p>}
+    </main>
+  );
+}
+`;
+var pushSubscriptionModel = () => `import mongoose from "mongoose";
+import { uuidv7 } from "@lacspace/id";
+// how this works: one document per browser subscription. endpoint is unique so a
+// re-subscribe upserts instead of duplicating. Store the two keys the Web Push
+// protocol needs (p256dh + auth).
+export interface PushSubDoc {
+  _id: string;
+  endpoint: string;
+  p256dh: string;
+  auth: string;
+  createdAt: Date;
+}
+const schema = new mongoose.Schema<PushSubDoc>(
+  {
+    _id: { type: String, default: () => uuidv7() },
+    endpoint: { type: String, required: true, unique: true },
+    p256dh: { type: String, required: true },
+    auth: { type: String, required: true },
+  },
+  { timestamps: { createdAt: true, updatedAt: false } },
+);
+export const PushSubscriptionModel =
+  (mongoose.models.PushSubscription as mongoose.Model<PushSubDoc>) ??
+  mongoose.model<PushSubDoc>("PushSubscription", schema);
+`;
+var pushRoutesBackend = () => `import express from "express";
+import { sendNotifications, type PushSubscription } from "@lacspace/web-push";
+import { asyncHandler, HttpError } from "../http.js";
+import { PushSubscriptionModel } from "../models/push-subscription.js";
+// how this works: /push/vapid gives the browser the public key; /push/subscribe
+// stores a subscription; /push/send blasts a payload to every stored subscription
+// and prunes any the push service reports as gone (404/410).
+const router = express.Router();
+function vapid() {
+  const publicKey = process.env.VAPID_PUBLIC;
+  const privateKey = process.env.VAPID_PRIVATE;
+  if (!publicKey || !privateKey) {
+    throw new HttpError(500, "Missing VAPID keys. Generate them (npx @lacspace/web-push) and set VAPID_PUBLIC / VAPID_PRIVATE in .env.");
+  }
+  return { subject: process.env.VAPID_SUBJECT ?? "mailto:admin@example.com", publicKey, privateKey };
+}
+router.get("/vapid", asyncHandler(async (_req, res) => {
+  res.json({ publicKey: process.env.VAPID_PUBLIC ?? "" });
+}));
+router.post("/subscribe", asyncHandler(async (req, res) => {
+  const endpoint = typeof req.body?.endpoint === "string" ? req.body.endpoint : "";
+  const p256dh = req.body?.keys?.p256dh;
+  const auth = req.body?.keys?.auth;
+  if (!endpoint || typeof p256dh !== "string" || typeof auth !== "string") {
+    throw new HttpError(400, "Invalid subscription");
+  }
+  await PushSubscriptionModel.updateOne({ endpoint }, { $set: { endpoint, p256dh, auth } }, { upsert: true });
+  res.status(201).json({ ok: true });
+}));
+router.post("/send", asyncHandler(async (req, res) => {
+  const title = typeof req.body?.title === "string" ? req.body.title : "Hello from your app";
+  const body = typeof req.body?.body === "string" ? req.body.body : "This is a web push notification.";
+  const docs = await PushSubscriptionModel.find();
+  const subs: PushSubscription[] = docs.map((d) => ({ endpoint: d.endpoint, keys: { p256dh: d.p256dh, auth: d.auth } }));
+  const payload = JSON.stringify({ title, body, url: "/" });
+  const results = await sendNotifications(subs, payload, { vapid: vapid() });
+  const expired = results.filter((r) => r.result?.expired);
+  await Promise.all(expired.map((r) => PushSubscriptionModel.deleteOne({ endpoint: r.subscription.endpoint })));
+  res.json({ sent: results.filter((r) => r.result && !r.result.expired).length, removed: expired.length });
+}));
+export default router;
+`;
 var scope = (ctx) => `@${ctx.name}`;
 var typesPkgJson = (ctx) => JSON.stringify({
   name: `${scope(ctx)}/types`,
@@ -6659,6 +7322,9 @@ function buildFullStack(ctx) {
   out[".gitignore"] = rootGitignore();
   out[".env.example"] = rootEnvExample(ctx);
   out["README.md"] = rootReadme(ctx);
+  for (const f of ctx.features) {
+    for (const [rel, content] of Object.entries(f.rootFiles?.(ctx) ?? {})) out[rel] = content;
+  }
   const envBase = out[".env.example"];
   const seen = new Set(
     (envBase.match(/^#?\s*([A-Z0-9_]+)=/gm) ?? []).map((l) => l.replace(/^#?\s*/, "").replace(/=.*/, ""))